/* ══════════════════════════════════════════════════════════════════════════
   THEME v3 · "Fusion"  (Mike, 25 Jul 2026 - combines demo 1 "Pulse" + demo 3 "Command")
   ──────────────────────────────────────────────────────────────────────────
   EVERY rule in this file is scoped to html.theme-v3. With the class absent the
   file is inert and the app renders exactly as before - that is the revert path:
     · in the app:  user menu -> "Classic look"   (persists per device)
     · by URL:      ?look=classic   /   ?look=v3
     · to remove entirely: delete the <link> to this file in index.html.

   What it changes
     1. Desktop navigation moves from the horizontal #topnav back to the left
        #sidebar, now a dark navy command rail (both markups already exist and
        nav() keeps them in sync, so this is purely visual).
     2. Each nav family carries its own colour: bright on the icon, muted on the
        word, full colour only when active (Mike: "every word a different color",
        toned down after review).
     3. Workspace calms down: hairline borders, softer cards, quieter tables.

   Deliberately NOT touched: map overlays, PDF preview, e-mail templates, the
   auth screen, print styles, and anything semantic (won/paid green, error red).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
html.theme-v3 {
  --sb-w: 262px;
  --canvas: #f7f8fa;
  --rail-1: #0d1424;
  --rail-2: #0a1020;
  --rail-line: rgba(255,255,255,0.075);
  --rail-tx: #e8edf5;
  --rail-tx2: #93a6c0;
  --rail-tx3: #6b7f9c;
  --hair: rgba(15,23,42,0.08);
  --hair2: rgba(15,23,42,0.13);
  --r: 10px; --r2: 14px; --r3: 18px;
}
html.theme-v3 body { background: var(--canvas); }

/* Quieter backdrop: one faint brand glow, no competing green/blue washes. */
html.theme-v3 #main-content {
  background:
    radial-gradient(1100px 520px at 85% -12%, rgba(124,58,237,0.055), transparent 60%),
    var(--canvas);
}

/* ── 2 · Desktop layout: left rail in, top nav out ──────────────────────── */
@media (min-width: 901px) {
  html.theme-v3 #sidebar { display: flex; }
  html.theme-v3 #topnav  { display: none !important; }
  /* The rail carries the logo, so the duplicate in the top bar goes away. */
  html.theme-v3 .tb-brand { display: none !important; }
  /* Header is now the top bar alone (was top bar + nav row = 116px). */
  html.theme-v3 .estimator-layout { height: calc(100vh - 60px); }

  /* app.css styles the desktop sidebar as a 94px icon-only rail (stacked icon
     over a 10px label, no company name, no section labels, avatar only) - it was
     never seen because the rail is display:none above 900px. Now that it is the
     navigation again, restore the full-width drawer form, mirroring what the
     mobile block already does below 900px. */
  html.theme-v3 .sb-logo { justify-content: flex-start; padding: 15px 15px 13px; }
  html.theme-v3 .sb-company { display: block; }
  html.theme-v3 .sb-section-label { display: block; }
  html.theme-v3 #sidebar .sb-link {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 11px; line-height: 1.3;
  }
  html.theme-v3 #sidebar .sb-group-hdr .sb-arrow { width: 15px; height: 15px; margin-left: auto; }
  html.theme-v3 .sb-bottom { padding: 10px; }
  html.theme-v3 .sb-user { flex-direction: row; gap: 9px; justify-content: flex-start; padding: 8px 10px; }
  html.theme-v3 .sb-user-info, html.theme-v3 .sb-caret { display: block; }
  html.theme-v3 .sb-user .user-av { background: var(--green2); color: #fff; box-shadow: none; }

  /* ensureLockFilter() renders a "Show all" switch twice on purpose: one in the
     top bar for desktop, one in the sidebar for mobile. Only ever one was
     visible because the sidebar was hidden above 900px. Now that the rail is the
     navigation, the switch belongs beside it and the top-bar copy goes. */
  html.theme-v3 .tb-lockswitch { display: none !important; }

  /* On the Instant Estimator tier the nav is short and the upsell is set to grow
     into the leftover rail (flex:1). In a 220px-tall mobile drawer that reads as
     a filled gap; in a full-height desktop rail it becomes a giant empty panel.
     Keep it its natural size and park it at the bottom of the rail instead. */
  html.theme-v3 #sidebar.ie-tier .sb-ie-upsell:not(.hidden) {
    flex: 0 0 auto; margin-top: auto; padding: 16px 14px;
  }
}

/* ── 3 · The rail ───────────────────────────────────────────────────────── */
html.theme-v3 #sidebar {
  background: linear-gradient(180deg, var(--rail-1), var(--rail-2));
  border-right: 1px solid rgba(0,0,0,0.35);
  color: var(--rail-tx);
  box-shadow: none;
}
html.theme-v3 #sidebar .sb-logo { border-bottom: 1px solid var(--rail-line); padding: 15px 15px 13px; }
html.theme-v3 #sidebar .sb-company { color: #fff; font-size: 15.5px; }
html.theme-v3 #sidebar .sb-section-label { color: var(--rail-tx3); padding: 16px 10px 7px; }
html.theme-v3 .sb-nav { padding: 0 10px; gap: 1px; }
html.theme-v3 #sidebar::-webkit-scrollbar-thumb,
html.theme-v3 .sb-top::-webkit-scrollbar-thumb { background: #26314d; }

/* Colour families. --nv is set per item (top level) or per group (children
   inherit it), so a whole module reads as one colour family instead of 28
   unrelated hues. */
/* The fallback lives on the container, not on .sb-link: a value declared on the
   link itself would beat the family colour inherited from its .sb-group. */
html.theme-v3 .sb-nav { --nv: #94a3b8; }
html.theme-v3 #sidebar .sb-link[data-view="dashboard"]  { --nv: #60a5fa; }
html.theme-v3 #sidebar .sb-link[data-view="prospects"]  { --nv: #c084fc; }
html.theme-v3 #sidebar .sb-link[data-view="clients"]    { --nv: #4ade80; }
html.theme-v3 #sidebar .sb-link[data-view="canvassing"] { --nv: #a78bfa; }
html.theme-v3 #sidebar .sb-link[data-view="estimator"]  { --nv: #e879f9; }
/* One colour per group, inherited by its header and every child link. */
html.theme-v3 #sidebar .sb-group:has([data-view="estimates"])   { --nv: #fbbf24; }
html.theme-v3 #sidebar .sb-group:has([data-view="projects"])    { --nv: #38bdf8; }
html.theme-v3 #sidebar .sb-group:has([data-view="invoices"])    { --nv: #34d399; }
html.theme-v3 #sidebar .sb-group:has([data-view="database"])    { --nv: #fb7185; }
html.theme-v3 #sidebar .sb-group:has([data-view="admin-team"])  { --nv: #94a3b8; }
/* The two AI surfaces keep the brand purple wherever they live. */
html.theme-v3 #sidebar .sb-link[data-view="supplement"],
html.theme-v3 #sidebar .sb-link[data-view="marketing-studio"] { --nv: #a78bfa; }

/* Colour is wayfinding, not decoration: at rest the labels are plain and the
   icons only hint at their family, so the rail stays quiet. Full colour appears
   where you are (active) and where you point (hover). */
html.theme-v3 #sidebar .sb-link {
  padding: 8.5px 11px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
  color: #b7c2d2;
  background: none; text-decoration: none;
  transition: background 0.13s ease, color 0.13s ease;
}
/* The light theme's icon tiles are dropped - they do not read on a dark ground. */
html.theme-v3 #sidebar .sb-link svg {
  width: 18px; height: 18px; padding: 0; border-radius: 0;
  background: none !important; transform: none !important;
  color: color-mix(in srgb, var(--nv) 50%, #64748b) !important;
  transition: color 0.13s ease;
}
html.theme-v3 #sidebar .sb-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
html.theme-v3 #sidebar .sb-link:hover svg { color: var(--nv) !important; }
html.theme-v3 #sidebar .sb-link.active {
  background: color-mix(in srgb, var(--nv) 16%, transparent);
  color: color-mix(in srgb, var(--nv) 45%, #fff);
  box-shadow: inset 3px 0 0 var(--nv);
  font-weight: 700;
}
html.theme-v3 #sidebar .sb-link.active svg { color: var(--nv) !important; }
/* The three flagship surfaces are marked with a hard purple inline in the markup.
   Keep the emphasis, soften it to the rail's register so it reads as an accent
   rather than three shouting rows. */
html.theme-v3 #sidebar .sb-link[data-view="canvassing"] span,
html.theme-v3 #sidebar .sb-link[data-view="estimator"] span,
html.theme-v3 #sidebar .sb-link[data-view="marketing-studio"] span { color: #b0a2e8 !important; }
html.theme-v3 #sidebar .sb-link.active[data-view="canvassing"] span,
html.theme-v3 #sidebar .sb-link.active[data-view="estimator"] span,
html.theme-v3 #sidebar .sb-link.active[data-view="marketing-studio"] span { color: inherit !important; }

/* Groups: chevron header + children on a guide line. */
html.theme-v3 #sidebar .sb-group { margin-bottom: 2px; }
html.theme-v3 #sidebar .sb-group-hdr .sb-arrow { opacity: 0.5; }
html.theme-v3 #sidebar .sb-sub {
  margin: 1px 0 8px 20px; padding-left: 9px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
html.theme-v3 #sidebar .sb-sub-link {
  padding: 6.5px 10px; font-size: 13.5px; font-weight: 500;
}
html.theme-v3 #sidebar .sb-group:has(.sb-link.active) > .sb-group-hdr {
  color: color-mix(in srgb, var(--nv) 45%, #fff);
}

/* Counters ride along quietly, colouring up only when their row is active. */
html.theme-v3 #sidebar .sb-badge {
  background: rgba(255,255,255,0.10); color: #cbd5e1;
  min-width: 18px; height: 18px; border-radius: 99px; font-size: 10.5px;
}
html.theme-v3 #sidebar .sb-link.active .sb-badge {
  background: color-mix(in srgb, var(--nv) 34%, transparent);
  color: color-mix(in srgb, var(--nv) 62%, #fff);
}

/* Locked (out-of-plan) rows stay legible on the dark ground. */
html.theme-v3 #sidebar .sb-link.nav-locked { opacity: 0.55; }
html.theme-v3 #sidebar .sb-link.nav-locked:hover { opacity: 1; background: rgba(255,255,255,0.07); }
html.theme-v3 #sidebar .nav-lock svg { stroke: #c4b5fd; }
html.theme-v3 #sidebar .nav-lock-pill { background: rgba(167,139,250,0.18); color: #c4b5fd; }

/* Upgrade link + account block. */
html.theme-v3 #sidebar .sb-upgrade { color: #c4b5fd; }
html.theme-v3 #sidebar .sb-bottom { border-top: 1px solid var(--rail-line); }
html.theme-v3 #sidebar .sb-user:hover { background: rgba(255,255,255,0.06); }
html.theme-v3 #sidebar .sb-user-name { color: #fff; }
html.theme-v3 #sidebar .sb-user-role,
html.theme-v3 #sidebar .sb-caret { color: var(--rail-tx3); }
html.theme-v3 #sidebar .sb-user-menu {
  background: #131c31; border-color: rgba(255,255,255,0.13);
  box-shadow: 0 18px 44px rgba(4,8,20,0.55);
}
html.theme-v3 #sidebar .sb-user-menu .sm-item { color: var(--rail-tx2); }
html.theme-v3 #sidebar .sb-user-menu .sm-item:hover { background: rgba(124,58,237,0.24); color: #fff; }
html.theme-v3 #sidebar .sb-user-menu .sm-item.danger { color: #fca5a5; }
html.theme-v3 #sidebar .sb-user-menu .sm-sep { background: var(--rail-line); }

/* ── 4 · Top bar ────────────────────────────────────────────────────────── */
html.theme-v3 #topbar {
  padding: 10px 22px; background: #fff;
  border-bottom: 1px solid var(--hair); box-shadow: none;
}
html.theme-v3 .topbar-search input {
  background: var(--canvas); border: 1px solid var(--hair2); border-radius: 9px;
  font-size: 13.5px;
}
html.theme-v3 .topbar-search input:focus {
  background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-d);
}
html.theme-v3 .tb-icon { border-radius: 9px; }
html.theme-v3 .tb-menu { border-radius: 12px; border-color: var(--hair2); }

/* ── 5 · Mobile shell (drawer keeps the same rail language) ─────────────── */
@media (max-width: 900px) {
  html.theme-v3 .mobile-header {
    background: #fff; border-bottom: 1px solid var(--hair);
  }
  html.theme-v3 #sidebar { box-shadow: 12px 0 40px rgba(4,8,20,0.4); }
}

/* ── 6 · Surfaces ───────────────────────────────────────────────────────── */
html.theme-v3 .card,
html.theme-v3 .stat-card,
html.theme-v3 .pipeline-col,
html.theme-v3 .breakdown,
html.theme-v3 .note-item {
  border: 1px solid var(--hair); border-radius: var(--r2);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.05);
}
html.theme-v3 .card-hdr { padding: 14px 18px; border-bottom: 1px solid var(--hair); }
html.theme-v3 .card-hdr h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }

/* Stat cards: one calm treatment, the number does the talking. */
html.theme-v3 .stat-card { padding: 16px 18px; }
html.theme-v3 .stat-card:not(.green):not(.blue):not(.orange):not(.purple) { background: #fff; }
html.theme-v3 .stat-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--text3);
}
html.theme-v3 .stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
html.theme-v3 .stat-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,23,42,0.05), 0 14px 32px rgba(15,23,42,0.09); }

html.theme-v3 .page-hdr { padding: 26px 26px 0; margin-bottom: 20px; }
html.theme-v3 .page-hdr h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
html.theme-v3 .page-subtitle { font-size: 13.5px; }

/* ── 7 · Tables: hairlines only, no zebra, purple row hover ─────────────── */
html.theme-v3 thead th {
  background: #fff; color: var(--text3);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  padding: 11px 16px; border-bottom: 1px solid var(--hair2);
}
html.theme-v3 tbody td { padding: 13px 16px; font-size: 14px; }
html.theme-v3 tbody tr { border-bottom: 1px solid var(--hair); }
html.theme-v3 tbody tr:nth-child(even) { background: transparent; }
html.theme-v3 tbody tr:hover { background: rgba(124,58,237,0.04); }
/* Money and counts line up column-wise. */
html.theme-v3 .td-money, html.theme-v3 .td-num, html.theme-v3 .td-mono { font-variant-numeric: tabular-nums; }

/* ── 8 · Badges + chips ─────────────────────────────────────────────────── */
html.theme-v3 .badge { font-weight: 700; font-size: 11px; padding: 3.5px 10px; border: none; }
html.theme-v3 .tag { font-weight: 700; font-size: 11px; }

/* ── 9 · Controls ───────────────────────────────────────────────────────── */
/* Softer rectangles instead of full pills - reads as software, not marketing.
   The purple primary stays purple (Mike's standing decision in app.css). */
html.theme-v3 .btn-primary, html.theme-v3 .map-go-btn {
  border-radius: var(--r); padding: 10px 18px; font-size: 13.5px; font-weight: 600;
}
html.theme-v3 .btn-sec { border-radius: var(--r); padding: 9px 16px; font-weight: 600; }
html.theme-v3 .btn-danger-solid { border-radius: var(--r); }
html.theme-v3 .field input, html.theme-v3 .field select, html.theme-v3 .field textarea,
html.theme-v3 .search-bar input, html.theme-v3 .search-bar select {
  border-radius: var(--r); border-color: var(--hair2);
}
html.theme-v3 .tab-btn { font-size: 14px; }
html.theme-v3 .modal { border-radius: var(--r3); border-color: var(--hair2); }

/* ── 10 · Pipeline board ────────────────────────────────────────────────── */
html.theme-v3 .pipeline-col { background: #f1f3f7; }
html.theme-v3 .pipeline-card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
html.theme-v3 .pipeline-card:hover { border-color: rgba(124,58,237,0.32); box-shadow: 0 6px 18px rgba(15,23,42,0.08); }
html.theme-v3 .pipeline-card .pc-val { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 2 · per-screen polish
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 11 · Job-type colour coding: keep the signal, drop the wash ──────────
   projects.js and leads.js paint whole cards/rows with a heavy tint (insurance
   purple, retail blue) inline. The information is worth keeping, the flood is
   not: the surface goes white, the colour concentrates in the 4px edge bar and
   the border, and hover feedback works again. Matched on the inline value so
   nothing else is caught; classic look keeps the original wash. */
html.theme-v3 .pipeline-card[style*="124,58,237"],
html.theme-v3 .pipeline-card[style*="59,130,246"] {
  background: #fff !important;
  transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}
html.theme-v3 .pipeline-card[style*="124,58,237"] {
  border-color: rgba(124,58,237,0.30) !important;
  box-shadow: inset 4px 0 0 #7c3aed, 0 1px 2px rgba(15,23,42,0.05) !important;
}
html.theme-v3 .pipeline-card[style*="59,130,246"] {
  border-color: rgba(59,130,246,0.30) !important;
  box-shadow: inset 4px 0 0 #3b82f6, 0 1px 2px rgba(15,23,42,0.05) !important;
}
html.theme-v3 .pipeline-card[style*="124,58,237"]:hover {
  transform: translateY(-2px);
  box-shadow: inset 4px 0 0 #7c3aed, 0 8px 22px rgba(15,23,42,0.10) !important;
}
html.theme-v3 .pipeline-card[style*="59,130,246"]:hover {
  transform: translateY(-2px);
  box-shadow: inset 4px 0 0 #3b82f6, 0 8px 22px rgba(15,23,42,0.10) !important;
}
/* Same treatment for the customer table (leads.js paints whole rows). */
html.theme-v3 tbody tr[style*="124,58,237"],
html.theme-v3 tbody tr[style*="59,130,246"] { background: transparent !important; }
html.theme-v3 tbody tr[style*="124,58,237"] { box-shadow: inset 4px 0 0 #7c3aed !important; }
html.theme-v3 tbody tr[style*="59,130,246"] { box-shadow: inset 4px 0 0 #3b82f6 !important; }
html.theme-v3 tbody tr[style*="124,58,237"]:hover,
html.theme-v3 tbody tr[style*="59,130,246"]:hover { background: rgba(124,58,237,0.045) !important; }

/* ── 12 · Board furniture ───────────────────────────────────────────────── */
html.theme-v3 .pipeline-col-hdr { padding: 13px 15px 11px; border-bottom: none; }
html.theme-v3 .pipeline-col-title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
html.theme-v3 .pipeline-col-count {
  background: #fff; border: 1px solid var(--hair); color: var(--text3);
  font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 9px;
}
html.theme-v3 .pipeline-card .pc-name { font-size: 13.5px; font-weight: 700; }
html.theme-v3 .pipeline-card .pc-addr { font-size: 12px; }
html.theme-v3 .pipeline-col.pcol-add { border: 1.5px dashed var(--hair2); }
html.theme-v3 .pipeline-col.pcol-add:hover { border-color: rgba(124,58,237,0.45); background: rgba(124,58,237,0.04); }

/* ── 13 · Dashboard ─────────────────────────────────────────────────────── */
html.theme-v3 .dash-kpi {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r2);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.05);
}
html.theme-v3 .dash-kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; }
html.theme-v3 .dash-kpi-value,
html.theme-v3 .ct-big { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
html.theme-v3 .dash-kpi-icon { border-radius: 10px; }
html.theme-v3 .dash-lb-row { border-radius: 10px; }
html.theme-v3 .dash-lb-row:hover { background: rgba(124,58,237,0.045); }
html.theme-v3 .dash-lb-name { font-weight: 700; }
html.theme-v3 .dash-lb-amt { font-variant-numeric: tabular-nums; font-weight: 700; }
html.theme-v3 .dash-lb-bar { height: 4px; background: var(--slate-t, #eef1f6); }
html.theme-v3 .ct-mini-box {
  border-radius: 10px; border: 1px solid var(--hair); background: #fff;
}
html.theme-v3 .ct-mini-box b { font-variant-numeric: tabular-nums; }
html.theme-v3 .wx-d, html.theme-v3 .wx-day { border-radius: var(--r); }

/* ── 14 · Segmented controls ────────────────────────────────────────────── */
/* projects.js writes the active segment inline; it reads --seg-on, which only
   this theme defines, so classic keeps its green. */
html.theme-v3 {
  --seg-on: var(--accent);
  /* Job type reads the same colour everywhere: retail blue, insurance purple.
     Read by setJobType / setProjJobType; undefined in classic, which keeps green. */
  --jt-retail: #3b82f6;
}
html.theme-v3 .seg-toggle, html.theme-v3 .dash-seg { border-radius: 10px; }
html.theme-v3 .seg-toggle .seg-btn.on,
html.theme-v3 .dash-seg-btn.on {
  background: #fff; color: var(--sel-fg);
  box-shadow: 0 1px 3px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(124,58,237,0.35);
}
html.theme-v3 .tabs { padding: 0 26px; }
html.theme-v3 .tab-btn.active { border-bottom-width: 2px; }

/* ── 15 · Toolbars, search rows, empty states ───────────────────────────── */
html.theme-v3 .search-bar { padding: 0 26px; margin-bottom: 16px; }
html.theme-v3 .search-bar input,
html.theme-v3 .search-bar select { border-radius: var(--r); border-color: var(--hair2); font-size: 13.5px; }
html.theme-v3 .search-bar input:focus,
html.theme-v3 .search-bar select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-d);
}
html.theme-v3 .empty-state { padding: 52px 24px; }
html.theme-v3 .empty-state p { font-size: 14.5px; color: var(--text2); }
html.theme-v3 .empty-state svg { color: var(--text3); opacity: 0.7; }

/* ── 16 · Modals ────────────────────────────────────────────────────────── */
html.theme-v3 .modal-hdr { padding: 18px 22px; border-bottom: 1px solid var(--hair); }
html.theme-v3 .modal-hdr h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; }
html.theme-v3 .modal-ftr { padding: 14px 22px; border-top: 1px solid var(--hair); background: #fcfcfd; }
html.theme-v3 .modal { box-shadow: 0 28px 76px rgba(15,23,42,0.24); }

/* ── 17 · Section shells (Settings, SMS, Email) ─────────────────────────── */
html.theme-v3 .set-shell-nav,
html.theme-v3 .sms-shell-nav { border-color: var(--hair); }
html.theme-v3 .set-nav-item { border-radius: 9px; font-weight: 500; }
html.theme-v3 .set-nav-item.active {
  background: var(--sel-bg); color: var(--sel-fg); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
html.theme-v3 .sms-shell-nav .sb-link.active,
html.theme-v3 .sms-shell-nav a.active {
  background: var(--sel-bg); color: var(--sel-fg); box-shadow: inset 3px 0 0 var(--accent);
}

/* ── 18 · Numbers line up everywhere they are money or counts ───────────── */
html.theme-v3 .stat-value,
html.theme-v3 .kpi-value,
html.theme-v3 .pc-val,
html.theme-v3 .result-card .rv,
html.theme-v3 .sb-badge,
html.theme-v3 .tb-badge { font-variant-numeric: tabular-nums; }