/* ============================================================================
   CORE REPORTING PORTAL - site.css
   Modern Admin Theme, dark by default with a light counterpart. --brand stays
   identical across both themes. --risk/--warn/--good keep the SAME meaning
   in both ("red = money at risk" never changes) but get darker, more
   saturated values in light mode — the dark theme's bright pastel tones
   (#F87171 etc.) are tuned for a near-black background and used directly as
   TEXT color in several places (.neg, .checkline td.bad, .kpi.risk .val);
   used as-is on white they fail contrast for small text. Only the neutral
   scale (backgrounds/text/borders/shadow) is a straight swap. Toggled via
   [data-theme="light"]
   on <html>, set by wwwroot/js/theme.js before first paint (see the inline
   script in _Layout.cshtml's <head>) to avoid a flash of the wrong theme.
   Every rule below reads color from these tokens — there should be no
   hardcoded hex left in this file outside this block and the light-theme
   override block right after it; if you add a new color, add a token
   instead of a literal, or it will look wrong in one of the two themes.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{
  --bg:#0F172A;--sidebar:#0B1120;--card:#1E293B;--card-2:#243449;
  --text:#F8FAFC;--text-2:#C7D2E0;--muted:#94A3B8;--muted-2:#5A6B85;--pending:#4A5A73;
  --brand:#3B82F6;--brand-dim:#1D4ED8;
  --line:#334155;--risk:#F87171;--warn:#FBBF24;--good:#34D399;
  /* -rgb twins so rgba(var(--x-rgb),alpha) tinted backgrounds (pills, hover
     washes, the Hey Jude avatar glow) stay correct in both themes — plain
     rgba(var(--risk-rgb),...) literals would keep showing the DARK theme's tint
     even after --risk itself changes color in light mode. */
  --brand-rgb:59,130,246;--risk-rgb:248,113,113;--warn-rgb:251,191,36;--good-rgb:52,211,153;
  --r:10px;--shadow:0 4px 6px -1px rgba(0,0,0,.5);
}
/* Light theme — same structure/spacing/components, swapped neutral scale
   only. Sidebar stays a shade darker than the content area in both themes
   (the original design principle: "sidebar background DARKER than content"),
   just using light-theme-appropriate darks rather than near-black. */
:root[data-theme="light"]{
  --bg:#F1F5F9;--sidebar:#0F172A;--card:#FFFFFF;--card-2:#F1F5F9;
  --text:#0F172A;--text-2:#334155;--muted:#64748B;--muted-2:#94A3B8;--pending:#94A3B8;
  --brand:#3B82F6;--brand-dim:#1D4ED8;
  --line:#E2E8F0;--risk:#DC2626;--warn:#B45309;--good:#15803D;
  --brand-rgb:59,130,246;--risk-rgb:220,38,38;--warn-rgb:180,83,9;--good-rgb:21,128,61;
  --r:10px;--shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;display:flex;min-height:100vh}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.mono{font-family:'JetBrains Mono',ui-monospace,'Courier New',monospace;font-variant-numeric:tabular-nums}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:600;color:var(--muted)}

.side{width:242px;flex:0 0 242px;background:var(--sidebar);color:var(--text);display:flex;
  flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--line)}
.navveil{position:fixed;inset:0;background:rgba(2,6,15,.65);z-index:105;display:none}
.navveil.open{display:block}
.navtoggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:34px;height:34px;flex:0 0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:8px;cursor:pointer}
.navtoggle:hover{border-color:var(--brand)}
.navtoggle .bar{width:16px;height:2px;background:var(--text);border-radius:1px;display:block}
.brand{padding:18px;border-bottom:1px solid var(--line)}
.brand .mark{font-weight:700;font-size:21px;letter-spacing:.02em;color:var(--text)}
.brand .mark span{color:var(--brand)}
.brand .sub{font-size:11px;color:var(--muted);margin-top:2px}
.nav{flex:1;overflow-y:auto;padding:6px 0 20px}
.nav .grp{padding:15px 18px 5px;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:600;color:var(--muted-2)}
.nav a{display:flex;align-items:center;gap:9px;padding:8px 18px;color:var(--muted);
  text-decoration:none;font-size:13.5px;border-left:2px solid transparent}
.nav a:hover{background:var(--card);color:var(--text)}
.nav a.on{background:rgba(var(--brand-rgb),.14);border-left-color:var(--brand);color:var(--text);font-weight:500}
.nav a.sub2{padding-left:34px;font-size:12.5px}
.nav a .ic{width:14px;text-align:center;opacity:.7;font-size:12px}
.sidefoot{padding:12px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.sidefoot .logout{color:var(--brand);text-decoration:none;display:inline-block;margin-top:6px}
.sidefoot .logout:hover{filter:brightness(1.2)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--sidebar);border-bottom:1px solid var(--line);padding:0 22px;min-height:54px;
  display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--muted)}.crumb b{color:var(--text);font-weight:600}
.spacer{flex:1}
.filterform{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:5px 9px;
  font-size:12.5px;display:flex;gap:6px;align-items:center;color:var(--text);position:relative}
.chip .k{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.chip input,.chip select{border:0;font-family:inherit;font-size:12.5px;color:var(--text);background:transparent}
.chip input:focus,.chip select:focus{outline:none}
.chip select option{color:#111827;background:#fff}
.chip input::-webkit-calendar-picker-indicator{filter:invert(.7)}
.branchpick{max-width:150px}
/* Expanded by site-nav.js while the multi-select branch picker is open —
   see the comment there for why size flips from 1 to N on click. Absolute
   so popping it open doesn't reflow the sticky topbar. */
.branchpick.expanded{position:absolute;top:100%;left:0;margin-top:4px;width:190px;max-width:none;
  max-height:220px;overflow-y:auto;background:var(--card);border:1px solid var(--line);
  border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.5);z-index:50}
.stamp{font-size:11.5px;color:var(--muted);text-align:right;line-height:1.3}
.stamp b{color:var(--good);font-weight:600}.stamp b.stale{color:var(--warn)}

/* "Books closed through" chip — month-end lock state, on every page.
   Amber when nothing is closed yet: that is a watch state, not money at
   risk, and red stays rationed for real risk per the design system. */
.periodlock{display:flex;flex-direction:column;gap:1px;padding:4px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);line-height:1.25;cursor:default}
.periodlock .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.periodlock .v{font-size:12px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
/* Environment badge — which of the three databases this page is reading.
   Amber for staging, blue for development; production shows no badge at all,
   so a missing badge always means live data rather than "someone removed it". */
.envbadge{display:flex;flex-direction:column;line-height:1.25;padding:5px 10px;
  border-radius:7px;font-size:10px;letter-spacing:.06em;border:1px solid;margin-right:4px}
.envbadge b{font-size:10px;font-weight:700}
.envbadge .mono{font-size:10px;opacity:.75;letter-spacing:0}
.envbadge.env-development{color:var(--brand);border-color:rgba(var(--brand-rgb),.45);
  background:rgba(var(--brand-rgb),.10)}
.envbadge.env-staging{color:var(--warn);border-color:rgba(var(--warn-rgb),.45);
  background:rgba(var(--warn-rgb),.10)}

.periodlock.is-open{border-color:rgba(var(--warn-rgb),.45);background:rgba(var(--warn-rgb),.10)}
.periodlock.is-open .v{color:var(--warn)}
.btn{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:7px 14px;
  font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:var(--card);color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand);filter:none}
.btn.sm{padding:5px 11px;font-size:12px}
.wrap{padding:20px 22px 48px;max-width:1500px;width:100%}
.pagehead{margin-bottom:16px}
.pagehead h1{font-size:24px;font-weight:700;letter-spacing:-.01em}
.pagehead p{font-size:13px;color:var(--muted);max-width:640px;margin-top:3px}

.flow{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 4px 13px;
  margin-bottom:18px;display:flex;overflow-x:auto;box-shadow:var(--shadow)}
.flow .st{flex:1;min-width:140px;padding:0 15px;color:var(--muted)}
.flow .st + .st{border-left:1px solid var(--line)}
.flow .st .lbl{text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:600;color:var(--muted);margin-bottom:5px}
.flow .st .amt{font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.02em}
.flow .st .amt.pendingtext{color:var(--pending)}
.flow .st .cnt{font-size:11.5px;color:var(--muted);margin-top:2px}
.flow .st.pending{opacity:.7}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
  grid-column:span 12;box-shadow:var(--shadow)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}
@media(max-width:1180px){.c3{grid-column:span 6}.c4,.c8{grid-column:span 12}}
@media(max-width:760px){.c3,.c6{grid-column:span 12}}
.card h3{text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:600;color:var(--muted);
  margin-bottom:12px;display:flex;align-items:center;gap:7px}
.card h3 .drill{margin-left:auto;font-size:10px;color:var(--brand);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.card h3 .drill:hover{filter:brightness(1.2)}
.kpi .val{font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--text)}
.kpi.risk .val{color:var(--risk)}
.kpi .cur{font-size:15px;color:var(--muted);font-weight:500}
.kpi .meta{margin-top:8px;font-size:12px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.delta{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:6px}
.up{background:rgba(var(--good-rgb),.16);color:var(--good)}
.down{background:rgba(var(--risk-rgb),.16);color:var(--risk)}
.flat{background:var(--card-2);color:var(--muted)}
.kpi .note{color:var(--muted);font-size:11.5px}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-transform:uppercase;letter-spacing:.07em;font-size:10px;color:var(--muted);font-weight:600;
  text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
td{padding:7px 9px;border-bottom:1px solid var(--line);color:var(--text)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}
tbody tr:hover{background:var(--card-2)}
.pill{font-size:10.5px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap}
.p-bad{background:rgba(var(--risk-rgb),.16);color:var(--risk)}
.p-warn{background:rgba(var(--warn-rgb),.16);color:var(--warn)}
.p-ok{background:rgba(var(--good-rgb),.16);color:var(--good)}
.p-neu{background:var(--card-2);color:var(--muted)}

/* Sales > Agent Scorecard leaderboard: TOTAL/UNASSIGNED rows must read as
   distinct from sortable named-agent rows (see AgentScorecard.cshtml). */
.row-total td{font-weight:600;border-top:2px solid var(--text)}
.agent-name.unassigned{color:var(--muted);font-style:italic}

.note-strip{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:var(--r);padding:11px 14px;font-size:12.5px;color:var(--muted);margin-bottom:16px}
.note-strip b{color:var(--text)}
.note-strip.ok{border-left-color:var(--good)}
.note-strip.bad{border-left-color:var(--risk)}

.aging{display:flex;gap:3px;align-items:flex-end;height:132px;margin-bottom:8px}
.aging .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.aging .b i{width:100%;border-radius:3px 3px 0 0;display:block}
.aging .b em{font-style:normal;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.agingx{display:flex;gap:3px}
.agingx div{flex:1;text-align:center;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}.legend i{width:9px;height:9px;border-radius:3px;display:block}

.loginbody{display:flex;align-items:center;justify-content:center;background:var(--bg);height:100vh}
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px;
  width:340px;box-shadow:0 16px 48px rgba(0,0,0,.55)}
.loginbox .mark{font-weight:700;font-size:26px;letter-spacing:.01em;color:var(--text)}
.loginbox .mark span{color:var(--brand)}
.loginbox .sub{font-size:12px;color:var(--muted);margin-bottom:22px}
.loginbox label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:14px 0 4px}
.loginbox input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-family:inherit;font-size:14px;background:var(--bg);color:var(--text)}
.loginbox input:focus{outline:none;border-color:var(--brand)}
.loginbox .btn{width:100%;margin-top:22px;padding:10px}
.loginerr{margin-top:14px;font-size:12.5px;color:var(--risk);background:rgba(var(--risk-rgb),.12);padding:9px 11px;border-radius:8px}
.loginerr ul{margin:0;padding-left:16px}
@media(max-width:900px){
  .side{position:fixed;top:0;left:0;width:242px;flex:none;height:100vh;z-index:110;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.55)}
  .side.open{transform:translateX(0)}
  .navtoggle{display:flex}
  .topbar{padding:10px 14px;gap:8px}
  .crumb{order:1}
  .navtoggle{order:0}
  .spacer{display:none}
  .filterform{order:3;flex-basis:100%;width:100%}
  .periodlock{order:4}
  .stamp{order:5;flex:1 1 auto;text-align:left}
  #refreshBtn{order:6}
}
@media(max-width:480px){
  .wrap{padding:14px 14px 36px}
  .branchpick{max-width:110px}
}

/* ============================================================================
   REPORT CENTER
============================================================================ */
.rc-group{margin-bottom:8px}
.rc-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:22px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
  cursor:pointer;transition:border-color .12s,box-shadow .12s;display:flex;flex-direction:column;gap:8px}
.rcard:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.rcard:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rcard .kind{text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;font-weight:600;
  padding:2px 8px;border-radius:9px;align-self:flex-start}
.kind.stmt{background:rgba(var(--good-rgb),.14);color:var(--good)}
.kind.grid{background:rgba(var(--brand-rgb),.14);color:var(--brand)}
.kind.pivot{background:rgba(var(--warn-rgb),.14);color:var(--warn)}
.rcard h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.rcard p{font-size:12.5px;color:var(--muted);line-height:1.4;flex:1;margin:0}
.rcard .params{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.rcard .params span{font-size:10.5px;color:var(--muted);background:var(--card-2);
  border:1px solid var(--line);border-radius:9px;padding:1px 7px}
.rcard .sp{font-size:10px;color:var(--muted-2);margin-top:2px}

.parambar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  margin-bottom:14px;display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:4px}
.field label{text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:600;color:var(--muted)}
.field input,.field select{border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  font-family:inherit;font-size:13px;min-width:150px;background:var(--bg);color:var(--text)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand)}
.field select option{color:#111827;background:#fff}
.field.acct input{min-width:220px}
.field.chk{flex-direction:row;align-items:center;gap:6px}
.field.chk label{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--text)}
.parambar .run{margin-left:auto;display:flex;gap:8px}

.resbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.resbar .meta{font-size:12px;color:var(--muted)}
.resbar .meta b{color:var(--text)}
.resbar .exp{margin-left:auto;display:flex;gap:8px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px}
.gridscroll{max-height:520px;overflow:auto}
.panel table{font-size:12.5px}
.panel thead th{position:sticky;top:0;background:var(--card-2);z-index:1}
.panel tbody td{white-space:nowrap}
.panel tfoot td{padding:8px 9px;font-weight:600;border-top:2px solid var(--line);background:var(--card-2)}

.statement{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 30px;max-width:900px;box-shadow:var(--shadow)}
.stmthead{text-align:center;border-bottom:2px solid var(--text);padding-bottom:12px;margin-bottom:6px}
.stmthead .co{font-size:16px;font-weight:700}
.stmthead .ti{font-size:14px;font-weight:600;margin-top:2px}
.stmthead .dt{font-size:12px;color:var(--muted);margin-top:2px}
.stmt-tbl{width:100%;border-collapse:collapse;font-size:13px}
.stmt-tbl td{padding:3px 4px;border:0;color:var(--text)}
.stmt-tbl td.amt{text-align:right;font-family:'JetBrains Mono',monospace;width:160px;font-variant-numeric:tabular-nums}
.lvl0{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em;padding-top:14px!important}
.lvl1{font-weight:600;padding-left:14px!important}
.lvl2{padding-left:32px!important;color:var(--text-2)}
.lvl3{padding-left:50px!important;color:var(--muted);font-size:12.5px}
.subtot td{border-top:1px solid var(--line);font-weight:600}
.grandtot td{border-top:2px solid var(--text);border-bottom:3px double var(--text);
  font-weight:700;font-size:13.5px;padding-top:6px!important;padding-bottom:6px!important}
.neg{color:var(--risk)}
.tb-abn td{color:var(--risk);background:rgba(var(--risk-rgb),.08)}
.checkline td{border-top:1px solid var(--line);padding-top:12px!important;font-weight:700}
.checkline td.ok{color:var(--good)}
.checkline td.bad{color:var(--risk)}

/* SingleGridStatement (Balance Sheet / Income Statement, real-time) — the
   account code shown ahead of each detail line. Muted and slightly smaller
   so the account NAME stays the thing you read down the column, with the
   code there for anyone tying back to the chart of accounts. */
.stmt-tbl .sg-code{color:var(--muted);font-size:11.5px;margin-right:6px}

/* Bank Reconciliation statement — reuses .statement/.stmt-tbl above */
.stmt-tbl td.pending{color:var(--muted)}
.br-status{margin-top:8px}
.br-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600}
.br-pill.good{background:rgba(var(--good-rgb),.15);color:var(--good)}
.br-pill.risk{background:rgba(var(--risk-rgb),.15);color:var(--risk)}
.br-pill.warn{background:rgba(var(--warn-rgb),.15);color:var(--warn)}
.br-count{color:var(--muted);font-weight:400;font-size:12px}
.br-none{color:var(--muted);font-style:italic}
.br-book td{border-top:1px solid var(--line)}
.br-toggle{background:none;border:0;padding:0;color:var(--brand);font:inherit;font-size:12px;cursor:pointer}
.br-toggle:hover{text-decoration:underline}
.br-note{margin-top:14px;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:8px;font-size:12px;color:var(--muted)}

.viewnote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r);padding:9px 13px;font-size:12px;color:var(--muted);margin-bottom:14px}
.viewnote b{color:var(--text)}

/* ============================================================================
   GL DETAIL TRANSACTION REPORT — per-account block grouping
   Taller rows than the shared grid, structural marker rows (Beginning
   Balance / Current Period Change / Ending Balance) visually distinct, and
   a bordered block per account so a Beginning->Ending run reads as one unit.
============================================================================ */
.gltx td{padding:13px 9px}
.gltx tr.gl-marker td{font-weight:700;background:var(--card-2)}
.gltx tr.gl-marker.gl-subtotal td{font-weight:600;background:transparent;border-top:1px solid var(--line)}
.gltx tr.gl-begin td{border-top:2px solid var(--line)}
.gltx tr.gl-end td{border-bottom:2px solid var(--line)}
.gltx tr.gl-detail{cursor:pointer}
.gltx tr.gl-detail:hover td{background:rgba(var(--brand-rgb),.10)}
.gltx tr.gl-detail td.tk{color:var(--brand)}

/* ============================================================================
   TICKET DRILLDOWN — modal
============================================================================ */
.modalveil{position:fixed;inset:0;background:rgba(2,6,15,.65);display:flex;
  align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:100}
.modalbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 64px rgba(0,0,0,.6);width:100%;max-width:760px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden}
.modalhead{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modalhead h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
.modalhead .sub{font-size:12px;color:var(--muted);margin-top:2px}
.modalhead .x{margin-left:auto;background:transparent;border:0;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.modalhead .x:hover{color:var(--text);background:var(--card-2)}
.modalbody{padding:16px 18px;overflow:auto}
.tk-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;margin-bottom:16px}
.tk-fields .f{display:flex;flex-direction:column;gap:2px}
.tk-fields .f .k{text-transform:uppercase;letter-spacing:.07em;font-size:10px;font-weight:600;color:var(--muted)}
.tk-fields .f .v{font-size:13px;color:var(--text)}
.tk-fields .f .v.mono{font-size:12.5px}
.tk-legs-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tk-legs-wrap table{font-size:12.5px}
.tk-legs-wrap thead th{background:var(--card-2)}
.tk-legs-wrap tfoot td{padding:8px 9px;font-weight:700;border-top:2px solid var(--line);background:var(--card-2)}
.tk-legs-wrap tfoot td.bad{color:var(--risk)}
.tk-legs-wrap tfoot td.ok{color:var(--good)}
.tk-notfound{padding:24px 4px;text-align:center;color:var(--muted);font-size:13px}
body.modal-open{overflow:hidden}

/* ============================================================================
   HEALTH CHECK — drilldown affordance + detail modal sections
============================================================================ */
tr.hc-row-clickable{cursor:pointer}
tr.hc-row-clickable:hover td{background:var(--card-2)}
tr.hc-row-clickable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.hc-view-hint{margin-left:8px;font-size:11px;color:var(--brand);white-space:nowrap}
.hc-section-head{margin:16px 0 6px}
.hc-section-head:first-child{margin-top:0}
.hc-empty{padding:24px 4px;text-align:center;color:var(--muted);font-size:13px}
.hc-empty.hc-error{color:var(--risk)}
.hc-truncated-note{font-size:12px;color:var(--warn);background:rgba(var(--warn-rgb),.10);
  border:1px solid rgba(var(--warn-rgb),.25);border-radius:8px;padding:7px 11px;margin-bottom:8px}

/* ============================================================================
   EXCEPTION CENTER — card grid (reuses Report Center's .rc-cardgrid/.rcard)
============================================================================ */
.rcard.exc-noclick{cursor:default}
.rcard.exc-noclick:hover{border-color:var(--line);box-shadow:none}
.exc-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.exc-row .mono{color:var(--text);font-size:13px}
.exc-status{margin-top:2px}
.exc-status .hc-view-hint{margin-left:0}
.hc-empty-row{padding:16px 9px!important;text-align:center;color:var(--muted)}

/* ============================================================================
   CASH & BANK POSITION — Executive dashboard card. Negative balances here are
   a known data-gap artifact (missing pre-cutover opening balance), never a
   genuine overdraft, so they get --warn (amber), NEVER --risk (red) — that
   color is rationed for real money-at-risk. See CashPositionRow's doc
   comment (Models/ReportModels.cs) for the full reasoning.
============================================================================ */
.cash-asof{font-weight:400;font-size:11.5px;color:var(--muted);margin-left:8px}
.cash-hero-row{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:16px;padding:6px 0 16px}
.cash-hero-total{font-size:34px;font-weight:700;color:var(--text);line-height:1}
.cash-hero-label{font-size:12px;color:var(--muted);margin-top:4px}
.cash-split-row{display:flex;gap:28px}
.cash-split{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cash-split .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cash-split .v{font-size:16px;font-weight:600;color:var(--text)}
.cash-table{margin-bottom:10px}
.cash-neg{color:var(--warn)}
.cash-fx-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);
  background:var(--card-2);border:1px solid var(--line);cursor:help}
@media(max-width:760px){
  .cash-hero-row{flex-direction:column;align-items:flex-start}
  .cash-hero-total{font-size:28px}
}

/* ============================================================================
   HEY JUDE — natural-language Q&A page (chat + chart dialog), Views/HeyJude/Index

   Chart moved into an on-demand dialog (hjChartVeil/hjChartBox, reusing the
   same .modalveil/.modalbox/.modalhead/.modalbody the ticket drilldown and
   Health Check detail modals use, for one consistent "dialog" look across
   the app) so it takes zero page space when there's nothing to show — the
   old always-visible chart card is gone. hey-jude.js opens it automatically
   whenever an answer carries chart data, and #hjViewChartBtn reopens the
   last one without asking a new question.
============================================================================ */
.hj-chat{display:flex;flex-direction:column;max-width:820px;margin:0 auto}
.hj-avatar-row{display:flex;justify-content:center;padding:8px 0 16px}
/* 4x4 inches at the standard 96 CSS px/inch. Clamped down on narrow
   viewports (see the media query below) so it never overflows the screen. */
.hj-avatar{width:384px;height:384px;border-radius:50%;object-fit:cover;object-position:22% center;
  border:3px solid var(--line);box-shadow:0 0 0 8px rgba(var(--brand-rgb),.12);
  transition:border-color .25s,box-shadow .25s}
.hj-avatar.listening{border-color:var(--risk);animation:hj-avatar-ring 1.1s ease-in-out infinite}
.hj-avatar.speaking{border-color:var(--good);animation:hj-avatar-talk .6s steps(1,end) infinite}
@keyframes hj-avatar-ring{
  0%,100%{box-shadow:0 0 0 10px rgba(var(--risk-rgb),.20)}
  50%{box-shadow:0 0 0 20px rgba(var(--risk-rgb),.08)}
}
/* A static photo can't lip-sync, so "talking" is faked as a lively, uneven
   chatter — quick stepped scale/rotate bursts rather than one smooth pulse —
   closer to a mouth opening and closing than a slow breathing loop. */
@keyframes hj-avatar-talk{
  0%{transform:scale(1) rotate(0deg);box-shadow:0 0 0 6px rgba(var(--good-rgb),.14)}
  15%{transform:scale(1.05) rotate(-1deg);box-shadow:0 0 0 14px rgba(var(--good-rgb),.24)}
  30%{transform:scale(0.99) rotate(1deg);box-shadow:0 0 0 8px rgba(var(--good-rgb),.16)}
  45%{transform:scale(1.06) rotate(0deg);box-shadow:0 0 0 16px rgba(var(--good-rgb),.26)}
  60%{transform:scale(1) rotate(1deg);box-shadow:0 0 0 6px rgba(var(--good-rgb),.14)}
  75%{transform:scale(1.04) rotate(-1deg);box-shadow:0 0 0 13px rgba(var(--good-rgb),.22)}
  100%{transform:scale(1) rotate(0deg);box-shadow:0 0 0 6px rgba(var(--good-rgb),.14)}
}
.hj-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-right:2px;
  min-height:220px;max-height:46vh}
.hj-msg{font-size:13px;line-height:1.45;padding:9px 12px;border-radius:10px;max-width:90%}
.hj-msg.bot{background:var(--card-2);color:var(--text);align-self:flex-start}
.hj-msg.bot i{color:var(--muted);font-style:italic}
.hj-msg.bot.pending{color:var(--muted)}
.hj-msg.user{background:var(--brand);color:#fff;align-self:flex-end}
.hj-form{display:flex;gap:8px;padding-top:12px;margin-top:10px;border-top:1px solid var(--line)}
.hj-form input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;color:var(--text);font-family:inherit;font-size:13.5px}
.hj-form input:focus{outline:none;border-color:var(--brand)}
.hj-mic-btn.listening{border-color:var(--risk);color:var(--risk);animation:hj-pulse 1.2s ease-in-out infinite}
.hj-mic-btn:disabled{opacity:.4;cursor:not-allowed}
@keyframes hj-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.hj-voice-toggle.off{color:var(--muted)}
.hj-chart-box{max-width:820px}
.hj-chart-box .modalbody{padding:16px 18px 20px}
.hj-chart{height:60vh;min-height:340px}
@media(max-width:760px){
  .hj-avatar{width:220px;height:220px}
  .hj-log{max-height:38vh}
  .hj-chart{height:50vh;min-height:260px}
}
.panel tbody td.hc-note-cell{white-space:normal;max-width:380px;background:rgba(var(--warn-rgb),.10)}

/* ============================================================================
   ITEM COSTING RECON — filter row, shipment->expense expand/collapse,
   nested expense sub-table. Reuses .field/.pill/.hc-row-clickable/
   .hc-empty-row/.modalveil wherever they already fit; only genuinely new
   layout (icr-*) added here.
============================================================================ */
.icr-filterrow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.icr-filterrow .run{margin-left:auto;display:flex;gap:8px}

/* Nested linked-expenses table under an expanded shipment row, and the
   Top-10 "where to look first" list next to its chart — same bordered-panel
   look as the GL ticket drilldown's .tk-legs-wrap, reused rather than
   duplicated as a new pattern. */
.icr-subtable-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:2px 0}
.icr-subtable-wrap table{font-size:12.5px}
.icr-subtable-wrap thead th{background:var(--card-2)}

tr.icr-expense-row > td{padding:12px 16px;background:var(--bg)}
tr.icr-exp-row{cursor:pointer}
tr.icr-exp-row:hover td{background:var(--card-2)}
tr.icr-exp-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* ---------------- Supplier Price Comparison ----------------
   .pos is the good-direction counterpart of .neg: a supplier price going
   DOWN. Red stays rationed to price increases / above-average only. */
.pos{color:var(--good)}
.spc-note{color:var(--muted);font-size:11.5px}


/* ============================================================================
   User Access admin (Views/Access/Index.cshtml)
   All colours come from the theme tokens, so this screen follows dark/light
   like everything else. Risk red is NOT used here: "no access" is a normal
   state, not money at risk, so it reads as muted rather than alarming.
============================================================================ */
.acc-flash{margin-bottom:14px;font-size:13px;padding:12px 14px}
.acc-flash.ok{border-left:3px solid var(--good)}
.acc-flash.bad{border-left:3px solid var(--warn)}

.acc-filter{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:12px 0 6px}
.acc-filter input[type=search]{flex:1 1 260px;min-width:200px;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--text);
  font-family:inherit;font-size:13px}
.acc-filter input[type=search]:focus{outline:none;border-color:var(--brand)}
.acc-filter label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}

.acc-list{margin-top:10px;border-top:1px solid var(--line)}
.acc-user{border-bottom:1px solid var(--line)}
.acc-user>summary{cursor:pointer;padding:10px 4px;display:flex;gap:12px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;list-style:none}
.acc-user>summary::-webkit-details-marker{display:none}
.acc-user>summary:hover{background:var(--card-2)}
.acc-user[open]>summary{background:var(--card-2)}
.acc-name{display:flex;gap:10px;align-items:baseline;min-width:220px}
.acc-name b{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--text)}
.acc-full{font-size:12.5px;color:var(--text-2)}
.acc-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.p-off{background:var(--card-2);color:var(--muted-2)}

.acc-form{padding:4px 4px 16px}
.acc-switches{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px}
.acc-switch{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2)}
.acc-note{color:var(--muted);font-size:11.5px;font-style:normal}

.acc-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.acc-mgroup-h{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin-bottom:6px}
.acc-mod{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);
  padding:3px 0;cursor:pointer}
.acc-mod:hover{color:var(--text)}

.acc-actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.acc-actions input[type=text]{flex:1 1 220px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;color:var(--text);font-family:inherit;font-size:12.5px}
.acc-actions input[type=text]:focus{outline:none;border-color:var(--brand)}

.acc-detail{font-size:11.5px;color:var(--muted);max-width:420px;word-break:break-word}

@media(max-width:680px){
  .acc-user>summary{align-items:flex-start;flex-direction:column;gap:6px}
  .acc-switches{gap:10px;flex-direction:column}
}


/* ============================================================================
   LIVE TRENDS (Views/LiveTrends/Index.cshtml)
   The pulse dot is the only animation in the portal: it marks a real data
   update, so it must never run on a timer that fires regardless.
============================================================================ */
.lt-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--good);
  margin-left:8px;vertical-align:middle;opacity:.55;transition:opacity .25s,transform .25s}
.lt-dot.beat{opacity:1;transform:scale(1.5)}
@media (prefers-reduced-motion:reduce){.lt-dot{transition:none}.lt-dot.beat{transform:none}}

/* Cancellations are normal business, so amber rather than risk-red: nothing
   here is money at risk, it is just excluded from the totals. */
.lt-excluded{border-left:3px solid var(--warn);font-size:12.5px;color:var(--text-2)}
.lt-excluded b{color:var(--text)}

.kpi .val.warnval{color:var(--warn)}

.lt-feed{width:100%;border-collapse:collapse;font-size:12.5px}
.lt-feed th{position:sticky;top:0;background:var(--card);z-index:1}
.lt-feed td,.lt-feed th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.lt-feed td.n,.lt-feed th.n{text-align:right}
.lt-feed tr.lt-flagged td{color:var(--muted)}
.lt-feed tr.lt-flagged td.n{text-decoration:line-through}


/* ============================================================================
   INVENTORY module (Views/Inventory/*.cshtml)
============================================================================ */
.inv-filter form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inv-filter label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.inv-filter label span{text-transform:uppercase;letter-spacing:.05em;font-size:10px}
.inv-filter select,.inv-filter input{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;color:var(--text);font-family:inherit;font-size:12.5px;min-width:150px}
.inv-filter select:focus,.inv-filter input:focus{outline:none;border-color:var(--brand)}

/* Risk red is earned on these two: unaccounted stock is money that cannot be
   explained, not a housekeeping note. */
.p-risk{background:rgba(var(--risk-rgb),.16);color:var(--risk)}

/* Breathing room above the scrolling tables on the two Inventory pages.

   Without it the sticky header's bottom border sat directly beneath the
   intro paragraph, so the two rules read as one doubled line and the table
   looked welded to the card above it.

   The gap goes on the SCROLL CONTAINER, not inside the table: a sticky
   `thead` pins to its scroll container's padding box, so a padding-top in
   there would scroll away on the first wheel click — the gap would vanish
   exactly when it is doing its job.

   Scoped with its own class rather than applied to every `.card > .gridscroll`,
   because that selector also matches the Executive, Accounting and Exception
   Center grids, which are already spaced the way their own pages want. */
/* :not(:empty) so the load-on-demand lots wrapper contributes no gap
   before anything has been loaded into it. */
.inv-table:not(:empty){margin-top:14px}

.ic-lots{width:100%;border-collapse:collapse;font-size:12.5px}
.ic-lots th{position:sticky;top:0;background:var(--card);z-index:1;text-align:left;
  padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ic-lots td{padding:6px 8px;border-bottom:1px solid var(--line)}
.ic-lots th.n,.ic-lots td.n{text-align:right}
.ic-lots tr.ic-lot{cursor:pointer}
.ic-lots tr.ic-lot:hover{background:var(--card-2)}
.ic-lots tr.ic-lot[aria-expanded="true"]{background:var(--card-2)}
.ic-lots tr.ic-unrec td{background:rgba(var(--risk-rgb),.05)}

/* Depletion bar: how much of the lot has been sold. */
.ic-bar{display:inline-block;width:68px;height:6px;border-radius:3px;background:var(--card-2);
  overflow:hidden;vertical-align:middle}
.ic-bar i{display:block;height:100%;background:var(--brand);border-radius:3px}

/* Shown when the lot grid is displaying a slice — amber, because a partial
   table is a caveat the reader must see, not an error. */
.inv-capped{font-size:12px;color:var(--warn);padding:8px 10px;margin-bottom:8px;
  border-left:3px solid var(--warn);background:rgba(var(--warn-rgb),.08);border-radius:4px}

.ic-moverow>td{padding:0 8px 12px!important;background:var(--bg)}
.ic-movehead{font-size:11.5px;color:var(--muted);padding:8px 2px 6px}