/* ============================================================================
   Nightly Tests tab — full-width, card-per-run layout.
   Top: KPI tiles (shared .pri-tile). Below: a responsive grid of run cards
   that fills the available width. Each card = run header + pass/fail ratio bar
   + a shared `.status-table` (Platform | Tests Run | Pass | Fail | Error |
   Status + TOTAL). Rendered by frontend/js/28-nightly-tests.js. Reuses the
   HUD's .pri-tile / .status-table / .status-badge styling for consistency.
   ============================================================================ */

.nt-caption {
    color: var(--text-secondary);
    font-size: var(--text-sm, 0.82rem);
    font-weight: var(--fw-medium, 500);
    margin: 0 0 var(--space-4, 16px) 2px;
}

.nt-kpis { margin-bottom: var(--space-5, 20px); }
.nt-kpi-of { font-size: 1rem; font-weight: var(--fw-semibold, 600); color: var(--text-secondary); }

/* ── Card list — always one run per row (full width), stacked top to bottom. ── */
.nt-cards-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

/* ── Run card ────────────────────────────────────────────────────────────── */
.nt-run-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--card-border);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    min-width: 0; /* let the inner table shrink inside its grid track */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nt-run-card:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.35)); border-color: rgba(129,140,248,0.35); }
.nt-run-card-fail    { border-left-color: var(--status-fail, #ef4444); }
.nt-run-card-pass    { border-left-color: var(--status-pass, #22c55e); }
.nt-run-card-running { border-left-color: var(--status-running, #3b82f6); }

.nt-run-card-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 16px;
}
.nt-run-card-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nt-run-num {
    font-size: var(--text-lg, 1.12rem);
    font-weight: var(--fw-bold, 700);
    color: var(--primary-light, #818cf8);
    text-decoration: none;
}
.nt-run-num:hover { text-decoration: underline; }
.nt-run-rate { font-size: var(--text-lg, 1.12rem); font-weight: var(--fw-bold, 700); color: var(--text-primary); }
.nt-run-ago { color: var(--text-muted); font-size: var(--text-xs, 0.72rem); }

.nt-run-card-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    font-size: var(--text-sm, 0.82rem);
    color: var(--text-secondary);
}
.nt-run-branch {
    display: inline-flex; align-items: center; gap: 3px;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-secondary);
}
.nt-run-branch i, .nt-run-branch svg.lucide { width: 12px; height: 12px; }
.nt-run-sha {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-muted); text-decoration: none;
}
.nt-run-sha:hover { color: var(--primary-light, #818cf8); text-decoration: underline; }
.nt-run-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-secondary); text-decoration: none;
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
}
.nt-run-link i, .nt-run-link svg.lucide { width: 12px; height: 12px; }
.nt-run-link:hover { color: var(--primary-light, #818cf8); }
.nt-run-pipeline { color: var(--primary-light, #818cf8); font-weight: var(--fw-medium, 500); }
.nt-run-pipeline:hover { color: var(--primary, #6366f1); text-decoration: underline; }

/* ── Pass/fail ratio bar + substat line ────────────────────────────────── */
.nt-ratio {
    display: flex; height: 8px; width: 100%;
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
    background: var(--bg-overlay, rgba(255,255,255,0.06));
}
.nt-ratio-seg { height: 100%; }
.nt-ratio-pass { background: var(--status-pass, #22c55e); }
.nt-ratio-fail { background: var(--status-fail, #ef4444); }
.nt-ratio-err  { background: var(--status-warn, #f59e0b); }
.nt-ratio-skip { background: var(--gray-400, #71717a); }

.nt-run-substat {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: var(--text-xs, 0.72rem);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.nt-run-substat .nt-ss-pass { color: var(--status-pass, #22c55e); font-weight: 600; }
.nt-run-substat .nt-ss-fail { color: var(--status-fail, #ef4444); font-weight: 600; }
.nt-run-substat .nt-ss-err  { color: var(--status-warn, #f59e0b); font-weight: 600; }
.nt-run-substat .nt-ss-total { color: var(--text-primary); font-weight: 600; }

/* ── Table tweaks on top of the shared `.status-table` look ─────────────── */
.nt-run-table .nt-plat-link { color: inherit; text-decoration: none; }
.nt-run-table .nt-plat-link:hover { color: var(--primary-light, #818cf8); text-decoration: underline; }
.nt-run-table .nt-cell-rate { margin-left: 8px; color: var(--text-muted); font-size: var(--text-xs, 0.72rem); font-variant-numeric: tabular-nums; }

.nt-run-table tr.nt-total td {
    font-weight: var(--fw-bold, 700);
    border-top: 2px solid var(--card-border, rgba(255,255,255,0.16));
}
.nt-run-table tr.nt-skipped td { color: var(--text-muted, #71717a); }
.nt-run-table tr.nt-skipped td:first-child { color: var(--text-muted, #71717a) !important; font-weight: var(--fw-regular, 400); }

/* Compact status pill (shares the .status-badge palette; overrides the chunky
   table-cell geometry so it reads as an inline row pill). */
.status-badge.nt-badge {
    min-width: 0; min-height: 0;
    flex-direction: row;
    padding: 3px 9px;
    font-size: 0.68rem;
    letter-spacing: 0.2px;
    border-radius: var(--radius-sm, 4px);
}
.nt-note { margin-left: 8px; color: var(--text-muted, #71717a); font-size: var(--text-xs, 0.72rem); font-style: italic; }

/* ── Per-test drilldown (expandable failing-platform rows) ─────────────── */
.nt-plat-wrap { display: inline-flex; align-items: center; gap: 6px; }
.nt-drill-caret {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--text-muted); display: inline-flex; align-items: center;
}
.nt-drill-caret i, .nt-drill-caret svg.lucide { width: 14px; height: 14px; transition: transform 0.15s ease, color 0.15s ease; }
.nt-drill-caret:hover { color: var(--primary-light, #818cf8); }
.nt-drill-caret.is-open i, .nt-drill-caret.is-open svg.lucide { transform: rotate(90deg); color: var(--primary-light, #818cf8); }
.nt-drill-spacer { display: inline-block; width: 14px; }

.nt-cases-row > td { padding: 0; background: var(--bg-base); }
.nt-cases-panel { padding: 12px 16px 14px 34px; }
.nt-cases-loading { color: var(--text-muted); font-style: italic; font-size: var(--text-sm, 0.82rem); }
.nt-cases-note {
    display: flex; align-items: center; gap: 6px;
    color: var(--text-secondary); font-size: var(--text-sm, 0.82rem);
}
.nt-cases-note i, .nt-cases-note svg.lucide { width: 14px; height: 14px; color: var(--text-muted); }
.nt-cases-note a { color: var(--primary-light, #818cf8); }

.nt-cases-summary {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: var(--text-xs, 0.72rem); color: var(--text-secondary);
    margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.nt-cases-summary .nt-ss-fail { color: var(--status-fail, #ef4444); font-weight: 600; }
.nt-cases-summary .nt-ss-err  { color: var(--status-warn, #f59e0b); font-weight: 600; }
.nt-cases-summary .nt-ss-pass { color: var(--status-pass, #22c55e); font-weight: 600; }
.nt-cases-toggle {
    margin-left: auto; cursor: pointer;
    background: none; border: 1px solid var(--card-border);
    border-radius: var(--radius-sm, 4px); color: var(--text-secondary);
    font-size: var(--text-xs, 0.72rem); padding: 2px 8px;
}
.nt-cases-toggle:hover { color: var(--primary-light, #818cf8); border-color: var(--primary-light, #818cf8); }

.nt-cases-table { font-size: var(--text-xs, 0.72rem); }
.nt-cases-table th, .nt-cases-table td { padding: 6px 10px; }
.nt-cases-test { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.nt-cases-test a { color: var(--text-primary); text-decoration: none; }
.nt-cases-test a:hover { color: var(--primary-light, #818cf8); text-decoration: underline; }
.nt-cases-msg {
    display: inline-block; max-width: 520px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nt-footnote {
    margin-top: var(--space-4, 16px);
    font-size: var(--text-xs, 0.72rem);
    color: var(--text-muted);
}

.nt-empty {
    padding: 40px 20px; text-align: center;
    color: var(--text-muted); font-style: italic;
    border: 1px dashed var(--card-border, rgba(255,255,255,0.12));
    border-radius: var(--radius-md, 8px);
}

@media (max-width: 768px) {
    .nt-run-card { padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-4, 16px); }
}