/* =============================================================================
   kpi-delta.css — F6 KPI delta chip + question-label + TV mode (best-of-breed build #2:
   "biggest visual upgrade platform-wide, zero new queries"). ADDITIVE + INERT: nothing
   renders differently until markup adds .spx-metric__delta / .spx-metric__label--q / body.display-tv.
   Extends the existing .spx-metric structure (spectrum-components.css:874). Fully reversible:
   delete this file + its <link> in _Layout.
   Codex wires it by splitting the sign already in CompareText/PairCompareText into up/down/flat —
   no new queries, no backend change.
   ============================================================================= */

/* --- the delta chip beside a KPI value: glyph + green/red, tabular, pill --- */
.spx-metric__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}
.spx-metric__delta::before { font-size: 9px; line-height: 1; }

/* default polarity: up = good (green), down = bad (red), flat = muted */
.spx-metric__delta--up {
    color: var(--smkk-spx-success-text, #1a7a44);
    background: var(--smkk-spx-success-surface, rgba(35, 140, 80, 0.12));
}
.spx-metric__delta--up::before { content: "\25B2"; }      /* ▲ */
.spx-metric__delta--down {
    color: var(--smkk-spx-danger-text, #b3261e);
    background: var(--smkk-spx-danger-surface, rgba(179, 38, 30, 0.12));
}
.spx-metric__delta--down::before { content: "\25BC"; }    /* ▼ */
.spx-metric__delta--flat {
    color: var(--smkk-spx-text-muted, #5b6b7a);
    background: var(--smkk-spx-surface-sunken, rgba(120, 130, 145, 0.1));
}
.spx-metric__delta--flat::before { content: "\2013"; }    /* – */

/* polarity inversion for metrics where DOWN is good (overdue, backlog, cost) or UP is bad.
   Codex sets data-good="true|false" on the chip; the glyph stays truthful, the color flips. */
.spx-metric__delta[data-good="false"].spx-metric__delta--up {
    color: var(--smkk-spx-danger-text, #b3261e);
    background: var(--smkk-spx-danger-surface, rgba(179, 38, 30, 0.12));
}
.spx-metric__delta[data-good="true"].spx-metric__delta--down {
    color: var(--smkk-spx-success-text, #1a7a44);
    background: var(--smkk-spx-success-surface, rgba(35, 140, 80, 0.12));
}

/* --- question-style label (best-of-breed: "Label as a question") --- */
.spx-metric__label--q { font-weight: 600; }
.spx-metric__label--q::after { content: "?"; opacity: 0.5; }

/* --- timeframe + goal sliver under a metric --- */
.spx-metric__timeframe {
    display: block;
    font-size: 11px;
    color: var(--smkk-spx-text-muted, #5b6b7a);
    margin-top: 1px;
}
.spx-metric__goal {
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: var(--smkk-spx-surface-sunken, rgba(120, 130, 145, 0.18));
    overflow: hidden;
}
.spx-metric__goal > i {
    display: block;
    height: 100%;
    width: var(--goal-pct, 0%);
    background: var(--smkk-spx-success, #2f7a4f);
}

/* --- the full KPI card layout (_Kpi.cshtml): question → value+delta → timeframe → goal --- */
.spx-metric--kpi {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    text-decoration: none; color: inherit; min-width: 0;
}
a.spx-metric--kpi:hover { background: var(--smkk-spx-surface-hover, rgba(47, 109, 90, .06)); }
.spx-metric--kpi .spx-metric__label { font-weight: 600; font-size: 12px; color: var(--smkk-spx-text-muted, #5b6b7a); }
.spx-metric--kpi .spx-metric__valrow { display: inline-flex; align-items: baseline; gap: 6px; }
.spx-metric--kpi .spx-metric__value { font-size: clamp(20px, 4vw, 30px); font-weight: 800; line-height: 1.05; }
.spx-metric__goal--warn > i { background: var(--smkk-spx-warning, #9a661b); }
.spx-metric__goal--danger > i { background: var(--smkk-spx-danger, #b3261e); }
.spx-metric__goal { width: 100%; }

/* --- ambient TV / shop-floor mode: body.display-tv scales the strip for wall displays --- */
body.display-tv .spx-metric-strip { gap: 28px; }
body.display-tv .spx-metric__value { font-size: clamp(28px, 5vw, 64px); }
body.display-tv .spx-metric__label { font-size: clamp(13px, 1.4vw, 20px); }
body.display-tv .spx-metric__delta { font-size: clamp(14px, 1.6vw, 22px); }