:root{
  --bg:#EAEEF4; --bg-panel:#FFFFFF; --bg-elev:#F3F6FB;
  --border:#EBEFF5; --border-soft:#F1F4F9;
  --text:#0F1F3D; --text-dim:#566480; --text-muted:#94A0B5;
  --accent:#2F80ED; --accent-dim:#1B62C9; --accent-soft:#E9F2FE;
  --pos:#16A34A; --neg:#E24B4A; --warn:#BA7517;
  --bank2:#1FA8BC; --bank2-soft:#E2F8FC;
  --grad:linear-gradient(135deg,#2F80ED 0%,#27C4D9 100%);
  --r-card:20px; --r-ctrl:13px; --r-pill:999px;
  --shadow:0 8px 28px rgba(20,44,86,.07),0 1px 3px rgba(20,44,86,.05);
  --shadow-sm:0 4px 14px rgba(20,44,86,.06);
}
html,body{background:var(--bg)!important;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif!important;}

/* ---- layout shift for fixed sidebar ---- */
body.v2{padding-left:258px!important;box-sizing:border-box;}
.v2 .app{margin-left:0!important;}
.v2 nav.tabs{display:none!important;}

/* ---- sidebar ---- */
.v2-side{position:fixed;top:0;left:0;width:258px;height:100vh;background:var(--bg);padding:22px 16px;
  border-right:1px solid rgba(20,44,86,.06);display:flex;flex-direction:column;gap:3px;z-index:500;overflow-y:auto;}
.v2-brand{display:flex;align-items:center;gap:12px;padding:6px 10px 20px;}
.v2-brand .lg{width:44px;height:44px;border-radius:13px;background:var(--grad);display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:var(--shadow-sm);}
.v2-brand .bt{font-size:16px;font-weight:800;color:var(--text);line-height:1.1;}
.v2-brand .bs{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:2px;}
.v2-nav{display:flex;flex-direction:column;gap:2px;}
.v2-nav a,.v2-gbtn{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;font-size:14px;
  font-weight:600;color:var(--text-dim);transition:.14s;cursor:pointer;border:none;background:none;
  font-family:inherit;width:100%;text-align:left;text-decoration:none;}
.v2-nav a i,.v2-gbtn i.lead{font-size:20px;color:var(--text-muted);}
.v2-nav a:hover,.v2-gbtn:hover{background:rgba(255,255,255,.65);color:var(--text);}
.v2-nav a:hover i{color:var(--text);}
.v2-nav a.active{background:#fff;color:var(--text);font-weight:800;box-shadow:var(--shadow-sm);}
.v2-nav a.active i{color:var(--text);}
.v2-gbtn.cur{color:var(--text);font-weight:800;} .v2-gbtn.cur i.lead{color:var(--text);}
.v2-gbtn .chev{margin-left:auto;font-size:16px;color:var(--text-muted);transition:.2s;display:flex;}
.v2-grp.open .v2-gbtn .chev{transform:rotate(180deg);}
.v2-kids{display:none;flex-direction:column;gap:2px;margin:2px 0 4px 25px;padding-left:14px;border-left:1.5px solid var(--border);}
.v2-grp.open .v2-kids{display:flex;}
.v2-kids a{padding:9px 13px;font-size:13.5px;}
.v2-badge{margin-left:auto;font-size:11px;font-weight:800;padding:2px 9px;border-radius:var(--r-pill);}
.v2-badge.amber{background:#FBF1DF;color:var(--warn);} .v2-badge.green{background:#E7F7EF;color:var(--pos);}
.v2-foot{margin-top:auto;} .v2-divider{height:1px;background:var(--border);margin:14px 8px;}

/* ---- topbar (was header.top) ---- */
.v2 header.top{border-bottom:none!important;padding:26px 34px 14px!important;align-items:center!important;flex-wrap:wrap;gap:18px!important;}
.v2 header.top .brand h1{display:none!important;}
.v2 header.top .brand .sub{font-size:25px!important;font-weight:800!important;color:var(--text)!important;letter-spacing:-.02em!important;text-transform:none!important;}
.v2-search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r-pill);padding:11px 18px;
  color:var(--text-muted);font-size:13.5px;box-shadow:var(--shadow-sm);font-weight:600;min-width:230px;margin-left:auto;}
.v2-search input{border:none;background:none;outline:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);width:100%;}
.v2-search .kbd{font-size:11px;background:var(--bg);border-radius:7px;padding:3px 7px;font-weight:700;color:var(--text-muted);}

/* ---- KPI chips ---- */
.v2 .kpis{gap:12px!important;flex-wrap:wrap;}
.v2 .kpi{background:#fff;border-radius:var(--r-ctrl);padding:13px 18px!important;box-shadow:var(--shadow-sm);}
.v2 .kpi .label{color:var(--text-muted)!important;}
.v2 .kpi .value{font-weight:800!important;}

/* ---- cards / panels ---- */
.v2 .card,.v2 .note,.v2 .table-wrap{background:var(--bg-panel)!important;border:none!important;
  border-radius:var(--r-card)!important;box-shadow:var(--shadow)!important;}
.v2 .card{padding:22px 24px!important;}
.v2 .table-wrap{overflow:hidden;}
.v2 table th{background:transparent!important;border-bottom:1px solid var(--border)!important;}
.v2 table td{border-color:var(--border)!important;}
.v2 main,.v2 .content,.v2 section{padding-left:34px;padding-right:34px;}

/* ---- controls ---- */
.v2 .chip,.v2 .filter-select{border:none!important;border-radius:var(--r-ctrl)!important;
  background:#fff!important;box-shadow:var(--shadow-sm)!important;font-weight:700!important;}
.v2 .chip.active{background:var(--grad)!important;color:#fff!important;box-shadow:0 4px 12px rgba(47,128,237,.3)!important;}
.v2 .bank-tag,.v2 .src-pill,.v2 .pill{border-radius:var(--r-pill)!important;border:none!important;}
.v2 .bar{background:var(--grad)!important;opacity:1!important;border-radius:var(--r-pill);}

/* ===== DEEP COMPONENT REDESIGN ===== */
/* friendlier labels: kill the dense uppercase terminal look */
.v2 .label,.v2 .kpi .label,.v2 .card-sub,.v2 .src-pill,.v2 .legend,.v2 .muted-cap,.v2 .col-cap{
  letter-spacing:0!important;text-transform:none!important;}
.v2 .label,.v2 .kpi .label{font-size:12.5px!important;font-weight:600!important;color:var(--text-muted)!important;}

/* brand logo tile becomes white so the gradient mark shows */
.v2-brand .lg{background:#fff!important;padding:7px;}
.v2-brand .lg svg{width:100%;height:100%;display:block;}

/* tables: roomy, soft, sentence-case headers, row hover */
.v2 table{border-collapse:separate!important;border-spacing:0!important;width:100%;}
.v2 table th{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;
  font-weight:700!important;color:var(--text-muted)!important;padding:12px 16px!important;
  border-bottom:1px solid var(--border)!important;background:transparent!important;}
.v2 table td{padding:14px 16px!important;font-size:13.5px!important;border-top:1px solid var(--border)!important;
  border-bottom:none!important;color:var(--text)!important;font-weight:600;}
.v2 table tbody tr:hover td{background:#F7F9FC!important;}
.v2 .table-wrap{padding:8px 10px 2px!important;}

/* KPI chips bigger + friendlier */
.v2 .kpi{padding:16px 20px!important;border-radius:14px!important;}
.v2 .kpi .value{font-size:22px!important;font-weight:800!important;}

/* filter bars roomier */
.v2 .filters,.v2 .toolbar,.v2 .chip-group{gap:10px!important;align-items:center!important;}
.v2 .filters{margin-bottom:18px!important;flex-wrap:wrap;}

/* hide native selects; replaced by .v2sel custom dropdowns */
.v2 .v2sel select{
  position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important;overflow:hidden;}
.v2sel{position:relative;display:inline-block;vertical-align:middle;}
.v2sel-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:none;border-radius:12px;
  padding:10px 15px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text);
  box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap;}
.v2sel-btn:hover{box-shadow:var(--shadow);}
.v2sel-btn .cv{color:var(--accent);font-size:15px;display:flex;transition:.2s;}
.v2sel.open .v2sel-btn .cv{transform:rotate(180deg);}
.v2sel-menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border-radius:14px;box-shadow:var(--shadow);
  padding:7px;min-width:100%;width:max-content;max-width:300px;z-index:600;display:none;max-height:330px;overflow:auto;}
.v2sel.open .v2sel-menu{display:block;}
.v2sel-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-dim);padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;}
.v2sel-menu button:hover{background:var(--bg);color:var(--text);}
.v2sel-menu button.sel{background:var(--accent-soft);color:var(--accent);}
.v2sel.mini .v2sel-btn{padding:6px 11px;font-size:12px;border-radius:9px;gap:7px;}
.v2sel.mini .v2sel-btn .cv{font-size:13px;}

/* kill the terminal uppercase + tracking everywhere for the friendly reference look */
.v2 *{letter-spacing:normal!important;text-transform:none!important;}
.v2 .big,.v2 .value,.v2 .val{letter-spacing:-.02em!important;}

/* ===== SCALE UP (was feeling small) ===== */
.v2 .kpi .value{font-size:25px!important;}
.v2 .kpi .label{font-size:13px!important;}
.v2-nav a{font-size:14.5px!important;padding:12px 14px!important;}
.v2-nav .v2-kids a{font-size:13.5px!important;}
.v2 header.top .brand .sub{font-size:29px!important;}
.v2 table td{font-size:14px!important;padding:15px 16px!important;}
.v2 table th{font-size:13px!important;}
.v2 .card-h h3,.v2 h3{font-size:17px!important;}
.v2 .v2sel-btn{font-size:14px!important;}
.v2 .chip{font-size:13px!important;padding:11px 18px!important;}

/* ===== SUPPORT PAGE POLISH ===== */
.v2 .info-banner{border:none!important;border-radius:16px!important;background:var(--accent-soft)!important;
  color:var(--accent-dim)!important;font-size:13.5px!important;padding:13px 18px!important;margin:0 0 20px!important;
  box-shadow:var(--shadow-sm);}
.v2 .modeswitch{display:inline-flex!important;background:#fff!important;border-radius:14px!important;padding:5px!important;
  box-shadow:var(--shadow-sm)!important;gap:4px!important;border:none!important;overflow:visible!important;margin-bottom:20px;}
.v2 .modeswitch button{border:none!important;border-right:none!important;border-radius:10px!important;
  padding:11px 20px!important;font-size:14px!important;font-weight:700!important;color:var(--text-dim)!important;
  background:none!important;text-transform:none!important;letter-spacing:normal!important;}
.v2 .modeswitch button:hover{color:var(--text)!important;}
.v2 .modeswitch button.active{background:var(--grad)!important;color:#fff!important;box-shadow:0 4px 12px rgba(47,128,237,.3)!important;}
.v2 .search{flex:1;min-width:220px;max-width:360px;background:#fff!important;border:none!important;
  border-radius:12px!important;box-shadow:var(--shadow-sm)!important;font-size:14px!important;padding:12px 16px!important;}
.v2 table.tk{font-size:14px!important;}
.v2 .pri,.v2 .st,.v2 .row-count,.v2 .cust{font-size:12.5px!important;}
.v2 .st{padding:5px 11px!important;}
.v2 .detail .empty-detail{font-size:14px!important;}
.v2 .modeswitch+.view,.v2 .filters{margin-bottom:18px;}


/* ===== QA FIXES ===== */
.v2 .margin-bar{display:inline-block!important;height:22px!important;width:78px!important;min-width:78px!important;
  border-radius:999px!important;background:var(--accent-soft)!important;position:relative!important;overflow:hidden!important;
  vertical-align:middle!important;padding:0!important;}
.v2 .margin-bar>span{position:absolute!important;inset:0 auto 0 0!important;border-radius:999px!important;background:var(--grad)!important;}
.v2 .margin-bar>em{position:relative!important;z-index:1!important;display:block!important;text-align:center!important;
  line-height:22px!important;font-size:12px!important;font-weight:800!important;color:var(--text)!important;padding:0!important;}
.v2 .expiry-pill{border-radius:999px!important;padding:4px 12px!important;font-size:11.5px!important;font-weight:700!important;display:inline-block;}
.v2 .v2sel.status .v2sel-btn{border-radius:999px!important;box-shadow:none!important;padding:6px 13px!important;font-weight:700!important;}
.v2 .v2sel.status .v2sel-btn .cv{color:inherit!important;opacity:.65;}


/* ===== ROUND 2 POLISH ===== */
/* branded loading screen (not generic white) */
#__loading{background:#EAEEF4!important;color:#94A0B5!important;font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;}
/* clickable brand */
.v2-brand{cursor:pointer;text-decoration:none;}
.v2-brand:hover .bt{color:var(--accent);}
/* ===== ROUND 3: scroll-within long tables + SIM orders/shipments polish ===== */
/* contained scroll so the top panel/filters stay put and ~12-15 rows show */
.v2 .table-wrap{max-height:calc(100vh - 290px)!important;overflow:auto!important;padding:0 2px!important;}
/* P&L revenue-by-customer sits below the chart, keep it shorter so it stays on screen */
.v2 .table-wrap:has(table.cust){max-height:42vh!important;}
.v2 .table-wrap thead{position:sticky!important;top:0!important;z-index:8!important;}
.v2 .table-wrap thead tr{background:#fff!important;}
.v2 .table-wrap thead th{background:#fff!important;box-shadow:0 -18px 0 #fff, inset 0 -1px 0 var(--border)!important;}
.v2 .table-wrap{padding-top:0!important;}

.v2 .mv-tab-count{opacity:.7;}
/* pending/completed status pills rounded */
.v2 .st,.v2 .st-pending,.v2 .st-completed{border-radius:999px!important;padding:5px 12px!important;font-weight:700!important;display:inline-block;}
/* adjustments panel -> soft card */
.v2 .adj-log{background:var(--card)!important;border:none!important;border-radius:var(--r-card)!important;box-shadow:var(--shadow)!important;padding:20px 24px!important;}
/* section titles cleaner */
.v2 .section-title{font-size:16px!important;font-weight:800!important;color:var(--text)!important;}

/* ===== ROUND 4: no same-as-background panels ===== */
/* inventory cards always solid white (empty ones were 60% opacity -> showed slate through) */
.v2 .stock-card{background:#fff!important;border:none!important;border-radius:16px!important;box-shadow:var(--shadow-sm)!important;}
.v2 .stock-card.is-empty{opacity:1!important;}
.v2 .stock-card.is-empty .count{color:var(--text-muted)!important;}
/* order-insights panels solid white (belt-and-braces over .adj-log) */
.v2 [data-block-id="insights"] .adj-log{background:#fff!important;}

/* ===== ROUND 4: inventory cards solid white (no blending with bg) ===== */
.v2 .stock-card{background:#fff!important;border:none!important;border-radius:14px!important;box-shadow:var(--shadow-sm)!important;}
.v2 .stock-card.is-empty{opacity:1!important;}
.v2 .stock-card.is-empty .head .type,.v2 .stock-card.is-empty .num,.v2 .stock-card.is-empty .stock-val{color:var(--text-muted)!important;}

/* ===== GLOBAL SEARCH dropdown ===== */
.v2-search{position:relative;}
.v2sr-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:min(440px,82vw);background:#fff;
  border-radius:16px;box-shadow:var(--shadow);padding:8px;max-height:64vh;overflow:auto;z-index:1000;display:none;}
.v2sr-menu.open{display:block;}
.v2sr-cat{font-size:11px;font-weight:800;color:var(--text-muted);padding:9px 12px 4px;}
.v2sr-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--text);}
.v2sr-item:hover{background:var(--bg);}
.v2sr-item i{font-size:18px;color:var(--accent);flex-shrink:0;}
.v2sr-item .v2sr-l{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;}
.v2sr-item .v2sr-s{font-size:12px;color:var(--text-muted);font-weight:600;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%;text-align:right;}
.v2sr-empty{padding:18px;text-align:center;color:var(--text-muted);font-size:13px;font-weight:600;}
.v2sr-more{padding:5px 12px 10px;font-size:11.5px;color:var(--text-muted);font-weight:600;}

/* overview uses <header> (no .top) — match the topbar look */
.v2 .app>header:not(.top){border-bottom:none!important;background:transparent!important;padding:24px 34px 12px!important;align-items:center!important;flex-wrap:wrap;gap:18px!important;}

/* ===== ROUND 5: catch remaining old-color elements ===== */
/* adjustments panel (and any .adj-log inside a block) -> solid white */
.v2 .block .adj-log{background:#fff!important;}
/* customer-detail inline buttons (Add name / Save) were hard-coded old-blue */
.v2 #alias-add,.v2 #__save{background:var(--grad)!important;border:none!important;border-radius:12px!important;
  padding:11px 18px!important;font-size:13.5px!important;font-weight:700!important;color:#fff!important;
  box-shadow:0 4px 12px rgba(47,128,237,.3)!important;letter-spacing:normal!important;}
.v2 #alias-input{background:#fff!important;border:none!important;border-radius:12px!important;
  box-shadow:var(--shadow-sm)!important;padding:11px 14px!important;font-size:13.5px!important;}
/* modals + their form fields */
.v2 .modal{background:#fff!important;border:none!important;border-radius:22px!important;box-shadow:var(--shadow)!important;}
.v2 .modal input,.v2 .modal select,.v2 .modal textarea{background:#fff!important;border:1px solid var(--border)!important;border-radius:10px!important;}
.v2 .modal .delta-preview{background:var(--bg)!important;border-radius:10px!important;}

/* ===== DE-AI REFINEMENT PASS (2026-06-11) — hairline borders over heavy shadows, white sidebar on a grey canvas, flat accent, dark numbers (matches Shopeers / ACRU references) ===== */
:root{
  --bg:#F4F5F7; --bg-elev:#EFF1F4;
  --border:#E6E8EC; --border-soft:#EDEEF1;
  --accent:#3B6FF6; --accent-dim:#2B55D4; --accent-soft:#EEF2FE;
  --grad:#3B6FF6;
  --r-card:14px; --r-ctrl:10px; --r-lg:18px; /* --r-lg: large surfaces (drop zones, hero banners) */
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  /* P&L per-bank series palette (intentional multi-bank coding on pnl.html):
     bank 1 = --accent, bank 2 = a distinct hue so the two banks read apart.
     Centralised here so the colours are named/reusable, not ad-hoc one-offs. */
  --bank2:#7A5AC2; --bank2-soft:#EFEAF8;
  /* Pipeline stage series (deliberate per-stage coding on pipeline.html). */
  --stage-target:#94A0B5; --stage-contacted:#2F80ED; --stage-qualified:#27C4D9;
  --stage-sampling:#7C3AED; --stage-negotiating:#BA7517; --stage-won:#16A34A; --stage-lost:#E24B4A;
}
html,body{background:var(--bg)!important;}
/* white sidebar, hairline divider, subtle active state */
.v2-side{background:#fff!important;border-right:1px solid var(--border)!important;}
.v2-nav a:hover,.v2-gbtn:hover{background:var(--bg)!important;}
.v2-nav a.active{background:var(--accent-soft)!important;color:var(--accent)!important;box-shadow:inset 3px 0 0 var(--accent)!important;}
.v2-nav a.active i{color:var(--accent)!important;}
.v2-brand .lg{box-shadow:none!important;border:1px solid var(--border)!important;}
/* cards & panels: defined by a hairline border, almost no shadow */
.v2 .card,.v2 .kpi,.v2 .note,.v2 .table-wrap,.v2 .adj-log,.v2 .stock-card,.v2 .info-banner,.v2 .modal{border:1px solid var(--border)!important;box-shadow:var(--shadow)!important;}
/* controls: bordered, flat */
.v2 .v2-search,.v2 .v2sel-btn,.v2 .chip,.v2 .filter-select,.v2 .search,.v2 .modeswitch{border:1px solid var(--border)!important;box-shadow:none!important;}
/* primary actions: flat solid accent, no gradient */
.v2 .chip.active,.v2 .modeswitch button.active,.v2 #alias-add,.v2 #__save{background:var(--accent)!important;box-shadow:none!important;border:1px solid var(--accent)!important;color:#fff!important;}
.v2 .bar{background:var(--accent)!important;}
/* headline numbers stay dark; colour is reserved for small deltas/pills */
.v2 .kpi .value,.v2 .stat-num,.v2 .big,.v2 .bignum,.v2 .val{color:var(--text)!important;}
/* floating menus keep definition without the heavy shadow */
.v2sel-menu,.v2sr-menu{border:1px solid var(--border)!important;box-shadow:var(--shadow)!important;}

/* ===== Pipeline page polish (de-AI the pl- kanban components) 2026-06-11 ===== */
.v2 .pl-card{background:var(--bg-panel)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow)!important;border-radius:12px!important;}
.v2 .pl-search{border:1px solid var(--border)!important;background:var(--bg-panel)!important;box-shadow:none!important;}
.v2 .pl-card-name,.v2 .pl-dname,.v2 .pl-col-count,.v2 .pl-col-title{color:var(--text)!important;}

/* ===== DARK / LIGHT MODE (toggle in sidebar; persists in localStorage 'simplio-theme') ===== */
html[data-theme="dark"]{
  --bg:#0F1626; --bg-panel:#19212F; --bg-elev:#212B3C;
  --border:#2A3550; --border-soft:#232E45;
  --text:#E8EDF6; --text-dim:#A6B4CC; --text-muted:#72839E;
  --accent:#5B8DEF; --accent-dim:#3B6FF6; --accent-soft:#1F2C49;
  --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
html[data-theme="dark"] body{background:var(--bg)!important;color:var(--text)!important;}
html[data-theme="dark"] .v2-side{background:var(--bg-panel)!important;border-right-color:var(--border)!important;}
html[data-theme="dark"] .v2 .card,html[data-theme="dark"] .v2 .kpi,html[data-theme="dark"] .v2 .note,html[data-theme="dark"] .v2 .table-wrap,html[data-theme="dark"] .v2 .adj-log,html[data-theme="dark"] .v2 .stock-card,html[data-theme="dark"] .v2 .modal,html[data-theme="dark"] .v2 .pl-card,html[data-theme="dark"] .v2 .pl-drawer{background:var(--bg-panel)!important;border-color:var(--border)!important;}
html[data-theme="dark"] .v2-search,html[data-theme="dark"] .v2sel-btn,html[data-theme="dark"] .v2 .chip,html[data-theme="dark"] .v2 .search,html[data-theme="dark"] .v2 .modeswitch,html[data-theme="dark"] .v2sel-menu,html[data-theme="dark"] .v2sr-menu,html[data-theme="dark"] .v2 .pl-search{background:var(--bg-panel)!important;border-color:var(--border)!important;color:var(--text)!important;}
html[data-theme="dark"] .v2-brand .lg{background:var(--bg-elev)!important;border-color:var(--border)!important;}
html[data-theme="dark"] .v2-brand .bt{color:var(--text)!important;}
html[data-theme="dark"] .v2-nav a,html[data-theme="dark"] .v2-gbtn{color:var(--text-dim)!important;}
html[data-theme="dark"] .v2-nav a:hover,html[data-theme="dark"] .v2-gbtn:hover{background:var(--bg-elev)!important;color:var(--text)!important;}
html[data-theme="dark"] .v2-nav a.active{background:var(--accent-soft)!important;color:#fff!important;}
html[data-theme="dark"] .v2-nav a.active i{color:#fff!important;}
html[data-theme="dark"] .v2 table th{color:var(--text-muted)!important;}
html[data-theme="dark"] .v2 table td{color:var(--text)!important;border-color:var(--border)!important;}
html[data-theme="dark"] .v2 table tbody tr:hover td{background:var(--bg-elev)!important;}
html[data-theme="dark"] .v2 .kpi .value,html[data-theme="dark"] .v2 .stat-num,html[data-theme="dark"] .v2 .big,html[data-theme="dark"] .v2 .bignum,html[data-theme="dark"] .v2 .val,html[data-theme="dark"] .v2 .pl-card-name,html[data-theme="dark"] .v2 .pl-col-title,html[data-theme="dark"] .v2 .kpis .value,html[data-theme="dark"] .v2 .section-title{color:var(--text)!important;}
/* charts (SVG/canvas) carry baked light colours -> keep their cards light in dark mode so they stay readable */
html[data-theme="dark"] .v2 .card:has(svg),html[data-theme="dark"] .v2 .card:has(canvas){background:#fff!important;border-color:var(--border)!important;}
html[data-theme="dark"] .v2 .card:has(svg) *,html[data-theme="dark"] .v2 .card:has(canvas) *{color:#0F1F3D;}
/* sidebar theme toggle button */
.v2-foot{margin-top:auto;padding-top:12px;}
.v2-themetoggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1px solid var(--border);border-radius:13px;padding:11px 13px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text-dim);cursor:pointer;transition:.14s;}
.v2-themetoggle:hover{color:var(--text);background:var(--bg-elev);}
.v2-themetoggle i{font-size:19px;color:var(--text-muted);}

/* ============================================================
   DESIGN SYSTEM · shared controls (2026-06-15 consolidation)
   One button system + control sizing, used app-wide. Scoped to
   .v2 with !important so it beats the per-page inline styles that
   Stage 3 migrations delete.
   ============================================================ */
:root{ --h-control:40px; --h-control-sm:30px; --r-control:var(--r-ctrl); }

.btn--primary, .btn--ghost, .btn--sm, .btn--danger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:13px!important; font-weight:700;
  letter-spacing:0!important; text-transform:none!important; line-height:1;
  height:var(--h-control); padding:0 16px; border-radius:var(--r-control)!important;
  border:1px solid transparent; box-shadow:none!important; cursor:pointer; white-space:nowrap;
  transition:filter .12s, background .12s, border-color .12s, color .12s;
}
.btn--primary{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; }
.btn--primary:hover{ filter:brightness(.95); }
.btn--ghost{ background:transparent!important; color:var(--text-dim)!important; border-color:var(--border)!important; }
.btn--ghost:hover{ color:var(--text)!important; background:var(--bg-elev)!important; }
.btn--danger{ background:transparent!important; color:var(--neg)!important; border-color:rgba(214,74,74,.5)!important; }
.btn--danger:hover{ background:rgba(214,74,74,.08)!important; }
.btn--sm{ height:var(--h-control-sm); padding:0 12px; background:transparent!important; color:var(--text-dim)!important; border-color:var(--border)!important; }
.btn--sm:hover{ color:var(--accent)!important; border-color:var(--accent)!important; background:transparent!important; }

/* Stage 3b · modeswitch segments adopt the chip look (active = accent-soft).
   Appended last so it wins over the earlier .v2 .modeswitch rules. */
.v2 .modeswitch{ display:inline-flex!important; gap:8px!important; background:transparent!important; border:none!important; padding:0!important; box-shadow:none!important; margin-bottom:18px; }
.v2 .modeswitch button{ height:var(--h-control)!important; padding:0 14px!important; border:1px solid var(--border)!important; border-radius:var(--r-control)!important; background:var(--bg-panel)!important; color:var(--text-dim)!important; font-family:inherit; font-size:13px!important; font-weight:600!important; letter-spacing:0!important; text-transform:none!important; box-shadow:none!important; cursor:pointer; }
.v2 .modeswitch button:hover{ color:var(--text)!important; border-color:var(--accent)!important; }
.v2 .modeswitch button.active{ background:var(--accent-soft)!important; color:var(--accent)!important; border-color:transparent!important; box-shadow:none!important; }
html[data-theme="dark"] .v2 .modeswitch button{ background:var(--bg-panel)!important; }
html[data-theme="dark"] .v2 .modeswitch button.active{ background:var(--accent-soft)!important; color:var(--accent)!important; }

/* Stage 3c · one status-pill SHAPE for every variant (semantic colour classes
   keep their soft green/amber/red/grey tints). Listed .v2-scoped (beats theme-v2's
   own .v2 .st sizing) AND un-scoped (board .statuschip, portal .st). tag-flag excluded. */
.v2 .pill,.v2 .st-pill,.v2 .st,.v2 .rowpill,.v2 .statuschip,.v2 .expiry-pill,
.pill, .st-pill, .st, .rowpill, .statuschip, .expiry-pill{
  display:inline-flex!important; align-items:center!important; justify-content:center;
  height:22px!important; min-height:22px!important; padding:0 10px!important; border-radius:var(--r-pill)!important;
  border:none!important; font-family:inherit; font-size:12px!important; font-weight:700!important;
  letter-spacing:0!important; text-transform:none!important; white-space:nowrap; vertical-align:middle; line-height:1!important;
}

/* Stage 3d · inputs / search / selects share one height, radius, border, font.
   Listed both .v2-scoped (beats per-page dashboard rules) and un-scoped (board/portal). */
.v2 input[type="text"],.v2 input[type="email"],.v2 input[type="password"],.v2 input[type="number"],.v2 input[type="search"],.v2 input[type="date"],.v2 input[type="month"],.v2 textarea,.v2 .search,
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="date"],input[type="month"],textarea,.search{
  min-height:var(--h-control); border-radius:var(--r-control)!important; border:1px solid var(--border)!important;
  background:var(--bg-elev); color:var(--text); font-family:inherit; font-size:13px!important; box-shadow:none!important;
}
.v2 textarea,textarea{ min-height:72px; }
/* native selects (portal/board and any non-upgraded select): one size + one caret */
select{
  min-height:var(--h-control); border-radius:var(--r-control)!important; border:1px solid var(--border)!important;
  background-color:var(--bg-elev); color:var(--text); font-family:inherit; font-size:13px!important; cursor:pointer;
  appearance:none; -webkit-appearance:none; padding:0 32px 0 12px; box-shadow:none!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238A95AA' fill='none' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
/* dashboard custom dropdown control matches the same height/radius */
.v2 .v2sel-btn{ min-height:var(--h-control); border-radius:var(--r-control)!important; font-size:13px!important; }

/* Stage 3e · one section-title size/weight everywhere (incl. portal/board .sec-h). */
.v2 .section-title,.section-title,.v2 .sec-h,.sec-h{
  font-size:16px!important; font-weight:700!important; letter-spacing:0!important; text-transform:none!important; color:var(--text)!important;
}

/* Follow-up #2 · editable status dropdowns (status-select / cost-status, upgraded to
   .v2sel.status) adopt the read-only pill shape. The sidebar JS sets the soft state
   tint + colour inline; the caret stays to signal the control is editable. */
.v2sel.status .v2sel-btn{
  height:24px!important; min-height:24px!important; padding:0 9px!important;
  border-radius:var(--r-pill)!important; border:none!important; box-shadow:none!important;
  font-family:inherit; font-size:12px!important; font-weight:700!important; letter-spacing:0!important; gap:5px!important;
}
.v2sel.status .v2sel-btn .v2sel-lbl{ font-size:12px!important; }
.v2sel.status .v2sel-btn .cv{ font-size:13px; opacity:.85; }