/* costusworx-fluent-kit v1.0.0 - synced copy. Do not edit here: edit the kit, then run sync-fluent.ps1. */
/* CostusWorx Fluent kit — the Dynamics 365 / Fluent 2 look shared by every CostusWorx app.
   Extracted from DealerPulse v6 (dp.costusworx.co.za css/fluent.css). Token names and values
   match DealerPulse, so a value changed here means the same thing in every app.

   An app links this file FIRST, then its own layer (e.g. assets/css/fluent.css), which
   (1) aliases the app's legacy variables to --v6-* tokens and
   (2) maps the app's legacy class names onto the look, using tokens only.
   New markup uses the v6- classes below directly. See README.md. */

/* ===== TOKENS ===== */
: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 (white label): apps set these at runtime from the tenant record; these are fallbacks. */
  --tenant-primary: #1B2F4E;
  --tenant-accent:  #A07323;
  --v6-chrome: var(--tenant-primary);
  --v6-chrome-accent: var(--tenant-accent);
  /* 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; --v6-card-w: 2px; --v6-line: 1px;
  --v6-divider: #8A8A8A; --v6-print-line: #CCCCCC;
  /* 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;
  /* Message bar (Fluent warning bar) */
  --v6-notice-bg: #FFF4CE; --v6-notice-line: #F2E3B3; --v6-notice-ink: #8A6D00;
  /* Chart palette (Fluent categorical) */
  --v6-chart-1: #0F6CBD; --v6-chart-2: #8764B8; --v6-chart-3: #107C10;
  --v6-chart-4: #CA5010; --v6-chart-5: #038387; --v6-chart-6: #C239B3;
  /* Type (Fluent 2 ramp) */
  --v6-font: 'Segoe UI','Segoe UI Variable Text',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --v6-font-mono: Consolas,'Cascadia Mono','SF Mono',monospace;
  --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; --v6-r-pill: 10px;
  /* Sizes */
  --v6-hdr-h: 48px; --v6-nav-w: 232px; --v6-nav-w-min: 48px; --v6-ctl-h: 32px; --v6-row-h: 44px; --v6-nav-item-h: 40px;
  /* 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);
  /* 3D blocks: solid offset slab 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-block-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #EEF1F5 100%);
}

/* ===== BASE ===== */
body { font-family: var(--v6-font); font-size: var(--v6-fs-body); line-height: var(--v6-lh-body); 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; vertical-align: -3px; }
.v6-ic-lg { width: 32px; height: 32px; stroke-width: 1.4; }
.v6-ic-xl { width: 56px; height: 56px; stroke-width: 1.2; color: var(--v6-action); }
.v6-num { font-variant-numeric: tabular-nums; }
.v6-mono { font-family: var(--v6-font-mono); }

/* ── App frame: header / (sitemap + main) / footer ── */
.v6-app { height: 100vh; display: flex; flex-direction: column; min-height: 0; }
.v6-body { flex: 1; display: flex; min-height: 0; }
.v6-main { flex: 1; min-width: 0; padding: 0 24px 24px; overflow-y: auto; }
.v6-footer { flex-shrink: 0; height: 28px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--v6-fs-cap); color: var(--v6-t3); background: var(--v6-surface); border-top: var(--v6-line) solid var(--v6-stroke); }
.v6-footer a { color: var(--v6-action); text-decoration: none; }
.v6-footer a:hover { color: var(--v6-action-h); text-decoration: underline; }

/* ── Header (48px, tenant colour, 3px accent stripe) ── */
.v6-hdr { height: var(--v6-hdr-h); flex-shrink: 0; 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; color: var(--v6-surface); }
.v6-hdr-brand { font-size: var(--v6-fs-sub2); font-weight: 600; color: var(--v6-surface); display: flex; align-items: center; gap: 10px; padding-left: 12px; white-space: nowrap; text-decoration: none; }
.v6-hdr-logo { height: 34px; width: auto; max-width: 200px; object-fit: contain; background: var(--v6-surface); border-radius: var(--v6-r-sm); padding: 2px 5px; box-sizing: border-box; }
.v6-hdr-sep { width: 1px; height: 20px; background: var(--v6-on-chrome-sep); margin: 0 8px; flex-shrink: 0; }
.v6-hdr-name { font-size: var(--v6-fs-body); font-weight: 400; color: var(--v6-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v6-hdr-btn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--v6-surface); border-radius: var(--v6-r-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; flex-shrink: 0; }
.v6-hdr-btn:hover { background: var(--v6-on-chrome-hover); }
.v6-hdr-btn .v6-ic { width: 18px; height: 18px; }
.v6-hdr-menu, .v6-hdr-btn[hidden], .v6-sitemap[hidden] { display: none; }
.v6-search { flex: 1; display: flex; justify-content: center; min-width: 0; }
.v6-search label { width: 420px; max-width: 100%; height: var(--v6-ctl-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--v6-on-chrome-field); border-radius: var(--v6-r-sm); color: var(--v6-on-chrome-field-ink); box-sizing: border-box; }
.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); }
.v6-hdr-spacer { flex: 1; }
.v6-hdr-right { display: flex; align-items: center; gap: 2px; position: relative; }
.v6-avatar { width: 32px; height: 32px; margin-left: 6px; border: 0; border-radius: 16px; background: var(--v6-chrome-accent); color: var(--v6-surface); font: 600 var(--v6-fs-cap) var(--v6-font); cursor: pointer; flex-shrink: 0; }
.v6-menu { position: absolute; right: 0; top: 44px; width: 260px; background: var(--v6-surface); border-radius: var(--v6-r-md); box-shadow: var(--v6-sh16); padding: 8px 0; display: none; z-index: 200; color: var(--v6-t1); }
.v6-menu.open { display: block; }
.v6-menu-user { padding: 8px 16px 12px; border-bottom: var(--v6-line) solid var(--v6-stroke); margin-bottom: 4px; line-height: var(--v6-lh-body); }
.v6-menu-user strong { display: block; color: var(--v6-t1); font-size: var(--v6-fs-body); }
.v6-menu-user em { display: block; color: var(--v6-t3); font-style: normal; font-size: var(--v6-fs-cap); }
.v6-menu button, .v6-menu a { width: 100%; height: var(--v6-ctl-h); 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; text-decoration: none; box-sizing: border-box; }
.v6-menu button:hover, .v6-menu a:hover { background: var(--v6-surface-2); }
.v6-menu-foot { padding: 8px 16px 4px; border-top: var(--v6-line) solid var(--v6-stroke); margin-top: 4px; font-size: var(--v6-fs-cap); color: var(--v6-t3); }
.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 left menu, collapses to 48px) ── */
.v6-sitemap { width: var(--v6-nav-w); flex-shrink: 0; display: flex; flex-direction: column; background: var(--v6-rail); border-right: var(--v6-card-w) solid var(--v6-edge-strong); overflow: hidden; }
.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: var(--v6-r-sm); 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: var(--v6-nav-item-h); display: flex; align-items: center; gap: 12px; padding: 0 8px 0 10px; margin: 0 4px; border: 0; border-radius: var(--v6-r-sm); background: transparent; font: inherit; font-size: var(--v6-fs-body); line-height: var(--v6-lh-body); color: var(--v6-t1); text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; width: calc(100% - 8px); text-align: left; }
.v6-nav-item:hover { background: var(--v6-hover); color: var(--v6-t1); text-decoration: none; }
.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: var(--v6-line) 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: var(--v6-r-sm); 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 .v6-sitemap { width: var(--v6-nav-w-min); }
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; }
[data-v6-icon] { display: inline-flex; font-style: normal; }
body.v6-nav-collapsed .v6-nav-item { padding: 0; justify-content: center; margin: 2px 4px; width: 40px; }
body.v6-nav-collapsed .v6-area { justify-content: center; padding: 0; }

/* ── Command bar + page title ── */
.v6-page-head { margin: 0 -24px 16px; }
.v6-cmdbar { min-height: 44px; padding: 6px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; background: var(--v6-surface); border-bottom: var(--v6-card-w) solid var(--v6-edge-strong); position: sticky; top: 0; z-index: 20; box-sizing: border-box; }
.v6-cmd { height: var(--v6-ctl-h); padding: 0 8px; border: 0; border-radius: var(--v6-r-sm); background: transparent; color: var(--v6-t1); font: inherit; font-size: var(--v6-fs-body); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.v6-cmd:hover { background: var(--v6-surface-2); }
.v6-cmd .v6-ic { color: var(--v6-action); }
.v6-cmd-sep { width: 1px; height: 20px; background: var(--v6-row); margin: 0 6px; }
.v6-title-wrap { padding: 16px 24px 0; }
.v6-page-title { margin: 0; font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; letter-spacing: 0; color: var(--v6-t1); }
.v6-page-sub { margin-top: 2px; font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); color: var(--v6-t3); }

/* ── Buttons ── */
.v6-btn { font: inherit; font-size: var(--v6-fs-body); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--v6-r-sm); height: var(--v6-ctl-h); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; box-sizing: border-box; transition: background .1s;
  background: var(--v6-surface); border: var(--v6-line) solid var(--v6-stroke2); color: var(--v6-t1); }
.v6-btn:hover { background: var(--v6-surface-2); }
.v6-btn-primary { background: var(--v6-action); border-color: var(--v6-action); color: var(--v6-surface); }
.v6-btn-primary:hover { background: var(--v6-action-h); border-color: var(--v6-action-h); }
.v6-btn-subtle { background: transparent; border-color: transparent; font-weight: 400; }
.v6-btn-subtle:hover { background: var(--v6-surface-2); }
.v6-btn-danger { color: var(--v6-bad); border-color: var(--v6-bad-line); }
.v6-btn-danger:hover { background: var(--v6-bad-bg); }
.v6-btn-sm { height: 24px; padding: 0 8px; font-size: var(--v6-fs-cap); }
.v6-btn-full { width: 100%; height: 40px; }
.v6-btn:disabled, .v6-btn[aria-disabled=true] { background: var(--v6-disabled-bg); color: var(--v6-disabled-fg); border-color: transparent; cursor: default; }

/* ── Forms ── */
.v6-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.v6-label { font-size: var(--v6-fs-body); font-weight: 400; color: var(--v6-t2); }
.v6-input { font: inherit; font-size: var(--v6-fs-body); color: var(--v6-t1); background: var(--v6-surface); border: var(--v6-line) solid var(--v6-stroke2); border-bottom-color: var(--v6-t3); border-radius: var(--v6-r-sm); height: var(--v6-ctl-h); padding: 0 8px; box-sizing: border-box; }
select.v6-input { padding-right: 28px; }
textarea.v6-input { height: auto; min-height: 64px; padding: 6px 8px; }
.v6-input:focus { outline: none; border-bottom: 2px solid var(--v6-action); }
.v6-input:read-only { background: var(--v6-surface-2); color: var(--v6-t2); border-color: transparent; }
.v6-hint { font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); color: var(--v6-t3); }
.v6-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; }
.v6-app input[type=checkbox], .v6-app input[type=radio] { accent-color: var(--v6-action); }

/* ── Grids (tables) ── */
.v6-grid-wrap { overflow-x: auto; max-width: 100%; }
.v6-grid { width: 100%; border-collapse: collapse; background: var(--v6-surface); font-size: var(--v6-fs-body); }
.v6-grid th { height: var(--v6-row-h); padding: 0 8px; text-align: left; font-weight: 600; color: var(--v6-t2); background: var(--v6-surface); border-bottom: var(--v6-line) solid var(--v6-stroke); white-space: nowrap; }
.v6-grid td { height: var(--v6-row-h); padding: 4px 8px; line-height: var(--v6-lh-body); border-bottom: var(--v6-line) solid var(--v6-row); box-sizing: border-box; }
.v6-grid tbody tr:hover td { background: var(--v6-surface-2); }
.v6-grid td.num, .v6-grid th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Status pills ── */
.v6-pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); font-weight: 600; border-radius: var(--v6-r-pill); padding: 2px 8px; background: var(--v6-disabled-bg); color: var(--v6-t2); white-space: nowrap; }
.v6-pill-info { background: var(--v6-sel); color: var(--v6-action-ink); }
.v6-pill-ok { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
.v6-pill-bad { background: var(--v6-bad-bg); color: var(--v6-bad-h); }
.v6-pill-warn { background: var(--v6-warn-bg); color: var(--v6-warn); }
.v6-pill-purple { background: var(--v6-purple-bg); color: var(--v6-purple); }

/* ── Pivots (sub-tabs) ── */
.v6-pivot { display: flex; gap: 4px; border-bottom: var(--v6-line) solid var(--v6-stroke); margin-bottom: 16px; flex-wrap: wrap; }
.v6-pivot button, .v6-pivot a { font: inherit; font-size: var(--v6-fs-body); background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--v6-t1); padding: 8px 12px; cursor: pointer; text-decoration: none; }
.v6-pivot button:hover, .v6-pivot a:hover { background: var(--v6-surface-2); }
.v6-pivot .active { border-bottom-color: var(--v6-action); font-weight: 600; }

/* ── Message bar ── */
.v6-msgbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; font-size: var(--v6-fs-body); color: var(--v6-t1); background: var(--v6-sel); border-bottom: var(--v6-line) solid var(--v6-sel-strong); }
.v6-msgbar-warn { background: var(--v6-notice-bg); border-color: var(--v6-notice-line); }
.v6-msgbar-warn .v6-ic { color: var(--v6-notice-ink); }
.v6-msgbar-bad { background: var(--v6-bad-bg); border-color: var(--v6-bad-line); }
.v6-msgbar-ok { background: var(--v6-ok-bg); border-color: var(--v6-ok); }

/* ── Side panel (replaces centred modals) ── */
.v6-scrim { position: fixed; inset: 0; background: var(--v6-scrim); display: none; justify-content: flex-end; z-index: 300; }
.v6-scrim.open { display: flex; }
.v6-panel { width: min(640px, 100vw); height: 100vh; overflow-y: auto; background: var(--v6-surface); box-shadow: var(--v6-sh16); box-sizing: border-box; display: flex; flex-direction: column; }
.v6-panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 16px 20px; background: var(--v6-surface); border-bottom: var(--v6-line) solid var(--v6-stroke); }
.v6-panel-head h2 { flex: 1; margin: 0; font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; }
.v6-panel-body { padding: 16px 20px; flex: 1; }
.v6-panel-foot { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 20px; background: var(--v6-surface); border-top: var(--v6-line) solid var(--v6-stroke); }

/* ── Toast ── */
.v6-toast { position: fixed; right: 16px; bottom: 16px; z-index: 400; min-width: 240px; max-width: 420px; padding: 12px 16px; border-radius: var(--v6-r-sm); background: var(--v6-t1); color: var(--v6-surface); font-size: var(--v6-fs-body); box-shadow: var(--v6-sh16); }
.v6-toast-ok { background: var(--v6-ok); }
.v6-toast-bad { background: var(--v6-bad); }

/* ── Empty state ── */
.v6-empty { padding: 32px 16px; text-align: center; color: var(--v6-t3); }
.v6-empty .v6-ic { width: 32px; height: 32px; color: var(--v6-t4); stroke-width: 1.4; display: block; margin: 0 auto 8px; }

/* ── Sign-in ── */
.v6-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: linear-gradient(160deg, var(--v6-brand-deep), var(--v6-brand) 60%, var(--v6-brand-line)); }
.v6-login-card { position: relative; width: min(400px, 100%); padding: 32px 28px 24px; box-sizing: border-box; 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); }
.v6-login-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; 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; }
.v6-login-card .v6-label { color: var(--v6-brand); font-weight: 600; }
.v6-login-card .v6-input { color: var(--v6-brand); border-color: var(--v6-brand-soft); border-bottom-color: var(--v6-brand); }
.v6-login-card .v6-input::placeholder { color: var(--v6-brand-muted); }
.v6-login-card .v6-btn-primary { background: var(--v6-brand); border-color: var(--v6-brand); }
.v6-login-card .v6-btn-primary:hover { background: var(--v6-brand-deep); }
.v6-login-title { margin: 0 0 4px; font-size: var(--v6-fs-title3); line-height: var(--v6-lh-title3); font-weight: 600; }
.v6-login-sub { margin: 0 0 20px; font-size: var(--v6-fs-cap); color: var(--v6-t3); }

/* ── Phone: sitemap becomes a drawer opened from the header ── */
@media (max-width: 768px) {
  .v6-hdr-menu:not([hidden]) { display: flex; }
  .v6-search { display: none; }
  .v6-hdr-spacer { display: block; }
  .v6-sitemap { position: fixed; top: calc(var(--v6-hdr-h) + 3px); left: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .15s; }
  body.v6-nav-open .v6-sitemap { transform: none; box-shadow: var(--v6-sh16); }
  body.v6-nav-collapsed .v6-sitemap { width: var(--v6-nav-w); }
  body.v6-nav-collapsed .v6-group-h, body.v6-nav-collapsed .v6-nav-item span, body.v6-nav-collapsed .v6-area-label { display: revert; }
  body.v6-nav-collapsed .v6-nav-item { padding: 0 8px 0 10px; justify-content: flex-start; margin: 0 4px; width: calc(100% - 8px); }
  .v6-sitemap-top { display: none; }
  .v6-footer { display: none; }
  .v6-main { padding: 0 12px 24px; }
  .v6-page-head { margin: 0 -12px 12px; }
  .v6-title-wrap { padding: 12px 12px 0; }
  .v6-hdr-name { max-width: 40vw; }
}
@media print {
  .v6-app { height: auto; display: block; }
  .v6-body { display: block; }
  .v6-main { overflow: visible; padding: 0; }
  .v6-sitemap, .v6-hdr, .v6-footer, .v6-cmdbar, .v6-toast { display: none !important; }
}

/* ===== COMPONENTS ===== */
/* Each family is ONE rule. A screen joins by using the class; an app layer may restate a
   family for its legacy selectors, but only with these same tokens (check_layer.php). */

/* Large block: panels, cards, dashboard tiles. */
.v6-block { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); background: var(--v6-block-bg); padding: 16px; margin: 0 4px 16px 0; }
/* Small tile: KPI tiles, stage boxes. */
.v6-tile { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise-sm); background: var(--v6-block-bg); padding: 10px 14px 12px; margin-right: 4px; }
.v6-tile:hover { box-shadow: var(--v6-raise); }
.v6-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
@media print { .v6-block, .v6-tile { border: 1px solid var(--v6-print-line); box-shadow: none; background: var(--v6-surface); } }
/* KPI text */
.v6-kpi-label { font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--v6-t3); }
.v6-kpi-value { font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-t1); font-variant-numeric: tabular-nums; }
/* Dark-header grid (workbook look) */
.v6-grid-dark th { background: var(--v6-brand); color: var(--v6-surface); border-right: var(--v6-line) solid var(--v6-brand-line); }
/* Section title */
.v6-section-title { margin: 0 0 12px; 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); }
/* Muted text (>= 3:1 on white) */
.v6-muted { font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); color: var(--v6-t3); }