/* ===========================================================================
   Vitalis CEO Dashboard

   Colour tokens are the validated reference palette. The categorical slots
   were checked with the palette validator in both modes:
     light  worst adjacent CVD ΔE 9.1, normal-vision 19.6  — PASS
     dark   worst adjacent CVD ΔE 8.4, normal-vision 19.3  — PASS
   Light mode returns a contrast WARN on aqua/yellow/magenta, so every chart
   using them ships visible value labels and a table view. That is the
   documented relief, not an oversight.

   Dark mode is a selected set of steps for the dark surface, not an
   automatic inversion.
   =========================================================================== */

:root {
    color-scheme: light;

    --surface-1:   #fcfcfb;
    --page:        #f9f9f7;
    --ink:         #0b0b0b;
    --ink-2:       #52514e;
    --ink-muted:   #898781;
    --grid:        #e1e0d9;
    --axis:        #c3c2b7;
    --border:      rgba(11, 11, 11, .10);

    --series-1: #2a78d6;  /* blue    — Planned  */
    --series-2: #eb6834;  /* orange  — Actual   */
    --series-3: #1baf7a;  /* aqua    — Forecast */
    --series-4: #eda100;  /* yellow  */
    --series-5: #e87ba4;  /* magenta */

    /* Status colours are reserved. Never reused as "series 6". */
    --good:     #0ca30c;
    --warning:  #fab219;
    --serious:  #ec835a;
    --critical: #d03b3b;
    --delta-up: #006300;

    --radius: 12px;
    --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --surface-1: #1a1a19;
        --page:      #0d0d0d;
        --ink:       #ffffff;
        --ink-2:     #c3c2b7;
        --ink-muted: #898781;
        --grid:      #2c2c2a;
        --axis:      #383835;
        --border:    rgba(255, 255, 255, .10);

        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #c98500;
        --series-5: #d55181;

        --delta-up: #0ca30c;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page:      #0d0d0d;
    --ink:       #ffffff;
    --ink-2:     #c3c2b7;
    --ink-muted: #898781;
    --grid:      #2c2c2a;
    --axis:      #383835;
    --border:    rgba(255, 255, 255, .10);

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;

    --delta-up: #0ca30c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: .75rem; }
.brand h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.as-of { margin: 0; font-size: .78rem; color: var(--ink-muted); }

.topbar-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

select,
.link-button {
    font: inherit;
    font-size: .85rem;
    color: var(--ink);
    background: var(--surface-1);
    border: 1px solid var(--axis);
    border-radius: 8px;
    padding: .4rem .7rem;
    cursor: pointer;
}
.link-button:hover, select:hover { border-color: var(--ink-muted); }

/* --------------------------------------------------------------------- nav */

.pagenav {
    display: flex;
    gap: .25rem;
    padding: 0 1.25rem;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.pagenav button {
    font: inherit;
    font-size: .87rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-2);
    padding: .7rem .85rem;
    cursor: pointer;
    white-space: nowrap;
}
.pagenav button:hover { color: var(--ink); }
.pagenav button[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--series-1);
    font-weight: 600;
}

/* -------------------------------------------------------------------- main */

main { max-width: 1400px; margin: 0 auto; padding: 1.25rem; }
.page[hidden] { display: none; }

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    margin: 0;
}

.card > h2,
.card > figcaption {
    margin: 0 0 .85rem;
    font-size: .92rem;
    font-weight: 600;
}
.card .sub {
    margin: -.6rem 0 .85rem;
    font-size: .78rem;
    color: var(--ink-muted);
}

.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid + .grid { margin-top: 1rem; }

/* --------------------------------------------------------------- stat tile */
/* A single headline number is not a chart. No plot, so no hover layer. */

.tile .label {
    margin: 0 0 .3rem;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.tile .value {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.1;
}
.tile .delta { margin: .3rem 0 0; font-size: .8rem; color: var(--ink-2); }
.tile .delta.up   { color: var(--delta-up); }
.tile .delta.down { color: var(--critical); }

/* ------------------------------------------------------------ progress bar */

.progress-row { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; margin-bottom: .9rem; }
.progress-row .name { font-weight: 600; font-size: .87rem; }
.progress-row .figures { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.progress-track {
    grid-column: 1 / -1;
    position: relative;
    height: 10px;
    background: var(--grid);
    border-radius: 5px;
    overflow: hidden;
}
.progress-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--series-2); }
/* 2px surface gap so the planned marker never touches the actual fill */
.progress-marker {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 2px;
    background: var(--ink-2);
    box-shadow: 0 0 0 2px var(--surface-1);
}

/* ------------------------------------------------------------------ charts */

.chart-wrap { position: relative; height: 300px; }
.chart-wrap.tall { height: 420px; }

/* ------------------------------------------------------------------ tables */
/* The documented relief for the light-mode contrast WARN, and useful anyway. */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.data th, table.data td {
    text-align: left;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--grid);
    white-space: nowrap;
}
table.data th { color: var(--ink-muted); font-weight: 600; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--series-1) 6%, transparent); }

.swatch {
    display: inline-block;
    width: .7em; height: .7em;
    border-radius: 2px;
    margin-right: .45em;
    vertical-align: baseline;
}

/* Status pill — always icon + label, never colour alone. */
.pill {
    display: inline-flex; align-items: center; gap: .3em;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    border: 1px solid currentColor;
}
.pill.good     { color: var(--good); }
.pill.warning  { color: var(--warning); }
.pill.serious  { color: var(--serious); }
.pill.critical { color: var(--critical); }

/* ------------------------------------------------------------------- misc */

.status { margin-top: 1rem; font-size: .84rem; color: var(--ink-muted); }
.status.error, .error { color: var(--critical); }
.empty { color: var(--ink-muted); font-size: .85rem; padding: 1rem 0; }

/* ------------------------------------------------------------------ login */

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.login-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
}
.login-card h1 { margin: 0 0 1.25rem; font-size: 1.2rem; }
.login-card label { display: block; margin: 1rem 0 .35rem; font-size: .82rem; color: var(--ink-2); }
.login-card input {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--axis);
    border-radius: 8px;
    background: var(--surface-1);
    color: var(--ink);
    font: inherit;
}
.login-card button {
    width: 100%;
    margin-top: 1.35rem;
    padding: .7rem;
    background: var(--series-1);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.login-card button:hover { filter: brightness(1.06); }

.error {
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid var(--critical);
    border-radius: 8px;
    font-size: .84rem;
}

@media (max-width: 600px) {
    main { padding: .85rem; }
    .chart-wrap { height: 260px; }
}