:root {
  --bg-primary: #e6e7ee;
  --bg-secondary: #ecf0f3;

  --surface:
    rgba(236,240,243,.80);

  --surface-strong:
    rgba(236,240,243,.94);

  --text-primary:
    #44476a;

  --text-secondary:
    #6c708d;

  --accent:
    #0056b3;

  --success:
    #087f23;

  --danger:
    #a12626;

  --border-light:
    rgba(255,255,255,.66);

  --border-dark:
    rgba(163,177,198,.38);

  --shadow-dark:
    rgba(163,177,198,.56);

  --shadow-light:
    rgba(255,255,255,.88);

  --taskbar-height:
    52px;

  --radius:
    4px;
}

* {
  box-sizing:
    border-box;
}

html,
body {
  width:
    100%;

  min-height:
    100%;

  margin:
    0;
}

body {
  overflow:
    hidden;

  color:
    var(--text-primary);

  background:
    linear-gradient(
      145deg,
      #e3e6ec,
      #edf0f4 52%,
      #e1e5eb
    );

  font-family:
    "Nunito Sans",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
}

button,
input,
textarea,
select {
  font:
    inherit;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:
    3px solid rgba(0,86,179,.28);

  outline-offset:
    2px;
}


/* ---------- AUTH TRANSITION ---------- */

.auth-gate {
  position:
    fixed;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  background:
    linear-gradient(
      145deg,
      #dfe3ea,
      #edf0f4
    );
}

.auth-gate-brand {
  display:
    grid;

  justify-items:
    center;

  gap:
    8px;

  color:
    var(--text-primary);
}

.auth-gate-logo {
  width:
    72px;

  height:
    72px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  background:
    var(--bg-secondary);

  box-shadow:
    7px 7px 17px var(--shadow-dark),
    -7px -7px 17px var(--shadow-light);

  color:
    var(--accent);

  font-size:
    2rem;

  font-weight:
    900;
}

.auth-gate-brand strong {
  font-size:
    1.25rem;
}

.auth-gate-brand span {
  color:
    var(--text-secondary);
}


/* ---------- DESKTOP ---------- */

.wbs-desktop {
  width:
    100vw;

  height:
    100vh;

  overflow:
    hidden;
}

.desktop-workspace {
  position:
    absolute;

  inset:
    0 0 var(--taskbar-height) 0;

  padding:
    14px;

  overflow:
    auto;
}

.app-window {
  min-height:
    calc(
      100vh -
      var(--taskbar-height) -
      28px
    );

  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  background:
    rgba(236,240,243,.63);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  box-shadow:
    7px 7px 18px var(--shadow-dark),
    -7px -7px 18px var(--shadow-light);
}

.window-titlebar {
  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  padding:
    13px 16px;

  border-bottom:
    1px solid var(--border-light);

  background:
    rgba(255,255,255,.20);
}

.window-product {
  color:
    var(--accent);

  font-size:
    .68rem;

  font-weight:
    900;

  letter-spacing:
    .14em;
}

.window-titlebar h1 {
  margin:
    2px 0 0;

  font-size:
    clamp(
      1.35rem,
      2vw,
      1.85rem
    );
}

.window-content {
  padding:
    18px;
}


/* ---------- TASKBAR ---------- */

.taskbar {
  position:
    fixed;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    var(--taskbar-height);

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    6px 8px;

  border-top:
    1px solid var(--border-light);

  background:
    rgba(236,240,243,.82);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  box-shadow:
    0 -6px 18px
    rgba(68,71,106,.08);

  z-index:
    100;
}

.start-button {
  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 13px;

  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  background:
    var(--bg-secondary);

  color:
    var(--text-primary);

  box-shadow:
    3px 3px 7px var(--shadow-dark),
    -3px -3px 7px var(--shadow-light);

  cursor:
    pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

.start-button:active,
.start-button.active {
  box-shadow:
    inset 2px 2px 5px var(--shadow-dark),
    inset -2px -2px 5px var(--shadow-light);

  transform:
    translateY(1px);
}

.start-icon {
  color:
    var(--accent);

  font-weight:
    900;
}

.start-label {
  font-weight:
    800;
}

.taskbar-spacer {
  flex:
    1;
}

.system-status,
.taskbar-account,
.taskbar-clock {
  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  border:
    1px solid transparent;

  border-radius:
    var(--radius);

  padding:
    5px 9px;
}

.system-status {
  color:
    var(--text-secondary);

  font-size:
    .75rem;

  font-weight:
    800;
}

.system-status.online {
  color:
    var(--success);
}

.taskbar-account {
  max-width:
    200px;

  color:
    var(--text-primary);

  text-decoration:
    none;

  font-size:
    .78rem;

  font-weight:
    700;
}

.taskbar-account:hover {
  border-color:
    var(--border-light);

  background:
    rgba(255,255,255,.24);
}

.taskbar-clock {
  min-width:
    76px;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    flex-end;

  line-height:
    1.05;
}

.taskbar-clock time {
  font-size:
    .78rem;

  font-weight:
    800;
}

.taskbar-clock span {
  margin-top:
    3px;

  color:
    var(--text-secondary);

  font-size:
    .68rem;
}


/* ---------- START MENU ---------- */

.start-menu {
  position:
    fixed;

  left:
    8px;

  bottom:
    calc(
      var(--taskbar-height) +
      8px
    );

  width:
    min(
      380px,
      calc(100vw - 16px)
    );

  max-height:
    min(
      720px,
      calc(
        100vh -
        var(--taskbar-height) -
        24px
      )
    );

  display:
    grid;

  grid-template-rows:
    auto 1fr auto;

  overflow:
    hidden;

  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  background:
    rgba(236,240,243,.94);

  backdrop-filter:
    blur(28px);

  -webkit-backdrop-filter:
    blur(28px);

  box-shadow:
    12px 12px 28px
      rgba(68,71,106,.18),
    -8px -8px 20px
      rgba(255,255,255,.72);

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(16px)
    scale(.985);

  transform-origin:
    bottom left;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;

  z-index:
    120;
}

.start-menu.open {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0)
    scale(1);
}

.start-menu-header {
  min-height:
    70px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    12px;

  border-bottom:
    1px solid var(--border-dark);
}

.start-logo {
  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  background:
    var(--bg-secondary);

  box-shadow:
    3px 3px 7px var(--shadow-dark),
    -3px -3px 7px var(--shadow-light);

  color:
    var(--accent);

  font-weight:
    900;
}

.start-menu-header strong,
.start-menu-header span {
  display:
    block;
}

.start-menu-header span {
  margin-top:
    2px;

  color:
    var(--text-secondary);

  font-size:
    .75rem;
}

.start-navigation {
  overflow-y:
    auto;

  padding:
    8px;
}

.start-group {
  border-bottom:
    1px solid rgba(163,177,198,.25);
}

.start-group:last-child {
  border-bottom:
    0;
}

.start-group summary {
  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    8px 9px;

  cursor:
    pointer;

  list-style:
    none;

  color:
    var(--text-primary);

  font-size:
    .79rem;

  font-weight:
    900;
}

.start-group summary::-webkit-details-marker {
  display:
    none;
}

.start-group summary::after {
  content:
    "›";

  color:
    var(--text-secondary);

  transform:
    rotate(0deg);

  transition:
    transform .15s ease;
}

.start-group[open]
summary::after {
  transform:
    rotate(90deg);
}

.start-group-items {
  display:
    grid;

  gap:
    3px;

  padding:
    0 0 8px;
}

.start-app {
  min-height:
    38px;

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border:
    1px solid transparent;

  border-radius:
    var(--radius);

  padding:
    7px 10px 7px 18px;

  background:
    transparent;

  color:
    var(--text-primary);

  text-align:
    left;

  cursor:
    pointer;
}

.start-app:hover:not(:disabled),
.start-app.active {
  border-color:
    var(--border-light);

  background:
    rgba(255,255,255,.30);
}

.start-app.active {
  color:
    var(--accent);

  font-weight:
    800;
}

.start-app:disabled {
  opacity:
    .48;

  cursor:
    default;
}

.app-state {
  color:
    var(--text-secondary);

  font-size:
    .64rem;

  font-weight:
    700;
}

.start-menu-footer {
  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    5px;

  padding:
    8px;

  border-top:
    1px solid var(--border-dark);
}

.start-menu-footer a {
  min-height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid transparent;

  border-radius:
    var(--radius);

  color:
    var(--text-primary);

  font-size:
    .72rem;

  font-weight:
    700;

  text-align:
    center;

  text-decoration:
    none;
}

.start-menu-footer a:hover {
  border-color:
    var(--border-light);

  background:
    rgba(255,255,255,.30);
}


/* ---------- WBS CONTENT ---------- */

.dashboard-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(210px,1fr)
    );

  gap:
    14px;
}

.module-page {
  display:
    grid;

  gap:
    14px;
}

.waffle-card {
  min-height:
    120px;

  padding:
    16px;

  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.42),
      rgba(232,236,241,.74)
    );

  box-shadow:
    6px 6px 14px var(--shadow-dark),
    -6px -6px 14px var(--shadow-light);
}

.module-panel {
  min-height:
    auto;
}

.card-label {
  margin-bottom:
    11px;

  color:
    var(--text-secondary);

  font-size:
    .72rem;

  font-weight:
    900;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}

.card-value {
  font-size:
    1.35rem;

  font-weight:
    900;
}

.card-value.good {
  color:
    var(--success);
}

.card-note {
  margin-top:
    7px;

  color:
    var(--text-secondary);

  font-size:
    .76rem;
}


/* ---------- FORMS ---------- */

.form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px,1fr)
    );

  gap:
    12px;

  margin-bottom:
    14px;
}

label {
  display:
    grid;

  gap:
    5px;

  color:
    var(--text-secondary);

  font-size:
    .76rem;

  font-weight:
    700;
}

input,
textarea,
select {
  width:
    100%;

  min-height:
    40px;

  border:
    1px solid var(--border-dark);

  border-radius:
    var(--radius);

  padding:
    8px 10px;

  background:
    rgba(255,255,255,.42);

  color:
    var(--text-primary);

  box-shadow:
    inset 2px 2px 5px
      rgba(163,177,198,.32),
    inset -2px -2px 5px
      rgba(255,255,255,.65);
}

textarea {
  resize:
    vertical;
}

.waffle-action,
.table-action,
.settings-action {
  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  padding:
    8px 12px;

  background:
    var(--bg-secondary);

  color:
    var(--accent);

  box-shadow:
    3px 3px 7px var(--shadow-dark),
    -3px -3px 7px var(--shadow-light);

  font-weight:
    800;

  cursor:
    pointer;
}

.form-message,
.request-result {
  margin-left:
    9px;

  color:
    var(--success);

  font-weight:
    800;
}


/* ---------- TABLES ---------- */

.table-wrap {
  width:
    100%;

  overflow-x:
    auto;
}

table {
  width:
    100%;

  border-collapse:
    collapse;
}

th,
td {
  padding:
    10px;

  border-bottom:
    1px solid rgba(163,177,198,.28);

  text-align:
    left;
}

th {
  color:
    var(--text-secondary);

  font-size:
    .7rem;

  font-weight:
    900;

  letter-spacing:
    .05em;

  text-transform:
    uppercase;
}


/* ---------- SETTINGS / SOCIAL ---------- */

.settings-heading {
  margin:
    0 0 5px;

  font-size:
    1.2rem;
}

.settings-copy {
  margin:
    0 0 16px;

  color:
    var(--text-secondary);
}

.social-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px,1fr)
    );

  gap:
    12px;
}

.social-connector {
  padding:
    13px;

  border:
    1px solid var(--border-light);

  border-radius:
    var(--radius);

  background:
    rgba(255,255,255,.24);

  box-shadow:
    4px 4px 10px var(--shadow-dark),
    -4px -4px 10px var(--shadow-light);
}

.social-connector-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}

.connector-status {
  margin-top:
    3px;

  color:
    var(--text-secondary);

  font-size:
    .72rem;
}

.connector-switch {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}

.connector-switch input {
  width:
    auto;

  min-height:
    auto;
}

.connector-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    12px;
}

.provision-form {
  margin-top:
    13px;

  padding-top:
    13px;

  border-top:
    1px solid var(--border-dark);
}

.request-note {
  margin:
    10px 0;

  color:
    var(--text-secondary);

  font-size:
    .74rem;
}


/* ---------- MOBILE ---------- */

@media (max-width: 720px) {

  .desktop-workspace {
    padding:
      7px;
  }

  .window-content {
    padding:
      11px;
  }

  .start-label,
  .taskbar-account {
    display:
      none;
  }

  .start-menu {
    left:
      6px;

    right:
      6px;

    width:
      auto;
  }

  .start-menu-footer {
    grid-template-columns:
      1fr;
  }

  .dashboard-grid {
    grid-template-columns:
      1fr;
  }

  .system-status {
    padding:
      4px;
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;
  }
}

.start-app {
  text-decoration:
    none;
}

.start-app[aria-disabled="true"] {
  pointer-events:
    none;

  opacity:
    .48;
}

@import url("./modules/pages.css");

@import url("./modules/users.css");

@import url("./modules/work.css");

@import url("./modules/navigation.css");

@import url("./modules/organisation.css");

@import url("./modules/files.css");

@import url("./modules/documents.css");

@import url("./modules/document-manager.css");

@import url("./modules/knowledge.css");

@import url("./modules/assistant.css");