/* ========================================================================
   kpis.css - Compact Summary Bar
   Counts are secondary context, not the hero. A slim inline bar of
   label+number stats, not big cards — the list is the visual hero.
   ======================================================================== */
.summary-bar {
    background: white;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 6px;
    margin-bottom: 8px;
}

.summary-bar .stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 14px;
}

.summary-bar .stat + .stat {
    border-left: 1px solid var(--gray-200);
}

.summary-bar .stat .s-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    white-space: nowrap;
}

.summary-bar .stat .s-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
}

/* Status-tinted numbers (dynamic palette, assigned by index from the API) */
.summary-bar .stat.s-idx-0 .s-num { color: var(--status-pal-0-text); }
.summary-bar .stat.s-idx-1 .s-num { color: var(--status-pal-1-text); }
.summary-bar .stat.s-idx-2 .s-num { color: var(--status-pal-2-text); }
.summary-bar .stat.s-idx-3 .s-num { color: var(--status-pal-3-text); }
.summary-bar .stat.s-idx-4 .s-num { color: var(--status-pal-4-text); }
.summary-bar .stat.s-idx-5 .s-num { color: var(--status-pal-5-text); }
.summary-bar .stat.s-idx-6 .s-num { color: var(--status-pal-6-text); }
.summary-bar .stat.s-idx-7 .s-num { color: var(--status-pal-7-text); }

/* Overdue: findable, not loud — a small red chip pinned to the right */
.summary-bar .stat.stat-overdue {
    margin-left: auto;
    border-left: none;
    background: var(--danger-light);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.summary-bar .stat.stat-overdue .s-lbl { color: var(--danger-dark); }
.summary-bar .stat.stat-overdue .s-num { color: var(--danger); }