/* ============================================================================
   ADM Dashboard Design Tokens  ·  v1.0  ·  7 October 2026
   Advanced Disability Management, LLC

   For: the MCM Oversight dashboard (portfolio, TPA/carrier, employer, CM
   vendor, case manager, client page, invoice page, bill review, scorecards).

   Source of truth: ADM Brand Guide §5 (colour), §6 (type), §7 (logo) and the
   ADM-Aon Brand Guide (priority scheme). Values here are either taken from
   those documents unchanged, or derived from them and re-verified — every
   derived value carries its measured contrast ratio in a comment.

   WHAT WAS VERIFIED, AND HOW
   - Priority chips: WCAG 2.1 contrast, ink on fill, all >= 4.5:1.
   - Categorical series: validated with the dataviz validator across ALL pairs
     (not just adjacent), light mode on #FFFFFF and dark mode on #121A22.
     Lightness band, chroma floor, CVD separation (protan/deutan/tritan),
     normal-vision floor, and contrast vs surface: ALL PASS in both modes.
   - Status colours: WCAG contrast measured on both surfaces.
   Re-run before changing any value. Do not eyeball colour-blind safety.

   WHITE-LABEL
   Everything a client sees is themed through the --brand-* block at the top.
   Swap that block alone to re-skin for Aon or any other partner; nothing
   below it needs to change. The Aon token set is published in full in
   ADM-Aon-Brand-Guide.md — do not re-derive it.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. BRAND LAYER — the only block that changes for a white-label skin
     --------------------------------------------------------------------- */
  --brand-primary:        #003366;  /* ADM Navy    — headers, nav, footer   */
  --brand-primary-light:  #004080;  /* hover / lighter navy                 */
  --brand-link:           #0066CC;  /* ADM Blue    — links, interactive     */
  --brand-accent:         #FFD700;  /* ADM Gold    — CTA, emphasis          */
  --brand-accent-hover:   #FFED4E;
  --brand-on-accent:      #333333;  /* ink on gold — 10.1:1                 */
  --brand-on-primary:     #FFFFFF;  /* ink on navy — 13.1:1                 */

  /* ---------------------------------------------------------------------
     2. SURFACES & INK  (light mode)
     --------------------------------------------------------------------- */
  --surface:              #FFFFFF;  /* page / card ground                   */
  --surface-sunken:       #F8F9FA;  /* section bg, alternating rows         */
  --surface-raised:       #FFFFFF;
  --surface-chart:        #FFFFFF;  /* the surface the validator was run on */
  --border:               #E0E0E0;
  --border-strong:        #C4CCD2;  /* table rules, chip outlines           */

  --text:                 #333333;  /* body            — 12.6:1 on surface  */
  --text-secondary:       #555555;  /* supporting      —  7.5:1             */
  --text-muted:           #6B7478;  /* captions, axes  —  4.9:1             */
  --text-on-fill-light:   #333333;
  --text-on-fill-dark:    #FFFFFF;

  /* ---------------------------------------------------------------------
     3. OVERSIGHT PRIORITY  — RESERVED. Never used for anything else.
        P4 is NOT "low risk": it means the supplied data could not support an
        evaluation. It is deliberately neutral so it reads as absent-evidence
        rather than as good news.
        Colour never carries meaning alone — every chip pairs fill + code +
        glyph. See .p-chip in §9.
     --------------------------------------------------------------------- */
  --p1:      #C63645;  --p1-ink: #FFFFFF;  /* Immediate intervention  5.23:1 */
  --p2:      #D4993D;  --p2-ink: #333333;  /* Active oversight        5.07:1 */
  --p3:      #1B6B93;  --p3-ink: #FFFFFF;  /* Routine oversight       5.88:1 */
  --p4:      #A3B1B6;  --p4-ink: #333333;  /* Information required    5.73:1 */

  --p1-glyph: "\25B2";  /* ▲ */
  --p2-glyph: "\25C6";  /* ◆ */
  --p3-glyph: "\25CF";  /* ● */
  --p4-glyph: "\25CB";  /* ○ */

  /* Tinted backgrounds for priority ROWS in tables (fill is too strong). */
  --p1-wash: #FBECEE;
  --p2-wash: #FDF4E6;
  --p3-wash: #E8F4F8;
  --p4-wash: #F1F4F5;

  /* ---------------------------------------------------------------------
     4. STATUS  — RESERVED, and distinct from both priority and categorical.
        Always shipped with an icon + label, never colour alone.
        Use for: report delinquency, data owed, file currency, flag states.
     --------------------------------------------------------------------- */
  --status-good:     #1F7A54;  /* 5.29:1 on surface */
  --status-warning:  #8A6300;  /* 5.43:1 — amber as TEXT must be this, not  */
                               /* the gold fill; the fill is too light      */
  --status-serious:  #C2410C;  /* 5.18:1 */
  --status-critical: #A61B2B;  /* 7.47:1 */

  --status-good-wash:     #E6F7EF;
  --status-warning-wash:  #FFF8EB;
  --status-serious-wash:  #FFF0EB;
  --status-critical-wash: #FBECEE;

  /* ---------------------------------------------------------------------
     5. CATEGORICAL SERIES — fixed order, NEVER cycled.
        Assign by entity (vendor, case manager, TPA), not by rank: a filter
        that drops a series must not repaint the survivors.
        A 6th series folds into "Other", small multiples, or a facet. Do not
        generate a 6th hue — the set is validated at five.
        Validator, all-pairs, light on #FFFFFF: lightness PASS · chroma PASS ·
        CVD worst pair ΔE 8.0 deutan / 8.1 tritan PASS · normal-vision floor
        ΔE 15.9 PASS · contrast all >= 3:1 PASS.
     --------------------------------------------------------------------- */
  --series-1: #07749F;  /* teal blue  */
  --series-2: #D45A2A;  /* orange     */
  --series-3: #7A4AE0;  /* purple     */
  --series-4: #2D9B6E;  /* green      */
  --series-5: #B5367A;  /* magenta    */
  --series-other: #8C979C;  /* the "Other" bucket — always last, always gray */

  /* ---------------------------------------------------------------------
     6. SEQUENTIAL (magnitude) — one hue, light to dark. Never a rainbow.
        Use for heat on a single measure: questioned %, duration ratio,
        CM cost as % of medical.
     --------------------------------------------------------------------- */
  --seq-1: #D6ECF4;
  --seq-2: #9ED3E4;
  --seq-3: #57AACB;
  --seq-4: #1C7FA8;
  --seq-5: #0A4F6B;

  /* ---------------------------------------------------------------------
     7. DIVERGING (polarity) — two hues + a NEUTRAL GRAY midpoint.
        Never a hue at the midpoint. Use for variance against a norm:
        above/below guideline duration, over/under contract rate.
     --------------------------------------------------------------------- */
  --div-neg-2: #0A4F6B;
  --div-neg-1: #57AACB;
  --div-mid:   #EDEFEF;   /* neutral, not a hue */
  --div-pos-1: #E08A5F;
  --div-pos-2: #A8431A;

  /* ---------------------------------------------------------------------
     8. TYPE, SPACE, SHAPE
     --------------------------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
             Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", var(--font-ui);   /* headings, KPI values       */
  --font-data: "DM Sans", var(--font-ui);     /* tables, axes, data labels  */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Google Fonts:
     https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap
     If the dashboard cannot reach Google Fonts, the system stack is the
     fallback and is acceptable — do not substitute a third typeface. */

  --fs-kpi:      34px;  --fw-kpi:      600;
  --fs-kpi-label:12px;  --fw-kpi-label:600;  /* uppercase, letter-spacing .04em */
  --fs-h1:       28px;  --fw-h1:       700;
  --fs-h2:       21px;  --fw-h2:       600;
  --fs-h3:       17px;  --fw-h3:       600;
  --fs-body:     14px;  --fw-body:     400;
  --fs-data:     13px;
  --fs-caption:  12px;  --fw-caption:  500;
  --lh-tight: 1.2;  --lh-body: 1.5;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --radius-sm: 4px;   /* data-ends on bars */
  --radius:    8px;   /* cards, tiles      */
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);

  /* Chart furniture — recessive by rule */
  --grid-line:  #EDEFF1;
  --axis-line:  #D8DDE0;
  --mark-gap:   2px;     /* surface gap between adjacent/stacked fills */
  --line-w:     2px;
  --marker-min: 8px;
}

/* ===========================================================================
   DARK MODE — selected, not flipped. Its own steps, validated against its
   own surface (#121A22). Guarded so an explicit light theme always wins.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:          #121A22;
    --surface-sunken:   #0D141A;
    --surface-raised:   #1A242E;
    --surface-chart:    #121A22;
    --border:           #27333D;
    --border-strong:    #3A4752;

    --text:             #E6EDF2;   /* 14.1:1 on surface */
    --text-secondary:   #B4C0C9;   /*  8.6:1 */
    --text-muted:       #8A98A3;   /*  5.3:1 */

    --brand-primary:    #0B2D52;
    --brand-link:       #6BB4F5;
    --brand-on-primary: #FFFFFF;

    /* Categorical: the same five pass the dark band (L .48–.67) on #121A22,
       all-pairs. One set, two modes — nothing to keep in sync. */

    --p1-wash: #2A181B;  --p2-wash: #241F14;
    --p3-wash: #132630;  --p4-wash: #1B2328;

    --status-good:     #4FC49A;   /* 8.10:1 */
    --status-warning:  #E0A93F;   /* 8.29:1 */
    --status-serious:  #F0855A;   /* 6.86:1 */
    --status-critical: #F2707E;   /* 6.18:1 */
    --status-good-wash:#10281F;  --status-warning-wash:#241D10;
    --status-serious-wash:#2A1A12; --status-critical-wash:#2A1419;

    --seq-1: #0A3345; --seq-2: #0F5676; --seq-3: #2A86AD;
    --seq-4: #63B4D1; --seq-5: #A9D8E8;   /* ramp reverses: dark → light */

    --grid-line: #1E2A34;
    --axis-line: #2C3A45;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --surface:#121A22; --surface-sunken:#0D141A; --surface-raised:#1A242E;
  --surface-chart:#121A22; --border:#27333D; --border-strong:#3A4752;
  --text:#E6EDF2; --text-secondary:#B4C0C9; --text-muted:#8A98A3;
  --brand-primary:#0B2D52; --brand-link:#6BB4F5; --brand-on-primary:#FFFFFF;
  --p1-wash:#2A181B; --p2-wash:#241F14; --p3-wash:#132630; --p4-wash:#1B2328;
  --status-good:#4FC49A; --status-warning:#E0A93F;
  --status-serious:#F0855A; --status-critical:#F2707E;
  --status-good-wash:#10281F; --status-warning-wash:#241D10;
  --status-serious-wash:#2A1A12; --status-critical-wash:#2A1419;
  --seq-1:#0A3345; --seq-2:#0F5676; --seq-3:#2A86AD; --seq-4:#63B4D1; --seq-5:#A9D8E8;
  --grid-line:#1E2A34; --axis-line:#2C3A45;
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
}

/* ===========================================================================
   9. COMPONENTS
   ========================================================================= */

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--fw-h1) var(--fs-h1)/var(--lh-tight) var(--font-display); color: var(--brand-primary); margin: 0 0 var(--sp-4); }
h2 { font: var(--fw-h2) var(--fs-h2)/var(--lh-tight) var(--font-display); color: var(--brand-primary); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font: var(--fw-h3) var(--fs-h3)/var(--lh-tight) var(--font-display); color: var(--brand-primary); margin: var(--sp-5) 0 var(--sp-2); }
a { color: var(--brand-link); }
:focus-visible { outline: 2px solid var(--brand-link); outline-offset: 2px; }

/* --- Card ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}

/* --- KPI row & tile ------------------------------------------------------
   A KPI tile is a stat, not a chart. No sparkline unless the trend is the
   point. The label says what it counts; the value never floats unexplained.
   `.kpi-meta` carries the denominator — a rate with no denominator is the
   most common way a dashboard misleads.
   -------------------------------------------------------------------------*/
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
.kpi-label { font: var(--fw-kpi-label) var(--fs-kpi-label)/1.3 var(--font-data);
             text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--sp-2); }
.kpi-value { font: var(--fw-kpi) var(--fs-kpi)/1.05 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-meta  { font: 400 var(--fs-caption)/1.4 var(--font-data); color: var(--text-secondary); margin-top: var(--sp-2); }
.kpi-value.is-good     { color: var(--status-good); }
.kpi-value.is-critical { color: var(--status-critical); }

/* --- Priority chip -------------------------------------------------------
   Markup, always all three parts:
     <span class="p-chip p1"><span class="p-glyph" aria-hidden="true"></span>P1</span>
   The 1px darker outline keeps the chip perceivable as an object on any
   surface regardless of how light its fill is.
   -------------------------------------------------------------------------*/
.p-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  font: 600 var(--fs-caption)/1.4 var(--font-data);
  border: 1px solid rgba(0,0,0,.18); white-space: nowrap;
}
.p-chip.p1 { background: var(--p1); color: var(--p1-ink); }
.p-chip.p2 { background: var(--p2); color: var(--p2-ink); }
.p-chip.p3 { background: var(--p3); color: var(--p3-ink); }
.p-chip.p4 { background: var(--p4); color: var(--p4-ink); }
.p-chip.p1 .p-glyph::before { content: var(--p1-glyph); }
.p-chip.p2 .p-glyph::before { content: var(--p2-glyph); }
.p-chip.p3 .p-glyph::before { content: var(--p3-glyph); }
.p-chip.p4 .p-glyph::before { content: var(--p4-glyph); }

tr.row-p1 { background: var(--p1-wash); }
tr.row-p2 { background: var(--p2-wash); }
tr.row-p3 { background: var(--p3-wash); }
tr.row-p4 { background: var(--p4-wash); }

/* --- Status pill ---------------------------------------------------------
   Always icon + label. Never colour alone.
   -------------------------------------------------------------------------*/
.status { display: inline-flex; align-items: center; gap: var(--sp-1);
          padding: 2px var(--sp-2); border-radius: var(--radius-sm);
          font: 600 var(--fs-caption)/1.4 var(--font-data); }
.status.good     { background: var(--status-good-wash);     color: var(--status-good); }
.status.warning  { background: var(--status-warning-wash);  color: var(--status-warning); }
.status.serious  { background: var(--status-serious-wash);  color: var(--status-serious); }
.status.critical { background: var(--status-critical-wash); color: var(--status-critical); }

/* --- Data table ----------------------------------------------------------
   Numbers are tabular-nums and right-aligned; text is left. Header is navy
   on white rather than white on navy, so a long table does not become a
   block of colour when printed.
   -------------------------------------------------------------------------*/
table.data { width: 100%; border-collapse: collapse; font: 400 var(--fs-data)/1.45 var(--font-data); }
table.data th {
  text-align: left; font-weight: 600; color: var(--brand-primary);
  border-bottom: 2px solid var(--border-strong);
  padding: var(--sp-2) var(--sp-3); white-space: nowrap;
}
table.data td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--surface-sunken); }
table.data .withheld { color: var(--text-muted); font-style: italic; }
/* "Withheld" is shown as withheld — never as zero, never as a blank cell.
   A measure below its publication floor prints "n < 10" or "—  not scored". */

/* --- Chart furniture ----------------------------------------------------- */
.chart-grid line, .chart-grid path { stroke: var(--grid-line); stroke-width: 1; }
.chart-axis line, .chart-axis path { stroke: var(--axis-line); stroke-width: 1; }
.chart-axis text, .chart-label { fill: var(--text-muted); font: 400 var(--fs-caption) var(--font-data); }
.bar { rx: var(--radius-sm); }            /* rounded data-end only */
.line { fill: none; stroke-width: var(--line-w); stroke-linecap: round; stroke-linejoin: round; }
.mark-ring { stroke: var(--surface-chart); stroke-width: 2; }  /* overlap relief */

.s1 { fill: var(--series-1); stroke: var(--series-1); }
.s2 { fill: var(--series-2); stroke: var(--series-2); }
.s3 { fill: var(--series-3); stroke: var(--series-3); }
.s4 { fill: var(--series-4); stroke: var(--series-4); }
.s5 { fill: var(--series-5); stroke: var(--series-5); }
.s-other { fill: var(--series-other); stroke: var(--series-other); }

/* Legend present whenever there are >= 2 series. Text wears text tokens —
   never the series colour; the swatch beside it carries identity. */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font: 400 var(--fs-caption) var(--font-data); color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Tooltip — ship one by default on every plotted chart. */
.tooltip {
  position: absolute; pointer-events: none;
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); padding: var(--sp-2) var(--sp-3);
  font: 400 var(--fs-caption)/1.5 var(--font-data); font-variant-numeric: tabular-nums;
}

/* Filters sit in ONE row above the charts, never beside them. */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); }

/* --- Print / forced colours ---------------------------------------------- */
@media print {
  body { background: #FFFFFF; }
  .card, .kpi { box-shadow: none; border-color: #BBBBBB; }
}
@media (forced-colors: active) {
  .p-chip, .status { border: 1px solid CanvasText; forced-color-adjust: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --fs-kpi: 26px; --fs-h1: 22px; }
  .card { padding: var(--sp-4); }
  body { padding-left: 16px; padding-right: 16px; }
}