/* ═══════════════════════════════════════════════════════════════════
   theme.css — THE design system for every page of Fintrack (Oct 2026).
   Spec: DESIGN.md at the repo root. Loaded FIRST by payroll.html,
   accounts.html, ops.html, index.html and modules.html; the per-module
   stylesheets (payroll.css / accounts.css / ops.css) hold page-specific
   rules only and must not restyle anything defined here.

   Contents
     1. Tokens — light (default) and dark, plus every legacy alias
     2. Base — reset, type, links, scrollbars, focus, icons
     3. Shell — sidebar, topbar, module switch, theme toggle, content
     4. Components — cards, buttons, inputs, tables, badges, tabs,
        segmented controls, modals, toasts, notes, empty states,
        dropdown lists, progress, pills, key/value, dropzones
     5. Print + reduced motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────── */
:root{
  /* surfaces */
  --bg:#f6f8fb; --sb:#ffffff; --card:#ffffff; --c2:#f8fafc;
  --bdr:#e4e9f0; --bdr2:#cfd7e3;
  /* text */
  --txt:#16233a; --dim:#44546a; --mut:#66758c; --faint:#8794a8;
  /* primary (indigo) */
  --acc:#4f46e5; --acc-h:#4338ca; --adim:rgba(79,70,229,.10); --on-acc:#ffffff;
  /* success */
  --grn:#166534; --grn-f:#15803d; --grn-f2:#22c55e; --gdim:rgba(22,163,74,.12); --on-grn:#ffffff;
  /* warning (amber is a STATE, never the brand) */
  --amb:#a35a00; --amb-f:#f59e0b; --wdim:rgba(245,158,11,.14); --on-amb:#16233a;
  /* danger */
  --red:#c2262e; --red-f:#c2262e; --rdim:rgba(229,72,77,.12); --on-red:#ffffff;
  /* info */
  --blu:#1d4ed8; --blu-f:#3b82f6; --bdim:rgba(59,130,246,.12);
  /* data categories (payroll grid) */
  --p:#6d28d9; --p-f:#7c3aed; --pdim:rgba(124,58,237,.12);
  --teal:#0f766e; --teal-f:#14b8a6; --tdim:rgba(20,184,166,.12);
  /* status triplets (text + ground + border), measured against --card */
  --ok-fg:#166534;     --ok-bg:rgba(22,163,74,.12);     --ok-bd:rgba(22,163,74,.40);
  --warn-fg:#a35a00;   --warn-bg:rgba(245,158,11,.14);  --warn-bd:rgba(217,119,6,.45);
  --danger-fg:#c2262e; --danger-bg:rgba(229,72,77,.12); --danger-bd:rgba(220,38,38,.38);
  --info-fg:#1d4ed8;   --info-bg:rgba(59,130,246,.12);  --info-bd:rgba(59,130,246,.40);
  /* controls + chrome */
  --inp-bg:#ffffff; --inp-ro:#f3f5f9; --inp-dis:#eef1f5;
  --row-hover:rgba(16,24,40,.03); --th-bg:#f8fafc; --tfoot-bg:#f3f5f9;
  --tabs-bg:#eef2f7; --cbox-bg:#f8fafc; --ni-hover:rgba(16,24,40,.05);
  --bs-bg:#ffffff; --bs-hover:#f3f5f9;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-lg:0 12px 32px rgba(16,24,40,.18);
  --overlay:rgba(16,24,40,.55);
  --ring:0 0 0 3px rgba(79,70,229,.18);
  --tip-bg:#16233a; --tip-fg:#ffffff;
  --r-ctl:7px; --r-card:10px;
  /* type */
  --bf:'Atkinson Hyperlegible Next','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mn:'Atkinson Hyperlegible Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --hf:var(--bf);
  /* legacy aliases — the three shells used different names for the same
     thing; every old name resolves so inline styles and JS-built markup keep
     working in every shell. New code uses the canonical names above. */
  --sur:var(--card); --tx:var(--txt); --mu:var(--mut); --g:var(--grn); --b:var(--blu);
  --r:var(--red); --rd:var(--red); --amb-txt:var(--amb);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0e1320; --sb:#121828; --card:#161d2e; --c2:#1b2338;
  --bdr:#283251; --bdr2:#364367;
  --txt:#e8edf6; --dim:#b4bfd2; --mut:#8d9bb4; --faint:#6e7c96;
  --acc:#8b85ff; --acc-h:#a29dff; --adim:rgba(139,133,255,.14); --on-acc:#0e1320;
  --grn:#3ad28f; --grn-f:#22c55e; --grn-f2:#22c55e; --gdim:rgba(34,197,94,.14); --on-grn:#0e1320;
  --amb:#f5b942; --amb-f:#f59e0b; --wdim:rgba(245,158,11,.16); --on-amb:#0e1320;
  --red:#f4807d; --red-f:#dc2626; --rdim:rgba(239,68,68,.14); --on-red:#ffffff;
  --blu:#7cb0ff; --blu-f:#3b82f6; --bdim:rgba(59,130,246,.16);
  --p:#b39cff; --p-f:#8b5cf6; --pdim:rgba(139,92,246,.16);
  --teal:#5eead4; --teal-f:#14b8a6; --tdim:rgba(20,184,166,.16);
  --ok-fg:#3ad28f;     --ok-bg:rgba(34,197,94,.14);     --ok-bd:rgba(34,197,94,.42);
  --warn-fg:#f5b942;   --warn-bg:rgba(245,158,11,.16);  --warn-bd:rgba(245,158,11,.45);
  --danger-fg:#f4807d; --danger-bg:rgba(239,68,68,.14); --danger-bd:rgba(239,68,68,.42);
  --info-fg:#7cb0ff;   --info-bg:rgba(59,130,246,.16);  --info-bd:rgba(59,130,246,.42);
  --inp-bg:#121828; --inp-ro:#141b2b; --inp-dis:#1b2338;
  --row-hover:rgba(255,255,255,.03); --th-bg:#1b2338; --tfoot-bg:#1b2338;
  --tabs-bg:#121828; --cbox-bg:#121828; --ni-hover:rgba(255,255,255,.05);
  --bs-bg:#1b2338; --bs-hover:#222c44;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.30);
  --shadow-lg:0 16px 40px rgba(0,0,0,.50);
  --overlay:rgba(5,8,16,.65);
  --ring:0 0 0 3px rgba(139,133,255,.25);
  --tip-bg:#2a3450; --tip-fg:#eef2f8;
  color-scheme:dark;
}

/* ── 2. BASE ───────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--bf);font-size:13px;line-height:1.45;color:var(--txt);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
body.app-payroll,body.app-accounts,body.app-ops,body.app-jobs{display:flex;height:100vh;overflow:hidden}
h1,h2,h3,h4{font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--txt)}
h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4{font-size:13px}
p{line-height:1.5}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
b,strong{font-weight:600}
code{font-family:var(--mn);font-size:.92em;background:var(--c2);border:1px solid var(--bdr);border-radius:4px;padding:.05em .35em}
hr,.hr{border:none;border-top:1px solid var(--bdr);margin:14px 0}
::selection{background:var(--adim)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box;border:2px solid transparent}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.mn{font-family:var(--mn)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--mut)}
/* Icons (js/core/icons.js): currentColor, sized here, never by inline width. */
.ic{width:16px;height:16px;flex:none;vertical-align:-3px;display:inline-block;stroke-width:2}
.ic-sm{width:14px;height:14px;vertical-align:-2px}
.ic-lg{width:18px;height:18px;vertical-align:-4px}
.ic-xl{width:22px;height:22px}
.ic-xxl{width:28px;height:28px}
/* legacy emoji slot in nav items — now holds an svg */
.ni .ic,.nav-group-hd .ic{color:var(--mut)}

/* ── 3. SHELL ──────────────────────────────────────────────────────── */
.sidebar{
  width:236px;background:var(--sb);border-right:1px solid var(--bdr);display:flex;flex-direction:column;
  flex-shrink:0;overflow:hidden;transition:width .16s ease,background .2s,border-color .2s;
}
/* Only the nav scrolls: the logo row and the footer (profile, log out) stay put. */
.sb-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.logo{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bdr);min-height:52px}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--acc);color:var(--on-acc);display:inline-flex;align-items:center;justify-content:center;flex:none}
.logo-mark .ic{width:17px;height:17px;vertical-align:0}
.logo h2{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--txt);line-height:1.15}
.logo small{display:block;font-size:10.5px;color:var(--mut);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.ns{padding:8px 10px 2px}
.ns+.ns{padding-top:4px}
.nsl{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:10.5px;font-weight:600;color:var(--mut);letter-spacing:.07em;text-transform:uppercase;
  padding:6px 10px 5px;border-radius:6px;cursor:pointer;user-select:none;transition:color .15s,background .15s;
}
.nsl:hover{color:var(--txt);background:var(--ni-hover)}
.nsl::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 4px 3px 0;opacity:.7;transition:transform .18s}
.ns.collapsed .nsl::after{transform:rotate(-45deg);margin-bottom:0}
/* A fold applies while the sidebar is open, and steps aside for the one
   synchronous read navItemPermitted() (js/core/sidebar.js) makes. */
html:not(.sb-collapsed):not(.nav-measure) .ns.collapsed>.ni{display:none}
.ni{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--dim);line-height:1.3;margin-bottom:1px;transition:background .12s,color .12s;
  user-select:none;
}
.ni:hover{background:var(--ni-hover);color:var(--txt)}
.ni.on{background:var(--adim);color:var(--acc);font-weight:600}
.ni.on .ic{color:var(--acc)}
.ni .ic{width:16px;height:16px}
.ni .ni-aux{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--faint)}
.ni .ni-aux .ic{width:13px;height:13px;color:inherit}
/* collapsible group (Ops pattern, now shared) */
.nav-group{margin-bottom:2px}
.nav-group-hd{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;user-select:none;
  color:var(--txt);font-size:13px;font-weight:600;transition:background .12s;
}
.nav-group-hd:hover{background:var(--ni-hover)}
.nav-group-hd .ic{width:16px;height:16px}
.nav-caret{margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transform:rotate(45deg);margin-bottom:3px;transition:transform .18s;font-size:0;color:transparent}
.nav-group.collapsed .nav-caret{transform:rotate(-45deg);margin-bottom:0}
html:not(.sb-collapsed):not(.nav-measure) .nav-group.collapsed .nav-group-body{display:none}
.nav-group-body{margin-top:1px;padding-left:12px}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:var(--on-acc);font-size:10px;font-weight:700;border-radius:999px;padding:0 6px;min-width:18px;height:18px;margin-left:auto;line-height:1}
.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--amb-f);flex:0 0 auto;box-shadow:0 0 0 3px var(--wdim)}
.sb-foot{margin-top:auto;padding:12px;border-top:1px solid var(--bdr);display:flex;flex-direction:column;gap:6px}
.sb-user{display:flex;align-items:center;gap:9px;padding:4px 4px 8px;font-size:12.5px;color:var(--dim);min-width:0}
.sb-user .ic{color:var(--mut)}
.sb-user b,.sb-user span{color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-foot .btn{width:100%;justify-content:flex-start}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{
  height:52px;background:var(--sb);border-bottom:1px solid var(--bdr);padding:0 20px;display:flex;align-items:center;
  gap:12px;flex-shrink:0;transition:background .2s;
}
.pg-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;flex-shrink:0}
.tbr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tb-spacer{flex:1}
.tb-ib,#theme-toggle{
  width:32px;height:32px;border-radius:var(--r-ctl);border:1px solid var(--bdr2);background:var(--card);color:var(--dim);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .12s,color .12s,border-color .12s;
  font-family:inherit;padding:0;
}
.tb-ib:hover,#theme-toggle:hover{background:var(--bs-hover);color:var(--txt);border-color:var(--bdr2)}
#theme-toggle .toggle-track,#theme-toggle #theme-label{display:none}
.modsw{display:inline-flex;align-items:center;background:var(--tabs-bg);border:1px solid var(--bdr);border-radius:8px;padding:2px;gap:2px;flex:none}
.modsw-opt{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;color:var(--mut);cursor:pointer;user-select:none;white-space:nowrap;transition:background .12s,color .12s;line-height:1.4}
.modsw-opt:hover{color:var(--txt)}
.modsw-opt.on{background:var(--card);color:var(--txt);font-weight:600;box-shadow:var(--shadow);cursor:default}
.modsw-opt .ic{width:14px;height:14px;color:var(--mut)}
.modsw-opt.on .ic{color:var(--acc)}
.content{flex:1;overflow:auto;padding:20px 22px 40px;position:relative}
.page{display:none}.page.on{display:block}
.app-payroll .tab{display:none}.app-payroll .tab.active{display:block;animation:ft-fade .14s ease}
@keyframes ft-fade{from{opacity:0}to{opacity:1}}
/* Page intro copy (replaces the old display headings). */
.pgt{display:none}
.pgs,.pg-intro{font-size:12.5px;color:var(--mut);margin:0 0 14px;line-height:1.5;max-width:960px}

/* ── 4. COMPONENTS ─────────────────────────────────────────────────── */
/* Cards */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-card);padding:16px;margin-bottom:16px;box-shadow:var(--shadow);transition:background .2s,border-color .2s}
.card-hd,.ct{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--txt);letter-spacing:-.005em;margin-bottom:14px;text-transform:none;
}
.card-hd .ic,.ct .ic{color:var(--mut)}
.ca{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card-sub{font-size:12px;color:var(--mut);font-weight:400;margin-top:-10px;margin-bottom:14px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--r-ctl);border:1px solid transparent;background:var(--bs-bg);color:var(--txt);
  font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;
  cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s,box-shadow .12s;
  text-decoration:none;user-select:none;vertical-align:middle;
}
.btn .ic{width:14px;height:14px;vertical-align:0}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;filter:none!important;transform:none!important}
.btn:hover{text-decoration:none}
.bsm{height:26px;padding:0 9px;font-size:11.5px}.bsm .ic{width:13px;height:13px}
.bxs{height:22px;padding:0 7px;font-size:11px}.bxs .ic{width:12px;height:12px}
.ib{width:32px;padding:0}.bsm.ib{width:26px}.bxs.ib{width:22px}
/* primary */
.bp{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.bp:hover:not(:disabled){background:var(--acc-h);border-color:var(--acc-h)}
.bp .ic{color:inherit}
/* secondary (Payroll .bo · Accounts/Ops .bs) */
.bo,.app-accounts .bs,.app-ops .bs,.app-jobs .bs,.bedit{background:var(--card);color:var(--txt);border-color:var(--bdr2)}
.bo:hover:not(:disabled),.app-accounts .bs:hover:not(:disabled),.app-ops .bs:hover:not(:disabled),.app-jobs .bs:hover:not(:disabled),.bedit:hover:not(:disabled){background:var(--bs-hover);border-color:var(--bdr2)}
.bedit{height:26px;padding:0 9px;font-size:11.5px}
/* success — Payroll .bs · Accounts/Ops .bok */
.app-payroll .bs,.bok,.bsolid-ok{background:var(--grn-f);color:var(--on-grn);border-color:var(--grn-f)}
.app-payroll .bs:hover:not(:disabled),.bok:hover:not(:disabled){filter:brightness(1.08)}
/* danger — soft by default; .bsolid for the final confirm of a destructive dialog */
.bd{background:var(--rdim);color:var(--red);border-color:var(--danger-bd)}
.bd:hover:not(:disabled){background:var(--danger-bg);filter:brightness(.97)}
html[data-theme="dark"] .bd:hover:not(:disabled){filter:brightness(1.15)}
.bd.bsolid{background:var(--red-f);color:var(--on-red);border-color:var(--red-f)}
.bd.bsolid:hover:not(:disabled){filter:brightness(1.08)}
/* info / purple soft */
.bb2,.bbl{background:var(--bdim);color:var(--blu);border-color:var(--info-bd)}
.bb2:hover:not(:disabled),.bbl:hover:not(:disabled){filter:brightness(1.05)}
.bpurp{background:var(--pdim);color:var(--p);border-color:transparent}
.bpurp:hover:not(:disabled){filter:brightness(1.05)}
/* exports — secondary with a tinted icon, never loud solids */
.bexcel,.bxl,.bsuc,.bpdf{background:var(--card);color:var(--txt);border-color:var(--bdr2)}
.bexcel:hover:not(:disabled),.bxl:hover:not(:disabled),.bsuc:hover:not(:disabled),.bpdf:hover:not(:disabled){background:var(--bs-hover)}
.bexcel .ic,.bxl .ic,.bsuc .ic{color:var(--grn)}
.bpdf .ic{color:var(--red)}
/* ghost / link-like */
.bghost{background:transparent;border-color:transparent;color:var(--dim)}
.bghost:hover:not(:disabled){background:var(--ni-hover);color:var(--txt)}
.blink{background:none;border:none;padding:0;height:auto;color:var(--acc);font-weight:500}
.blink:hover{text-decoration:underline}
/* button rows */
.br{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}

/* Inputs */
label{display:block;font-size:11px;font-weight:500;color:var(--mut);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
input,select,textarea{
  width:100%;height:32px;background:var(--inp-bg);border:1px solid var(--bdr2);border-radius:var(--r-ctl);
  padding:0 10px;color:var(--txt);font-family:inherit;font-size:13px;line-height:1.3;
  transition:border-color .12s,box-shadow .12s,background .12s;appearance:none;-webkit-appearance:none;
}
textarea{height:auto;min-height:72px;padding:8px 10px;resize:vertical;line-height:1.45}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:var(--ring);background:var(--inp-bg)}
input[readonly]{background:var(--inp-ro);color:var(--dim);cursor:default}
input:disabled,select:disabled,textarea:disabled{background:var(--inp-dis);color:var(--faint);border-color:var(--bdr);cursor:not-allowed;opacity:1}
input[type="checkbox"],input[type="radio"]{
  appearance:auto;-webkit-appearance:auto;width:15px;height:15px;min-width:15px;padding:0;margin:0;
  background:initial;border:initial;border-radius:initial;box-shadow:none;accent-color:var(--acc);cursor:pointer;vertical-align:-2px;
}
input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:none}
input[type="file"]{height:auto;padding:5px 8px;font-size:12px;color:var(--dim);background:var(--c2)}
input[type="file"]::file-selector-button{font:inherit;font-size:12px;font-weight:500;color:var(--txt);background:var(--card);border:1px solid var(--bdr2);border-radius:6px;padding:3px 9px;margin-right:9px;cursor:pointer}
input[type="color"]{padding:2px;width:40px}
input[type="month"],input[type="date"],input[type="time"],input[type="datetime-local"]{padding-right:6px}
select{
  padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2366758c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
select option,select optgroup{background:var(--card);color:var(--txt)}
select optgroup{color:var(--mut);font-style:normal;font-weight:600}
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;min-width:0}
.fg label,.ff label{margin:0}
.ff{display:flex;flex-direction:column;gap:4px;min-width:0}
.ff select,.ff input{width:160px;height:30px;font-size:12.5px}
.fr{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:flex-end}
.gr2,.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gr3,.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1200px){.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.g3,.g4,.g5,.g6,.gr3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g2,.g3,.g4,.g5,.g6,.gr2,.gr3{grid-template-columns:1fr}}
.hint,.tk-hint{font-size:11.5px;color:var(--mut);text-transform:none;letter-spacing:0;font-weight:400}

/* Tables */
.tw{overflow-x:auto;border:1px solid var(--bdr);border-radius:8px;background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th,th{
  background:var(--th-bg);padding:8px 10px;text-align:left;font-size:11px;font-weight:600;color:var(--mut);
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--bdr);white-space:nowrap;position:sticky;top:0;z-index:1;
}
thead th.sortable{cursor:pointer;user-select:none}
thead th.sortable:hover{color:var(--txt);background:var(--row-hover)}
th.num,td.num{text-align:right}
tbody tr{border-bottom:1px solid var(--bdr);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--row-hover)}
td,tbody td{padding:8px 10px;color:var(--txt);vertical-align:middle;border-bottom:1px solid var(--bdr)}
tr:last-child>td{border-bottom:none}
tfoot td{padding:9px 10px;font-weight:600;border-top:2px solid var(--bdr);background:var(--tfoot-bg)}
tbody tr:has(>td>input[type="checkbox"]:checked),tbody tr:has(input.inv-sel:checked),tbody tr:has(input.ieincome-sel:checked),tbody tr:has(input.ieexpense-sel:checked){background:var(--adim)!important}
/* Row actions in FIXED SLOTS (DESIGN.md §7): each slot is its own narrow cell,
   so View · next step · More line up down the whole page by themselves, whatever
   a given row offers. Shrink-to-content and never wrapping; tight inner gaps,
   the table's own padding on the outer edges. */
td.ra{width:1%;white-space:nowrap;padding-left:3px;padding-right:3px}
td.ra1{padding-left:10px}
td.ra3{padding-right:10px}
/* Row "More" menu (js/core/actionMenu.js) */
.ft-menu{position:fixed;z-index:9500;min-width:168px;max-width:300px;padding:4px;background:var(--card);border:1px solid var(--bdr);border-radius:8px;box-shadow:var(--shadow-lg)}
.ft-mi{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--txt);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;white-space:nowrap}
.ft-mi .ic{flex:none;color:var(--mut)}
.ft-mi:hover:not(:disabled),.ft-mi:focus-visible{background:var(--ni-hover)}
.ft-mi:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ft-mi.danger,.ft-mi.danger .ic{color:var(--danger-fg)}
.ft-mi.danger:hover:not(:disabled),.ft-mi.danger:focus-visible{background:var(--danger-bg)}
.ft-mi:disabled{opacity:.5;cursor:not-allowed}
.ft-msep{height:1px;margin:4px 2px;background:var(--bdr)}
/* A menu you pick things in (actionMenu.js check items): a caption, tick boxes
   that keep the menu open, and a muted note at the right edge of an item. */
.ft-mhd{padding:6px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.ft-mi .ft-mmeta{margin-left:auto;padding-left:16px;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.ft-mck{flex:none;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1.5px solid var(--bdr2);border-radius:4px;background:var(--card)}
.ft-mi .ft-mck .ic{width:11px;height:11px;color:var(--on-acc);visibility:hidden}
.ft-mi[aria-checked="true"] .ft-mck{background:var(--acc);border-color:var(--acc)}
.ft-mi[aria-checked="true"] .ft-mck .ic{visibility:visible}
.ft-mnote{margin:4px 2px;padding:7px 10px;border:1px solid var(--warn-bd);border-radius:6px;background:var(--warn-bg);color:var(--warn-fg);font-size:12px;line-height:1.45;white-space:normal}
/* A record deep link's landing row (FTRoute.takeOpen): a brief tint that says
   "this one", then the row's own colour again. */
@keyframes ftRowFlash{0%,40%{background-color:var(--adim)}100%{background-color:transparent}}
tr.row-flash>td{animation:ftRowFlash 2.8s ease-out 1}
.tm{font-family:var(--mn);font-size:12px}
.tg{color:var(--grn);font-family:var(--mn);font-weight:600}
.ty{color:var(--amb);font-family:var(--mn)}.tr2{color:var(--red);font-family:var(--mn)}
.tb{color:var(--blu);font-family:var(--mn)}.tp{color:var(--p);font-family:var(--mn)}.tt{color:var(--teal);font-family:var(--mn)}
/* in-table editable cells (accounts bulk grids) */
.btbl input,.btbl select{height:26px;font-size:11.5px;padding:0 6px;min-width:55px;border-color:transparent;background:var(--inp-ro)}
.btbl input:focus,.btbl select:focus{border-color:var(--acc);background:var(--inp-bg)}
.btbl td{padding:4px 5px!important}
/* pagination */
.pgr,.form-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 4px 0;font-size:12px;color:var(--mut)}
.pgr-btn{height:28px;padding:0 10px!important;font-size:12px!important;background:var(--card)!important;border:1px solid var(--bdr2)!important;color:var(--txt)!important;border-radius:var(--r-ctl);cursor:pointer}
.pgr-btn:hover:not(:disabled){background:var(--bs-hover)!important;border-color:var(--bdr2)!important;color:var(--txt)!important}
.pgr-btn:disabled{opacity:.5;cursor:not-allowed}
.pgr-info{font-family:var(--mn);font-size:12px;color:var(--mut)}

/* Badges / chips */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:600;
  letter-spacing:.01em;text-transform:none;line-height:1.5;white-space:nowrap;border:1px solid transparent;vertical-align:middle;
}
.badge .ic{width:12px;height:12px}
.b-ok,.bg-g,.bgg{background:var(--ok-bg);color:var(--ok-fg)}
.b-warn,.bg-a,.bgy{background:var(--warn-bg);color:var(--warn-fg)}
.b-danger,.bg-r,.bgr{background:var(--danger-bg);color:var(--danger-fg)}
.b-info,.bgb{background:var(--info-bg);color:var(--info-fg)}
.b-neutral,.bg-n{background:var(--c2);color:var(--dim);border-color:var(--bdr)}
.b-acc{background:var(--adim);color:var(--acc)}
.bgp{background:var(--pdim);color:var(--p)}.bgt{background:var(--tdim);color:var(--teal)}
.badge.bcode{font-family:var(--mn);font-size:12.5px;font-weight:700;letter-spacing:.03em;padding:2px 9px;background:var(--c2);color:var(--txt);border-color:var(--bdr)}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--c2);border:1px solid var(--bdr);border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--dim)}
.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip,.kv-v .chip{display:inline-flex;align-items:center;gap:5px;background:var(--c2);border:1px solid var(--bdr);border-radius:999px;padding:2px 9px;font-size:11.5px;color:var(--txt);text-decoration:none;margin:2px 4px 2px 0}
.chip:hover,.kv-v .chip:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}

/* Tabs (Accounts .tabs/.tab · Payroll .ptabs/.ptb · Ops sd-tabs) */
.tabs,.ptabs,.sd-tabs{display:inline-flex;gap:2px;margin-bottom:14px;background:var(--tabs-bg);border:1px solid var(--bdr);border-radius:8px;padding:2px;flex-wrap:wrap}
.tabs .tab,.ptb,.sd-tab{
  appearance:none;background:none;border:none;padding:5px 12px;border-radius:6px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:500;color:var(--dim);transition:background .12s,color .12s;text-transform:none;letter-spacing:0;line-height:1.4;
}
.tabs .tab:hover,.ptb:hover,.sd-tab:hover{color:var(--txt)}
.tabs .tab.on,.ptb.active,.sd-tab.on{background:var(--card);color:var(--txt);font-weight:600;box-shadow:var(--shadow)}
.tabs .tab.on:hover{color:var(--txt)}
.ptc{display:none}.ptc.active{display:block}
/* Segmented control (view switches) */
.seg,.sc-seg{display:inline-flex;border:1px solid var(--bdr2);border-radius:var(--r-ctl);overflow:hidden;background:var(--card)}
.seg-btn,.sc-seg-btn{
  height:30px;padding:0 11px;border:none;border-right:1px solid var(--bdr);background:transparent;color:var(--dim);
  font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;width:auto;
}
.seg-btn:last-child,.sc-seg-btn:last-child{border-right:none}
.seg-btn:hover,.sc-seg-btn:hover:not(.on):not(:disabled){color:var(--txt);background:var(--bs-hover)}
.seg-btn.active,.sc-seg-btn.on{background:var(--adim);color:var(--acc);font-weight:600}
.sc-seg-btn.on[data-v="1"]{background:var(--grn-f);color:var(--on-grn)}
.sc-seg-btn.on[data-v="0"]{background:var(--c2);color:var(--txt)}
.sc-seg-btn:disabled{cursor:not-allowed;opacity:.6}

/* Modals */
.mov,.modal-overlay{position:fixed;inset:0;background:var(--overlay);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.mov.on{display:flex}.modal-overlay{display:flex}
.mo,.modal{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-card);padding:22px 24px;width:560px;max-width:95vw;max-height:92vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);color:var(--txt);
}
.modal{max-width:720px;width:100%}
.mow{width:760px}.moxl{width:1060px}.mosm{width:400px}
.mo-title,.modal-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--txt);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px;text-transform:none}
.mo-title .ic,.modal-title .ic{color:var(--mut)}
.mo-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--bdr)}
.mo-sec{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--bdr)}
.mo-sec-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint);font-size:10.5px}
.view-sec{font-size:11px;font-weight:600;color:var(--acc);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--bdr)}
.view-sec:first-child{margin-top:0}
.kv{display:flex;gap:12px;padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--bdr)}
.kv:last-child{border-bottom:none}
.kv-k{flex:0 0 150px;color:var(--mut);font-size:11.5px}
.kv-v{flex:1;color:var(--txt);word-break:break-word}
.kv-empty{color:var(--faint)}
.kv-v .doc-name{font-family:var(--mn);font-size:11.5px;margin-right:6px}

/* Toasts */
#toast,.toast{
  position:fixed;bottom:20px;right:20px;z-index:9999;max-width:420px;
  background:var(--card);color:var(--txt);border:1px solid var(--bdr);border-left:3px solid var(--acc);border-radius:8px;
  padding:10px 14px;font-size:12.5px;font-weight:500;box-shadow:var(--shadow-lg);
  transform:translateY(80px);opacity:0;transition:transform .25s,opacity .25s;pointer-events:none;line-height:1.4;
}
#toast.show,.toast.show{transform:translateY(0);opacity:1}
.toast.ok,#toast.ok{border-left-color:var(--grn-f2)}
.toast.err,#toast.err{border-left-color:var(--red-f)}
.toast.warn,#toast.warn{border-left-color:var(--amb-f)}

/* Notes (info / warning / danger / ok) */
.note,.info,.tnote,.tpli,.berr,.att-note,.att-cfg-err{
  display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:8px;font-size:12.5px;line-height:1.5;margin-bottom:12px;
  background:var(--c2);border:1px solid var(--bdr);border-left:3px solid var(--blu-f);color:var(--dim);
}
.note .ic,.info .ic{flex:none;margin-top:2px;color:var(--blu)}
.note-info,.tpli,.info,.att-note{border-left-color:var(--blu-f)}
.note-warn,.tnote{border-left-color:var(--amb-f);color:var(--txt)}
.note-warn .ic,.tnote .ic{color:var(--amb)}
.note-danger,.berr,.att-cfg-err{border-left-color:var(--red-f);color:var(--txt)}
.note-danger .ic,.berr .ic{color:var(--red)}
.note-ok{border-left-color:var(--grn-f2)}
.note-ok .ic{color:var(--grn)}
.tnote{margin-top:6px;margin-bottom:0}

/* Empty states */
.empty{text-align:center;padding:36px 16px;color:var(--mut)}
.empty .ei{color:var(--faint);margin-bottom:8px;font-size:0}
.empty .ei .ic{width:26px;height:26px}
.empty p{font-size:12.5px;margin:0}
.empty .btn{margin-top:10px}

/* Dropdown lists (js/core/dd.js, searchSelect.js, multiFilter.js) */
.site-dd-wrap{position:relative}
.site-dd-list{display:none;position:fixed;max-height:240px;overflow-y:auto;background:var(--card);border:1px solid var(--bdr);border-radius:8px;z-index:9999;box-shadow:var(--shadow-lg);padding:4px}
.site-dd-opt{padding:6px 10px;font-size:12.5px;color:var(--txt);cursor:pointer;border-radius:5px;white-space:nowrap;transition:background .1s}
.site-dd-opt:hover,.site-dd-opt.focused{background:var(--row-hover)}
.site-dd-opt.selected,.site-dd-opt.on{background:var(--adim);color:var(--acc)}
.site-dd-clear{color:var(--mut);font-style:normal;border-bottom:1px solid var(--bdr);border-radius:0;margin-bottom:4px}
.site-dd-empty{padding:8px 10px;font-size:12px;color:var(--mut)}
.site-dd-wrap .bi[readonly]{background:var(--inp-bg);border-color:var(--bdr2);color:var(--txt);font-family:var(--bf);font-weight:400;cursor:pointer}
.site-dd-wrap .bi[readonly]:focus{border-color:var(--acc)}

/* Progress bars */
.pw,.pb{height:6px;background:var(--bdr);border-radius:6px;overflow:hidden;margin:4px 0}
.pw .pb,.pf{height:100%;background:var(--acc);border-radius:6px;transition:width .25s ease;margin:0}
.pf{display:block}

/* Dropzones */
.uz{border:1.5px dashed var(--bdr2);border-radius:var(--r-card);padding:24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;position:relative;background:var(--c2)}
.uz:hover,.uz.dz-over,[data-drop].dz-over{border-color:var(--acc);background:var(--adim)}
.uz input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;height:100%}
.uz .ui{color:var(--faint);margin-bottom:6px;font-size:0}
.uz .ui .ic{width:24px;height:24px}
.uz p{font-size:12.5px;color:var(--dim)}.uz small{font-size:11px;color:var(--mut)}

/* Stat tiles (shared geometry; colours per module) */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.sc{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-card);padding:14px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.sc::before,.sc::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc)}
.sc::after{display:none}
.sc.g::before{background:var(--grn-f2)}.sc.r::before{background:var(--red-f)}.sc.a::before,.sc.y::before{background:var(--amb-f)}
.sc.b::before{background:var(--blu-f)}.sc.p::before{background:var(--p-f)}.sc.t::before{background:var(--teal-f)}
.sl,.slbl{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.sv{font-family:var(--mn);font-size:20px;font-weight:600;color:var(--txt);line-height:1.2}
.sc.g .sv{color:var(--grn)}.sc.r .sv{color:var(--red)}.sc.a .sv,.sc.y .sv{color:var(--amb)}.sc.b .sv{color:var(--blu)}.sc.p .sv{color:var(--p)}.sc.t .sv{color:var(--teal)}
.sc-sub,.ssub{font-size:11.5px;color:var(--mut)}

/* Progress strips (Bulk Payroll month, Ops attendance window) */
.pr-sum,.ops-sum,.att-strip{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-card);padding:12px 14px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.pr-sum-head,.ops-sum-head,.att-strip-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.pr-sum-title,.ops-sum-title,.att-strip-title{font-size:13px;font-weight:600;color:var(--txt);letter-spacing:0;font-family:var(--bf);display:inline-flex;align-items:center;gap:7px}
.pr-sum-title .ic,.ops-sum-title .ic{color:var(--grn)}
.pr-sum-pct,.ops-sum-pct{font-family:var(--mn);font-size:20px;font-weight:600;color:var(--grn);line-height:1}
.pr-sum-pct-sign,.ops-sum-pct-sign{font-size:12px;font-weight:600;margin-left:1px;opacity:.75}
.pr-sum-bar,.ops-sum-bar{height:8px;border-radius:99px;background:var(--bdr);overflow:hidden}
.pr-sum-fill,.ops-sum-fill{height:100%;border-radius:99px;background:var(--grn-f2);transition:width .5s cubic-bezier(.4,0,.2,1)}
.pr-sum-fill.is-full{background:var(--grn-f)}
.pr-sum-chips,.ops-sum-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pr-chip,.ops-chip{font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--bdr);background:var(--c2);color:var(--dim);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pr-chip b,.ops-chip b{font-family:var(--mn);font-size:12px;font-weight:700}
.pr-chip-done,.ops-chip-done{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok-fg)}
.pr-chip-pend,.ops-chip-pend{border-color:var(--warn-bd);background:var(--warn-bg);color:var(--warn-fg)}
.pr-chip-hold{border-color:var(--bdr2);background:var(--pdim);color:var(--p)}
.ops-chip-sign{border-color:var(--info-bd);background:var(--info-bg);color:var(--info-fg)}
.ops-chip-none{border-color:var(--bdr)}
.pr-chip-tot,.ops-chip-tot{color:var(--txt)}

/* Section headers inside long forms (payroll) */
.sec-head{font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:8px;padding:6px 10px;border-radius:6px;display:flex;align-items:center;gap:7px;background:var(--c2);border:1px solid var(--bdr);color:var(--txt);text-transform:none}
.sec-head .ic{width:14px;height:14px}
.sh-green{color:var(--grn)}.sh-blue{color:var(--blu)}.sh-purple{color:var(--p)}.sh-red{color:var(--red)}.sh-teal{color:var(--teal)}.sh-yellow{color:var(--amb)}
.sdiv{height:1px;background:var(--bdr);margin:12px 0}

/* Key/value rows and detail lists (shared) */
.dtr{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bdr);font-size:12.5px}.dtr:last-child{border-bottom:none}

/* Loading */
.spin,.ops-spin,.bk-ps-spin,.psi-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--bdr2);border-top-color:var(--acc);border-radius:50%;animation:ft-rot .7s linear infinite;flex:none;vertical-align:-2px}
@keyframes ft-rot{to{transform:rotate(360deg)}}
.ops-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;overflow:hidden;opacity:0;transition:opacity .25s;pointer-events:none}
.ops-progress.on{opacity:1}
.ops-progress::before{content:'';position:absolute;top:0;height:100%;width:35%;background:var(--acc);border-radius:0 3px 3px 0;animation:ops-prog 1.1s ease-in-out infinite}
@keyframes ops-prog{0%{left:-35%;width:35%}50%{width:55%}100%{left:100%;width:35%}}

/* Permission matrix pills (roles page) */
.pm-pill{height:26px;padding:0 12px;border-radius:999px;border:1px solid var(--bdr2);background:var(--card);color:var(--dim);cursor:pointer;font-size:11.5px;font-weight:500;font-family:inherit;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}
.pm-pill:hover{border-color:var(--acc);color:var(--txt)}
.pm-pill.pm-on{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:600}

/* Switches */
.ops-switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:11.5px;white-space:nowrap;user-select:none;margin-right:8px}
.ops-switch>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ops-switch .ops-sw{position:relative;width:34px;height:18px;border-radius:999px;background:var(--bdr2);transition:background .18s;flex:none}
.ops-switch .ops-sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ops-switch>input:checked + .ops-sw{background:var(--grn-f)}
.ops-switch>input:checked + .ops-sw::after{transform:translateX(16px)}
.ops-switch .ops-sw-lbl{color:var(--mut);transition:color .18s}
.ops-switch>input:checked ~ .ops-sw-lbl{color:var(--grn);font-weight:600}
.ops-switch:focus-within .ops-sw{box-shadow:var(--ring)}

/* ── 5. PRINT + MOTION ─────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,#theme-toggle,.modsw,#toast,.toast,.sb-tip{display:none!important}
  body{display:block;height:auto;overflow:visible;background:#fff;color:#000}
  .content{overflow:visible;padding:0}
  .card{box-shadow:none;border-color:#ccc}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* no fade: the landing row simply stays tinted until the list next renders */
  tr.row-flash>td{animation:none;background-color:var(--adim)}
}

/* ── Topbar page-level filters (Accounts dashboard / reports): labels sit
   BESIDE their fields so the 52px bar stays one line. ─────────────────── */
.topbar .tbr .ff{flex-direction:row;align-items:center;gap:6px}
.topbar .tbr .ff label,.topbar .tbr>label{margin:0;white-space:nowrap}
.topbar .tbr input,.topbar .tbr select,.topbar .tbr .ff input,.topbar .tbr .ff select{height:30px;font-size:12.5px}
.topbar .tbr>div{display:flex;align-items:center;gap:6px}

/* ── Fixed topbar right cluster (user request, Oct 2026): the module switch
   is ALWAYS the right-most element and the theme toggle sits just left of it,
   in every shell and on every page — whatever filters a page adds to the bar.
   Done with flex order + an auto margin so the DOM order, a missing spacer or
   a hidden filter wrap can never move it. ───────────────────────────────── */
.topbar{flex-wrap:nowrap}
.topbar .tbr{flex-wrap:nowrap;min-width:0}
.topbar #theme-toggle{order:98;margin-left:auto}
.topbar .modsw{order:99;margin-left:0}
.topbar .tb-spacer{order:50}
/* Topbar filter fields never shrink below their own width (the site picker
   was collapsing under the From month on the Accounts dashboard). */
.topbar .tbr>*,.topbar .tbr .ff{flex:none}
.topbar .tbr .ff input,.topbar .tbr .ff select{width:auto;min-width:150px}
/* Filters that do not fit on the bar's one row (a narrow window, or the
   sidebar open) take a second row instead of running under the theme toggle
   and module switch. js/core/sidebar.js (fitTopbar) sets .tb-wrap; !important
   because the Accounts filter wrap carries an inline flex:1. */
.topbar.tb-wrap{flex-wrap:wrap;height:auto;min-height:52px;padding-top:10px;padding-bottom:10px;row-gap:8px}
.topbar.tb-wrap>.tbr{order:100;flex:1 1 100% !important}
/* Ops' collapsible groups use the same small-caps section label as the
   Accounts/Payroll sections, so the three sidebars read as one. */
.nav-group-hd{font-size:10.5px;font-weight:600;color:var(--mut);letter-spacing:.07em;text-transform:uppercase;padding:6px 10px 5px;gap:7px}
.nav-group-hd:hover{color:var(--txt);background:var(--ni-hover)}
.nav-group-hd .ic{width:13px;height:13px;color:var(--mut)}
.nav-group-body{padding-left:0}
.nav-group-body .ni{padding-left:10px}

/* ── Sidebar rail (user request, Oct 2026) ───────────────────────────────
   html.sb-collapsed turns the 236px sidebar into a 64px column of icons in
   every shell. theme.js sets it in <head> (no wide-then-narrow flash) and
   js/core/sidebar.js flips it — the topbar's #sb-toggle, or Ctrl+\ — under
   the SHARED key 'ft_sidebar', so one choice follows the user across
   Payroll, Accounts and Ops.
   ⚠ Every page stays reachable: section labels and the Ops group headers
   give way to hairlines, and a FOLDED section still lists its items, since
   the two fold rules above only apply while the sidebar is open
   (html:not(.sb-collapsed)). Nothing here SETS a display value on a nav
   item, so an item a role may not see (display:none !important) stays
   hidden in the rail as well. Labels go to font-size:0 rather than
   display:none: they stay in the accessibility tree, and the hover tooltip
   (#sb-tip) reads them. ─────────────────────────────────────────────────── */
html.sb-collapsed .sidebar{width:64px}
html.sb-collapsed .logo{justify-content:center;gap:0;padding:14px 0}
html.sb-collapsed .logo>:not(.logo-mark){display:none}
/* gutters on both edges keep the icons centred whether or not the nav scrolls */
html.sb-collapsed .sb-nav{padding:6px 0 8px;scrollbar-gutter:stable both-edges}
html.sb-collapsed .ns{padding:0 4px}
html.sb-collapsed .ns-void{display:none}
/* .ns-lead / .ns-void are measured by sidebar.js (markSections) */
html.sb-collapsed .ns:not(.ns-lead)::before{content:'';display:block;width:22px;height:1px;background:var(--bdr2);margin:7px auto}
html.sb-collapsed .nsl,html.sb-collapsed .nav-group-hd{display:none}
html.sb-collapsed .nav-group{margin:0}
html.sb-collapsed .nav-group-body{margin:0;padding:0}
html.sb-collapsed .ni,html.sb-collapsed .nav-group-body .ni{
  position:relative;justify-content:center;gap:0;height:34px;padding:0;margin-bottom:2px;font-size:0;line-height:0;
}
html.sb-collapsed .ni .ic{width:18px;height:18px;vertical-align:0}
html.sb-collapsed .ni .ni-aux{display:none}
/* a pending count rides the icon's corner, ringed in the rail's own ground */
html.sb-collapsed .ni .nav-badge{
  position:absolute;top:2px;right:2px;margin:0;height:15px;min-width:15px;padding:0 4px;
  font-size:9.5px;line-height:1;box-shadow:0 0 0 2px var(--sb);
}
html.sb-collapsed .sb-foot{padding:8px 0 10px;align-items:center;gap:4px}
html.sb-collapsed .sb-user{justify-content:center;padding:2px 0 4px}
html.sb-collapsed .sb-user span{display:none}
html.sb-collapsed .sb-foot .btn{width:40px;height:32px;padding:0;gap:0;justify-content:center;font-size:0}
html.sb-collapsed .sb-foot .btn .ic{width:16px;height:16px;vertical-align:0}
/* the toggle: a quiet ghost button, always the first thing in the topbar */
.topbar .sb-toggle{order:-1;margin-left:-8px;border-color:transparent;background:transparent;color:var(--mut)}
.topbar .sb-toggle:hover{background:var(--ni-hover);border-color:transparent;color:var(--txt)}
/* the rail's tooltip: a child of <body>, positioned by sidebar.js beside the item */
.sb-tip{
  position:fixed;left:0;top:0;z-index:9000;pointer-events:none;display:flex;align-items:center;gap:8px;max-width:280px;
  padding:6px 10px;border-radius:7px;background:var(--tip-bg);color:var(--tip-fg);box-shadow:var(--shadow-lg);
  font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translate(-4px,-50%);transition:opacity .1s,transform .1s,visibility .1s;
}
.sb-tip.on{opacity:1;visibility:visible;transform:translate(0,-50%)}
/* dark: a raised slate pill sits close to the cards' own tone — a hairline keeps its edge */
html[data-theme="dark"] .sb-tip{box-shadow:0 0 0 1px var(--bdr2),var(--shadow-lg)}
.sb-tip::before{content:'';position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;background:inherit;transform:rotate(45deg);border-radius:1px}
.sb-tip-l{overflow:hidden;text-overflow:ellipsis}
.sb-tip-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--acc);color:var(--on-acc);font-size:10px;font-weight:700}

/* ── Keyboard default — the button Enter presses (js/core/enterKey.js) ──
   The engine sets .ft-enter (never set it by hand) on exactly the button Enter
   would press, and this draws a small return-key cap after its label. Desktop
   pointers only; hidden on a disabled button; on a page form it appears while
   the form has focus (a [data-enter-scope="always"] form shows it throughout). */
@media (hover:hover) and (pointer:fine){
  .ft-enter::after{
    content:"";display:inline-block;flex:none;width:19px;height:15px;vertical-align:-3px;
    background-color:currentColor;opacity:.78;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='24' height='18' rx='4.5'/%3E%3Cpath d='M18 5.5v3.7a2.3 2.3 0 0 1-2.3 2.3H8.3'/%3E%3Cpath d='m11 8.6-2.9 2.9 2.9 2.9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='24' height='18' rx='4.5'/%3E%3Cpath d='M18 5.5v3.7a2.3 2.3 0 0 1-2.3 2.3H8.3'/%3E%3Cpath d='m11 8.6-2.9 2.9 2.9 2.9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .ft-enter:not(.btn)::after{margin-left:6px}
  .ft-enter.bsm::after{width:16px;height:13px;vertical-align:-2px}
  .ft-enter:disabled::after,.ft-enter[aria-disabled="true"]::after{display:none}
  [data-enter-scope]:not([data-enter-scope="always"]):not(:focus-within) .ft-enter::after{display:none}
}
/* The in-app dialog parks focus on its box (not the red button) for a
   destructive confirm, so Enter cannot answer it — the box itself draws no ring. */
#pyConfirmBox:focus,#pyConfirmBox:focus-visible{outline:none}