/* ============================================================================
   STRATAMIZE — "THE LEDGER" · NAV + APP SHELL  (nav-shell.css)
   ----------------------------------------------------------------------------
   The structural chrome shared by EVERY app — CRM (Javalin+JTE), POS
   (Javalin+FreeMarker), Invoicing (Spark+FreeMarker) and the static customer
   surfaces. One locked set of shell classes so that whatever route a user lands
   on, it reads as a single instrument: top-nav with a white-label brand slot,
   a collapsible sidebar, tabs, breadcrumbs, a page header (title + meta + actions)
   and a responsive content container/grid.

   RULES OBEYED
     • Tokens only. No hex literals, no new global --vars (locals are --_scoped).
     • Mint is the single live signal: the brand caret, the active nav rail, the
       live dot, the active tab underline — one meaning everywhere, never decor.
     • Hairline structure, not card-soup. Surfaces + slate-alpha keylines build
       depth; the signal-rail left edge marks the active/live surface.
     • Every interactive element has hover / focus-visible / active states and
       honors prefers-reduced-motion. Motion is compositor-only (transform/opacity).
     • Money/IDs in shell meta + page stats ride mono + tabular-nums.

   Load order: tokens.css → nav-shell.css  (→ elements.css / actions-forms.css)
   MAP
     1  skip-link + app shell grid (collapsible + responsive)
     2  top-nav bar + white-label brand lockup (wordmark + live caret)
     3  primary top-nav links + shell meta cluster (live dot / theme / account)
     4  sidebar — groups, links, icons, badges, collapse toggle, footer
     5  mobile drawer behavior (off-canvas sidebar + scrim)
     6  breadcrumbs
     7  page header — title, subtitle, meta stats, actions
     8  tabs — underline + pill variants, counts, scrollable
     9  content container + responsive 12-col content grid
    10  reduced-motion guards
   ============================================================================ */

/* ── 1 · SKIP-LINK + APP SHELL GRID ────────────────────────────────────────── */
.skip-link{
  position:fixed;top:var(--s-3);left:var(--s-3);z-index:var(--z-max);
  padding:var(--s-2) var(--s-4);
  font:600 var(--fs-sm)/1 var(--font-text);
  color:var(--on-accent-solid);background:var(--accent);
  border-radius:var(--r-2);box-shadow:var(--shadow-2);
  transform:translateY(-180%);
  transition:transform var(--dur-2) var(--ease-snap);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:none}

/* The whole-app frame: a fixed-height top-nav over an optional sidebar + body. */
.app{
  --_side-w:264px;          /* expanded sidebar rail width */
  --_side-w-min:68px;       /* collapsed (icon-only) rail width */
  min-height:100svh;
  display:grid;
  grid-template-rows:var(--shell-h) 1fr;
  grid-template-areas:"shell" "body";
  background:var(--surface-page);
}
.app--sidebar{
  grid-template-columns:var(--_side-w) 1fr;
  grid-template-areas:"shell shell" "side body";
}
/* collapsed: rail shrinks to icons. Toggled by template/JS via data attribute. */
.app--sidebar[data-sidebar="collapsed"]{grid-template-columns:var(--_side-w-min) 1fr}

/* ── 2 · TOP-NAV BAR + WHITE-LABEL BRAND LOCKUP ────────────────────────────── */
.shell{
  grid-area:shell;position:sticky;top:0;z-index:var(--z-nav);
  display:flex;align-items:center;gap:var(--s-5);
  height:var(--shell-h);padding:0 var(--gutter);
  background:color-mix(in oklab,var(--surface-header) 88%,transparent);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hairline);
  box-shadow:var(--shadow-1);
}

/* hamburger — only meaningful on narrow viewports (see §5). transform-only. */
.shell-toggle{
  display:none;flex:none;
  width:36px;height:36px;padding:0;
  align-items:center;justify-content:center;
  color:var(--ink-2);background:transparent;
  border:1px solid var(--hairline-strong);border-radius:var(--r-2);
  cursor:pointer;
  transition:color var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out),
             background var(--dur-2) var(--ease-out);
}
.shell-toggle:hover{color:var(--ink);border-color:var(--accent-edge);background:var(--row-hover)}
.shell-toggle:focus-visible{outline:none;box-shadow:var(--ring)}
.shell-toggle:active{transform:translateY(1px)}
.shell-toggle .bars{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.shell-toggle .bars::before,.shell-toggle .bars::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.shell-toggle .bars::before{top:-5px}
.shell-toggle .bars::after{top:5px}

/*
 * BRAND LOCKUP — the canonical mark, fully token-driven, white-label-ready.
 *   .brand-word  = the wordmark span (swap glyphs for white-label tenants).
 *   .brand-caret = the live signal-rail caret: a mint vertical bar, cap-height,
 *                  blinking on --blink (step-end) — the product's live cursor,
 *                  pulled out of the UI and made the mark. Held steady under
 *                  reduced-motion (keyframe + token guard in tokens.css).
 *   .brand-housing = optional compact S-rail tile shown when collapsed (§4).
 */
.brand{
  display:inline-flex;align-items:center;gap:var(--s-3);flex:none;
  color:var(--ink);text-decoration:none;border-radius:var(--r-2);
}
.brand:hover{text-decoration:none}
.brand:focus-visible{outline:none;box-shadow:var(--ring)}

.brand-lockup{display:inline-flex;align-items:baseline;gap:2px}
.brand-word{
  font:600 var(--fs-base)/1 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--tracking-wordmark);
  color:var(--ink);white-space:nowrap;
}
.brand-caret{
  display:inline-block;flex:none;align-self:center;
  width:3px;height:0.92em;margin-inline-start:2px;
  background:var(--accent);border-radius:0.5px;
  animation:caret-blink var(--blink) step-end infinite;
}
/* compact instrument-housing tile (the "S-rail"): hairline keyline, lit mint
   left rail + one mid ledger tick. Pure CSS, no asset. */
.brand-housing{
  position:relative;flex:none;width:26px;height:26px;
  background:var(--surface-sunken);
  border:1px solid var(--hairline-strong);border-radius:var(--r-2);
  overflow:hidden;
}
.brand-housing::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:var(--rail-w);background:var(--accent)}                 /* powered rail */
.brand-housing::after{content:"";position:absolute;inset-inline:5px 6px;top:50%;
  height:var(--rail-w);background:var(--accent);transform:translateY(-50%)} /* ledger tick */

/* white-label "powered by" tell — inherited caret + hairline baseline */
.brand-tenant{display:inline-flex;flex-direction:column;line-height:1}
.brand-tenant .brand-poweredby{
  margin-top:2px;font:500 var(--fs-kicker)/1 var(--font-text);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--ink-4);
}

/* a thin vertical hairline divider between brand and nav */
.shell-div{flex:none;width:1px;height:24px;background:var(--hairline);margin-inline:var(--s-1)}

/* ── 3 · PRIMARY TOP-NAV LINKS + SHELL META CLUSTER ────────────────────────── */
.shell-nav{display:flex;align-items:center;gap:var(--s-1);min-width:0;flex-wrap:nowrap;overflow:hidden}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  font:500 var(--fs-sm)/1 var(--font-text);
  color:var(--ink-3);background:transparent;
  border:0;border-radius:var(--r-2);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
}
.nav-link :where(svg){width:1.05em;height:1.05em;flex:none}
.nav-link:hover{color:var(--ink);background:var(--row-hover);text-decoration:none}
.nav-link:focus-visible{outline:none;box-shadow:var(--ring)}
.nav-link:active{color:var(--ink)}
/* active — ink text + the single mint underline rail */
.nav-link[aria-current],.nav-link--active{color:var(--ink)}
.nav-link[aria-current]::after,.nav-link--active::after{
  content:"";position:absolute;inset-inline:var(--s-3);bottom:-1px;height:var(--rail-w);
  background:var(--accent);border-radius:var(--r-full);
}

/* right-aligned cluster: live status, theme, divider, account */
.shell-meta{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-4);flex:none}
.shell-status{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font:500 var(--fs-meta)/1 var(--font-mono);color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* the single live dot — mint, with a slow halo pulse (opacity only) */
.live-dot{
  position:relative;flex:none;width:8px;height:8px;border-radius:var(--r-full);
  background:var(--accent);
}
.live-dot::after{
  content:"";position:absolute;inset:-3px;border-radius:var(--r-full);
  border:1px solid var(--accent-edge);opacity:0;
  animation:live-pulse 2.1s var(--ease-out) infinite;
}
@keyframes live-pulse{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.4)}}

/* account button — avatar/initials + caret */
.shell-account{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) var(--s-2) var(--s-1) var(--s-1);
  background:transparent;border:1px solid transparent;border-radius:var(--r-full);
  color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
.shell-account:hover{background:var(--row-hover);border-color:var(--hairline-strong)}
.shell-account:focus-visible{outline:none;box-shadow:var(--ring)}
.shell-account .avatar{
  display:grid;place-content:center;flex:none;width:26px;height:26px;border-radius:var(--r-full);
  font:600 var(--fs-meta)/1 var(--font-mono);
  color:var(--on-accent-solid);background:var(--accent);
}
.shell-account .avatar--ghost{background:var(--surface-sunken);color:var(--ink-2);border:1px solid var(--hairline-strong)}

/* ── 4 · SIDEBAR ───────────────────────────────────────────────────────────── */
.sidebar{
  grid-area:side;position:sticky;top:var(--shell-h);align-self:start;
  height:calc(100svh - var(--shell-h));
  display:flex;flex-direction:column;
  padding:var(--s-5) var(--s-3) var(--s-3);
  background:var(--surface-header);
  border-inline-end:1px solid var(--hairline);
  overflow-y:auto;overscroll-behavior:contain;z-index:var(--z-nav);
}
.sidebar-scroll{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--s-2);min-height:0}

.side-group{display:flex;flex-direction:column;gap:2px}
.side-group + .side-group{margin-top:var(--s-4)}
.side-group-label{
  padding:var(--s-2) var(--s-3) var(--s-1);
  font:600 var(--fs-kicker)/1 var(--font-text);
  text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--ink-4);
  white-space:nowrap;overflow:hidden;
}

.side-link{
  position:relative;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);
  font:500 var(--fs-sm)/1.1 var(--font-text);
  color:var(--ink-3);background:transparent;border:0;
  border-radius:var(--r-2);text-decoration:none;cursor:pointer;width:100%;
  transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
}
.side-link .side-icon{
  flex:none;display:grid;place-content:center;width:1.15rem;height:1.15rem;color:currentColor;
}
.side-link .side-icon svg{width:100%;height:100%}
.side-link .side-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-link:hover{color:var(--ink);background:var(--row-hover);text-decoration:none}
.side-link:focus-visible{outline:none;box-shadow:var(--ring)}
.side-link:active{background:var(--accent-wash)}
/* active — mint signal-rail left edge marks the live route */
.side-link[aria-current],.side-link--active{
  color:var(--ink);background:var(--accent-wash);font-weight:600;
}
.side-link[aria-current]::before,.side-link--active::before{
  content:"";position:absolute;inset-block:6px;inset-inline-start:0;
  width:var(--rail-w);background:var(--accent);border-radius:var(--r-full);
}
/* a count/status badge riding the right edge of a nav row */
.side-badge{
  flex:none;margin-inline-start:auto;
  min-width:1.4em;padding:1px var(--s-1);
  font:600 var(--fs-meta)/1.4 var(--font-mono);text-align:center;
  font-variant-numeric:tabular-nums;
  color:var(--ink-3);background:var(--surface-sunken);
  border:1px solid var(--hairline);border-radius:var(--r-full);
}
.side-badge--live{color:var(--on-accent-solid);background:var(--accent);border-color:var(--accent)}
.side-badge--danger{color:var(--danger);background:var(--danger-wash);border-color:var(--danger-edge)}

/* sidebar footer — collapse toggle + tenant tell, pinned to bottom */
.side-foot{
  flex:none;margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--hairline);
  display:flex;align-items:center;gap:var(--s-2);
}
.side-collapse{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);flex:1 1 auto;
  padding:var(--s-2) var(--s-3);
  font:500 var(--fs-meta)/1 var(--font-text);
  color:var(--ink-4);background:transparent;
  border:1px solid var(--hairline);border-radius:var(--r-2);cursor:pointer;
  transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
}
.side-collapse:hover{color:var(--ink-2);border-color:var(--accent-edge);background:var(--row-hover)}
.side-collapse:focus-visible{outline:none;box-shadow:var(--ring)}
.side-collapse .chev{transition:transform var(--dur-2) var(--ease-snap)}

/* ---- collapsed rail: icons only, labels + group labels fold away ---------- */
.app--sidebar[data-sidebar="collapsed"] .side-text,
.app--sidebar[data-sidebar="collapsed"] .side-group-label,
.app--sidebar[data-sidebar="collapsed"] .side-badge,
.app--sidebar[data-sidebar="collapsed"] .side-collapse .side-collapse-label,
.app--sidebar[data-sidebar="collapsed"] .brand-tenant .brand-poweredby{
  display:none;
}
.app--sidebar[data-sidebar="collapsed"] .sidebar{align-items:center}
.app--sidebar[data-sidebar="collapsed"] .side-link{justify-content:center;padding-inline:var(--s-2)}
.app--sidebar[data-sidebar="collapsed"] .side-group-label{
  height:1px;padding:0;margin:var(--s-3) auto;width:60%;background:var(--hairline);
}
.app--sidebar[data-sidebar="collapsed"] .side-foot{flex-direction:column}
.app--sidebar[data-sidebar="collapsed"] .side-collapse .chev{transform:rotate(180deg)}

/* ── 5 · MOBILE DRAWER (off-canvas sidebar) ────────────────────────────────── */
.sidebar-scrim{
  display:none;position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);
  background:color-mix(in oklab,var(--ink-black) 60%,transparent);
  opacity:0;transition:opacity var(--dur-3) var(--ease-out);
}

@media (max-width:1024px){
  .app--sidebar{grid-template-columns:1fr;grid-template-areas:"shell" "body"}
  .shell-toggle{display:inline-flex}
  .sidebar{
    position:fixed;top:var(--shell-h);inset-inline-start:0;
    width:min(86vw,var(--_side-w));
    transform:translateX(-102%);
    box-shadow:var(--shadow-3);
    transition:transform var(--dur-3) var(--ease-out);
  }
  .app--sidebar[data-sidebar="open"] .sidebar{transform:translateX(0)}
  .app--sidebar[data-sidebar="open"] .sidebar-scrim{display:block;opacity:1}
  /* collapse toggle is meaningless on mobile — the drawer is open/closed */
  .side-foot{display:none}
}

/* ── 6 · BREADCRUMBS ───────────────────────────────────────────────────────── */
.crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-2);
  font:500 var(--fs-meta)/1 var(--font-mono);
  letter-spacing:0.01em;color:var(--ink-4);
  margin-bottom:var(--s-4);
}
.crumbs a,.crumbs .crumb{
  color:var(--ink-3);text-decoration:none;border-radius:var(--r-1);
  transition:color var(--dur-2) var(--ease-out);
}
.crumbs a:hover{color:var(--accent-text);text-decoration:none}
.crumbs a:focus-visible{outline:none;box-shadow:var(--ring)}
.crumbs .sep{color:var(--hairline-strong);user-select:none}
.crumbs [aria-current],.crumbs .crumb--current{color:var(--ink);font-weight:600}

/* ── 7 · PAGE HEADER ───────────────────────────────────────────────────────── */
.page-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4) var(--s-6);
  padding-bottom:var(--s-5);margin-bottom:var(--s-6);
  border-bottom:1px solid var(--hairline);
}
.page-head-main{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.page-kicker{
  font:600 var(--fs-kicker)/1 var(--font-text);
  text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--ink-4);
}
.page-title{
  font:600 var(--fs-h2)/var(--leading-tight) var(--font-display);
  letter-spacing:var(--tracking-tight);color:var(--ink);text-wrap:balance;
}
.page-sub{margin-top:2px;max-width:var(--measure);color:var(--ink-3);font-size:var(--fs-base)}

/* meta stat strip — dual-read: telegraphic caps label + mono money/ID value */
.page-meta{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s-5);
  margin-top:var(--s-1);
}
.page-stat{display:flex;flex-direction:column;gap:2px;position:relative;padding-inline-start:var(--s-3)}
.page-stat::before{content:"";position:absolute;inset-block:2px;inset-inline-start:0;
  width:1px;background:var(--hairline)}
.page-stat--live::before{width:var(--rail-w);background:var(--accent)}
.page-stat-label{
  font:600 var(--fs-kicker)/1 var(--font-text);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--ink-4);
}
.page-stat-val{
  font:500 var(--fs-num-s)/1.05 var(--font-mono);
  font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:0;
}
.page-stat-val--accent{color:var(--accent-text)}

.page-actions{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;flex:none}

/* ── 8 · TABS ──────────────────────────────────────────────────────────────── */
.tabs{
  display:flex;align-items:center;gap:var(--s-1);
  border-bottom:1px solid var(--hairline);
  margin-bottom:var(--s-6);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-3) calc(var(--s-3) + 1px);
  font:500 var(--fs-sm)/1 var(--font-text);
  color:var(--ink-3);background:transparent;border:0;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:color var(--dur-2) var(--ease-out);
}
.tab:hover{color:var(--ink)}
.tab:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-2)}
.tab[aria-selected="true"],.tab--active{color:var(--ink);font-weight:600}
/* the single mint active underline, sat over the hairline */
.tab[aria-selected="true"]::after,.tab--active::after{
  content:"";position:absolute;inset-inline:var(--s-2);bottom:-1px;height:var(--rail-w);
  background:var(--accent);border-radius:var(--r-full);
}
.tab:disabled,.tab[aria-disabled="true"]{opacity:.4;pointer-events:none}
/* a count chip riding inside a tab */
.tab-count{
  flex:none;min-width:1.4em;padding:0 var(--s-1);
  font:600 var(--fs-meta)/1.5 var(--font-mono);text-align:center;
  font-variant-numeric:tabular-nums;color:var(--ink-3);
  background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--r-full);
}
.tab[aria-selected="true"] .tab-count,.tab--active .tab-count{color:var(--accent-text);border-color:var(--accent-edge)}

/* pill variant — segmented control on a sunken track (filters / view switch) */
.tabs--pill{
  gap:2px;border:0;padding:var(--s-1);
  background:var(--surface-sunken);border:1px solid var(--hairline);
  border-radius:var(--r-3);width:max-content;max-width:100%;
}
.tabs--pill .tab{
  padding:var(--s-2) var(--s-4);border-radius:var(--r-2);color:var(--ink-3);
  transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
}
.tabs--pill .tab:hover{color:var(--ink);background:var(--row-hover)}
.tabs--pill .tab[aria-selected="true"],.tabs--pill .tab--active{
  color:var(--ink);background:var(--surface-raised);box-shadow:var(--shadow-1);
}
.tabs--pill .tab[aria-selected="true"]::after,.tabs--pill .tab--active::after{display:none}

/* ── 9 · CONTENT CONTAINER + RESPONSIVE GRID ───────────────────────────────── */
.app-body{
  grid-area:body;min-width:0;
  padding:var(--s-8) var(--gutter) var(--space-section);
}
/* width-capped editorial container, centered in the body */
.container{width:100%;max-width:var(--content-max);margin-inline:auto}
.container--measure{max-width:var(--measure-max)}     /* customer reading column */
.container--wide{max-width:none}

/* the platform content grid — 12 cols, collapses gracefully */
.content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap)}
.content-grid > .span-12{grid-column:span 12}
.content-grid > .span-9{grid-column:span 9}
.content-grid > .span-8{grid-column:span 8}
.content-grid > .span-6{grid-column:span 6}
.content-grid > .span-4{grid-column:span 4}
.content-grid > .span-3{grid-column:span 3}
@media (max-width:1024px){
  .content-grid > .span-9,.content-grid > .span-8{grid-column:span 12}
  .content-grid > .span-6{grid-column:span 6}
}
@media (max-width:768px){
  .content-grid > [class*="span-"]{grid-column:span 12}
  .page-meta{gap:var(--s-4)}
}

/* a stacked main/aside split for detail routes (record + side panel) */
.shell-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--grid-gap)}
@media (max-width:1024px){.shell-split{grid-template-columns:1fr}}

/* ── 10 · REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .brand-caret{animation:none;opacity:1}
  .live-dot::after{animation:none;opacity:0}
  .skip-link,.shell-toggle,.nav-link,.side-link,.side-collapse,.side-collapse .chev,
  .shell-account,.crumbs a,.tab,.sidebar,.sidebar-scrim{
    transition-duration:1ms !important;
  }
}