/* Receivables Dashboard — v6 left-nav app-shell. Money-green canvas, teal accent, rust for overdue.
   Token VALUES retuned to the v6 language (docs/design/dashboard-ui-shell.md); var NAMES are kept
   intact because render.js references --accent/--warn/--ledger/--positive inline and dark-mode only
   swaps these values. Fonts: Inter (UI) + IBM Plex Mono (figures), system fallback. */

/* Self-hosted web fonts (latin + latin-ext, woff2). Replaces the Google Fonts CDN so the
   dashboard is offline-safe and leaks no client IP/referrer to Google. Both families are
   OFL-licensed. Weights match what the old CDN link requested: Inter 400/500/600/700,
   IBM Plex Mono 400/500/600. Source: google-webfonts-helper (gwfh.mranftl.com). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root {
  --bg: #F1F5F2; --surface: #FFFFFF; --surface-2: #E5EFE9; --raised: #FFFFFF;
  --ink: #1A1A18; --ink-soft: #3A3A37; --muted: #6E6B64; --line: #E1E9E4;
  --accent: #0E6E66; --accent-ink: #0B564F; --accent-soft: #E0EDE8;
  --ledger: #1B8A7F; --warn: #B45309; --positive: #0E6E66;
  --risk: #B23A2E; --risk-soft: rgba(178,58,46,.08); --risk-line: rgba(178,58,46,.20);
  --shadow: 0 1px 2px rgba(26,26,24,.05), 0 1px 1px rgba(26,26,24,.02);
  --lift: 0 6px 18px -8px rgba(26,26,24,.22), 0 1px 2px rgba(26,26,24,.05);
  --radius: 8px;
  --spring: .42s cubic-bezier(.34,1.45,.55,1);
  --ui-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono-font: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html.dark {
  --bg: #0d1413; --surface: #141d1a; --surface-2: #1d2a25; --raised: #18221f;
  --ink: #e8efec; --ink-soft: #c4d0cb; --muted: #8ba099; --line: #243029;
  --accent: #2dd4bf; --accent-ink: #5eead4; --accent-soft: rgba(45,212,191,.14);
  --ledger: #2dd4bf; --warn: #f59e0b; --positive: #2dd4bf;
  --risk: #f0857a; --risk-soft: rgba(240,133,122,.12); --risk-line: rgba(240,133,122,.24);
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.28);
  --lift: 0 8px 22px -8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 13.5px/1.5 var(--ui-font);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.num, .hero-value, .wf-val, .band-value, table { font-variant-numeric: tabular-nums; }
/* Figures wear IBM Plex Mono (tabular). Applied by selector so render.js DOM is untouched. */
.hero-value, .wf-val, .band-value, td.num, .totals-row td.num,
.card-net, .bills-table .bnum, .cat-count, .badge, .cust-cutoff,
.overdue-filter { font-family: var(--mono-font); }

/* ── v6 left-nav app-shell ────────────────────────────────────────────────
   Sticky white sidebar (right border) + fluid content region. The data table
   stays fluid-width (no fixed centered column); the cap keeps scan length sane
   on ultrawide and the table-wrap owns overflow below its min-width. */
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; align-self: start; height: 100vh; z-index: 5;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.wordmark { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.wordmark .logo { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; }
.wordmark b { display: block; font-size: 14px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; }
.wordmark span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.nav-label { margin: 0; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); padding: 4px 10px; }
.nav { position: relative; display: flex; flex-direction: column; gap: 1px; }
.nav-ind {
  position: absolute; left: 0; right: 0; top: 0; height: 36px; background: var(--surface-2);
  border-radius: 6px; box-shadow: inset 2px 0 0 var(--accent);
  transform: translateY(0); transition: transform var(--spring); pointer-events: none;
}
.nav-item {
  display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border-radius: 6px;
  color: var(--ink); font-weight: 500; font-size: 13px; cursor: pointer; text-decoration: none;
  position: relative; z-index: 1; transition: color var(--t, .14s ease);
}
.nav-item .ic { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); transition: color .14s ease; }
.nav-item.active { color: var(--accent); font-weight: 600; }
.nav-item.active .ic { color: var(--accent); }
.nav-item .lab { flex: 1; }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nav-item[hidden] { display: none; }
.nav-tag {
  font-size: 9.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; font-weight: 500;
}
.side-foot { margin-top: auto; padding: 12px 10px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.main { padding: 24px clamp(18px, 3vw, 34px) 56px; max-width: 1640px; }
.room[hidden] { display: none; }
.soon-room { }

/* Room head (replaces the old centered topbar) */
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.room-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; position: relative; padding-bottom: 7px; }
.room-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }
.head-meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.head .source-config { margin-top: 2px; font-size: 11.5px; }

/* Coming-soon rooms */
.soon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: box-shadow .14s ease, transform .14s ease; }
.soon:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.soon-tag { display: inline-block; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; font-weight: 600; margin-bottom: 13px; }
.soon h2 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.soon p { color: var(--muted); max-width: 520px; margin: 0 0 20px; font-size: 13px; }
.ghost { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; max-width: 640px; }
.ghost .g { padding: 13px 15px; border-right: 1px solid var(--line); }
.ghost .g:last-child { border-right: none; }
.ghost .g .gl { font-size: 11px; color: var(--muted); font-weight: 500; }
.ghost .g .gv { display: block; height: 14px; width: 64%; background: var(--surface-2); border-radius: 3px; margin-top: 9px; }

/* Header actions + buttons */
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
h1 { margin: 1px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer;
  transition: filter .14s ease, background .14s ease, transform .08s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
html.dark .btn { color: #06201d; }
.btn.ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line); font-weight: 500; }
.btn.ghost:hover { background: var(--surface-2); }
html.dark .btn.ghost { background: var(--surface-2); color: var(--ink); border-color: #33443d; }
html.dark .btn.ghost:hover { background: #20302b; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.busy span:first-child { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.badge { font-size: 12px; font-weight: 600; color: var(--positive); padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.badge.offline { color: var(--warn); }

/* Hero — the thesis + the signature waterfall */
.hero {
  margin: 0 0 6px; display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 28px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 24px;
}
.hero-label { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.hero-value { margin: 0; font-size: 46px; line-height: 1.02; font-weight: 750; letter-spacing: -.035em; color: var(--accent-ink); }
.hero-sub { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.as-of { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.source-config { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.waterfall { align-self: center; display: flex; flex-direction: column; gap: 9px; }
.wf-row { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 12px; position: relative; }
.wf-label { font-size: 12.5px; color: var(--muted); text-align: right; font-weight: 500; }
.wf-row.strong .wf-label { color: var(--ink); font-weight: 650; }
.wf-track { position: relative; background: var(--surface-2); border-radius: 7px; height: 30px; overflow: hidden; }
.wf-fill { display: block; height: 100%; border-radius: 7px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.wf-val { position: absolute; right: 10px; top: 0; height: 30px; display: flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* Explainer */
.note { margin: 14px 0 0; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--ink-soft); }
.note b { color: var(--ink); }

/* Panels */
.panel { margin: 22px 0 0; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 20px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.panel-head > span { font-size: 12px; color: var(--muted); }
.count { color: var(--muted); font-weight: 500; }

/* Ageing bars */
.bands { display: flex; flex-direction: column; gap: 8px; }
.band-row { display: grid; grid-template-columns: 84px 1fr 110px; align-items: center; gap: 12px; }
.band-label { font-size: 12.5px; font-weight: 600; text-align: right; color: var(--ink-soft); }
.band-label.aged { color: var(--risk); }
.band-track { background: var(--surface-2); border-radius: 6px; height: 26px; overflow: hidden; }
.band-fill { display: block; height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.band-value { font-size: 12.5px; font-weight: 600; text-align: right; }

/* Table */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.handler-filter { font: inherit; font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.handler-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.overdue-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.overdue-filter { width: 60px; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.overdue-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search { font: inherit; font-size: 13.5px; padding: 8px 12px; width: 250px; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.handler { width: 92px; max-width: 100%; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.handler:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.table-note { margin: 11px 2px 0; font-size: 11.5px; color: var(--muted); }
.tally-status { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tally-status.checking { color: var(--muted); }
.tally-status.up { color: var(--accent-ink); }
.tally-status.down { color: var(--warn); }
.tally-status.na { color: var(--muted); }
.manage-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 8px; cursor: pointer; white-space: nowrap; }
.manage-btn:hover { border-color: var(--accent); color: var(--ink); }
.manage-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.manage-panel[hidden] { display: none; }
.manage-list { display: flex; flex-wrap: wrap; gap: 6px; }
.manage-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 4px 3px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; }
.manage-remove { font: inherit; font-size: 14px; line-height: 1; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 50%; }
.manage-remove:hover { background: var(--warn); color: #fff; }
.manage-add { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.manage-input { font: inherit; font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); width: 150px; }
.manage-add-btn { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; cursor: pointer; }
html.dark .manage-add-btn { color: #06201d; }
.category-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 2px 12px; }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.cat-chip:hover { border-color: var(--accent); color: var(--ink); }
.cat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cat-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
html.dark .cat-chip.active { color: #06201d; }
.cat-count { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.cat-chip.active .cat-count { background: rgba(255,255,255,.25); color: inherit; }
/* CSS Overflow L3 mutual exclusion (load-bearing): ANY non-visible overflow-x on
   .table-wrap (auto/scroll/hidden/clip) forces its overflow-y to compute to auto,
   which makes the wrapper the sticky CONTAINING SCROLLER — the header and totals
   then pin to the wrapper instead of the viewport and look broken (the recurring
   13"/15" bug). So above the 940px fit floor .table-wrap is NEVER a scroll
   container; fit is a CSS invariant instead: table-layout:fixed + the explicit
   column widths below + staged band hiding. Do not reintroduce an overflow gate
   here — retune a column or band boundary instead; tests/test_sticky_widths.py
   trips on any regression. Below 940 the honest floor takes over (see the
   max-width:939px block near the end of this file). */
.table-wrap { margin: 0 -4px; overflow-x: visible; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
/* Deterministic fit: fixed layout means cell content can never widen the table,
   so fit is data-independent. Customer (the only unsized column) absorbs the
   remainder and ellipsizes (.nm-name below); Comments wraps; amount columns are
   never squeezed. Widths are harness-settled (tests/test_sticky_widths.py). */
#table { table-layout: fixed; width: 100%; min-width: 0; }
#table th[data-sort="handler"] { width: 88px; }
/* Amount columns hold realistic live magnitudes at FULL precision (doctrine:
   money never clips or bleeds): crore-scale totals (₹1,72,58,000 ≈ 108px in
   13px Plex Mono incl. cell padding) land in Net owed / Aged 30+; lakh-scale
   values (₹45,00,000 ≈ 94px) everywhere else. Proven by the crore fixtures in
   tests/test_sticky_widths.py. */
#table th.col-net { width: 112px; }
#table th.col-band { width: 96px; }
#table th.col-aged30 { width: 112px; }
#table th.col-aged { width: 96px; }
#table th.col-comments { width: 220px; }
/* Under fixed layout a long header can only bleed into its neighbour; clip it
   cleanly instead (data cells are sized to their content, headers are labels). */
#table thead th { overflow: hidden; text-overflow: ellipsis; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th {
  position: sticky; top: 0; z-index: 2; background: var(--raised); cursor: pointer; user-select: none;
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap;
}
th::after { content: "↕"; opacity: .25; margin-left: 5px; font-size: 10px; }
th.sorted { color: var(--ink); }
th.sorted[data-dir="asc"]::after { content: "↑"; opacity: .9; }
th.sorted[data-dir="desc"]::after { content: "↓"; opacity: .9; }
th.num, td.num { text-align: right; white-space: nowrap; }
/* Row-selection column (leftmost): a narrow, non-sortable checkbox column feeding
   "Export selected". No sort arrow, default cursor, centered box in the accent tint. */
th.col-select, td.col-select { width: 34px; text-align: center; padding-left: 10px; padding-right: 6px; }
th.col-select { cursor: default; }
th.col-select::after { content: ""; margin: 0; }
.row-select, #select-all { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--accent); vertical-align: middle; }
tbody tr:hover td { background: var(--surface-2); }
td.nm { font-weight: 600; max-width: 280px; }
/* Customer name: one line + ellipsis under fixed layout; the full name rides on
   title/aria-label (render.js) and stays readable in the expand row. inline-block
   (not block) keeps the ▸ toggle on the same line; the calc reserves its 15px. */
#table .nm-name { display: inline-block; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
#table .totals-row td.nm { overflow: hidden; text-overflow: ellipsis; }
.nm-meta { display: block; font-weight: 400; color: var(--muted); font-size: 11px; margin-top: 2px; overflow-wrap: anywhere; }
.zero { color: var(--muted); opacity: .4; }
.chip { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; color: var(--accent-ink); background: var(--accent-soft); }
.chip.warn { color: var(--warn); background: rgba(180,83,9,.10); }
tr.noinv td.nm { color: var(--warn); }
/* Highlighted columns */
th.col-net { background: var(--accent-soft); color: var(--accent-ink); }
td.col-net { font-weight: 700; color: var(--accent-ink); background: rgba(15,118,110,.05); }
html.dark td.col-net { background: rgba(45,212,191,.07); }
tr:hover td.col-net { background: var(--accent-soft); }
th.col-aged30 { background: rgba(180,83,9,.10); color: var(--warn); }
td.col-aged30 { font-weight: 700; color: var(--warn); background: rgba(180,83,9,.06); }
tr:hover td.col-aged30 { background: rgba(180,83,9,.10); }
th.col-aged { background: var(--risk-soft); color: var(--risk); }
td.col-aged { font-weight: 700; color: var(--risk); background: var(--risk-soft); }
/* Column totals: second row of the sticky head band, pinned directly under the
   header row (top offset = header-row height, set per render in render.js).
   WebKit-safe: sticky lives on the cells + the table is border-collapse:separate. */
.totals-row td { position: sticky; z-index: 2; background: var(--raised); border-top: 2px solid var(--line); font-weight: 800; white-space: nowrap; }
.totals-row td.nm { color: var(--ink); font-weight: 700; text-align: left; }
.totals-row td.num { text-align: right; }
.totals-row td.col-net { color: var(--accent-ink); background: var(--raised); }
.totals-row td.col-aged30 { color: var(--warn); background: var(--raised); }
.totals-row td.col-aged { color: var(--risk); background: var(--raised); }
tr:hover td.col-aged { background: var(--risk-soft); }
/* V1.1 — expandable bill detail */
tr.expandable td.nm { cursor: pointer; }
.nm-toggle { display: inline-block; width: 13px; margin-right: 2px; color: var(--muted); transition: transform .15s; }
tr.expanded .nm-toggle { transform: rotate(90deg); }
tr.bill-detail > td { background: var(--surface-2); padding: 4px 14px 14px; }
.bills-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 2px; }
.bills-table th { position: static; z-index: auto; background: transparent; cursor: default; user-select: auto; text-transform: none; letter-spacing: .02em; font-size: 10.5px; color: var(--muted); font-weight: 600; padding: 6px 10px; }
.bills-table th::after { content: ""; margin: 0; }
.bills-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.bills-table tr:hover td { background: transparent; }
.bills-table .bnum { text-align: right; white-space: nowrap; }
.bills-table .overdue { color: var(--risk); font-weight: 600; }
.bills-empty { color: var(--muted); font-size: 12px; padding: 8px 2px; }
/* Phase 1 — chase view (cutoff + totals) */
.chase-summary { margin: 12px 2px 0; font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
.chase-summary b { color: var(--risk); font-weight: 750; }
.bill-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding: 6px 2px 8px; }
.bill-summary b { color: var(--ink); font-weight: 650; }
.cust-cutoff { width: 52px; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.cust-cutoff:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ARCHITECT-FINALIZE: placeholder panel layout */
.statement-action {
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; white-space: nowrap;
}
.statement-action:hover { background: var(--accent); color: #fff; }
html.dark .statement-action:hover { color: #06201d; }
.statement-action-inline { margin-left: auto; }
.detail-actions { display: flex; padding: 6px 2px 8px; }
.statement-panel {
  margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 12px; box-shadow: none; overflow-x: auto;
}
.statement-panel[hidden] { display: none; }
.statement-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.statement-panel h3 { margin: 0; font-size: 13.5px; line-height: 1.3; }
.statement-panel-actions { display: flex; gap: 8px; align-items: center; }
.statement-download,
.statement-close {
  font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 8px; cursor: pointer;
}
.statement-download { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
html.dark .statement-download { color: #06201d; }
.statement-close { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); }
.statement-download:disabled { opacity: .55; cursor: default; }
.statement-body { font-size: 12px; color: var(--ink-soft); }
.statement-draft-banner {
  border: 1px solid rgba(180,83,9,.28); border-left: 3px solid var(--warn); background: rgba(180,83,9,.08);
  color: var(--warn); border-radius: 7px; padding: 8px 10px; margin-bottom: 10px;
}
.statement-draft-banner strong,
.statement-draft-banner span { display: block; }
.statement-meta,
.statement-openbar { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 8px 14px; margin-bottom: 10px; }
.statement-k { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.statement-v { display: block; color: var(--ink); overflow-wrap: anywhere; }
.statement-v.pending { color: var(--warn); font-style: italic; }
.statement-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; }
.statement-table th {
  position: static; z-index: auto; background: transparent; cursor: default; user-select: auto;
  text-transform: none; letter-spacing: .02em; font-size: 10.5px; color: var(--muted); font-weight: 700; padding: 6px 8px;
}
.statement-table th::after { content: ""; margin: 0; }
.statement-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.statement-table tr:hover td { background: transparent; }
.statement-table .money { text-align: right; white-space: nowrap; }
.statement-table .label { font-weight: 750; color: var(--ink); }
.statement-empty { color: var(--muted); }

/* Invoice export picker (F2 Slice 6): mirrors the statement panel. */
.invoice-action {
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; white-space: nowrap;
}
.invoice-action:hover { background: var(--accent); color: #fff; }
html.dark .invoice-action:hover { color: #06201d; }
.invoice-action-inline { margin-left: 8px; }
/* Inline invoice selection: "Export Invoices" toggles .selecting on the bills-block, revealing a
   checkbox column on the existing bills table plus the format + Download bar below. No panel. */
.invoice-action.active { background: var(--surface-2); color: var(--ink-soft); border-color: var(--line); }
.bill-select-cell { width: 34px; text-align: center; padding-left: 4px; padding-right: 4px; }
.bills-block:not(.selecting) .bill-select-cell { display: none; }
.bills-block.selecting .bill-row-noexport td { opacity: .5; }
.invoice-export-controls { display: none; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 2px; }
.bills-block.selecting .invoice-export-controls { display: flex; }
.invoice-format-label { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.invoice-format { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.invoice-picker-download {
  font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
html.dark .invoice-picker-download { color: #06201d; }
.invoice-picker-download:disabled { opacity: .55; cursor: default; }
.invoice-picker-status { font-size: 12px; color: var(--ink-soft); }

.error { margin: 18px 0 0; background: var(--risk-soft); border: 1px solid var(--risk-line); color: var(--risk); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; font-weight: 500; }
.data-warning { margin: 16px 0 0; background: var(--risk-soft); border: 1px solid var(--risk-line); border-left: 3px solid var(--risk); color: var(--ink); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; }
.data-warning[hidden] { display: none; }
.data-warning strong { color: var(--risk); }
.foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* Collapse the sidebar into a top bar so the content (and the dense table) gets
   the full viewport width. Raised from 860 to below-1200: the 224px the shell
   reserves is exactly what starves the table at mid widths — collapsing here is
   what makes the 940px fit floor real. The sliding indicator is dropped;
   the active room reads from a left-rule + fill instead. */
@media (max-width: 1199px) {
  .shell { display: block; }
  .side {
    position: static; height: auto; width: 100%; z-index: auto;
    flex-direction: column; padding: 12px 16px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .wordmark { padding: 2px 4px 12px; margin-bottom: 10px; }
  .nav-label, .side-foot { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .nav-ind { display: none; }
  .nav-item { height: 34px; }
  .nav-item.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
  .main { max-width: 100%; padding: 18px clamp(16px, 4vw, 22px) 48px; }
}

@media (max-width: 720px) {
  .main { padding: 16px 16px 48px; }
  .hero { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .hero-value { font-size: 38px; }
  .wf-row { grid-template-columns: 104px 1fr; }
  .band-row { grid-template-columns: 64px 1fr 88px; }
}
.loading-overlay { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; background: color-mix(in srgb, var(--bg) 68%, transparent); backdrop-filter: blur(2px); }
.loading-overlay[hidden] { display: none; }
.loading-card { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(0, 0, 0, .18); font-size: 14px; color: var(--ink); }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rd-spin .7s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Comments column + notes (column width lives in the fixed-layout block above) */
.comments-cell { font-size: 12px; color: var(--muted); vertical-align: top; }
/* Show the latest note in FULL: wrap instead of single-line ellipsis truncation
   (collections notes must be readable at a glance). The row grows to fit; long
   tokens/URLs break rather than overflow the cell. */
.cmt-latest { display: block; color: var(--ink-soft); white-space: normal; overflow-wrap: anywhere; }
/* Meta + follow-up flag share ONE non-wrapping line below the note. */
.cmt-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; margin-top: 2px; }
.cmt-add-hint { color: var(--accent); font-weight: 600; opacity: .8; }
.cmt-flag { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 0 5px; }
.cmt-flag.due { color: var(--risk); background: var(--risk-soft); }
.notes-block { padding: 8px 2px 12px; max-width: 760px; }
.notes-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.cmt-followup { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.cmt-followup:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.notes-log { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.notes-empty { font-size: 12px; color: var(--muted); }
.note-line { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 4px; }
.note-when { color: var(--muted); white-space: nowrap; }
.note-text { color: var(--ink); flex: 1; }
.note-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.note-del:hover { color: var(--risk); }
.note-add { display: flex; gap: 8px; }
.note-input { flex: 1; font: inherit; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.note-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-add-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; cursor: pointer; white-space: nowrap; }
html.dark .note-add-btn { color: #06201d; }
.note-add-btn:hover { filter: brightness(1.06); }
.bills-block { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }

/* Login gate */
.login-gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(13,20,19,.55); backdrop-filter: blur(3px); }
.login-gate[hidden] { display: none; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; width: min(440px, 92vw); }
.login-card h2 { margin: 0 0 4px; font-size: 19px; }
.login-sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.login-names { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.login-name-btn { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); border-radius: 10px; cursor: pointer; }
.login-name-btn:hover { background: var(--accent); color: #fff; }
html.dark .login-name-btn:hover { color: #06201d; }
.login-other { display: flex; gap: 8px; }
.login-input { flex: 1; font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.login-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-go { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 10px; cursor: pointer; }
html.dark .login-go { color: #06201d; }
.whoami { font-size: 12.5px; color: var(--muted); }
.whoami .switch-user { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.whoami .switch-user:hover { text-decoration: underline; }

/* Presence badges */
.presence { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.presence-chip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent); }
.presence-chip.typing { background: var(--accent); color: #fff; animation: presence-pulse 1.2s ease-in-out infinite; }
html.dark .presence-chip.typing { color: #06201d; }
@keyframes presence-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Help drawer + welcome */
.help-backdrop {
  position: fixed; inset: 0; z-index: 58; background: rgba(13, 20, 19, .38);
  opacity: 0; transition: opacity .18s ease; backdrop-filter: blur(1px);
}
.help-backdrop.is-visible { opacity: 1; }
.help-backdrop[hidden] { display: none; }
html.dark .help-backdrop { background: rgba(0, 0, 0, .58); }

.help-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(430px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
  background: var(--raised); color: var(--ink); border-left: 1px solid var(--line);
  box-shadow: -18px 0 38px rgba(20, 32, 29, .14); padding: 24px 24px 20px;
  transform: translateX(105%); transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}
.help-drawer.is-open { transform: translateX(0); }
.help-drawer[hidden] { display: none; }
html.dark .help-drawer { box-shadow: -18px 0 38px rgba(0, 0, 0, .42); }
.help-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.help-drawer h2 { margin: 1px 0 0; font-size: 22px; line-height: 1.2; }
.help-close { width: 38px; height: 38px; justify-content: center; padding: 0; font-size: 16px; line-height: 1; }
.help-section { display: flex; flex-direction: column; gap: 10px; }
.help-section h3 { margin: 0; font-size: 13px; line-height: 1.3; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.help-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.help-list > div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.help-list > div:last-child { padding-bottom: 0; border-bottom: none; }
.help-list dt,
.section-list strong { color: var(--ink); font-weight: 750; }
.help-list dd { margin: 3px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.section-list { list-style: none; }
.section-list li { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-list li:last-child { padding-bottom: 0; border-bottom: none; }
.help-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

.welcome-card {
  position: fixed; left: 50%; top: 50%; z-index: 61; width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, -50%); background: var(--raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(20, 32, 29, .18);
  padding: 24px 26px 26px;
}
.welcome-card[hidden] { display: none; }
html.dark .welcome-card { box-shadow: 0 18px 48px rgba(0, 0, 0, .46); }
.welcome-card h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.welcome-card p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.58; }
.welcome-card strong { color: var(--ink); font-weight: 750; }

@media (max-width: 720px) {
  .help-drawer { width: min(380px, calc(100vw - 14px)); padding: 20px 18px; }
  .welcome-card { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .help-backdrop,
  .help-drawer,
  .welcome-card { transition-duration: 0s !important; }
}

/* Staged band hiding: as the window narrows, drop the granular ageing
   bands one at a time, least-actionable first (0-30 first). The bands are
   decompositions of aggregates the table keeps showing; the decision columns
   (Customer, Handled by, Net owed, Aged 30+, Aged 60+, Comments) never hide,
   and hidden bands remain in the expand row. 90+ NEVER hides above the 940px
   floor (highest-urgency debt — this deliberately reverses the old <=940 hide).
   Boundaries are harness-settled against the fixed column widths above. */
@media (max-width: 1599px) { #table th.col-b0, #table td.col-b0 { display: none; } }
@media (max-width: 1499px) { #table th.col-b1, #table td.col-b1 { display: none; } }
@media (max-width: 1409px) { #table th.col-b2, #table td.col-b2 { display: none; } }
@media (max-width: 1309px) {
  #table th.col-b3, #table td.col-b3 { display: none; }
  #table th.col-comments { width: 200px; } /* Comments narrows (wraps more), never truncates */
}

/* ============================================================
   Sub-940 fit floor (honest behavior) + mobile touch pass.
   Below 940px the decision-column core plus chrome physically exceeds
   the viewport, so the table scrolls horizontally inside its wrapper
   (the standard pattern for finance/ERP tables) instead of crushing
   columns or spilling off the page. Sticky header/totals go static
   here: an x-scroll container forces overflow-y to compute to auto,
   which breaks position:sticky (see the L3 note at .table-wrap).
   A named mobile exception to the no-horizontal-scroll doctrine —
   desktop (>=940px) keeps the viewport-pinned sticky head. */
@media (max-width: 939px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  /* Scroll min-widths so every column stays reachable: #table keeps ~120px for
     Customer on top of its fixed columns (which sum to ~738px at this stage);
     the leaner inventory table needs less. */
  #table { min-width: 860px; }
  #inv-table { min-width: 640px; }
  th, .totals-row td { position: static; }
}

@media (max-width: 720px) {
  /* Touch targets — 44px min on the things you actually tap. */
  .btn { min-height: 44px; }
  .manage-remove { width: 30px; height: 30px; font-size: 16px; }
  .note-del { padding: 4px 8px; font-size: 16px; }

  /* No phantom zoom on focus (iOS zooms inputs < 16px). */
  .search, .handler-filter, .overdue-filter, .manage-input,
  .note-input, .cmt-followup, .cust-cutoff, .login-input,
  .handler { font-size: 16px; }
}

@media (max-width: 480px) {
  h1 { font-size: 20px; }
  .hero-value { font-size: 34px; }
  .wf-row { grid-template-columns: 88px 1fr; }
  .band-row { grid-template-columns: 56px 1fr 76px; }

  /* Filters + add-handler stack full width instead of crowding. */
  .filters { width: 100%; }
  .filters .search { width: 100%; flex: 1 1 100%; }
  .manage-add { margin-left: 0; flex: 1 1 100%; }
  .manage-input { flex: 1; width: auto; }

  /* Side panels go full-screen so they're not pinched. */
  .help-drawer { width: 100vw; }
  .login-card { width: min(440px, 94vw); padding: 22px 20px; }
}

/* ============================================================
   Tier-2 mobile: customer card view (<=600px).
   On phones the horizontally-scrolling table is swapped for a list
   of cards (layout C: Net owed leads, red Aged-60+ badge only when
   overdue, tap to open bands + bills + notes). render.js builds the
   cards (class names below are the contract); this file owns the
   styling and the table<->cards swap. Desktop (>600px) is untouched.
   ============================================================ */
.cards { display: none; }       /* desktop: cards off, table shown */

@media (max-width: 600px) {
  .table-wrap { display: none; }
  .cards { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
}

.card {
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 13px 14px; cursor: pointer;
}
.card.expanded { cursor: default; }
.card-net {
  font-size: 26px; font-weight: 750; line-height: 1.05; letter-spacing: -.02em;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.card-cust { margin-top: 2px; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
/* status row sits right after .card-cust (render.js leaves that div class-less) */
.card-cust + div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.card-badge {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 9px;
}
.card-badge.risk { color: var(--risk); background: var(--risk-soft); border-color: var(--risk-line); }
.card-hand {
  font-size: 11px; font-weight: 600; color: var(--accent-ink); white-space: nowrap;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px;
}
.card-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted);
}
.card-foot > span[aria-hidden="true"] { margin-left: auto; color: var(--accent-ink); font-weight: 700; }
.card-detail { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
/* the band-chip wrapper inside the detail is class-less; space its chips directly */
.card-detail .card-badge { margin: 0 5px 6px 0; }

/* ── Inventory room (Slice 15) ────────────────────────────────────────────
   Additive only; no existing rule is modified. KPI tiles are clickable
   actions (sort/filter), borders over shadows, money-green canvas. */
.badge.live { color: var(--positive); }
.badge.suspect { color: var(--warn); border-color: var(--risk-line); }
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 0; }
.kpi-tile {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font: inherit; color: var(--ink);
  transition: border-color .14s ease, background .14s ease;
}
.kpi-tile:hover { border-color: var(--accent); }
.kpi-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kpi-tile.active { border-color: var(--accent); background: var(--accent-soft); }
.kpi-label { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kpi-value { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--accent-ink); font-family: var(--mono-font); }
.kpi-action { font-size: 11px; color: var(--muted); font-weight: 600; }
.kpi-tile.active .kpi-action { color: var(--accent-ink); }
#inv-table td.inv-group { color: var(--muted); }
#inv-table td.inv-cat { color: var(--ink-soft); white-space: nowrap; }
/* Category filter: matches the existing inventory controls (v6 tokens, border over shadow,
   teal focus ring). No sand/beige, no gradient/glow. */
.inv-cat-select {
  font: inherit; font-size: 13.5px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.inv-cat-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 720px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }