/* Phase D (2026-05-17) — Production KPI hero card on label-side /manufacturing.html.
 * Discrete top-of-page summary; per-release SKU detail remains default UX.
 * Vars-only — light-theme picked up automatically via body.label-light overrides. */

.prod-kpi-hero {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace;
}
.prod-kpi-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.prod-kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.prod-kpi-pills {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.prod-kpi-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
}
.prod-kpi-pill.green  { color: var(--status-green-fg,  #10b981); background: var(--status-green-bg,  rgba(16,185,129,0.12)); }
.prod-kpi-pill.yellow { color: var(--status-amber-fg,  #f59e0b); background: var(--status-amber-bg,  rgba(245,158,11,0.14)); }
.prod-kpi-pill.red    { color: var(--status-red-fg,    #ef4444); background: var(--status-red-bg,    rgba(239,68,68,0.14)); }
.prod-kpi-total {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 4px;
}
.prod-kpi-alerts {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    font-size: 0.78rem;
}
.prod-kpi-alerts li {
    padding: 4px 0 4px 10px;
    border-left: 2px solid var(--status-red-fg, #ef4444);
    margin-bottom: 2px;
    color: var(--text-secondary);
}
.prod-kpi-alert-sku {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
}
.prod-kpi-alert-sku:hover {
    color: var(--accent-emphasis);
    text-decoration: underline;
}
.prod-kpi-alert-stage,
.prod-kpi-alert-days {
    color: var(--text-muted);
}
.prod-kpi-alert-flags {
    color: var(--status-red-fg, #ef4444);
    font-weight: 700;
}

/* Light theme — sharper contrast (WCAG-safe) */
body.label-light .prod-kpi-pill.green  { color: #047857; background: rgba(4,120,87,0.14); }
body.label-light .prod-kpi-pill.yellow { color: #b45309; background: rgba(180,83,9,0.14); }
body.label-light .prod-kpi-pill.red    { color: #b91c1c; background: rgba(185,28,28,0.14); }
body.label-light .prod-kpi-alerts li   { border-left-color: #b91c1c; }
body.label-light .prod-kpi-alert-flags { color: #b91c1c; }