/* DealerPulse v6 "Fluent" — Dynamics 365-style layer. Loaded AFTER styles.css.
   Legacy variables are remapped so every var(--gold)/var(--navy) call site adopts the new look. */
/* ===== TOKENS ===== */
/* The ONE place a design value is written; everything below uses var(--v6-*). */
:root {
  /* Brand */
  --v6-brand: #1B2F4E; --v6-brand-deep: #14243C; --v6-brand-ink: #0E1A2C; --v6-brand-shadow: #0A1424;
  --v6-brand-line: #2E4668; --v6-brand-soft: #8A9BB5; --v6-brand-muted: #7F8FA8;
  --tenant-primary: #1B2F4E;           /* applyTenant() still overrides this inline */
  --tenant-accent:  #8A6219;
  --tenant-accent-ink: var(--v6-surface);   /* text on the accent; applyTenant() picks light or dark per tenant */
  --v6-chrome: var(--tenant-primary);
  --v6-chrome-accent: var(--tenant-accent);   /* white label: each client's accent (applyTenant) */
  /* On the header colour: translucent white so any tenant colour shows through */
  --v6-on-chrome-sep: rgba(255,255,255,.35); --v6-on-chrome-hover: rgba(255,255,255,.12);
  --v6-on-chrome-field: rgba(255,255,255,.14); --v6-on-chrome-field-ink: rgba(255,255,255,.85); --v6-on-chrome-placeholder: rgba(255,255,255,.8);
  /* Action / selection */
  --v6-action: #0F6CBD; --v6-action-h: #115EA3; --v6-action-ink: #0F548C;
  --v6-sel: #EBF3FC; --v6-sel-strong: #CCE0F5; --v6-sel-strong-h: #BCD6F2;
  /* Surfaces */
  --v6-canvas: #F3F3F3; --v6-rail: #EBEBEB; --v6-surface: #FFFFFF; --v6-surface-2: #F5F5F5; --v6-surface-alt: #F7F7F7;
  --v6-hover: #DCDCDC; --v6-hover-soft: #E6E6E6; --v6-disabled-bg: #F0F0F0; --v6-disabled-fg: #A19F9D;
  /* Text */
  --v6-t1: #242424; --v6-t2: #424242; --v6-t3: #616161; --v6-t4: #8A8886; --v6-t-cool: #4A5468;
  /* Lines */
  --v6-stroke: #5C5C5C; --v6-stroke2: #616161; --v6-row: #ADADAD; --v6-edge-strong: #3D3D3D;
  --v6-card-line: #242424;   /* near-black 2px edge on cards/tiles (Bruce: thicker, black, 3D blocks) */
  --v6-card-w: 2px; --v6-line: 1px;
  --v6-divider: #8A8A8A;     /* v5 grey rule (legacy --border/--borderG), e.g. the HASA key/value strip dividers */
  /* Status */
  --v6-ok: #107C10; --v6-ok-h: #0E700E; --v6-ok-bg: #F1FAF1; --v6-warn: #BC4B09; --v6-warn-bg: #FDF6F3;
  --v6-bad: #C50F1F; --v6-bad-h: #B10E1C; --v6-bad-bg: #FDE7E9; --v6-bad-line: #EEACB2;
  --v6-purple: #6B4FA0; --v6-purple-bg: #F7F4FB;
  /* Chart palette */
  --v6-chart-1: #0F6CBD; --v6-chart-2: #8764B8; --v6-chart-3: #107C10;
  /* Type (Fluent 2 ramp) */
  --v6-font: 'Segoe UI','Segoe UI Variable Text',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --v6-fs-cap2: 10px; --v6-fs-cap: 12px; --v6-fs-body: 14px; --v6-fs-sub2: 16px; --v6-fs-sub1: 20px; --v6-fs-title3: 24px;
  --v6-lh-cap: 16px; --v6-lh-body: 20px; --v6-lh-sub2: 22px; --v6-lh-sub1: 28px; --v6-lh-title3: 32px;
  /* Shape */
  --v6-r-sm: 4px; --v6-r-md: 8px; --v6-r-lg: 20px;
  /* Depth */
  --v6-sh2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --v6-sh4: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
  --v6-sh16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
  --v6-scrim: rgba(0,0,0,.4);   /* dimmed page behind a side panel */
  /* 3D blocks (Bruce): a solid offset "slab" edge bottom-right + soft depth shadow + slight top-down shading. */
  --v6-raise: 4px 4px 0 #3A3A3A, 6px 10px 18px rgba(0,0,0,.28);
  --v6-raise-sm: 3px 3px 0 #3A3A3A, 4px 7px 12px rgba(0,0,0,.24);
  --v6-raise-login: 6px 6px 0 #0A1424, 10px 18px 40px rgba(0,0,0,.45);
  --v6-print-line: #CCCCCC;   /* print.css's thin grey block edge */
  --v6-alert-edge: #C62828; --v6-panel-tint: #F7F9FC;   /* one-offs: Variance Bridge warning edge, Autoline cron-note card */
  --v6-block-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #EEF1F5 100%);
  /* legacy remap: v5 names are aliases of tokens (same values), so old markup follows the tokens */
  --bg: var(--v6-canvas); --surface: var(--v6-surface); --card: var(--v6-surface); --cardAlt: var(--v6-surface-alt);
  --border: var(--v6-divider); --borderG: var(--v6-divider);
  --gold: var(--v6-action); --goldL: var(--v6-action-h); --goldBg: var(--v6-sel);
  --navy: var(--v6-t1); --navyL: var(--v6-t2);
  --text: var(--v6-t1); --textM: var(--v6-t3); --textD: var(--v6-t4);
  --green: var(--v6-ok); --greenL: var(--v6-ok-h); --greenBg: var(--v6-ok-bg);
  --amber: var(--v6-warn); --red: var(--v6-bad); --redBg: var(--v6-bad-bg);
  --radius: var(--v6-r-md); --shadow: var(--v6-sh2); --shadowM: var(--v6-sh4);
}

/* ===== BASE ===== */
body { font-family: var(--v6-font); font-size: var(--v6-fs-body); line-height: 20px; background: var(--v6-canvas); color: var(--v6-t1); -webkit-font-smoothing: antialiased; }
.v6-ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── App frame ── */
#screen-app.active { height: 100vh; min-height: 0; }
.v6-body { flex: 1; display: flex; min-height: 0; }
.main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0 24px 24px; overflow-y: auto; }
.footer { flex-shrink: 0; height: 28px; padding: 0 16px; display: flex; align-items: center; justify-content: center; font-size: var(--v6-fs-cap); color: var(--v6-t3); background: var(--v6-surface); border-top: 1px solid var(--v6-stroke); }
.footer-ver { margin-left: 4px; color: var(--v6-action); font-weight: 400; border-bottom: 0; cursor: pointer; }
.footer-ver:hover { color: var(--v6-action-h); text-decoration: underline; }

/* ── Header (48px) ── */
.hdr { height: 48px; padding: 0 8px 0 0; background: var(--v6-chrome); border-bottom: 3px solid var(--v6-chrome-accent); box-sizing: content-box; display: flex; align-items: center; gap: 4px; position: relative; z-index: 50; }
.hdr-logo-center { display: none; }
.hdr-brand { font-family: var(--v6-font); font-size: var(--v6-fs-sub2); font-weight: 600; letter-spacing: 0; color: var(--v6-surface); display: flex; align-items: center; gap: 10px; padding-left: 4px; }
/* 32px tall so square tenant marks (e.g. an 'S' icon) stay legible; wide wordmarks just get wider. */
.hdr-brand .hdr-logo, #hdr-dp-logo { height: 34px; width: auto; max-width: 200px; object-fit: contain; background: var(--v6-surface); border-radius: 4px; padding: 2px 5px; box-sizing: border-box; }
.v6-hdr-sep { width: 1px; height: 20px; background: var(--v6-on-chrome-sep); margin: 0 8px; }
#hdr-brand-name { opacity: 1 !important; margin-left: 0 !important; font-size: var(--v6-fs-body); font-weight: 400; color: var(--v6-surface); }
.v6-hdr-btn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--v6-surface); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.v6-hdr-btn:hover { background: var(--v6-on-chrome-hover); }
.v6-hdr-btn .v6-ic { width: 18px; height: 18px; }
.v6-search { flex: 1; display: flex; justify-content: center; }
.v6-search label { width: 420px; max-width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--v6-on-chrome-field); border-radius: 4px; color: var(--v6-on-chrome-field-ink); }
.v6-search input { flex: 1; border: 0; background: transparent; color: var(--v6-surface); font: inherit; font-size: var(--v6-fs-body); outline: none; min-width: 0; }
.v6-search input::placeholder { color: var(--v6-on-chrome-placeholder); }
.hdr-right { gap: 2px; }
.v6-avatar { width: 32px; height: 32px; margin-left: 6px; border: 0; border-radius: 16px; background: var(--tenant-accent); color: var(--tenant-accent-ink); font: 600 var(--v6-fs-cap) var(--v6-font); cursor: pointer; }
.v6-menu { position: absolute; right: 8px; top: 46px; width: 260px; background: var(--v6-surface); border-radius: 8px; box-shadow: var(--v6-sh16); padding: 8px 0; display: none; z-index: 200; color: var(--v6-t1); }
.v6-menu.open { display: block; }
.v6-menu .hdr-user { text-align: left; padding: 8px 16px 12px; border-bottom: 1px solid var(--v6-stroke); margin-bottom: 4px; }
.v6-menu .hdr-user strong { color: var(--v6-t1); font-size: var(--v6-fs-body); }
.v6-menu .hdr-user em { color: var(--v6-t3); font: 400 var(--v6-fs-cap) var(--v6-font); letter-spacing: 0; }
.v6-menu button { width: 100%; height: 32px; border: 0; background: transparent; text-align: left; padding: 0 16px; font: inherit; font-size: var(--v6-fs-body); color: var(--v6-t1); cursor: pointer; display: flex; align-items: center; gap: 10px; }
.v6-menu button:hover { background: var(--v6-surface-2); }
.v6-badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--v6-bad); font: 600 var(--v6-fs-cap2) var(--v6-font); color: var(--v6-surface); display: flex; align-items: center; justify-content: center; }

/* ── Sitemap (232px, collapses to 48px) ── */
/* The groups scroll; the collapse button (top) and the Settings switcher (bottom) stay pinned. */
.nav.v6-sitemap { width: 232px; flex-shrink: 0; flex-direction: column; align-items: stretch; background: var(--v6-rail); border-right: 2px solid var(--v6-edge-strong); border-bottom: 0; box-shadow: none; padding: 0; overflow: hidden; gap: 0; position: static; height: auto; min-height: 0; }
.v6-sitemap-top { height: 44px; display: flex; align-items: center; padding: 0 4px; flex-shrink: 0; }
.v6-sitemap-top button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--v6-t2); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v6-sitemap-top button:hover { background: var(--v6-hover-soft); }
.v6-sitemap-groups { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
.v6-group-h { padding: 12px 16px 4px; font-size: var(--v6-fs-cap); font-weight: 600; color: var(--v6-t3); white-space: nowrap; }
.v6-nav-item { position: relative; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 10px; margin: 0 4px; border-radius: 4px; font-size: var(--v6-fs-body); line-height: 20px; color: var(--v6-t1); text-decoration: none; white-space: nowrap; cursor: pointer; }
.v6-nav-item:hover { background: var(--v6-hover); text-decoration: none; color: var(--v6-t1); }
.v6-nav-item .v6-ic { width: 20px; height: 20px; color: var(--v6-t2); stroke-width: 1.5; }
.v6-nav-item.active { background: var(--v6-sel-strong); color: var(--v6-action-ink); font-weight: 600; }
.v6-nav-item.active .v6-ic { color: var(--v6-action-ink); }
.v6-nav-item.active:hover { background: var(--v6-sel-strong-h); color: var(--v6-action-ink); }
.v6-nav-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--v6-action); }
.v6-nav-item[hidden] { display: none; }
.v6-area { height: 52px; flex-shrink: 0; border: 0; border-top: 1px solid var(--v6-stroke); background: transparent; display: flex; align-items: center; gap: 10px; padding: 0 12px; font: inherit; font-size: var(--v6-fs-body); color: var(--v6-t1); cursor: pointer; }
.v6-area:hover { background: var(--v6-hover-soft); }
.v6-area-tile { width: 28px; height: 28px; border-radius: 4px; background: var(--v6-chrome); color: var(--v6-surface); font-size: var(--v6-fs-cap); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v6-area-label { flex: 1; text-align: left; }
body.v6-nav-collapsed .nav.v6-sitemap { width: 48px; }
body.v6-nav-collapsed .v6-group-h, body.v6-nav-collapsed .v6-nav-item span, body.v6-nav-collapsed .v6-area-label, body.v6-nav-collapsed .v6-area > .v6-ic { display: none; }
body.v6-nav-collapsed .v6-nav-item { padding: 0; justify-content: center; margin: 2px 4px; }
body.v6-nav-collapsed .v6-area { justify-content: center; padding: 0; }

/* ── Page head → command bar + title (every tab already has .pg-head/.pg-actions) ── */
.pg-head { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0 -24px 16px; }
.pg-head > div:not(.pg-actions) { padding: 16px 24px 0; }
.pg-head .pg-actions { order: -1; min-height: 44px; padding: 6px 16px; gap: 2px; background: var(--v6-surface); border-bottom: 2px solid var(--v6-edge-strong); position: sticky; top: 0; z-index: 20; }
.pg-head .pg-actions .btn { background: transparent; border: 0; color: var(--v6-t1); font-size: var(--v6-fs-body); font-weight: 400; height: 32px; padding: 0 8px; }
.pg-head .pg-actions .btn:hover { background: var(--v6-surface-2); }
.pg-head .pg-actions .btn .v6-ic { color: var(--v6-action); }
.pg-head .pg-actions select, .pg-head .pg-actions input { height: 32px; }
.pg-title { font-family: var(--v6-font); font-size: var(--v6-fs-sub1); line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--v6-t1); }
.pg-sub { margin-top: 2px; }
.tab-pane > .card:first-child, .tab-pane > .print-header + .card { margin-top: 16px; }

/* ── Buttons ── */
.btn { font-family: var(--v6-font); font-size: var(--v6-fs-body); font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: 4px; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .1s; }
.btn-gold, .btn-navy { background: var(--v6-action); color: var(--v6-surface); border: 0; }
.btn-gold:hover, .btn-navy:hover { background: var(--v6-action-h); }
.btn-outline { background: var(--v6-surface); border: 1px solid var(--v6-stroke2); color: var(--v6-t1); }
.btn-outline:hover { background: var(--v6-surface-2); }
.btn-ghost { background: transparent; border: 0; color: var(--v6-t1); font-weight: 400; }
.btn-ghost:hover { background: var(--v6-surface-2); color: var(--v6-t1); border-color: transparent; }
.btn-danger { background: var(--v6-surface); border: 1px solid var(--v6-bad-line); color: var(--v6-bad); }
.btn-danger:hover { background: var(--v6-bad-bg); }
.btn-sm { height: 24px; padding: 0 8px; font-size: var(--v6-fs-cap); }
.btn-full { width: 100%; height: 40px; }
.btn:disabled { background: var(--v6-disabled-bg); color: var(--v6-disabled-fg); border-color: transparent; cursor: default; }

/* ── Cards, KPI tiles, banners ── */
/* Edge, depth, face and type come from the COMPONENTS families; only the extras live here. */
.card-title { margin-bottom: 12px; }
.card-title::after { display: none; }
.stats-strip { gap: 16px; margin-bottom: 16px; }
/* Type follows the Dynamics 365 / Fluent 2 ramp: 12 caption · 14 body · 16 subtitle · 20 title.
   D365 has no display numerals — KPI values sit at 20px (Subtitle 1), never larger. */
.stat { padding: 10px 14px 12px; margin-right: 4px; }
.stat::before { top: auto; bottom: 0; height: 3px; }
.stat-lbl { margin-bottom: 2px; }
#af-funnel-card .af-hero-val { font-family: var(--v6-font); font-size: var(--v6-fs-title3); line-height: 32px; font-weight: 600; margin: 2px 0; }
#af-funnel-card .af-big { font-family: var(--v6-font); font-size: var(--v6-fs-sub1); line-height: 28px; font-weight: 600; }
#af-funnel-card .af-arrow { font-size: var(--v6-fs-body); }
.month-banner, .summary-banner { color: var(--v6-t1); margin-right: 4px; }
.date-badge { background: var(--v6-sel); border: 0; border-radius: 4px; color: var(--v6-action-ink); margin-top: 16px; }
.date-badge-lbl, .date-badge-val, .date-badge-day { font-family: var(--v6-font); letter-spacing: 0; text-transform: none; }

/* ── Forms ── */
.fg label { font-family: var(--v6-font); font-size: var(--v6-fs-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--v6-t2); }
.fg input, .fg select, .fg textarea, .main input[type=text], .main input[type=number], .main input[type=date], .main input[type=email], .main select, .main textarea {
  font-family: var(--v6-font); font-size: var(--v6-fs-body); color: var(--v6-t1); background: var(--v6-surface);
  border: 1px solid var(--v6-stroke2); border-bottom-color: var(--v6-t3); border-radius: 4px; min-height: 32px; }
.fg input:focus, .fg select:focus, .main input:focus, .main select:focus, .main textarea:focus { outline: none; border-bottom: 2px solid var(--v6-action); box-shadow: none; }
/* D365 field metrics: 32px controls with 8px side padding. !important because v5 markup and
   JS write padding inline (e.g. padding:8px 12px), which would otherwise win and make every
   filter row 37-43px tall. Checkboxes, radios, colour and file pickers keep their own size. */
.fg input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), .fg select,
.main input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), .main select {
  height: 32px !important; min-height: 32px; padding: 0 8px !important; line-height: 30px; box-sizing: border-box; }
.fg select, .main select { padding-right: 28px !important; }
.fg textarea, .main textarea { padding: 6px 8px !important; box-sizing: border-box; }
.fg { gap: 4px; margin-bottom: 10px; }
.form-grid, .form-grid-wide { gap: 10px 16px; }
.fg input:read-only { background: var(--v6-surface-2); color: var(--v6-t2); border-color: transparent; }
.form-sec { padding-top: 8px; }
input[type=checkbox], input[type=radio] { accent-color: var(--v6-action); }

/* ── Grids / tables ── */
thead tr { background: var(--v6-surface); }
th { font-family: var(--v6-font) !important; font-size: var(--v6-fs-body) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v6-t2) !important; background: var(--v6-surface); border-bottom: 1px solid var(--v6-stroke) !important; height: 44px; padding: 0 8px; }
td { font-size: var(--v6-fs-body); line-height: 20px; border-bottom: 1px solid var(--v6-row); height: 44px; padding: 4px 8px; box-sizing: border-box; }
tbody tr:hover td { background: var(--v6-surface-2); }
.mono { font-variant-numeric: tabular-nums; }

/* ── Status pills ── */
.badge { font-family: var(--v6-font); font-size: var(--v6-fs-cap); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 10px; padding: 2px 8px; border: 0 !important; }
.badge-gold, .badge-navy { background: var(--v6-sel); color: var(--v6-action-ink); }
.badge-green { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
.badge-red { background: var(--v6-bad-bg); color: var(--v6-bad-h); }
.badge-amber { background: var(--v6-warn-bg); color: var(--v6-warn); }
.badge-purple { background: var(--v6-purple-bg); color: var(--v6-purple); }

/* ── Sub-tabs → pivots ── */
.ds-tabs { border-bottom: 1px solid var(--v6-stroke); gap: 4px; }
.ds-tabs button { font-family: var(--v6-font); font-size: var(--v6-fs-body); letter-spacing: 0; text-transform: none; background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--v6-t1); padding: 8px 12px; }
.ds-tabs button.on, .ds-tabs button.active { border-bottom-color: var(--v6-action); font-weight: 600; background: transparent; color: var(--v6-t1); }

/* ── Toasts, version modal ── */
.toast { font-family: var(--v6-font); font-size: var(--v6-fs-body); letter-spacing: 0; text-transform: none; border-radius: 4px; box-shadow: var(--v6-sh16); }
.toast.inf { background: var(--v6-t1); }
.vmodal-title { font-family: var(--v6-font); font-size: var(--v6-fs-sub1); line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--v6-t1); }

/* ── Full-screen overlays → right-side panels (open/close JS untouched) ──
   Matched by id: once JS opens an overlay the browser re-serialises its style attribute,
   so a style-text selector would stop matching exactly while it is visible. New overlay in
   index.php? Add its id here — tests/v6/test_panels.php fails until you do. */
/* v6-panels:start */
#job-role-modal, #crm-preview-modal, #crm-view-modal, #tp-pub-modal, #spec-modal,
#tu-modal, #vin-modal, #cp-modal, #pwa-modal, #de-modal, .vmodal-backdrop {
  justify-content: flex-end !important; align-items: stretch !important; padding: 0 !important; background: var(--v6-scrim) !important; }
#job-role-modal > div, #crm-preview-modal > div, #crm-view-modal > div, #tp-pub-modal > div, #spec-modal > div,
#tu-modal > div, #vin-modal > div, #cp-modal > div, #pwa-modal > div, #de-modal > div, .vmodal-backdrop > .vmodal {
  width: min(640px, 100vw) !important; max-width: 100vw !important; max-height: 100vh !important; height: 100vh;
  margin: 0 !important; border-radius: 0 !important; box-shadow: var(--v6-sh16) !important; overflow-y: auto; box-sizing: border-box; }
/* v6-panels:end */

/* ── Help tab ── */
.help-article-title { font-family: var(--v6-font); font-size: var(--v6-fs-sub1); line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--v6-t1); }
.help-body, .vmodal, .vrelease li { font-family: var(--v6-font); }
.help-body { font-size: var(--v6-fs-body); line-height: 20px; }
.help-body h2, .help-body h3, .help-body h4 { font-family: var(--v6-font); letter-spacing: 0; color: var(--v6-t1); font-weight: 600; }
.help-body h2 { font-size: var(--v6-fs-sub1); line-height: 28px; }
.help-body h3 { font-size: var(--v6-fs-sub2); line-height: 22px; }
.help-body h4 { font-size: var(--v6-fs-body); line-height: 20px; }
.help-nav-item.active { background: var(--v6-sel); color: var(--v6-t1); border-left-color: var(--v6-action); }
.help-cat-hdr { font-family: var(--v6-font); font-size: var(--v6-fs-cap); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v6-t2); }
.help-cat.open > .help-cat-hdr, .help-cat-hdr:hover { color: var(--v6-t1); }
.help-cat-count { font-family: var(--v6-font); font-size: var(--v6-fs-cap); border: 0; background: var(--v6-disabled-bg); color: var(--v6-t2); border-radius: 10px; }
.help-nav-item { font-family: var(--v6-font); font-size: var(--v6-fs-body); color: var(--v6-t1); }
.help-nav-item:hover { background: var(--v6-surface-2); }

@media (max-width: 768px) {
  .nav.v6-sitemap { display: none !important; }
  .v6-search { display: none; }
  .footer { display: none; }
  .main { padding: 0 12px 88px; }
  .pg-head { margin: 0 -12px 12px; }
  .pg-head > div:not(.pg-actions) { padding: 12px 12px 0; }
}
@media print {
  #screen-app.active { height: auto; }
  .v6-body { display: block; }
  .main { overflow: visible; padding: 0; }
  .nav.v6-sitemap, .hdr, .footer { display: none !important; }
}

/* ── Empty states ── */
.empty-ico .v6-empty-ic { width: 32px; height: 32px; color: var(--v6-t4); stroke-width: 1.4; }

/* One typeface everywhere, as in D365: Segoe UI. !important overrides the font-family that v5
   markup, JS templates and SVG chart text (font-family="Arial") set inline. Figures keep aligned
   columns via tabular numerals instead of a monospace font. */
body, body *:not(svg):not(path) { font-family: var(--v6-font) !important; }
td, .stat-val, .mono { font-variant-numeric: tabular-nums; }

/* D365's smallest everyday text is Caption 1 (12px). v5 rules and inline styles set 9-11.5px
   in places; floor them to 12px. SVG chart labels are excluded: they scale with the chart. */
#af-funnel-card .af-formula,
#af-funnel-card .af-hero-lbl,
#af-funnel-card .af-hero-sub,
#af-funnel-card .af-inputs,
#af-funnel-card .af-metric,
#af-funnel-card .af-no,
#tab-daily_sales .ds-bar label,
#tab-quartertracker .qt-bar label,
#tab-insights .dchip,
#tab-insights .foc-guard .gk,
#tab-insights .foc-guard .gs,
#tab-insights .foc-meta .t,
#tab-insights .gauge-go,
#tab-insights .ins-fl,
#tab-insights .ins-kpi .k,
#tab-insights .ins-kpi .s,
#tab-insights .ins-leg,
#tab-insights .ins-t th,
#tab-insights .ins-tile .k,
#tab-insights .ov-hero-meta .t,
#tab-segforecast .ins-kpi .k,
#tab-segforecast .ins-kpi .s,
#tab-segforecast .sf-pill,
#tab-segforecast .sf-tbl .sf-cnt,
#tab-segforecast .sf-tbl th,
.bible-dash .crumb,
.bible-dash .pill,
.bible-dash .tabs button,
.bible-dash .tag,
.bible-dash .tile-title,
.bible-dash th,
.date-badge-day,
.date-badge-lbl,
.ds-kv .k,
.ins-dbc,
.ins-dgl,
.ins-drow .lbl .cnt,
.ins-drow .rk,
.ins-drow .val .pct,
.ins-dtot,
.ins-leaf,
.ins-leaf th,
.login-brand-sub,
.login-version-tag,
.mo .card-t,
.mo .fg label,
.mo .kpi .lab,
.mo .kpi .sub,
.mo .legend,
.mo .note,
.mo .ochart-lbl,
.mo .ochart-val,
.mo .pill,
.mo .ss-meta,
.mo .tag,
.mo table.ss th,
.mo th,
.nav-group-item,
.nav-group-trigger,
.news-meta,
.sd-region-host .rms .btn,
.spec-badge,
.spec-source,
.spec-valid,
.vrelease-date,
.vrelease-latest,
body [style*="font-size:9px"]:not(text):not(tspan),
body [style*="font-size: 9px"]:not(text):not(tspan),
body [style*="font-size:9.5px"]:not(text):not(tspan),
body [style*="font-size: 9.5px"]:not(text):not(tspan),
body [style*="font-size:10px"]:not(text):not(tspan),
body [style*="font-size: 10px"]:not(text):not(tspan),
body [style*="font-size:10.5px"]:not(text):not(tspan),
body [style*="font-size: 10.5px"]:not(text):not(tspan),
body [style*="font-size:11px"]:not(text):not(tspan),
body [style*="font-size: 11px"]:not(text):not(tspan),
body [style*="font-size:11.5px"]:not(text):not(tspan),
body [style*="font-size: 11.5px"]:not(text):not(tspan) { font-size: var(--v6-fs-cap) !important; }

/* ===== COMPONENTS ===== */
/* Each family is ONE rule; a screen joins by adding its selector or using the v6- class.
   !important beats CSS the dashboards inject after this file (removed in Task 13). */

/* Large block: panels, cards, dashboard tiles. */
.v6-block, .card, .month-banner, .summary-banner,
#tab-insights .ins-card, #tab-insights .ov-hero, #tab-insights .ov-watch, #tab-insights .foc-hero, #tab-insights .ins-tile,
#tab-leaderboard .lb-tile, .mo .card, .mo .bar, .bible-dash .tile, #af-funnel-card .af-hero, .news-card {
  border: var(--v6-card-w) solid var(--v6-card-line) !important; border-radius: var(--v6-r-md);
  box-shadow: var(--v6-raise) !important; background: var(--v6-block-bg) !important; }
.card { padding: 16px; margin-bottom: 16px; margin-right: 4px; }
.card table, .card .tbl-wrap { background: var(--v6-surface); }
/* banners keep the small-tile depth */
.month-banner, .summary-banner { box-shadow: var(--v6-raise-sm) !important; }

/* Small tile: KPI tiles and stage boxes. */
.v6-tile, .stat, #tab-usage .usg-tile, #tab-insights .ins-kpi, #tab-segforecast .ins-kpi, #tab-leaderboard .lb-kpi,
.mo .kpi, #af-funnel-card .af-stage, #pd-role-grid > div {
  border: var(--v6-card-w) solid var(--v6-card-line) !important; border-radius: var(--v6-r-md);
  box-shadow: var(--v6-raise-sm) !important; background: var(--v6-block-bg) !important; }
.stat:hover { transform: none; box-shadow: var(--v6-raise) !important; }

/* Print keeps print.css's thin grey edge on cards and KPI tiles. */
@media print { .card, .stat { border: 1px solid var(--v6-print-line) !important; } }

/* KPI text */
.v6-kpi-label, .stat-lbl, #tab-usage .usg-tile .lbl, #tab-leaderboard .lb-kpi .k, #tab-leaderboard .lb-tt {
  font-size: var(--v6-fs-cap); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--v6-t3); }
.v6-kpi-value, .stat-val, #tab-usage .usg-tile .big, #tab-leaderboard .lb-kpi .v, #tab-leaderboard .lb-step .pos {
  font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-t1); }

/* Dark-header grid (workbook look) */
.v6-grid-dark th, .ds-grid th, .ds-grid th:first-child, .ds-kv .k, .qt-kpi .k {
  background: var(--v6-brand) !important; color: var(--v6-surface) !important; border-right-color: var(--v6-brand-line) !important; }

/* Section title */
.v6-section-title, .card-title, .form-sec, .month-banner-title {
  font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v6-t1); }
.form-sec { line-height: var(--v6-lh-body); }
.month-banner-title { line-height: var(--v6-lh-body); text-transform: uppercase; }

/* Muted text (still >= 3:1 on white and on the pastel funnel boxes) */
.v6-muted, .pg-sub, .fg-hint, #af-funnel-card .af-metric, #tab-segforecast .sf-tbl .sf-cnt { font-size: var(--v6-fs-cap); color: var(--v6-t3); }
#af-funnel-card .af-metric { color: var(--v6-t2) !important; }
#tab-segforecast .sf-tbl .sf-cnt { color: var(--v6-t-cool) !important; }

/* ===== DASHBOARDS ===== */
/* Today's corner radii where the dashboard's own CSS loads before this file (family default is 8px). */
#tab-leaderboard .lb-tile, #af-funnel-card .af-hero, #af-funnel-card .af-stage { border-radius: 14px; }
#tab-leaderboard .lb-kpi { border-radius: 10px; }
.news-card { border-radius: 6px; }
/* Funnel stage boxes stay plain white; their pastel comes from the .af-cap strip inside. */
#af-funnel-card .af-stage { background: var(--v6-surface) !important; }

/* Usage report (v5.71.1) at D365 metrics: tile values Subtitle 1, labels Caption 1 sentence case, body text Body 1. */
#tab-usage .usg-tile { padding: 10px 14px 12px; margin-right: 4px; }
#tab-usage .usg-tile .big small { font-size: var(--v6-fs-body); font-weight: 400; }
#tab-usage .usg-findings li { font-size: var(--v6-fs-body); line-height: 20px; }
#tab-usage .usg-controls select, #tab-usage .usg-controls input, #tab-usage tr.usg-rsm-detail td, #tab-usage .usg-notes { font-size: var(--v6-fs-body); }
#tab-usage .usg-sub, #tab-usage .usg-note, #tab-usage .usg-legend, #tab-usage .usg-chip, #tab-usage .usg-pill { font-size: var(--v6-fs-cap); }
/* Its charts colour series with --navy/--gold; give them the v6 chart palette instead of text-black. */
#tab-usage .usg-charts, #tab-usage .usg-split, #tab-usage .usg-dots { --navy: var(--v6-action); --gold: var(--v6-chart-2); }

/* Leaderboard dashboard (v5.71.2) at D365 metrics: numerals <= 24px, Caption 1 sentence-case labels,
   Body 1 text; series and highlights in the v6 palette; the "your position" banner on the header colour. */
#tab-leaderboard { --navy: var(--v6-action); --gold: var(--v6-chart-2); }
#tab-leaderboard .lb-kpi .v small, #tab-leaderboard .lb-me .rank small { font-size: var(--v6-fs-body); }
#tab-leaderboard .lb-kpi .s, #tab-leaderboard .lb-me .sub, #tab-leaderboard .lb-lock { font-size: var(--v6-fs-cap); }
#tab-leaderboard .lb-step .pos { color: inherit; }   /* podium numerals take the step's white */
#tab-leaderboard .lb-step .nm, #tab-leaderboard .lb-empty, #tab-leaderboard .lb-bul { font-size: var(--v6-fs-body); }
#tab-leaderboard .lb-me { background: var(--v6-chrome); border-radius: 8px; }
#tab-leaderboard .lb-me .rank { font-size: var(--v6-fs-title3); line-height: 32px; font-weight: 600; }
#tab-leaderboard .lb-me .line { font-size: var(--v6-fs-sub2); line-height: 22px; }
#tab-leaderboard .lb-tip { background: var(--v6-t1); }
/* the "me" banner keeps its header colour */
#tab-leaderboard .lb-me { background: var(--v6-chrome) !important; }

/* HASA Daily Sales key/value strip: its cells keep styles.css's grey divider (none after every 4th). */
.ds-kv .k { border-right-color: var(--border) !important; }
.ds-kv .k:nth-child(4n) { border-right-color: currentColor !important; }

/* Two cards whose inline style the !important block family would otherwise override. */
#vb-warn { border-left: 4px solid var(--v6-alert-edge) !important; }
#tab-feeds > .pg-head + .card { background: var(--v6-panel-tint) !important; }

#tab-dealers td strong[style*="tenant-accent"] { color: var(--v6-chrome) !important; }   /* client primary: brand colour that stays readable on white */

/* ── Login ── */
/* Sign-in keeps the original navy gradient (styles.css) — Bruce: it gives the page definition. */
/* Sign-in card: original rounded 20px corners; text in the brand navy (Bruce). */
.login-card { border-radius: var(--v6-r-lg); border: 2px solid var(--v6-brand-ink); background: var(--v6-block-bg); box-shadow: var(--v6-raise-login); color: var(--v6-brand); }
.login-card::before { height: 4px; background: linear-gradient(90deg, var(--v6-chrome), var(--v6-chrome-accent), var(--v6-chrome)); border-radius: var(--v6-r-lg) var(--v6-r-lg) 0 0; }
.login-card label, .login-card .fg label, .login-card #l-remember-wrap { color: var(--v6-brand) !important; font-weight: 600; }
.login-card input:not([type=checkbox]) { color: var(--v6-brand); border-color: var(--v6-brand-soft); border-bottom-color: var(--v6-brand); border-radius: 6px; }
.login-card input::placeholder { color: var(--v6-brand-muted); }
.login-card .login-version-tag { color: var(--v6-brand); }
.login-card .btn-gold { background: var(--v6-brand); color: var(--v6-surface); }
.login-card .btn-gold:hover { background: var(--v6-brand-deep); }