/* ============================================================================
   theme.css — Platinum "Minimal Mono" reskin (v2.23)
   Loaded AFTER styles.css. Adds: design tokens (light + dark via html[data-theme]),
   the squared blue-forward look, the collapsible left sidebar, and the frosted
   dark sign-in. Keeps every existing id/class so app.js + auth.js keep working.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --blue:#004EFE; --blue-2:#2E6BFF; --blue-dark:#0038B8; --blue-lt:#EAF0FF;
  --orange:#FF6D00; --orange-soft:#FFF3EB;
  --bg:#F4F5F8; --panel:#FFFFFF; --panel-2:#F7F9FF; --line:#E1E4EC;
  --ink:#141726; --muted:#5B6070; --grey:#9AA0B0; --grey-mid:#BCBEC0; --grey-light:#F2F6FF;
  --ok:#1f8a4c; --danger:#c0392b;
  --accent:var(--blue); --accent-soft:var(--blue-lt);
  --zebra:#EFF3FB;         /* alternating table row */
  --r:5px;                 /* squared, not rounded */
  --shadow:0 1px 2px rgba(16,24,40,.06);
}
html[data-theme="dark"]{
  --blue:#2E6BFF; --blue-2:#2E6BFF; --blue-dark:#2E6BFF; --blue-lt:#12203f;
  --orange:#FF6D00; --orange-soft:#2a1704;
  --bg:#0E0F13; --panel:#17181D; --panel-2:#1E2027; --line:#2A2C34;
  --ink:#F3F4F7; --muted:#9A9DA9; --grey:#6C6F7B; --grey-mid:#3A3D46; --grey-light:#1E2027;
  --ok:#3ecf8e; --danger:#ff6b6b;
  --accent:#2E6BFF; --accent-soft:#12203f;
  --zebra:#222633;         /* clearly lighter than the panel for row contrast */
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ---------- global ---------- */
body{background:var(--bg);color:var(--ink);transition:background .2s,color .2s}
h1{color:var(--ink)}
h2{color:var(--accent)}
.lead{color:var(--muted)}
a{color:var(--accent)}
code{background:var(--panel-2);color:var(--ink)}
.muted{color:var(--muted)}
::placeholder{color:var(--grey)}

/* inputs / fields everywhere */
input,select,textarea{color:var(--ink);background:var(--panel);border-color:var(--line)}
.field span{color:var(--muted)}
.field input,.field select,.field textarea,
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent)}

/* ---------- buttons ---------- */
.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r);font-weight:700}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#151316}
.btn.primary:hover{background:var(--orange);filter:brightness(1.06);color:#151316}
.btn.accent{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.accent:hover{background:var(--blue);filter:brightness(1.08);color:#fff}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.block{display:block;width:100%;text-align:center}
.linkbtn{color:var(--accent);background:none;border:0;cursor:pointer;font-weight:700;padding:0;font:inherit}

/* ---------- panels / cards / tables ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.cards .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.card .k{color:var(--muted)}
.card .v{color:var(--accent)}
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
table{color:var(--ink)}
th,td{border-bottom:1px solid var(--line)}
thead th{background:var(--panel-2);color:var(--accent)}
tbody tr:hover{background:var(--panel-2)}
table.mini{background:var(--panel);border:1px solid var(--line)}
table.mini td:first-child{color:var(--muted)}
/* build-up: alternating rows + indented asset-group sub-rows */
#d-summary tr:nth-child(even) td{background:var(--zebra)}
#d-summary tr.subrow td{font-size:12.5px;color:var(--muted)}
#d-summary tr.subrow td:last-child{font-weight:600;color:var(--muted)}
td.total{color:var(--accent)}
.grid-scroll{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
#emp-grid input,table.editable input{color:var(--ink)}
#emp-grid input:focus,table.editable input:focus{border-color:var(--accent);background:var(--panel)}
.autosave{color:var(--ok)}
.save-status{color:var(--muted)}

/* ---------- rate hero (results) ---------- */
.rate-hero{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius:var(--r);color:#fff}
html[data-theme="dark"] .rate-hero{background:linear-gradient(135deg,#0b3bd6,#0a2270)}

/* =====================================================================
   APP SHELL — collapsible left sidebar
   ===================================================================== */
#app-shell{min-height:100vh;background:var(--bg)}
.appwrap{display:flex;min-height:100vh;align-items:stretch}
.sidebar{width:238px;flex:0 0 auto;background:var(--panel-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .18s}
.sidebar.collapsed{width:64px;overflow:visible}
.sb-top{position:relative;padding:12px 12px 14px;border-bottom:1px solid var(--line)}
.sb-collapse{position:absolute;top:10px;right:10px;width:24px;height:24px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-weight:800;cursor:pointer;border-radius:var(--r);line-height:1;z-index:2}
.sb-collapse:hover{color:var(--accent);border-color:var(--accent)}
/* brand: full stacked logo when the menu is out, logomark when docked — blue in light, white in dark */
.sb-brand{display:flex;justify-content:center;align-items:center;padding-top:20px;min-height:78px}
.sb-brand .lg{display:none}
html[data-theme="light"] .sidebar:not(.collapsed) .lg-full-light{display:block;width:132px;height:auto}
html[data-theme="dark"]  .sidebar:not(.collapsed) .lg-full-dark{display:block;width:132px;height:auto}
html[data-theme="light"] .sidebar.collapsed .lg-icon-light{display:block;width:32px;height:auto}
html[data-theme="dark"]  .sidebar.collapsed .lg-icon-dark{display:block;width:32px;height:auto}
.sidebar.collapsed .sb-top{padding:10px 6px 12px}
.sidebar.collapsed .sb-brand{padding-top:26px;min-height:0}

.sb-scroll{overflow-y:auto;overflow-x:hidden;flex:1;padding-bottom:16px}
.sidebar.collapsed .sb-scroll{overflow:visible}
.sb-grp{padding:10px 10px 2px}
.sb-gl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:800;padding:0 8px 5px;white-space:nowrap}
.sidebar.collapsed .sb-gl{opacity:0;height:6px;padding:0;overflow:hidden}

/* nav item — reuse .tab so app.js showView() still lights it up */
.sidebar .tab,.sidebar .navx{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;font-size:13px;
  font-weight:600;color:var(--muted);background:transparent;border:0;border-left:3px solid transparent;border-radius:0;
  cursor:pointer;white-space:nowrap;position:relative;text-align:left;transition:none;font-family:inherit}
.sidebar .tab:hover,.sidebar .navx:hover{color:var(--ink);background:transparent;transform:none;box-shadow:none}
.sidebar .tab svg,.sidebar .navx svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.sidebar .tab .lab,.sidebar .navx .lab{overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.25;text-align:left}
.sidebar .tab.active{color:var(--accent);background:var(--panel);border-left-color:var(--accent);font-weight:800;box-shadow:none;transform:none}
.sidebar .tab.active svg{opacity:1}
.sidebar .tab .tab-ico{display:none}         /* hide the old emoji glyphs */
.sidebar .tab .star{margin-left:auto;color:var(--orange);font-size:12px}
.sidebar .tab.signout{color:var(--muted);margin:0}
.sidebar .tab.signout:hover{color:var(--danger);background:transparent}
.sidebar.collapsed .tab,.sidebar.collapsed .navx{justify-content:center;gap:0;padding:11px 0}
.sidebar.collapsed .tab .lab,.sidebar.collapsed .navx .lab,.sidebar.collapsed .tab .star{display:none}
.sidebar.collapsed .tab svg,.sidebar.collapsed .navx svg{width:18px;height:18px}
/* Menu explainer card (JS-driven, ui.js) — works expanded AND docked, replaces the old
   CSS attr() tooltip so we never show two tooltips at once. */
.sb-tipcard{position:fixed;z-index:60;max-width:250px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);padding:9px 11px;border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.18);
  pointer-events:none;opacity:0;transform:translateX(-4px);transition:opacity .12s ease,transform .12s ease}
.sb-tipcard.on{opacity:1;transform:none}
.sb-tipcard .t{font-size:12px;font-weight:800;color:var(--ink)}
.sb-tipcard .d{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}

/* want-a-hand (grey, not orange) */
.sb-hand{margin:12px 12px 4px;border:1px solid var(--line);background:var(--panel);padding:11px 12px;border-radius:var(--r)}
.sb-hand .t{font-size:12px;font-weight:800;color:var(--ink)}
.sb-hand .d{font-size:11.5px;color:var(--muted);margin:3px 0 9px}
.sb-hand .sb-book{display:block;width:100%;text-align:center;background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink);font-weight:800;font-size:11.5px;padding:8px;border-radius:var(--r);cursor:pointer;font-family:inherit}
.sb-hand .sb-book:hover{border-color:var(--ink)}
.sb-hand .sb-book .bk-ico{display:none}
.sidebar.collapsed .sb-hand{margin:12px 8px;padding:0;border:0;background:none}
.sidebar.collapsed .sb-hand .t,.sidebar.collapsed .sb-hand .d{display:none}
.sidebar.collapsed .sb-hand .sb-book{padding:9px 0;position:relative}
.sidebar.collapsed .sb-hand .sb-book .bk-lab{display:none}
.sidebar.collapsed .sb-hand .sb-book .bk-ico{display:inline-block;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
/* (docked book-a-session tooltip now handled by the .sb-tipcard explainer too) */
.sb-grp.you{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}

/* main column */
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.apptop{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:15}
.apptop-title{font-weight:800;font-size:15px;color:var(--ink)}
.apptop-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* "Did you know?" rotating tip strip — sits just under the top bar. */
.tipbar{display:flex;align-items:center;gap:9px;padding:7px 22px;font-size:12.5px;
  background:var(--panel-2);border-bottom:1px solid var(--line);color:var(--muted)}
.tipbar .tb-emoji{flex:none}
.tipbar .tb-lbl{flex:none;font-weight:800;color:var(--accent);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em}
.tipbar .tb-body{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipbar .tb-body .linkbtn{font-size:12.5px}
.tipbar .tb-ctl{flex:none;display:flex;gap:2px}
.tipbar .tb-ctl button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 6px;border-radius:var(--r);font-family:inherit}
.tipbar .tb-ctl button:hover{color:var(--ink);background:var(--panel)}
@media print{.tipbar{display:none}}

/* chart value labels (what-if bars/sweep) */
.ch-val{font-size:12px;font-weight:800;fill:var(--ink)}

/* Company chip — the "which Simpro company am I touching?" highlight. Deliberately loud. */
.co-chip{display:inline-flex;align-items:center;gap:6px;background:var(--orange-soft);border:1.5px solid var(--orange);
  color:var(--orange);font-weight:800;font-size:14px;padding:5px 12px;border-radius:var(--r);white-space:nowrap}
.co-chip.sm{font-size:12px;padding:2px 8px;border-width:1px}
.co-banner{border-left:4px solid var(--orange)}
.co-banner-line{margin:0 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* selects everywhere inherit the app font (raw <select> falls back to the UA font) */
select{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.co-select{padding:4px 8px}
.co-select.big{font-size:15px;font-weight:700;padding:10px 12px}
option{font-family:inherit}   /* best-effort for any remaining native dropdowns */

/* custom company switcher dropdown (replaces the native <select> popup) */
.co-switch-btn{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  font-family:inherit;font-size:12px;font-weight:700;padding:4px 10px;cursor:pointer}
.co-switch-btn:hover{border-color:var(--accent);color:var(--accent)}
.co-menu{position:fixed;z-index:80;min-width:260px;max-height:340px;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.28);padding:5px}
.co-menu .co-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
  padding:9px 11px;border-radius:var(--r);cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--ink)}
.co-menu .co-row:hover{background:var(--panel-2)}
.co-menu .co-row.cur{background:var(--accent-soft)}
.co-menu .cn{flex:1;font-weight:600}
.co-menu .ck{font-size:11px;font-weight:800;color:var(--accent);white-space:nowrap}

/* connect-flow visible company list */
.co-list{display:flex;flex-direction:column;gap:6px}
.co-option{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:10px 12px;cursor:pointer;font-size:14px}
.co-option:hover{border-color:var(--accent)}
.co-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.co-option input{accent-color:var(--accent);flex:none}
.co-option .cn{font-weight:700;color:var(--ink)}

/* App switcher (▦ + label in the top bar) */
.apps-btn{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);cursor:pointer;
  height:32px;padding:0 11px;display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-family:inherit}
.apps-btn .apps-ico{font-size:15px;line-height:1}
.apps-btn .apps-lab{font-size:12px;font-weight:700;white-space:nowrap}
.apps-btn:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:760px){.apps-btn .apps-lab{display:none}}
.apps-menu{position:fixed;z-index:70;width:330px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 14px 40px rgba(0,0,0,.25);padding:6px}
.apps-menu .app-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  padding:10px;border-radius:var(--r);cursor:pointer;font-family:inherit}
.apps-menu .app-row:hover{background:var(--panel-2)}
.apps-menu .app-row.here{background:var(--accent-soft)}
.apps-menu .ai{font-size:20px;flex:none}
.apps-menu .ab{flex:1;min-width:0}
.apps-menu .ab b{display:block;font-size:13px;color:var(--ink)}
.apps-menu .ab small{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.apps-menu .as{flex:none;font-size:11px;font-weight:800;color:var(--accent);white-space:nowrap}
.apps-menu .apps-foot{font-size:10.5px;color:var(--muted);padding:7px 10px 4px;border-top:1px solid var(--line);margin-top:4px}

/* ▦ Apps home — the hub's launcher landing */
.apps-home{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:6px}
.apph-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 14px;font-family:inherit;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.apph-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.apph-card .apph-ico{font-size:30px;line-height:1}
.apph-card .apph-name{font-size:15px;font-weight:800;color:var(--ink)}
.apph-card .apph-desc{font-size:12.5px;color:var(--muted);line-height:1.45;flex:1}
.apph-card .apph-go{font-size:12px;font-weight:800;color:var(--accent);margin-top:4px}
.apph-card.locked{opacity:.85}
.apph-card.locked .apph-go{color:var(--muted)}

/* 🚐 vehicle-fleet tick on an asset group */
.asset-group-head .ag-veh{font-size:11.5px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;margin:0}
.asset-group-head .ag-veh input{accent-color:var(--accent)}
#app-shell main{padding:22px 24px}   /* full width — no cap */

/* workspace switch (kept #ws-switch) */
.ws-switch .ws-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r);font-weight:700}

/* ---------- theme toggle ---------- */
.theme-toggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);cursor:pointer;padding:0;overflow:hidden;height:32px}
.theme-toggle .tt-ico{width:34px;height:30px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
html[data-theme="light"] .theme-toggle .tt-sun{background:var(--accent);color:#fff}
html[data-theme="dark"] .theme-toggle .tt-moon{background:var(--accent);color:#0E0F13}

/* =====================================================================
   SIGN-IN / SUBSCRIBE — frosted dark, matches the website
   ===================================================================== */
.login-gate{background:var(--bg);min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:28px 20px;position:relative}
.login-gate .theme-toggle{position:fixed;top:18px;right:18px;z-index:30}
.login-shell{display:grid;grid-template-columns:1.05fr .95fr;width:100%;max-width:1060px;border:1px solid var(--line);
  background:var(--panel);overflow:hidden;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.18);flex-shrink:0}

/* hero pane — blue brand in light, dark glow in dark */
.login-hero{padding:36px 34px;position:relative;min-height:520px;display:flex;flex-direction:column;color:#EAF0FF;border:0}
html[data-theme="light"] .login-hero{background:linear-gradient(160deg,#004EFE,#0A2E9E)}
html[data-theme="dark"] .login-hero{background:
  radial-gradient(120% 90% at 0% 0%, rgba(0,78,254,.30), transparent 55%),
  radial-gradient(120% 120% at 100% 100%, rgba(255,109,0,.16), transparent 50%), #0E0F13}
.lh-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.lh-logochip{width:40px;height:40px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;border-radius:var(--r)}
.lh-logochip img{max-width:26px;max-height:26px}
.lh-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9FB4FF;font-weight:800}
html[data-theme="dark"] .lh-kicker{color:#6C6F7B}
.lh-rotator{position:relative;flex:1}
.lh-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;display:flex;flex-direction:column}
.lh-slide.is-active{opacity:1;position:relative;pointer-events:auto}
.lh-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9FB4FF;font-weight:800}
.lh-headline{font-size:27px;line-height:1.14;letter-spacing:-.02em;margin:10px 0 0;font-weight:800;color:#fff}
.lh-headline em{font-style:italic;color:var(--orange)}
.lh-sub{color:#CBD9FF;font-size:14px;margin:12px 0 0;max-width:360px}
html[data-theme="dark"] .lh-sub{color:#9A9DA9}
/* frosted screenshot box */
.lh-shot{margin:18px 0 0;padding:12px;border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.12);
  backdrop-filter:blur(3px);border-radius:var(--r)}
html[data-theme="dark"] .lh-shot{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.lh-shot img{width:100%;display:block;border-radius:3px;opacity:.96}
.lh-shot figcaption{font-size:11.5px;color:#DDE7FF;margin-top:8px}
html[data-theme="dark"] .lh-shot figcaption{color:#9A9DA9}
.lh-dots{display:flex;gap:6px;margin-top:16px}
.lh-dot{width:20px;height:3px;background:rgba(255,255,255,.3);border:0;padding:0;cursor:pointer;border-radius:0}
.lh-dot.on{background:#fff}
html[data-theme="dark"] .lh-dot.on{background:var(--blue-2)}
.lh-foot{margin-top:16px}
.lh-stats{font-size:12px;color:#CBD9FF;display:flex;gap:8px;flex-wrap:wrap}
html[data-theme="dark"] .lh-stats{color:#9A9DA9}
.lh-stats b{color:#fff}
.lh-stats .dot{opacity:.5}
.lh-tagline{font-size:12px;color:#9FB4FF;margin-top:6px;font-weight:700}

/* card pane — follows theme */
.login-card{background:var(--panel);padding:38px 34px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.login-logo{display:none}                 /* logo already on the hero pane */
.login-card h1{font-size:20px;font-weight:800;color:var(--ink);margin:0 0 4px}
.login-sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.login-card .field{margin-bottom:13px;display:block}
.login-card .field span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:800;margin-bottom:6px}
/* …but NOT inside the plan picker — those are card content, not field labels/inputs.
   Two inherited rules broke the mobile signup: `.login-card .field input{width:100%;padding}`
   stretched each RADIO into a giant empty box, and `.login-card .field span{block;uppercase}`
   turned the card text into uppercase columns spilling off-screen. Undo both, then restyle. */
.login-card .field .plan-picker input{width:auto;padding:0;margin:3px 0 0;flex:0 0 auto}
.login-card .field .plan-picker span{display:inline;font-size:13px;letter-spacing:normal;text-transform:none;font-weight:400;color:var(--ink);margin:0}
.login-card .field .plan-picker .plan-opt{display:flex;align-items:flex-start;gap:10px}
.login-card .field .plan-picker .plan-opt-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.login-card .field .plan-picker .plan-opt-name{font-weight:800;font-size:14px;color:var(--ink)}
.login-card .field .plan-picker .plan-plus{display:inline-block;background:var(--orange);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;padding:1px 6px;border-radius:var(--r);vertical-align:middle}
.login-card .field .plan-picker .plan-opt-price{font-size:13.5px;color:var(--ink);font-weight:600}
.login-card .field .plan-picker .plan-opt-then{color:var(--muted);font-weight:400}
.login-card .field .plan-picker .plan-opt-blurb{font-size:12px;color:var(--muted)}
.login-card .field .plan-picker .plan-perk{display:inline-block;align-self:flex-start;margin-top:6px;background:var(--orange-soft);color:var(--orange);font-weight:700;font-size:12px;padding:4px 9px;border-radius:var(--r);border:1px solid rgba(255,109,0,.28)}
.login-card .field .plan-picker .plan-opt.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.login-card .field input{width:100%;padding:11px 13px;font-size:14px}
.login-actions{display:flex;gap:10px;margin-top:6px}
.login-actions .btn{flex:1}
.login-msg{font-size:13px;margin:12px 0 0}
.login-fine{font-size:12px;color:var(--muted);margin-top:12px}
.login-welcome{border:1px solid var(--line);background:var(--panel-2);padding:12px 14px;border-radius:var(--r);margin-bottom:14px;font-size:13px;color:var(--ink)}
.or-divider{display:flex;align-items:center;text-align:center;color:var(--grey);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin:18px 0 14px;gap:12px}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.signup-toggle .st-line{font-size:13px;color:var(--muted);margin:6px 0 10px}
.signup-toggle .st-fine{font-size:12px;color:var(--grey);margin-top:8px}
.login-footer{margin-top:22px;color:var(--muted);font-size:12px;text-align:center}
.login-footer a{color:var(--accent)}

/* plan picker */
.plan-opt{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);color:var(--ink)}
.plan-opt.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.plan-plus{background:var(--orange);color:#151316}
.plan-perk{display:inline-block;align-self:flex-start;margin-top:6px;background:var(--orange-soft);color:var(--orange);
  font-weight:700;font-size:12px;padding:4px 9px;border-radius:var(--r);border:1px solid rgba(255,109,0,.28)}
.plan-solo{border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r);padding:12px;color:var(--ink)}

/* responsive: stack the panes */
@media(max-width:820px){
  .login-shell{grid-template-columns:1fr;max-width:460px;box-shadow:none}
  .login-hero{min-height:0;padding:28px 26px}
  .lh-rotator{min-height:230px}
}
@media(max-width:900px){
  .sidebar{position:fixed;z-index:40;left:0;top:0;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .sidebar.collapsed{width:64px}
  #app-shell main{padding:18px 16px}
}

/* =====================================================================
   Proactive help nudge (used by ui.js)
   ===================================================================== */
.nudge{border:1px solid var(--accent);background:var(--accent-soft);padding:12px 14px;border-radius:var(--r);
  font-size:13px;position:relative;margin:14px 0;color:var(--ink)}
.nudge .nt{font-weight:800;color:var(--accent);margin-bottom:3px}
.nudge .nx{position:absolute;top:8px;right:10px;color:var(--grey);font-weight:800;cursor:pointer;background:none;border:0;font-size:14px}
.nudge a,.nudge .linkbtn{font-weight:800}

/* Tour spotlight + popover */
.tour-mask{position:fixed;inset:0;background:rgba(8,10,20,.55);z-index:2000;pointer-events:auto}
.tour-pop{position:fixed;z-index:2001;max-width:300px;background:var(--panel);border:1px solid var(--accent);
  border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.35);padding:16px 18px}
.tour-pop .tp-h{font-weight:800;color:var(--accent);margin-bottom:4px;font-size:14px}
.tour-pop .tp-b{font-size:13px;color:var(--ink)}
.tour-pop .tp-step{font-size:11px;color:var(--muted);margin-top:10px}
.tour-pop .tp-nav{display:flex;gap:8px;margin-top:12px}
.tour-pop .tp-nav .btn{padding:7px 13px;font-size:13px}
.tour-hi{position:relative;z-index:2001;box-shadow:0 0 0 3px var(--orange),0 0 0 7px rgba(255,109,0,.3);border-radius:var(--r)}

/* ---------- consultant view ---------- */
.consult-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;max-width:760px;margin-top:8px}
@media(max-width:620px){.consult-pair{grid-template-columns:1fr}}
.consult-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;display:flex;flex-direction:column}
.consult-card.base{border-top:3px solid var(--blue)}
.consult-card.up{border-top:3px solid var(--orange);background:var(--panel-2)}
.consult-flag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:800;margin-bottom:4px}
.consult-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.consult-price{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:8px 0 2px}
.consult-price small{font-size:13px;color:var(--grey);font-weight:600}
.consult-perks{list-style:none;padding:0;margin:14px 0 18px;font-size:14px;color:var(--muted);flex:1}
.consult-perks li{padding:4px 0}
.consult-perks li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--blue);border-radius:50%;margin:0 10px 2px 0;vertical-align:middle}
.consult-card.up .consult-perks li::before{background:var(--orange)}
.consult-note{font-size:12.5px;color:var(--muted);margin-top:14px}
.whatif-copied{font-size:12px;font-weight:700;color:var(--ok);background:rgba(62,207,142,.10);border:1px solid rgba(62,207,142,.3);padding:6px 10px;border-radius:var(--r);white-space:nowrap}

/* benchmark distribution band */
.bench-bar{position:relative;height:34px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);margin-top:14px}
.bench-iqr{position:absolute;top:0;bottom:0;background:var(--accent-soft);border-left:1px solid var(--accent);border-right:1px solid var(--accent)}
.bench-med{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--accent)}
.bench-you{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,109,0,.25);z-index:2}
.bench-you span{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:var(--orange);white-space:nowrap}
.bench-scale{position:absolute;left:8px;right:8px;bottom:-22px;display:flex;justify-content:space-between;font-size:11.5px;color:var(--grey);font-variant-numeric:tabular-nums}
.bench-scale .bs-med{color:var(--accent);font-weight:700}
.bench-bar + .hint{margin-top:28px !important}

/* =====================================================================
   PRINT — a branded PCA report regardless of screen theme.
   Forces light tokens, drops the app chrome, keeps the blue hero + charts.
   ===================================================================== */
@media print{
  html, html[data-theme="dark"]{
    --bg:#fff; --panel:#fff; --panel-2:#F7F9FF; --line:#DDE3EF;
    --ink:#141726; --muted:#5B6070; --grey:#9AA0B0;
    --accent:#004EFE; --accent-soft:#EAF0FF; --zebra:#F1F5FC;
    --blue:#004EFE; --blue-dark:#0038B8; --orange:#FF6D00; --orange-soft:#FFF3EB;
    --ch1:#2E6BFF; --ch2:#00A3A3; --ch3:#FF6D00;
  }
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  .sidebar,.apptop,.support-bar,.nudge,.theme-toggle,.hero-actions,.ws-switch,
  .adv .adv-head input,#d-print,.sb-hand{display:none !important}
  .appwrap{display:block}
  .mainwrap{display:block}
  #app-shell main{max-width:none;padding:0}
  body{background:#fff}
  .print-only{display:flex !important;align-items:center;gap:14px}
  .print-header img{height:52px}
  .print-header .ph-title{font-size:19px;font-weight:800;color:#004EFE}
  .print-header .ph-sub{font-size:12px;color:#5B6070}
  /* the hero prints in full brand blue */
  .rate-hero{background:linear-gradient(135deg,#004EFE,#0038B8) !important;color:#fff !important;border:0}
  .rate-hero .hero-label,.rate-hero .hero-note{color:#CBD9FF !important}
  .rate-hero .hero-rate{color:#fff !important}
  .panel,.card,.table-wrap,.chart-fig{break-inside:avoid;box-shadow:none}
  .view-head-actions{display:none !important}
  @page{margin:12mm}
}

/* ---------- charts (SVG) — palettes validated for each surface ---------- */
:root{--ch1:#2E6BFF;--ch2:#00A3A3;--ch3:#FF6D00}                 /* pay / on-costs / overhead */
html[data-theme="dark"]{--ch1:#2E6BFF;--ch2:#00A3A3;--ch3:#EA5F00}
.chart-fig{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:10px 0}
.chart-fig svg{display:block;width:100%;height:auto}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin:2px 0 10px;font-size:12.5px;color:var(--muted)}
.chart-legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.chart-fig .bar-lab{font-size:12px;fill:var(--muted)}
.chart-fig .bar-val{font-size:12px;font-weight:700;fill:var(--ink)}
.chart-fig .seg-val{font-size:10.5px;font-weight:700;fill:#fff}
.chart-fig .axis{stroke:var(--line);stroke-width:1}
.chart-fig .hist-col{fill:var(--ch1)}
.chart-fig .hist-col:hover{opacity:.85}
.chart-fig .hist-count{font-size:10.5px;fill:var(--muted)}
.chart-fig .you-line{stroke:var(--orange);stroke-width:2}
.chart-fig .you-lab{font-size:11px;font-weight:800;fill:var(--orange)}
.chart-fig .seg:hover{opacity:.88}

/* charge-out advisor */
.adv .adv-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.adv .adv-lbl{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.adv .adv-lbl b{color:var(--orange);font-size:15px}
.adv input[type=range]{flex:1;min-width:160px;max-width:320px;accent-color:var(--orange)}
.consult-pay{max-width:760px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-top:8px}
.consult-pay-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
#consult-checkout{min-height:320px;background:#fff;border-radius:var(--r)}   /* Stripe's iframe is light */

/* =====================================================================
   Higher-specificity + missed-component overrides (win over styles.css)
   ===================================================================== */
.login-shell{background:var(--panel)}
.login-shell .login-card{background:var(--panel);color:var(--ink);max-width:none;border-radius:0}
.login-shell .login-card h1{color:var(--ink);font-size:20px}

/* home action cards + onboarding + banners */
.action-card{background:var(--panel);border-color:var(--line)}
.action-card .action-title{color:var(--ink)}
.action-card .action-desc{color:var(--muted)}
.action-icon{background:var(--panel-2);color:var(--accent);border-radius:var(--r)}
.action-card.featured .action-icon{background:var(--orange-soft);color:var(--orange)}
.action-card:not(.featured) .action-cta{color:var(--accent)}
.onboard{background:var(--panel);border-color:var(--line)}
.onboard-step{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
.onboard-step.done{background:var(--accent-soft);border-color:var(--line)}
.home-banner.ok{background:var(--accent-soft);border-color:var(--line);color:var(--ink)}
.home-banner.ok .linkbtn{color:var(--accent)}
.home-banner.tip{background:var(--orange-soft);border-color:var(--line);color:var(--ink)}

/* wizard */
.wizard{background:var(--panel);border-color:var(--line)}
.wizard-steps{background:var(--panel-2);border-color:var(--line)}
.wizard-body h3{color:var(--accent)}
.wizard-body label.q span{color:var(--muted)}
.wizard-body input,.wizard-body select{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
/* step pills */
.wstep{background:var(--panel);border-color:var(--line);color:var(--muted)}
.wstep.active{background:var(--orange);border-color:var(--orange);color:#151316}
.wstep.done{background:var(--panel-2);border-color:var(--line);color:var(--accent)}
/* jump cards + preview tiles */
.wiz-steps-preview>div{background:var(--accent-soft);color:var(--ink)}
.wiz-steps-preview>div span{background:var(--blue);color:#fff}
.wiz-group{background:var(--panel-2);border-color:var(--line)}
.wiz-group-title{color:var(--accent)}
.wiz-emp-row{background:var(--panel-2)}
.wiz-connect-box{background:var(--accent-soft);border-color:var(--line)}
.wiz-check{background:var(--panel);border-color:var(--line);color:var(--muted)}
.wiz-check.on{background:var(--panel-2);border-color:var(--line);color:var(--ok)}
/* cream tip callouts → theme-aware */
.wiz-tip{background:var(--orange-soft);border-color:rgba(255,109,0,.28);border-left-color:var(--orange);color:var(--ink)}
.wiz-tip b{color:var(--orange)}
html[data-theme="dark"] .wiz-tip{background:#241505}

/* workspace switch */
.ws-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.ws-btn:hover{border-color:var(--accent)}
.ws-menu{background:var(--panel);border:1px solid var(--line)}
.ws-item{color:var(--ink);background:transparent}
.ws-item:hover{background:var(--panel-2)}
.ws-item.active{background:var(--accent-soft);color:var(--accent)}
.ws-tag{background:var(--panel-2);color:var(--muted)}
.ws-row{border-color:var(--line)}
.ws-menu{min-width:260px}
.ws-list{max-height:320px;overflow-y:auto}          /* scales to 30–40 companies */
.ws-search{display:block;width:calc(100% - 16px);margin:4px 8px 8px;padding:8px 10px;font-size:13px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
.ws-search:focus{outline:0;border-color:var(--accent)}
.ws-quota{font-size:11.5px;color:var(--muted);padding:8px 10px 6px;border-top:1px solid var(--line);margin-top:6px}
.ws-line{display:flex;align-items:center;gap:2px}
.ws-line .ws-item{flex:1;min-width:0}
.ws-mini{flex:0 0 auto;width:26px;height:26px;border:0;background:none;color:var(--grey);cursor:pointer;font-size:13px;border-radius:var(--r);opacity:0;transition:opacity .12s}
.ws-line:hover .ws-mini{opacity:1}
.ws-mini:hover{color:var(--accent);background:var(--panel-2)}
.ws-mini.ws-del:hover{color:var(--danger)}

/* misc panels rendered into view bodies */
.toggles label,.col-menu,.bulk-bar{color:var(--ink)}
.col-menu{background:var(--panel);border:1px solid var(--line)}
.bulk-bar{background:var(--panel-2);border:1px solid var(--line)}
.bulk-bar select,.bulk-bar input,.whatif-row select,.whatif-row input{background:var(--panel-2);border-color:var(--line);color:var(--ink)}

/* zebra striping — two clearly different row colours in both themes */
table.editable tbody tr:nth-child(odd) td,
#d-emps tbody tr:nth-child(odd) td,
#d-labour tbody tr:nth-child(odd) td,
#d-simpro tbody tr:nth-child(odd) td,
.asset-group .ag-items tbody tr:nth-child(odd) td{background:var(--panel)}
table.editable tbody tr:nth-child(even) td,
#d-emps tbody tr:nth-child(even) td,
#d-labour tbody tr:nth-child(even) td,
#d-simpro tbody tr:nth-child(even) td,
.asset-group .ag-items tbody tr:nth-child(even) td{background:var(--zebra)}
.asset-group{background:var(--panel);border-color:var(--line)}
.asset-group-head .ag-name:focus{background:var(--panel);border-color:var(--accent)}
.modal{background:var(--panel);color:var(--ink)}
html[data-theme="dark"] .card.card-good{background:rgba(62,207,142,.12);border-color:rgba(62,207,142,.32)}
html[data-theme="dark"] .card.card-bad{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.32)}
html[data-theme="dark"] .autosave{background:rgba(62,207,142,.12);border-color:rgba(62,207,142,.32);color:var(--ok)}
html[data-theme="dark"] .btn.danger,html[data-theme="dark"] .btn.small.danger{background:rgba(255,107,107,.15);color:#ff8f8f;border-color:rgba(255,107,107,.35)}

/* remaining dark stragglers */
.toggle span{color:var(--ink)}
.float-tip{background:var(--panel);color:var(--ink);border-color:var(--line)}
.snap-row{background:var(--panel);border-color:var(--line)}
.usage-tile,.an-kpi,.modal-card,.paywall-card{background:var(--panel);border-color:var(--line);color:var(--ink)}
.lt-row input,.lt-row select{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
/* editable cost tables — one consistent input style: BIG, readable, boxed */
table.editable input,.ag-items input{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r);padding:11px 12px;font-size:15px;font-family:inherit;width:100%;min-width:0}
/* proportioned columns: Item gets the room, number columns stay sensible */
table.editable{table-layout:fixed;width:100%}
table.editable th:nth-child(1){width:44%}
table.editable th:nth-child(2){width:11%}
table.editable th:nth-child(3){width:17%}
table.editable th:nth-child(4){width:14%}
table.editable th:nth-child(5){width:9%}
table.editable th:nth-child(6){width:52px}
.ag-items{table-layout:fixed;width:100%}
.ag-items th:nth-child(1){width:36%}
.ag-items th:nth-child(2){width:9%}
.ag-items th:nth-child(3){width:13%}
.ag-items th:nth-child(4){width:9%}
.ag-items th:nth-child(5){width:13%}
.ag-items th:nth-child(6){width:11%}
.ag-items th:nth-child(7){width:88px}          /* room for duplicate + delete */
.ag-items input[style]{width:100% !important}   /* older rows carry inline widths — normalise */
.row-actions{white-space:nowrap;text-align:right}
.row-actions .icon-btn{margin-left:4px}
table.editable input[type=number],.ag-items input[type=number]{text-align:right}
table.editable input:focus,.ag-items input:focus{border-color:var(--accent);background:var(--panel)}
table.editable td,.ag-items td{font-size:14px}
/* headers align with their data: text columns left, number columns right */
table.editable th:nth-child(2),table.editable th:nth-child(3),
table.editable th:nth-child(4),table.editable th:nth-child(5){text-align:right}
.ag-items th:nth-child(2),.ag-items th:nth-child(3),.ag-items th:nth-child(4),
.ag-items th:nth-child(5),.ag-items th:nth-child(6){text-align:right}
.ag-name{background:transparent;border:1px solid transparent;color:var(--ink);font-weight:800;font-size:15px}
/* big single fields (P&L total etc.) */
.panel .field input,#pnl-total{font-size:16px;padding:12px 14px}
/* employee grid — bigger, boxed cells */
#emp-grid input{background:var(--panel-2);border:1px solid var(--line);font-size:14.5px;padding:9px 10px;border-radius:var(--r)}
#emp-grid input:focus{border-color:var(--accent);background:var(--panel)}
#emp-grid select{font-size:14px;padding:8px 9px;border-radius:var(--r)}
#emp-grid td,#emp-grid th{padding:5px 6px}
#emp-grid{font-size:14px}
/* compact headers: wrap to two lines instead of stretching the column */
#emp-grid thead th{white-space:normal;line-height:1.25;font-size:12px;vertical-align:middle;max-width:110px;text-align:right}
#emp-grid thead th.col-name,#emp-grid thead th[data-col="position"],
#emp-grid thead th[data-col="labourType"],#emp-grid thead th[data-col="email"],
#emp-grid thead th.col-chk{text-align:left;max-width:none}
/* body cells align the same way, so inputs sit flush under their headers */
#emp-grid tbody td{text-align:right}
#emp-grid tbody td.col-chk,#emp-grid tbody td[data-col="name"],
#emp-grid tbody td[data-col="position"],#emp-grid tbody td[data-col="labourType"],
#emp-grid tbody td[data-col="email"]{text-align:left}
/* column sizing: text gets the room, numbers stay tight.
   %-fields fit 4 digits; day-count fields fit 2; money a little more. */
#emp-grid input[data-key="name"],
#emp-grid input[data-key="position"],
#emp-grid input[data-key="email"]{min-width:180px}
#emp-grid input[data-key$="Pct"]{width:66px;min-width:0}                 /* 100.5 */
#emp-grid input[data-key="publicHolidays"],
#emp-grid input[data-key="annualLeaveDays"],
#emp-grid input[data-key="sickDays"],
#emp-grid input[data-key="tafeDays"],
#emp-grid input[data-key="rdoDays"],
#emp-grid input[data-key="unpaidLeaveDays"],
#emp-grid input[data-key="extraDaysPerYear"],
#emp-grid input[data-key="daysPerWeek"]{width:56px;min-width:0;padding-left:6px;padding-right:8px}  /* 2 digits */
#emp-grid input[data-key="stdHoursPerDay"],
#emp-grid input[data-key="lostHoursPerWeek"],
#emp-grid input[data-key="overtimeHrsPerWeek"]{width:58px;min-width:0}   /* 7.6 */
#emp-grid input[data-key="payRate"],
#emp-grid input[data-key^="allowance"]{width:88px;min-width:0}           /* $123.45 */
/* employee grid tinted column groups — dark equivalents for all five groups
   (info=slate, work=blue, leave=orange, oncost=green, allow=purple) */
html[data-theme="dark"] #emp-grid thead th.grp-info,
html[data-theme="dark"] #emp-grid thead .col-chk{background:#1a2130;color:var(--accent)}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) td.grp-info,
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) .col-chk{background:var(--panel)}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(even) td.grp-info,
html[data-theme="dark"] #emp-grid tbody tr:nth-child(even) .col-chk{background:#171c27}
html[data-theme="dark"] #emp-grid thead th.grp-work{background:#16233f;color:#7fa6ff}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) td.grp-work{background:#131b2e}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(even) td.grp-work{background:#182339}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) td.grp-leave{background:#241a0c}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(even) td.grp-leave{background:#2a1e0e}
html[data-theme="dark"] #emp-grid thead th.grp-oncost{background:#122a1a;color:#5bd68a}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) td.grp-oncost{background:#101f14}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(even) td.grp-oncost{background:#142718}
html[data-theme="dark"] #emp-grid thead th.grp-allow{background:#241a38;color:#b794f6}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) td.grp-allow{background:#1c1530}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(even) td.grp-allow{background:#221a38}
html[data-theme="dark"] #emp-grid .col-name{box-shadow:2px 0 0 rgba(0,0,0,.5)}
#d-simpro tbody tr:hover td{background:var(--accent-soft)}
/* warning yellows → theme aware */
html[data-theme="dark"] .support-bar{background:#2b2205;border-color:#4a3d0d;color:#e8d48b}
html[data-theme="dark"] .billing-strip.warn{background:#2b2205;border-color:#4a3d0d;color:#e8d48b}
html[data-theme="dark"] .autosave.saving{background:#2b2205;border-color:#4a3d0d;color:#e8d48b}
/* employee grid tinted column groups (info blue / leave orange / checkbox col) */
html[data-theme="dark"] #emp-grid thead th.grp-leave{background:#33210a;color:#ffb267}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) td.grp-leave{background:#241a0c}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(even) td.grp-leave{background:#2a1e0e}
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) td.grp-info,
html[data-theme="dark"] #emp-grid tbody tr:nth-child(odd) .col-chk{background:var(--panel)}
/* the bench gradient band stays as-is (colour scale is meaningful) */