/* ══════════════════════════════════════════════════════════════════════════
   app.css — the authenticated shell. Portal, admin and floor all mount into
   this frame; shell.js renders the chrome for every screen from one file.

   Responsive behaviour here is STRUCTURAL — the nav rail collapses, tables
   scroll, columns stack. Type sizes do not fluidly resize; a heading that
   shrinks inside a sidebar looks worse, not better.
   ══════════════════════════════════════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: 'rail topbar' 'rail main';
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════ TOP BAR ══ */

.app-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.app-topbar h1, .app-topbar .topbar-h1 {
  font-size: var(--t-15);
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar .topbar-h1 { font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-meta { font-size: var(--t-12); color: var(--ink-3); }

.crumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-12); color: var(--ink-3); min-width: 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { opacity: 0.5; }

/* The search affordance doubles as the palette trigger. */
.topbar-search {
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 12rem;
  padding: 0.3rem var(--s-3);
  font-size: var(--t-12);
  color: var(--ink-3);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--r-3);
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.topbar-search:hover { border-color: var(--line); background: var(--surface); }
.topbar-search svg { width: 0.9rem; height: 0.9rem; }
.topbar-search kbd { margin-left: auto; }

/* Identity switcher — this is the demo's role picker, and it is honest
   about being one: the label says which role you are viewing as. */
.who {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0.25rem var(--s-2) 0.25rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg);
  transition: border-color var(--t-fast) ease;
}
.who:hover { border-color: var(--edge); }
.who .avatar { width: 1.5rem; height: 1.5rem; }
.who .who-name { font-size: var(--t-12); font-weight: 600; }
.who .who-role { font-size: var(--t-11); color: var(--ink-3); }

.avatar {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  flex: none;
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-bark);
  background: var(--bark-2);
  border-radius: 50%;
}
.avatar-lg { width: 2.5rem; height: 2.5rem; font-size: var(--t-13); }

/* Impersonation is a real permission and it must be impossible to forget you
   are inside it.

   Fixed rather than a grid row on .app: an earlier version added a row and
   an area to the grid, then used :not(:has()) to undo it when no banner was
   present — and that selector out-specified the mobile media query, so every
   application screen kept its two-column layout at 375px and scrolled
   sideways. A fixed bar needs no grid changes and cannot do that. */
.impersonating {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 0.3rem var(--s-4);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--on-citron);
  background: var(--citron);
  border-bottom: 1px solid var(--citron-edge);
}
/* Everything sticky moves down by the banner's height while it is present. */
body:has(.impersonating) .app { padding-top: 2rem; }
body:has(.impersonating) .app-topbar { top: 2rem; }
body:has(.impersonating) .app-nav { top: 2rem; height: calc(100vh - 2rem); }

/* ════════════════════════════════════════════════════════ NAV RAIL ══ */

.app-nav {
  grid-area: rail;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-brand {
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--topbar-h);
  flex: none;
  padding: 0 var(--s-4);
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-brand svg { width: 1.35rem; height: 1.35rem; color: var(--bark); }
.nav-brand b { font-size: var(--t-15); font-weight: 700; letter-spacing: -0.02em; }
.nav-brand .surface-tag {
  margin-left: auto;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav-groups { flex: 1 1 auto; padding: var(--s-3) var(--s-2); }
.nav-group + .nav-group { margin-top: var(--s-4); }
.nav-group > h2 {
  padding: 0 var(--s-2) var(--s-2);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0.42rem var(--s-2);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-3);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.nav-link svg { width: 1rem; height: 1rem; flex: none; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { background: var(--surface); color: var(--ink); }
}
.nav-link[aria-current='page'] {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.nav-link[aria-current='page'] svg { opacity: 1; color: var(--bark); }
/* A count of things needing attention. Neutral unless it is an exception. */
.nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--ink-3);
}
.nav-count[data-tone='exception'] { color: var(--danger); }

.nav-foot { flex: none; padding: var(--s-3); border-top: 1px solid var(--line); }

/* ════════════════════════════════════════════════════════════ MAIN ══ */

.app-main { grid-area: main; min-width: 0; padding: var(--s-5); }
.app-main-flush { padding: 0; }
.wrap-lg { max-width: 82rem; margin: 0 auto; }
.wrap-md { max-width: 60rem; margin: 0 auto; }

.page-head { margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--t-26); letter-spacing: -0.02em; }
.page-head .lede { margin-top: var(--s-2); max-width: var(--measure); color: var(--ink-2); font-size: var(--t-15); }

/* A toolbar above a table: filters left, actions right. */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.toolbar .grow { flex: 1 1 12rem; }

/* Two-pane workspace: a list beside a detail. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--s-4);
  align-items: start;
}
.split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
.split-left { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
.sticky-side { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); }

/* ═════════════════════════════════════════════════════════ FIGURES ══ */
/* Deliberately NOT the four-KPI-card row. A figure is a line of type with
   a label, set in the mono face, sitting on the page — not in a tile with
   a gradient and an icon. */

.figures { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); }
.figure { min-width: 7rem; }
.figure .v { display: block; font-family: var(--font-mono); font-size: var(--t-26);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.figure .k { display: block; margin-top: 0.15rem; font-size: var(--t-11); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.figure .d { display: block; margin-top: 0.1rem; font-size: var(--t-12); color: var(--ink-3); }
.figure.is-exception .v { color: var(--danger); }

/* ════════════════════════════════════════════════════════ RESPONSIVE ══ */

.nav-toggle { display: none; }

@media (max-width: 60rem) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'topbar' 'main';
  }
  .app-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: var(--z-modal);
    width: min(var(--nav-w), 82vw);
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease-drawer);
  }
  .app-nav[data-open='true'] { transform: translateX(0); box-shadow: var(--shadow-3); }
  .nav-toggle { display: inline-flex; }
  .nav-scrim {
    position: fixed; inset: 0;
    z-index: var(--z-scrim);
    background: oklch(0.18 0.01 115 / 0.42);
  }
  .split, .split-wide, .split-left { grid-template-columns: minmax(0, 1fr); }
  .sticky-side { position: static; }
  .app-main { padding: var(--s-4); }
}

@media (max-width: 40rem) {
  .app-main { padding: var(--s-3); }
  .page-head h1 { font-size: var(--t-21); }
  .topbar-search { min-width: 0; }
  .topbar-search .search-label, .topbar-search kbd { display: none; }
  .who .who-name, .who .who-role { display: none; }
  .figures { gap: var(--s-4) var(--s-6); }
  .figure .v { font-size: var(--t-21); }
}

/* ══════════════════════════════════════════════════════════ KANBAN ══ */
/* Horizontal scroll is correct here: a pipeline has as many stages as the
   business has, and squeezing them to fit destroys the comparison. */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 1fr);
  gap: var(--s-3);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  align-items: start;
}
.kcol {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.kcol.is-over { border-color: var(--citron-edge); background: var(--citron-dim); }
.kcol > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-13);
}
.kcards { padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); min-height: 5rem; }
.kcard {
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  cursor: grab;
  transition: box-shadow var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kcard:hover { border-color: var(--edge); box-shadow: var(--shadow-1); }
}
.kcard:active { cursor: grabbing; }
.kcard.is-dragging { opacity: 0.4; transform: scale(0.98); }