/* styles/widgets/kpi-bands.css
 *
 * Extracted from styles/main.css during T4#20 (the May-2026
 * CSS-split refactor). Originally lived at lines 598-695
 * of main.css. Cascade order is preserved: main.css loads first
 * (themes + base + modal/tab/layout infra), then per-widget
 * files in alphabetical order via <link> tags in index.html.
 */

/* ── KPI BANDS (top region) ────────────────────────────────────
   Strip of short-but-wide stat cards across the full width above
   the main grid. Designed so 4 cards fit on a normal desktop row,
   each card noticeably wider than tall but never taller than the
   widget panels below.

   Two responsive breakpoints:
     * ≤900px - same 4-up grid but smaller padding/fonts.
     * ≤480px - collapse to a 2x2 grid so the cards stay legible
                on phones rather than squeezing 4 across.
   ──────────────────────────────────────────────────────────── */
#region-top:empty { display: none; }
#region-top {
    margin-bottom: 12px;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;        /* row fills available height inside the grid cell */
    gap: 10px;
}
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;            /* allow grid cell to shrink */
    transition: border-color 0.15s, box-shadow 0.15s;
}
.kpi-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.kpi-icon {
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
    opacity: 0.9;
}
.kpi-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
.kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.kpi-sub {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The streak card lights up when streak ≥ 1 (same convention as the
   header streak chip - accent border + accent value text). */
.kpi-card[data-kpi="streak"].lit {
    border-color: var(--accent);
}
.kpi-card[data-kpi="streak"].lit .kpi-value {
    color: var(--accent);
}

/* Chadmin polish (May 2026): cards tagged data-kpi-clickable
   navigate the Tasks widget to the matching view (today/backlog).
   Done today + Today + Backlog get the affordance; Streak stays
   passive (no obvious target). Pointer cursor + slightly bumped
   hover border so the card visually "advertises" itself. Focus
   ring matches the accent for keyboard users (role=button +
   tabindex on the host element). Tooltip text comes from
   title= set in render(). */
.kpi-card[data-kpi-clickable="1"] {
    cursor: pointer;
    user-select: none;
}
.kpi-card[data-kpi-clickable="1"]:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.kpi-card[data-kpi-clickable="1"]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.kpi-card[data-kpi-clickable="1"]:active {
    transform: translateY(1px);
}

/* Tablet - same 4-up but tighter so the strip stays compact. */
@media (max-width: 900px) {
    .kpi-grid { gap: 8px; }
    .kpi-card { padding: 9px 11px; gap: 9px; border-radius: 10px; }
    .kpi-icon { font-size: 18px; }
    .kpi-value { font-size: 18px; }
    .kpi-label { font-size: 9px; letter-spacing: 0.4px; }
    .kpi-sub   { font-size: 9px; }
}

/* Phone - fall back to 2x2 so each card is readable instead of
   squeezing four narrow strips across a 360px screen. */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kpi-card { padding: 10px 12px; }
    .kpi-icon { font-size: 18px; }
    .kpi-value { font-size: 19px; }
}