/* ============================================================================
   Anode Bed MACC — Project Dashboard
   Palette derived from the data-viz reference palette (validated).
   Light default; dark via prefers-color-scheme.
   ========================================================================== */

:root {
    color-scheme: light;

    --plane:          #f4f5f3;
    --surface-1:      #ffffff;
    --surface-2:      #fbfbfa;
    --surface-sunken: #f1f2ef;

    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;

    --border:         rgba(11, 11, 11, 0.10);
    --border-strong:  rgba(11, 11, 11, 0.16);
    --grid:           #e1e0d9;
    --baseline:       #c3c2b7;

    /* categorical (validated order) */
    --series-1: #2a78d6;   /* blue   — baseline / primary */
    --series-2: #eb6834;   /* orange — estimated / forecast */
    --series-3: #1baf7a;   /* aqua   — earned / actual */
    --series-4: #eda100;   /* yellow */
    --series-5: #e87ba4;   /* magenta */
    --series-7: #4a3aa7;   /* violet */

    /* status (fixed — never themed) */
    --st-good:     #0ca30c;
    --st-warning:  #fab219;
    --st-serious:  #ec835a;
    --st-critical: #d03b3b;
    --st-neutral:  #8a8a8a;

    --accent:      #2a78d6;
    --success-ink: #006300;
    --danger-ink:  #b3261e;

    --radius:   14px;
    --radius-s: 10px;
    --shadow:   0 1px 2px rgba(11,11,11,.05), 0 8px 24px -12px rgba(11,11,11,.12);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --plane:          #0d0d0d;
        --surface-1:      #1a1a19;
        --surface-2:      #201f1e;
        --surface-sunken: #161615;

        --text-primary:   #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted:     #8f8d86;

        --border:         rgba(255, 255, 255, 0.10);
        --border-strong:  rgba(255, 255, 255, 0.16);
        --grid:           #2c2c2a;
        --baseline:       #383835;

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

        --accent:      #3987e5;
        --success-ink: #0ca30c;
        --danger-ink:  #e66767;

        --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--plane);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

@media (max-width: 640px) {
    .wrap { padding: 18px 14px 48px; }
}

/* ---- generic building blocks --------------------------------------------- */

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-pad { padding: 20px 22px; }

.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

.muted   { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.mono    { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum    { font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: 16px; }

.section { margin-top: 26px; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* ---- top identity bar --------------------------------------------------- */

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface-1)) 0%, var(--surface-1) 60%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.topbar h1 {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 4px 0 6px;
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
    color: var(--text-secondary);
}
.meta-row b { color: var(--text-primary); font-weight: 600; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid var(--border-strong);
}
.pill .dot { width: 7px; height: 7px; border-radius: 100px; background: currentColor; }
.pill.is-progress { color: var(--series-1); }
.pill.is-good     { color: var(--st-good); }
.pill.is-risk     { color: var(--st-critical); }

.ring-wrap { display: flex; align-items: center; gap: 14px; }
.ring-cap { font-size: 12px; color: var(--text-secondary); max-width: 130px; }
.ring-cap b { display: block; font-size: 22px; color: var(--text-primary); font-weight: 700; letter-spacing: -.02em; }

/* ---- KPI tiles -------------------------------------------------------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 16px;
}
@media (max-width: 1080px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 14px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.kpi .k-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.kpi .k-value {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.kpi .k-value .unit { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.kpi .k-sub { font-size: 12px; color: var(--text-secondary); }
.kpi.accent-critical .k-value { color: var(--st-critical); }
.kpi.accent-good .k-value { color: var(--st-good); }

.kpi .k-bar {
    height: 5px;
    border-radius: 100px;
    background: var(--surface-sunken);
    overflow: hidden;
    margin-top: 6px;
}
.kpi .k-bar > i { display: block; height: 100%; border-radius: 100px; background: var(--accent); }

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

.chart-grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.chart-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) {
    .chart-grid-2, .chart-grid-1-1 { grid-template-columns: 1fr; }
}

svg { display: block; max-width: 100%; overflow: visible; }
.svg-scroll { overflow-x: auto; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* horizontal bar rows (budget compare, phase budget) */
.hbars { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.hbar-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
@media (max-width: 560px) { .hbar-row { grid-template-columns: 110px 1fr; } .hbar-row .hbar-val { grid-column: 2; text-align: right; } }
.hbar-label { font-size: 12.5px; color: var(--text-secondary); }
.hbar-track { position: relative; height: 22px; background: var(--surface-sunken); border-radius: 6px; overflow: hidden; }
.hbar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.hbar-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* phase progress list */
.phase { display: grid; grid-template-columns: 1fr; gap: 10px; }
.phase-row {
    display: grid;
    grid-template-columns: 44px 1fr 92px;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}
.phase-row:first-child { border-top: 0; }
.phase-row.sub .p-name { padding-left: 14px; color: var(--text-secondary); font-weight: 500; }
.p-wbs { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.p-name { font-size: 13.5px; font-weight: 600; }
.p-name .p-dates { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); margin-top: 1px; }
.p-track { height: 8px; border-radius: 100px; background: var(--surface-sunken); overflow: hidden; grid-column: 2; margin-top: 4px; }
.p-track > i { display: block; height: 100%; border-radius: 100px; background: var(--series-1); }
.p-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.phase-wrap { display: grid; grid-template-columns: 44px 1fr 92px; gap: 12px 12px; align-items: center; }

/* ---- attention lists ----------------------------------------------- */

.att-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .att-grid { grid-template-columns: 1fr; } }

.att-list { display: flex; flex-direction: column; }
.att-item {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    align-items: start;
}
.att-item:first-child { border-top: 0; }
.att-item .bar { width: 4px; align-self: stretch; border-radius: 100px; background: var(--st-neutral); }
.att-item.crit .bar { background: var(--st-critical); }
.att-item.warn .bar { background: var(--st-warning); }
.att-item.info .bar { background: var(--series-1); }
.att-name { font-size: 13px; font-weight: 600; }
.att-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.att-tag { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }

/* ---- task register table ---------------------------------------------- */

.tbl-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text-secondary);
    cursor: pointer;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.reg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.reg { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
table.reg th {
    text-align: left;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-strong);
    position: sticky; top: 0;
    background: var(--surface-1);
}
table.reg td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.reg tr:last-child td { border-bottom: 0; }
table.reg td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.reg .t-wbs { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
table.reg .t-name { font-weight: 600; }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 100px;
    border: 1px solid var(--border-strong);
    white-space: nowrap;
}
.badge .d { width: 6px; height: 6px; border-radius: 100px; background: currentColor; flex: none; }
.badge.s-Completed  { color: var(--st-good); }
.badge.s-InProgress { color: var(--series-1); }
.badge.s-Planned    { color: var(--text-muted); }
.badge.s-Overdue    { color: var(--st-critical); }

.mini-track { height: 6px; width: 78px; border-radius: 100px; background: var(--surface-sunken); overflow: hidden; display: inline-block; vertical-align: middle; }
.mini-track > i { display: block; height: 100%; background: var(--series-1); border-radius: 100px; }

.prio { font-size: 11px; font-weight: 600; }
.prio.HIGH   { color: var(--st-serious); }
.prio.NORMAL { color: var(--text-secondary); }
.prio.LOW    { color: var(--text-muted); }

.footnote { margin-top: 30px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }

/* tooltip for SVG charts */
.viz-tip {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    background: var(--text-primary);
    color: var(--plane);
    font-size: 11.5px;
    line-height: 1.45;
    padding: 6px 9px;
    border-radius: 7px;
    box-shadow: 0 6px 20px -6px rgba(0,0,0,.4);
    max-width: 240px;
    opacity: 0;
    transition: opacity .1s;
}
.viz-tip b { font-weight: 700; }