/* ============================================================================
   .dash — the shadcn-style dashboard theme (flat outlined cards, quiet
   left-aligned KPI cards, sentence-case labels). Opt in by wrapping a page's
   content in <div class="dash">. Everything is scoped under `.dash`, so the
   shared macros (.ms-kpi-*, .card-modern) keep their default look elsewhere.

   Started in templates/dashboard.html (the general dashboard), which still
   holds its page-specific rules; SpecLab (templates/laboratory/) uses it too.
   ============================================================================ */
.dash {
    --bg:            var(--surface);
    --fg:            var(--neutral-900);   /* zinc-950 */
    --muted:         var(--neutral-100);   /* zinc-100 */
    --muted-fg:      var(--neutral-500);   /* zinc-500 */
    --border:        var(--neutral-200);   /* zinc-200 */
    --ring:          var(--neutral-400);   /* zinc-400 */
    --primary:       var(--neutral-900);   /* zinc-900 */
    --primary-fg:    var(--neutral-50);
    --radius:        0.65rem;
    color: var(--fg);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.dash-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.dash-subtitle {
    font-size: 0.875rem;
    color: var(--muted-fg);
}

/* ── Cards (charts, table, shift) ───────────────────────────────────────── */
.dash .card,
.dash .card-modern {
    background: var(--bg);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: none !important;
}
.dash .card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
}

/* ── KPI cards (override shared .ms-kpi-* within scope) ──────────────────── */
.dash .ms-kpi-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color 0.15s ease;
}
.dash .ms-kpi-card:hover { border-color: var(--ring); }
.dash .ms-kpi-body {
    padding: 1.1rem 1.25rem;
    justify-content: flex-start;
}
.dash .ms-kpi-text { align-items: flex-start; text-align: left; }
.dash .ms-kpi-lbl {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-fg);
    margin-bottom: 0.4rem;
}
.dash .ms-kpi-val {
    color: var(--fg) !important;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.03em;
}
/* Opt-in: a KPI whose number carries meaning in its colour (e.g. a backlog
   that turns red past a threshold) sets --kpi-val-color on the value element
   (inline style or JS). Every other KPI value stays --fg. */
.dash .ms-kpi-val.ms-kpi-val-tinted { color: var(--kpi-val-color, var(--fg)) !important; }
.dash .ms-kpi-sub {
    font-size: 0.75rem;
    color: var(--muted-fg);
    margin-top: 0.35rem;
}
.dash .ms-kpi-extra { margin-top: 0.4rem; }
.dash .dash-kpi-trend {
    font-size: 0.75rem;
    color: var(--muted-fg);
}
.dash .dash-kpi-delta { font-weight: 600; white-space: nowrap; }
.dash .dash-kpi-delta.up   { color: var(--success); }
.dash .dash-kpi-delta.down { color: var(--danger); }
.dash .dash-kpi-delta .bi { font-size: 0.95rem; vertical-align: -2px; }
.dash .dash-kpi-trend-sep { color: var(--border); margin: 0 0.2rem; }


/* ── Table ──────────────────────────────────────────────────────────────── */
.dash .table { margin-bottom: 0; color: var(--fg); }
.dash .table > :not(caption) > * > * {
    border-bottom-color: var(--border);
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
}
.dash .table thead.table-light th,
.dash .table th {
    background: transparent;
    color: var(--muted-fg);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.dash .table-hover > tbody > tr:hover > * {
    background-color: var(--muted);
}
.dash .table tbody tr { transition: background-color 0.12s ease; }

@media (max-width: 575.98px) {
    .dash-title { font-size: 1.25rem; }
    .dash-subtitle { font-size: 0.8rem; }
    .dash .card-body { padding: 1rem; }
}