/* PNWHS RMC ERP · Liquid Glass design system
   Glass is used for chrome (sidebar, top bar, overlays). Tables, forms and money stay on
   near-solid surfaces so they remain readable. */
:root{
  --navy:#07152e;--navy-2:#0d2147;--blue:#1769ff;--blue-2:#4c8dff;--cloud:#f4f7fc;
  --glass:rgba(255,255,255,.12);--glass-2:rgba(255,255,255,.07);--glass-line:rgba(255,255,255,.18);
  --slate-50:#f8fafc;--slate-100:#eef2f7;--slate-200:#dde3ec;--slate-300:#c3ccd9;--slate-400:#94a0b4;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-900:#0f172a;
  --ok:#11845b;--ok-bg:#e3f6ee;--warn:#a15c00;--warn-bg:#fff3dc;--bad:#c4271f;--bad-bg:#fdeceb;
  /* surfaces (light) */
  --bg:var(--cloud);--surface:rgba(255,255,255,.94);--surface-solid:#fff;--text:var(--slate-900);--muted:var(--slate-500);--line:var(--slate-200);--input:#fff;
  --radius:16px;--radius-sm:10px;--shadow:0 1px 2px rgba(7,21,46,.06),0 8px 24px rgba(7,21,46,.08);
  --blur:saturate(160%) blur(18px);
  --font:"Inter Tight","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
:root[data-theme="dark"]{--bg:#06101f;--surface:rgba(17,32,62,.86);--surface-solid:#0f1d38;--text:#e8eef8;--muted:#93a3bd;--line:rgba(255,255,255,.1);--input:#0b1830;--ok-bg:rgba(17,132,91,.18);--warn-bg:rgba(161,92,0,.2);--bad-bg:rgba(196,39,31,.2);--ok:#45c98f;--warn:#f0b04a;--bad:#ff7a72}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:14.5px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono);font-size:.92em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--blue);color:#fff;padding:8px 12px;border-radius:8px;z-index:100}.skip:focus{left:8px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.backdrop{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 500px at 0% 0%,rgba(23,105,255,.28),transparent 60%),
  radial-gradient(700px 500px at 100% 0%,rgba(76,141,255,.14),transparent 60%),
  linear-gradient(180deg,var(--navy) 0,var(--navy) 300px,var(--bg) 300px)}
:root[data-theme="dark"] .backdrop{background:radial-gradient(900px 500px at 0% 0%,rgba(23,105,255,.22),transparent 60%),var(--bg)}
.side{position:sticky;top:0;height:100vh;overflow:auto;padding:20px 14px;background:rgba(7,21,46,.82);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-right:1px solid var(--glass-line);color:#dbe5f7}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;color:#fff;text-decoration:none}
.brand-mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(140deg,var(--blue),#5ea0ff);display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px rgba(23,105,255,.45)}
.brand b{display:block;font-size:15px}.brand small{opacity:.6;font-size:12px}
.nav-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.5;margin:18px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#cfdaee;text-decoration:none;font-weight:500}
.nav a:hover{background:var(--glass-2);color:#fff}
.nav a[aria-current="page"]{background:var(--glass);color:#fff;box-shadow:inset 0 0 0 1px var(--glass-line)}
.nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.nav .soon{opacity:.45;pointer-events:none}.nav .soon em{margin-left:auto;font-style:normal;font-size:11px}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:14px 28px;background:rgba(7,21,46,.55);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-line);color:#fff}
.top h1{font-size:18px;font-weight:650;flex:1;letter-spacing:-.01em}
.who{display:flex;align-items:center;gap:10px;font-size:13px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);display:grid;place-items:center;font-weight:700;font-size:12px}
.icon-btn{background:var(--glass-2);border:1px solid var(--glass-line);color:#fff;border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--glass)}
.menu-btn{display:none}
.content{padding:24px 28px 48px;display:flex;flex-direction:column;gap:20px}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.card-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:15px;font-weight:650;flex:1}
.card-b{padding:20px}
.glass-hero{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid var(--glass-line);border-radius:var(--radius);color:#fff;padding:22px 24px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.glass-hero h2{font-size:22px;letter-spacing:-.015em}.glass-hero p{opacity:.75;margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.stat{display:block;text-decoration:none;color:inherit;padding:18px 20px}
.stat .n{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted);font-size:13px}
.stat:hover{border-color:var(--blue-2)}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:20px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;border:1px solid transparent;background:var(--blue);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:#0f5be6}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text)}.btn.ghost:hover{background:var(--slate-100)}
:root[data-theme="dark"] .btn.ghost:hover{background:var(--glass-2)}
.btn.danger{background:var(--bad)}.btn.sm{height:30px;padding:0 10px;font-size:13px;border-radius:8px}
label{display:block;font-size:13px;font-weight:600;color:var(--slate-600);margin-bottom:6px}
:root[data-theme="dark"] label{color:var(--muted)}
input,select,textarea{font:inherit;color:var(--text);background:var(--input);border:1px solid var(--slate-300);border-radius:10px;height:40px;padding:0 12px;width:100%}
:root[data-theme="dark"] input,:root[data-theme="dark"] select{border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,255,.2)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--blue);padding:0;flex:none}
.field{margin-bottom:16px}.field .hint{font-size:12px;color:var(--muted);margin-top:4px}
.err{color:var(--bad);font-size:12.5px;margin-top:4px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.actions{display:flex;gap:10px;justify-content:flex-end;padding-top:6px}

/* ---------- tables ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:14px 20px;border-bottom:1px solid var(--line)}
.toolbar .grow{flex:1;min-width:200px}
.toolbar input,.toolbar select{height:36px}
.tw{overflow-x:auto}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.data th{position:sticky;top:0;background:var(--surface-solid);text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.data th a{color:inherit;text-decoration:none}.data th a:hover{color:var(--text)}
.data td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.data tr:last-child td{border-bottom:0}
.data tbody tr:hover td{background:rgba(23,105,255,.04)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--slate-100);color:var(--slate-700);white-space:nowrap}
:root[data-theme="dark"] .badge{background:var(--glass-2);color:var(--text)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.bad{background:var(--bad-bg);color:var(--bad)}.badge.blue{background:rgba(23,105,255,.12);color:var(--blue)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pager nav{display:flex;gap:4px}
.pager a,.pager span.cur{min-width:32px;height:32px;display:grid;place-items:center;border-radius:8px;text-decoration:none;color:var(--text);border:1px solid var(--line);padding:0 8px}
.pager span.cur{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .off{opacity:.4;pointer-events:none}

/* permission matrix */
.matrix th:not(:first-child),.matrix td:not(:first-child){text-align:center;width:72px}
.matrix td:first-child{font-weight:500}
.matrix tr.group td{background:var(--slate-50);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
:root[data-theme="dark"] .matrix tr.group td{background:var(--glass-2)}
.role-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.role-list label{display:flex;gap:10px;align-items:center;font-weight:500;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:0;color:var(--text);cursor:pointer}
.role-list label:has(input:checked){border-color:var(--blue);background:rgba(23,105,255,.06)}
.role-list label.off{opacity:.45;cursor:not-allowed}

/* alerts */
.flash{padding:12px 16px;border-radius:12px;border:1px solid;font-weight:500}
.flash.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}.flash.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad)}

/* audit diff */
.diff{font-family:var(--mono);font-size:12px;color:var(--muted);max-width:420px;white-space:pre-wrap;word-break:break-word}
.diff b{color:var(--text);font-weight:600}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(rgba(7,21,46,.72),rgba(7,21,46,.88)),url("../img/street-night.webp") center/cover,radial-gradient(800px 500px at 15% 10%,rgba(23,105,255,.45),transparent 60%),radial-gradient(700px 600px at 90% 90%,rgba(76,141,255,.25),transparent 60%),var(--navy)}
.auth-card{width:100%;max-width:420px;padding:32px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid var(--glass-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 30px 80px rgba(0,0,0,.35);color:#fff}
.auth-card h1{font-size:22px;margin:16px 0 4px}.auth-card p{opacity:.7;margin-bottom:22px}
.auth-card label{color:#c9d6ee}
.auth-card input{background:rgba(255,255,255,.95);color:var(--slate-900);border-color:transparent}
.auth-card .btn{width:100%;justify-content:center;height:44px;margin-top:6px}
.auth-card .err{color:#ffb4ae}

/* ---------- responsive ---------- */
@media (max-width:1100px){.grid-2{grid-template-columns:1fr}}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:280px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none}
  .menu-btn{display:grid}
  .top{padding:12px 16px}.content{padding:16px}
  .form-grid{grid-template-columns:1fr}
  .who .name{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@supports not (backdrop-filter:blur(1px)){.side,.top{background:var(--navy)}.auth-card{background:#10224a}}
.brand-logo{border-radius:10px;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* ================= Executive operations centre ================= */
.x-muted{color:var(--muted);font-size:13px;font-weight:400}
.x-note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.x-h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:18px 0 10px}
.x-hero{position:relative;overflow:hidden;display:flex;gap:24px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;padding:28px 30px;border-radius:22px;color:#fff;
  background:radial-gradient(600px 260px at 85% -20%,rgba(76,141,255,.55),transparent 70%),radial-gradient(500px 240px at 0% 120%,rgba(23,105,255,.35),transparent 70%),linear-gradient(135deg,#0c1b36,#07152e 60%,#0d2a66);
  border:1px solid var(--glass-line);box-shadow:0 20px 50px rgba(7,21,46,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.x-hero h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;font-weight:700}
.x-sub{opacity:.72;margin-top:4px}
.x-eyebrow{font-size:12px;opacity:.75;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.x-dot{width:8px;height:8px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 4px rgba(61,220,151,.18)}
.x-hero-side{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.x-hero-side small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.x-hero-side b{font-weight:600;font-size:14px}
.x-refresh{background:rgba(255,255,255,.12);border:1px solid var(--glass-line)}.x-refresh:hover{background:rgba(255,255,255,.2)}
.x-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px}
.x-filters select{height:34px;width:auto;min-width:130px;font-size:13px}
.x-filters input[type=date]{height:34px;width:auto;font-size:13px}
.x-custom{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.x-custom[hidden]{display:none}
.x-seg{display:inline-flex;background:var(--slate-100);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
:root[data-theme="dark"] .x-seg{background:var(--glass-2)}
.x-seg label,.x-seg a{margin:0;padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:none;white-space:nowrap}
.x-seg{position:relative}.x-seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0}
.x-seg .on{background:var(--surface-solid);color:var(--text);box-shadow:0 1px 3px rgba(7,21,46,.12)}
.x-seg label:has(input:focus-visible){outline:2px solid var(--blue)}
.x-seg.sm a{padding:4px 9px;font-size:12px}
.x-scope{flex-basis:100%;font-size:12px;color:var(--muted)}
.x-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
.x-kpi{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.x-kpi:hover,.x-kpi:focus-visible{transform:translateY(-2px);border-color:rgba(23,105,255,.45);box-shadow:0 12px 30px rgba(23,105,255,.14)}
.x-kpi.tone-warn{border-color:rgba(240,176,74,.6)}.x-kpi.tone-bad{border-color:rgba(229,72,77,.55)}
.x-kpi-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(23,105,255,.1);color:var(--blue);margin-bottom:6px}
.x-kpi.tone-warn .x-kpi-ic{background:var(--warn-bg);color:var(--warn)}.x-kpi.tone-bad .x-kpi-ic{background:var(--bad-bg);color:var(--bad)}
.x-kpi-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.x-kpi-l{font-size:13px;color:var(--muted);font-weight:500}
.x-kpi-v{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.x-kpi-f{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.x-kpi-sub{flex-basis:100%}
.x-delta{font-weight:700}.x-delta.up{color:var(--ok)}.x-delta.down{color:var(--bad)}
.x-tip{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);z-index:5;padding:8px 10px;border-radius:10px;background:#0c1b36;color:#e8eef8;font-size:12px;line-height:1.4;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .15s,transform .15s;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.x-kpi:hover .x-tip,.x-kpi:focus-visible .x-tip{opacity:1;transform:none}
.x-grid{display:grid;gap:20px}
.x-grid-fin{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.x-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.x-grid.tight{gap:18px}
.x-panel .card-h{flex-wrap:wrap}
.x-chart{width:100%;height:auto;display:block;overflow:visible}
.x-chart .grid{stroke:var(--line);stroke-width:1}
.x-chart .ax{fill:var(--muted);font-size:11px;font-family:var(--font)}
.x-chart .hit{fill:transparent}
.x-chart .x-bar-g:hover .hit,.x-chart .x-bar-g:focus .hit{fill:rgba(23,105,255,.07)}
.x-chart .s-billed{fill:#9fb3d6}.x-chart .s-collected{fill:var(--blue)}
.x-chart rect[data-s]{transition:opacity .2s}
.x-chart.hide-billed [data-s=billed],.x-chart.hide-collected [data-s=collected]{opacity:0}
.x-legend{display:flex;gap:6px}
.x-legend button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;background:none;border:1px solid var(--line);color:var(--text);border-radius:999px;padding:4px 10px;cursor:pointer}
.x-legend button[aria-pressed=false]{opacity:.45;text-decoration:line-through}
.x-legend i{width:10px;height:10px;border-radius:3px}.x-legend .s-billed{background:#9fb3d6}.x-legend .s-collected{background:var(--blue)}
.x-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px;margin-top:10px}
.x-rates div{text-align:center;padding:6px;border-radius:8px;background:var(--slate-50)}
:root[data-theme="dark"] .x-rates div{background:var(--glass-2)}
.x-rates small{display:block;font-size:11px;color:var(--muted)}.x-rates b{font-size:13px}
.x-kv{display:grid;grid-template-columns:1fr auto;gap:10px 14px;font-size:14px}
.x-kv dt{color:var(--muted)}.x-kv dd{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.x-kv dt:last-of-type,.x-kv dd:last-of-type{border-top:1px solid var(--line);padding-top:10px}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.x-hbar{display:grid;grid-template-columns:minmax(70px,38%) 1fr auto;gap:10px;align-items:center;font-size:13px;margin-bottom:8px}
.x-hbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-hbar i{height:8px;border-radius:99px;background:var(--slate-100);position:relative;overflow:hidden}
:root[data-theme="dark"] .x-hbar i{background:var(--glass-2)}
.x-hbar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--blue),#5ea0ff)}
.x-hbar b{font-variant-numeric:tabular-nums;font-size:12.5px}
.x-recon{display:block;margin-top:16px;padding:10px 12px;border-radius:10px;background:var(--slate-50);font-size:13px;text-decoration:none;color:var(--text)}
.x-recon.warn{background:var(--warn-bg);color:var(--warn);font-weight:600}
:root[data-theme="dark"] .x-recon{background:var(--glass-2)}
.x-stack{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:2px;margin-bottom:14px}
.a0{background:#8fd3b6}.a1{background:#f5c46b}.a2{background:#f39a4b}.a3{background:#e86a4f}.a4{background:#c4271f}
.x-age{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.x-age a{display:flex;flex-direction:column;padding:10px 12px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .15s}
.x-age a.on,.x-age a:hover{border-color:var(--blue);background:rgba(23,105,255,.05)}
.x-age small{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}.x-age small i{width:8px;height:8px;border-radius:2px}
.x-age b{font-size:15px;font-variant-numeric:tabular-nums}.x-age em{font-style:normal;font-size:11px;color:var(--muted)}
.x-split{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.x-donut{width:130px;height:130px;border-radius:50%;background:var(--g);display:grid;place-items:center;flex:none}
.x-donut div{width:88px;height:88px;border-radius:50%;background:var(--surface-solid);display:grid;place-items:center;align-content:center;text-align:center}
.x-donut b{font-size:24px;line-height:1}.x-donut small{font-size:11px;color:var(--muted)}
.x-leg{list-style:none;flex:1;min-width:150px}
.x-leg a{display:flex;align-items:center;gap:8px;padding:5px 0;color:var(--text);text-decoration:none;font-size:13.5px}
.x-leg i{width:10px;height:10px;border-radius:3px}.x-leg b{margin-left:auto}
.x-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:16px}
.x-mini>*{padding:10px 12px;border-radius:12px;background:var(--slate-50);text-decoration:none;color:var(--text);border:1px solid transparent}
:root[data-theme="dark"] .x-mini>*{background:var(--glass-2)}
.x-mini a:hover{border-color:var(--blue)}
.x-mini small{display:block;font-size:11.5px;color:var(--muted)}.x-mini b{font-size:18px;font-variant-numeric:tabular-nums}
.x-mini .warn b{color:var(--warn)}.x-mini .bad b{color:var(--bad)}
.x-cols{display:flex;gap:10px;align-items:flex-end;height:130px}
.x-cols div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.x-cols i{width:100%;max-width:34px;height:var(--h);min-height:2px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5ea0ff,var(--blue))}
.x-cols b{font-size:11.5px}.x-cols small{font-size:11px;color:var(--muted)}
.x-row{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;border-bottom:1px dashed var(--line)}
.x-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-tiles a{padding:14px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.x-tiles a:hover{border-color:var(--blue);transform:translateY(-1px)}
.x-tiles b{display:block;font-size:24px;font-variant-numeric:tabular-nums}.x-tiles small{color:var(--muted);font-size:12.5px}
.x-tiles .warn b{color:var(--warn)}.x-tiles .bad b{color:var(--bad)}
.x-alerts .card-h{flex-wrap:wrap}
.x-alert-list{list-style:none}
.x-alert-list li{display:flex;gap:14px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.x-sev{width:10px;height:10px;border-radius:50%;flex:none;background:var(--blue)}
.sev-warning .x-sev{background:#f5a524}.sev-critical .x-sev{background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.18)}
.x-alert-body{flex:1;min-width:220px}.x-alert-body small{display:block;color:var(--muted);font-size:12px}
.x-alert-body a{color:var(--text)}
.x-alert-act{display:flex;gap:6px;flex-wrap:wrap}
.x-assign{display:flex;gap:6px}.x-assign select{height:30px;width:150px;font-size:12.5px}
.x-history{padding:12px 20px;font-size:13px}.x-history summary{cursor:pointer;color:var(--muted)}.x-history ul{margin:8px 0 0 18px}
.x-feed{list-style:none;padding:6px 20px 14px}
.x-feed li{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.x-feed li:last-child{border-bottom:0}
.x-feed time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.x-error{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--bad)}
.is-loading .x-kpi-v,.is-loading .x-panel .card-b{position:relative;color:transparent!important}
.is-loading .x-kpi-v::after,.is-loading .x-panel .card-b::after{content:"";position:absolute;inset:4px;border-radius:8px;background:linear-gradient(90deg,var(--slate-100),var(--slate-200),var(--slate-100));background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media (max-width:1200px){.x-grid-fin{grid-template-columns:1fr}.x-age{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.x-grid-2,.x-grid-3{grid-template-columns:1fr}.x-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.x-hero{padding:22px 18px}}
@media (max-width:560px){.x-age{grid-template-columns:repeat(2,minmax(0,1fr))}.x-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.x-kpi{padding:14px}.x-kpi-v{font-size:21px}.x-filters select{flex:1 1 45%}.x-tip{display:none}}

/* ================= Collapsible sidebar + header ================= */
.side-toggle{margin:-8px 4px 8px auto}
.shell{transition:grid-template-columns .2s ease}
.shell.collapsed{grid-template-columns:76px 1fr}
.shell.collapsed .side{padding:20px 10px}
.shell.collapsed .brand span,.shell.collapsed .nav-h,.shell.collapsed .nav a .lbl,.shell.collapsed .nav em{display:none}
.shell.collapsed .brand{justify-content:center;padding:4px 0 18px}
.shell.collapsed .nav a{justify-content:center;padding:10px}
.shell.collapsed .nav{border-top:1px solid var(--glass-line);padding-top:6px;margin-top:6px}
.shell.collapsed .side-toggle{margin:-6px auto 8px}
.shell.collapsed .side-toggle svg{transform:rotate(180deg)}
.side-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.nav a{position:relative;transition:background .15s,color .15s}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.shell.collapsed .nav a[aria-current="page"]::before{left:-10px}
.top-search{flex:1;max-width:420px;position:relative}
.top-search input{height:38px;background:rgba(255,255,255,.1);border:1px solid var(--glass-line);color:#fff;padding-left:36px}
.top-search input::placeholder{color:rgba(255,255,255,.55)}
.top-search svg{position:absolute;left:11px;top:11px;width:16px;height:16px;stroke:rgba(255,255,255,.7);fill:none;stroke-width:2}
.top-search kbd{position:absolute;right:8px;top:8px;font:600 11px var(--font);padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.top-clock{font-size:12.5px;opacity:.8;white-space:nowrap;font-variant-numeric:tabular-nums}
.menu-pop{position:relative}
.menu-pop>summary{list-style:none}.menu-pop>summary::-webkit-details-marker{display:none}
.menu-pop .pop{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:30;padding:6px;border-radius:14px;background:var(--surface-solid);color:var(--text);border:1px solid var(--line);box-shadow:0 20px 50px rgba(7,21,46,.25)}
.menu-pop .pop a,.menu-pop .pop button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;color:var(--text);text-decoration:none;font:inherit;font-size:13.5px;background:none;border:0;cursor:pointer}
.menu-pop .pop a:hover,.menu-pop .pop button:hover{background:var(--slate-100)}
:root[data-theme="dark"] .menu-pop .pop a:hover,:root[data-theme="dark"] .menu-pop .pop button:hover{background:var(--glass-2)}
.menu-pop .pop .pop-h{padding:8px 12px 6px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}
.who-btn{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px}
@media (max-width:1100px){.top-clock{display:none}}
@media (max-width:900px){.shell.collapsed{grid-template-columns:1fr}.side-toggle{display:none}.top-search{max-width:none}.top-search kbd{display:none}.top h1{display:none}}
@media (max-width:560px){.top-search{display:none}}
@media (prefers-reduced-motion:reduce){.x-kpi:hover{transform:none}}
.x-panel,.x-kpi,.x-filters,.x-alerts{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ================= Refinement: restrained enterprise styling =================
   One spacing scale (4/8px), one radius (10px cards, 8px controls), one shadow, neutral borders.
   Glass only on the sidebar; the header is solid navy; content sits on a plain light page. */
:root{
  --bg:#F3F6FB;--surface:#FFFFFF;--surface-solid:#FFFFFF;--text:#172033;--muted:#64748B;--line:#DCE3ED;
  --radius:10px;--radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
}
:root[data-theme="dark"]{--bg:#0A1426;--surface:#0F1D38;--surface-solid:#0F1D38;--text:#E6ECF5;--muted:#93A3BD;--line:#22324F}
.backdrop{display:none}
body{background:var(--bg)}
.card{backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:var(--radius)}
.card-h{padding:14px 16px}.card-h h2{font-size:14.5px;font-weight:600}
.card-b{padding:16px}
.content{padding:24px;gap:16px}

/* header: compact, solid */
.top{background:#07152E;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.08);padding:10px 24px;gap:12px;min-height:60px}
.top h1{font-size:16px;font-weight:600;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto}
.top-search{flex:0 1 380px}
.icon-btn{border-radius:8px;width:34px;height:34px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

/* sidebar: solid navy, labels never clipped */
.side{background:#07152E;backdrop-filter:none;-webkit-backdrop-filter:none;border-right:1px solid rgba(255,255,255,.06);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.nav a{padding:8px 10px;border-radius:8px;font-size:13.5px}
.nav a .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a[aria-current="page"]{background:rgba(23,105,255,.18);box-shadow:none;color:#fff}

/* overview panel */
.x-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 24px;padding:20px 24px;border-radius:var(--radius);background:#0C1B36;border:1px solid #0C1B36;box-shadow:none}
.x-hero h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.x-sub{font-size:13px;opacity:.7;margin-top:2px}
.x-eyebrow{margin:0 0 6px;font-size:12px}
.x-hero-side{gap:24px;align-items:center}
.x-hero-side b{font-size:13.5px}
.x-refresh{background:transparent;border:1px solid rgba(255,255,255,.25);height:34px}
.x-refresh:hover{background:rgba(255,255,255,.08)}

/* filters */
.x-filters{padding:12px 16px;gap:8px}
.x-filters select,.x-filters input[type=date]{height:34px;border-radius:8px;border-color:var(--line)}
.x-seg{border-radius:8px;background:#EEF2F8}
.x-seg label,.x-seg a{border-radius:6px;padding:6px 10px}
.x-seg .on{box-shadow:0 0 0 1px var(--line)}
:root[data-theme="dark"] .x-seg{background:#0A1426}

/* KPI cards: equal height, compact, neutral by default */
.x-kpis{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:1fr;gap:12px}
.x-kpi{border-radius:var(--radius);padding:14px 16px;gap:2px;box-shadow:var(--shadow);min-height:118px}
.x-kpi:hover,.x-kpi:focus-visible{transform:none;border-color:#1769FF;box-shadow:var(--shadow)}
.x-kpi-ic{width:28px;height:28px;border-radius:6px;margin-bottom:8px;background:#EEF4FF}
:root[data-theme="dark"] .x-kpi-ic{background:rgba(23,105,255,.14)}
.x-kpi-ic svg{width:16px;height:16px}
.x-kpi-l{font-size:12.5px}
.x-kpi-v{font-size:22px;font-weight:650;margin:2px 0}
.x-kpi.tone-warn,.x-kpi.tone-bad{border-color:var(--line)}
.x-kpi.tone-warn{box-shadow:inset 3px 0 0 #D98A00,var(--shadow)}.x-kpi.tone-bad{box-shadow:inset 3px 0 0 #C4271F,var(--shadow)}
.x-kpi.tone-warn .x-kpi-ic,.x-kpi.tone-bad .x-kpi-ic{background:#EEF4FF;color:var(--blue)}
:root[data-theme="dark"] .x-kpi.tone-warn .x-kpi-ic,:root[data-theme="dark"] .x-kpi.tone-bad .x-kpi-ic{background:rgba(23,105,255,.14)}
.x-kpi.tone-warn .x-kpi-sub,.x-kpi.tone-warn .x-kpi-f>span:only-child{color:#A15C00}
.x-kpi.tone-bad .x-kpi-sub,.x-kpi.tone-bad .x-kpi-f>span:only-child{color:#C4271F}
.x-tip{border-radius:8px}

/* panels */
.x-grid{gap:16px}
.x-chart .s-billed{fill:#B8C4D6}.x-legend .s-billed{background:#B8C4D6}
.x-legend button{border-radius:6px}
.x-rates div{border-radius:6px;background:#F3F6FB}
.x-mini>*{border-radius:8px;background:#F3F6FB;border:1px solid transparent}
.x-tiles a{border-radius:8px}
.x-tiles a:hover{transform:none}
.x-age a{border-radius:8px}
.x-recon{border-radius:8px;background:#F3F6FB}
.x-stack{height:10px}
.x-hbar i::after{background:#1769FF}
.x-cols i{background:#1769FF;border-radius:4px 4px 0 0}
.x-alert-list li{padding:12px 16px}
.x-feed{padding:4px 16px 12px}
.badge{border-radius:6px}
.btn{border-radius:8px}
:root[data-theme="dark"] .x-mini>*,:root[data-theme="dark"] .x-rates div,:root[data-theme="dark"] .x-recon{background:#0A1426}

/* responsive */
@media (max-width:1200px){.x-hero{grid-template-columns:1fr}}
@media (max-width:900px){.content{padding:16px}.top{padding:10px 16px}.x-kpis{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
@media (max-width:560px){.x-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.x-kpi{min-height:104px;padding:12px}.x-kpi-v{font-size:19px}.x-kpi-ic{display:none}.x-hero{padding:16px}.x-hero-side{gap:12px 20px}.x-seg{width:100%}.x-seg label{flex:1 1 30%;text-align:center}}

.dlg-row td{padding:0!important;border:0!important;height:0}
.dlg{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--surface-solid);color:var(--text);box-shadow:0 20px 60px rgba(7,21,46,.3)}
.dlg::backdrop{background:rgba(7,21,46,.45)}
.dlg h3{font-size:15px;margin-bottom:14px}
@media (max-width:560px){.dlg .form-grid{grid-template-columns:1fr!important}}
.dlg{margin:auto}
textarea{height:auto;min-height:84px;padding:10px 12px;line-height:1.45;resize:vertical}

/* tabs */
.tabbar{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.tabbar button{font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center}
.tabbar button[aria-selected=true]{color:var(--text);border-bottom-color:var(--blue)}
.tabbar button:hover{color:var(--text)}
.tabn{font-size:11px;background:var(--slate-100);border-radius:999px;padding:0 7px;color:var(--muted)}
:root[data-theme="dark"] .tabn{background:var(--glass-2)}
/* breadcrumbs */
.crumbs{display:flex;gap:6px;align-items:center;font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden}
.crumbs a{color:rgba(255,255,255,.75);text-decoration:none}.crumbs a:hover{color:#fff}
.top .ttl{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.top .ttl h1{margin:0}
@media (max-width:900px){.crumbs{display:none}}

/* page header banner: solid navy now that the page background is light */
.glass-hero{background:#0C1B36;border:1px solid #0C1B36;border-radius:var(--radius);padding:20px 24px;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.glass-hero h2{font-size:18px;font-weight:600}
.glass-hero p{opacity:.72}
.glass-hero a:not(.btn){color:#9cc2ff}
.glass-hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.glass-hero .btn.ghost:hover{background:rgba(255,255,255,.08)}

/* ===== Clean light dashboard (white sidebar, soft cards, one blue accent). Same markup, all features unchanged. ===== */
:root:not([data-theme="dark"]){--bg:#F4F6FC;--blue:#2F5BEA;--blue-2:#5B7CF0;--line:#ECEEF5;--muted:#7A8499;--surface:#fff;--radius:14px;--shadow:0 4px 22px rgba(35,49,104,.06)}
:root:not([data-theme="dark"]) .backdrop{background:var(--bg)}
:root:not([data-theme="dark"]) .side{background:#fff;color:#1F2937;border-right:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;padding:22px 0}
:root:not([data-theme="dark"]) .brand{color:#111827;padding:4px 22px 22px;border-bottom:1px solid var(--line);margin-bottom:6px}
:root:not([data-theme="dark"]) .brand b{color:var(--blue);font-size:16px}
:root:not([data-theme="dark"]) .brand small{color:var(--muted);opacity:1}
:root:not([data-theme="dark"]) .side .icon-btn{background:#F4F6FC;border-color:transparent;color:#64748B}
:root:not([data-theme="dark"]) .nav-h{color:#9AA3B5;opacity:1;font-weight:600;letter-spacing:.06em;margin:20px 24px 6px}
:root:not([data-theme="dark"]) .nav{padding:0 14px}
:root:not([data-theme="dark"]) .nav a{position:relative;color:#5B6478;border-radius:10px;padding:10px 12px;font-weight:500}
:root:not([data-theme="dark"]) .nav a:hover{background:#F4F6FC;color:#111827}
:root:not([data-theme="dark"]) .nav a[aria-current="page"]{background:#EEF2FE;color:var(--blue);font-weight:650;box-shadow:none}
:root:not([data-theme="dark"]) .nav a[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--blue)}
:root:not([data-theme="dark"]) .top{background:rgba(255,255,255,.92);color:#111827;border-bottom:1px solid var(--line);backdrop-filter:saturate(160%) blur(12px)}
:root:not([data-theme="dark"]) .top h1{font-size:20px;font-weight:700;color:#111827}
:root:not([data-theme="dark"]) .crumbs,:root:not([data-theme="dark"]) .crumbs a{color:var(--muted)}
:root:not([data-theme="dark"]) .crumbs a:hover{color:var(--blue)}
:root:not([data-theme="dark"]) .top .icon-btn,:root:not([data-theme="dark"]) .top .who-btn{background:#F4F6FC;border-color:transparent;color:#475569}
:root:not([data-theme="dark"]) .top .icon-btn:hover{background:#E8ECFA;color:var(--blue)}
:root:not([data-theme="dark"]) .top-clock{color:var(--muted)}
:root:not([data-theme="dark"]) .top-search{background:#F4F6FC;border:1px solid transparent;color:#64748B;border-radius:12px}
:root:not([data-theme="dark"]) .top-search input{color:#111827;background:transparent}
:root:not([data-theme="dark"]) .top-search:focus-within{border-color:var(--blue);background:#fff}
:root:not([data-theme="dark"]) .avatar{background:var(--blue);color:#fff;border:0}
:root:not([data-theme="dark"]) .who .name{color:#111827}
/* cards */
:root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .x-kpi{background:#fff;border:1px solid transparent;box-shadow:var(--shadow);backdrop-filter:none}
:root:not([data-theme="dark"]) .x-kpi:hover{border-color:#DCE3FB;box-shadow:0 8px 28px rgba(47,91,234,.10)}
:root:not([data-theme="dark"]) .card-h{border-bottom-color:var(--line)}
:root:not([data-theme="dark"]) .card-h h2{font-size:15.5px;font-weight:700;color:#111827}
/* page banners: white card with a blue accent instead of navy */
:root:not([data-theme="dark"]) .glass-hero,:root:not([data-theme="dark"]) .x-hero{background:#fff;border:0;border-left:4px solid var(--blue);color:#111827;box-shadow:var(--shadow)}
:root:not([data-theme="dark"]) .glass-hero p,:root:not([data-theme="dark"]) .x-hero p{color:var(--muted);opacity:1}
:root:not([data-theme="dark"]) .glass-hero a:not(.btn),:root:not([data-theme="dark"]) .x-hero a:not(.btn){color:var(--blue)}
:root:not([data-theme="dark"]) .glass-hero .btn.ghost,:root:not([data-theme="dark"]) .x-hero .btn.ghost{color:var(--blue);border-color:#CBD6FA;background:#fff}
:root:not([data-theme="dark"]) .x-hero *{text-shadow:none}
/* buttons, tables, inputs */
:root:not([data-theme="dark"]) .btn{border-radius:10px;box-shadow:0 4px 12px rgba(47,91,234,.18)}
:root:not([data-theme="dark"]) .btn.ghost,:root:not([data-theme="dark"]) .btn.secondary{box-shadow:none}
:root:not([data-theme="dark"]) .data th{text-transform:none;letter-spacing:0;font-size:12.5px;color:#8A93A8;background:#FAFBFE}
:root:not([data-theme="dark"]) .data td{border-bottom-color:#F1F3F8}
:root:not([data-theme="dark"]) .data tbody tr:hover{background:#F7F9FF}
:root:not([data-theme="dark"]) input,:root:not([data-theme="dark"]) select,:root:not([data-theme="dark"]) textarea{border-radius:10px;border-color:#E3E7F0}
:root:not([data-theme="dark"]) .tabbar button[aria-selected=true]{color:var(--blue)}
:root:not([data-theme="dark"]) .badge.blue{background:#EEF2FE;color:var(--blue)}
:root:not([data-theme="dark"]) .x-refresh{color:var(--blue)!important;background:#EEF2FE!important;border-color:transparent!important;box-shadow:none}

/* top bar in the website header's navy (#0B1B2D), so the portal and the website look like one product */
:root:not([data-theme="dark"]) .top{background:#0B1B2D;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:none}
:root:not([data-theme="dark"]) .top h1{color:#fff}
:root:not([data-theme="dark"]) .crumbs,:root:not([data-theme="dark"]) .crumbs a{color:rgba(255,255,255,.65)}
:root:not([data-theme="dark"]) .crumbs a:hover{color:#fff}
:root:not([data-theme="dark"]) .top .icon-btn,:root:not([data-theme="dark"]) .top .who-btn{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.12)}
:root:not([data-theme="dark"]) .top .icon-btn:hover{background:rgba(255,255,255,.16);color:#fff}
:root:not([data-theme="dark"]) .top-clock{color:rgba(255,255,255,.65)}
:root:not([data-theme="dark"]) .top-search{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
:root:not([data-theme="dark"]) .top-search input{color:#fff}
:root:not([data-theme="dark"]) .top-search input::placeholder{color:rgba(255,255,255,.55)}
:root:not([data-theme="dark"]) .top-search:focus-within{background:#fff;border-color:#fff}
:root:not([data-theme="dark"]) .top-search:focus-within input{color:#0B1B2D}
:root:not([data-theme="dark"]) .who .name{color:#fff}
:root:not([data-theme="dark"]) .avatar{background:#fff;color:#0B1B2D}
:root:not([data-theme="dark"]) .brand{background:#0B1B2D;margin:-22px 0 6px;padding:22px 22px 20px;border-bottom:0}
:root:not([data-theme="dark"]) .brand b{color:#fff}
:root:not([data-theme="dark"]) .brand small{color:rgba(255,255,255,.65)}

/* =====================================================================================
   PNWHS RMC Operations Centre - design system (light theme)
   Midnight navy shell, warm ivory workspace, white panels, royal blue accent.
   8-point spacing, 1px borders, restrained shadows, 8-10px radii. Status colours only for real states.
   ===================================================================================== */
:root:not([data-theme="dark"]){
  --ink:#14202E;--ink-2:#334155;--muted:#5A6677;--line:#E3E1DA;--line-2:#ECEAE4;
  --bg:#F6F5F1;--surface:#FFFFFF;--surface-solid:#FFFFFF;--input:#FFFFFF;
  --blue:#2448C9;--blue-2:#3B5BDB;--blue-ink:#1A389F;--navy:#0B1B2D;
  --radius:10px;--radius-sm:8px;--shadow:0 1px 2px rgba(20,32,46,.05),0 1px 1px rgba(20,32,46,.03);
  --font:"Inter","Inter Tight","Segoe UI",system-ui,sans-serif;--text:var(--ink)
}
:root:not([data-theme="dark"]) body{background:var(--bg);color:var(--ink);font-size:14.5px}
:root:not([data-theme="dark"]) .backdrop{background:var(--bg)}

/* sidebar: midnight navy */
:root:not([data-theme="dark"]) .side{background:#0B1B2D;color:rgba(255,255,255,.78);border-right:1px solid #0B1B2D;padding:0 0 24px}
:root:not([data-theme="dark"]) .brand{background:#0B1B2D;margin:0;padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
:root:not([data-theme="dark"]) .brand b{color:#fff;font-size:15px;letter-spacing:.01em}
:root:not([data-theme="dark"]) .brand small{color:rgba(255,255,255,.55);font-size:11.5px;line-height:1.35}
:root:not([data-theme="dark"]) .side .icon-btn{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.08)}
:root:not([data-theme="dark"]) .side .icon-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-g{margin-top:4px}
.nav-h{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 24px);margin:16px 12px 4px;padding:6px 8px;background:none;border:0;border-radius:6px;cursor:pointer;
  font:600 11px var(--font);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.45);opacity:1}
.nav-h:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.04)}
.nav-h svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.nav-g.closed .nav-h svg{transform:rotate(-90deg)}
.nav-g.closed .nav{display:none}
:root:not([data-theme="dark"]) .nav{padding:0 12px}
:root:not([data-theme="dark"]) .nav a{position:relative;gap:12px;padding:8px 12px;margin:1px 0;border-radius:8px;color:rgba(255,255,255,.74);font-size:13.5px;font-weight:500}
:root:not([data-theme="dark"]) .nav a svg{width:18px;height:18px;opacity:.85}
:root:not([data-theme="dark"]) .nav a:hover{background:rgba(255,255,255,.06);color:#fff}
:root:not([data-theme="dark"]) .nav a[aria-current="page"]{background:rgba(79,123,255,.16);color:#fff;font-weight:600;box-shadow:none}
:root:not([data-theme="dark"]) .nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:#5B84FF}
:root:not([data-theme="dark"]) .nav a[aria-current="page"] svg{opacity:1;color:#8FAEFF}
:root:not([data-theme="dark"]) .nav .badge.blue{background:#5B84FF;color:#fff}
.nav a:focus-visible,.nav-h:focus-visible{outline:2px solid #8FAEFF;outline-offset:1px}

/* top bar */
:root:not([data-theme="dark"]) .top{padding:12px 28px;min-height:64px}
:root:not([data-theme="dark"]) .top h1{font-size:19px;font-weight:650;letter-spacing:-.01em}

/* workspace + panels */
:root:not([data-theme="dark"]) .content{padding:24px 28px 48px;gap:24px}
:root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .x-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
:root:not([data-theme="dark"]) .card-h{padding:16px 20px;border-bottom:1px solid var(--line-2)}
:root:not([data-theme="dark"]) .card-h h2{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
:root:not([data-theme="dark"]) .card-b{padding:20px}
:root:not([data-theme="dark"]) .glass-hero,:root:not([data-theme="dark"]) .x-hero{background:#fff;border:1px solid var(--line);border-left:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);padding:20px 24px}
:root:not([data-theme="dark"]) .x-hero h2,:root:not([data-theme="dark"]) .glass-hero h2{font-size:21px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
:root:not([data-theme="dark"]) .x-hero p,:root:not([data-theme="dark"]) .glass-hero p{color:var(--muted)}

/* KPIs: strong numbers, consistent heights */
:root:not([data-theme="dark"]) .x-kpis{gap:16px}
:root:not([data-theme="dark"]) .x-kpi{min-height:128px;padding:16px 18px;gap:4px;transition:border-color .2s,box-shadow .2s}
:root:not([data-theme="dark"]) .x-kpi:hover{border-color:#C9CFDB;box-shadow:0 4px 14px rgba(20,32,46,.08);transform:none}
:root:not([data-theme="dark"]) .x-kpi-l{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
:root:not([data-theme="dark"]) .x-kpi-v{font-size:28px;font-weight:650;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
:root:not([data-theme="dark"]) .x-kpi-sub{font-size:12.5px;color:var(--muted)}
:root:not([data-theme="dark"]) .x-kpi-ic{background:#EEF1FB;color:var(--blue);border-radius:8px}
:root:not([data-theme="dark"]) .x-kpi.tone-bad{border-top:3px solid #C4271F}
:root:not([data-theme="dark"]) .x-kpi.tone-warn{border-top:3px solid #B76E00}
:root:not([data-theme="dark"]) .x-kpi.tone-ok{border-top:3px solid #11845B}

/* tables */
:root:not([data-theme="dark"]) .data{font-variant-numeric:tabular-nums}
:root:not([data-theme="dark"]) .data th{background:#F3F2EE;color:#4A5568;font-size:12px;font-weight:600;text-transform:none;letter-spacing:.01em;border-bottom:1px solid var(--line)}
:root:not([data-theme="dark"]) .data td{border-bottom:1px solid var(--line-2);color:var(--ink)}
:root:not([data-theme="dark"]) .data tbody tr:hover{background:#FAF9F6}

/* buttons */
:root:not([data-theme="dark"]) .btn{height:36px;padding:0 14px;border-radius:8px;background:var(--blue);border:1px solid var(--blue);color:#fff;font-weight:600;font-size:13.5px;box-shadow:none;transition:background .15s,border-color .15s,color .15s}
:root:not([data-theme="dark"]) .btn:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
:root:not([data-theme="dark"]) .btn.ghost,:root:not([data-theme="dark"]) .btn.secondary{background:#fff;color:var(--ink);border-color:#D4D1C8}
:root:not([data-theme="dark"]) .btn.ghost:hover,:root:not([data-theme="dark"]) .btn.secondary:hover{background:#F6F5F1;border-color:#BFBCB2}
:root:not([data-theme="dark"]) .btn.sm{height:30px;padding:0 10px;font-size:12.5px}
:root:not([data-theme="dark"]) .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* inputs */
:root:not([data-theme="dark"]) .content input:not([type=checkbox]):not([type=radio]),:root:not([data-theme="dark"]) .content select,:root:not([data-theme="dark"]) .content textarea{border:1px solid #D4D1C8;border-radius:8px;background:#fff;color:var(--ink)}
:root:not([data-theme="dark"]) .content input:focus,:root:not([data-theme="dark"]) .content select:focus,:root:not([data-theme="dark"]) .content textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,72,201,.15)}
:root:not([data-theme="dark"]) .field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}

/* badges */
:root:not([data-theme="dark"]) .badge{border-radius:6px;font-weight:600;font-size:11.5px}
:root:not([data-theme="dark"]) .badge.blue{background:#EAEFFC;color:var(--blue-ink)}

/* period control */
:root:not([data-theme="dark"]) .x-seg{background:#EFEDE7;border-radius:8px;padding:3px}
:root:not([data-theme="dark"]) .x-seg label{border-radius:6px;font-weight:600;font-size:13px;color:var(--ink-2)}
:root:not([data-theme="dark"]) .x-seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,32,46,.12)}

@media (prefers-reduced-motion:reduce){.nav-h svg,.x-kpi,.btn{transition:none}}
@media (max-width:900px){:root:not([data-theme="dark"]) .content{padding:16px}:root:not([data-theme="dark"]) .x-kpi-v{font-size:22px}}