/* Global Styles - Dark Theme (Default)
   Indigo is the primary action color (active tabs, links, primary CTAs).
   ============================================================================
   DESIGN TOKENS (theme-agnostic — same scale on dark + light)

   Use these tokens instead of magic numbers in component styles. They define
   a small, professional vocabulary for type, spacing, radius, and shadow.
   ============================================================================ */
:root {
    /* Typography scale (modular, ~1.125 ratio) */
    --text-xs:  0.72rem;   /* 11.5px — micro labels, badges, helper text */
    --text-sm:  0.82rem;   /* 13px   — body small, table cells, sub-text */
    --text-md:  0.92rem;   /* 14.7px — body default, button labels */
    --text-base:1rem;      /* 16px   — sections of long text */
    --text-lg:  1.12rem;   /* 18px   — H3 / card titles */
    --text-xl:  1.32rem;   /* 21px   — H2 / section titles */
    --text-2xl: 1.65rem;   /* 26px   — H1 / page titles */
    --text-3xl: 2.05rem;   /* 33px   — Hero numbers (tile values) */

    /* Font weights — restraint: only 4 stops */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Border radius scale */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-pill: 999px;
}

/* ============================================================================
   Global "what's broken right now" pill — sits in the top-right of the
   global header (next to the keyboard-help / theme toggle). Three states:
     green  → no failures, pill is hidden via inline style="display:none"
              (keeps the header clean when everything's fine)
     yellow → 1-2 failures, amber outline + count
     red    → 3+ failures, danger outline + animated pulse to draw attention
   Polled every 60s by frontend/app.js (`_pollGlobalStatus`).
   ============================================================================ */
.global-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-right: 8px;
    background: transparent;
    border: 1px solid var(--gray-300, rgba(255,255,255,0.18));
    border-radius: var(--radius-pill, 999px);
    color: var(--text-primary);
    font-size: var(--text-xs, 0.72rem);
    font-weight: var(--fw-semibold, 600);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    white-space: nowrap;
    line-height: 1.2;
}
.global-status-pill:hover {
    background: var(--bg-elevated);
    transform: translateY(-1px);
}
.global-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-400);
}
.global-status-pill.is-yellow {
    border-color: rgba(245, 158, 11, 0.55);
    background: var(--warning-light);
    color: #f59e0b;
}
.global-status-pill.is-yellow .global-status-dot { background: var(--warning, #f59e0b); }
.global-status-pill.is-red {
    border-color: rgba(239, 68, 68, 0.55);
    background: var(--danger-light);
    color: var(--danger);
}
.global-status-pill.is-red .global-status-dot {
    background: var(--danger);
    /* Subtle pulse so the red state is visually unmissable without being
       obnoxious. 2.4s cycle = noticeable but not seizure-inducing. */
    animation: global-status-pulse 2.4s ease-in-out infinite;
}
.global-status-pill.is-loading .global-status-dot { background: var(--gray-400); }
@keyframes global-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
[data-theme="light"] .global-status-pill {
    border-color: #e2e8f0;
    color: #475569;
}
[data-theme="light"] .global-status-pill.is-yellow {
    background: rgba(245, 158, 11, 0.10);
    color: #d97706;
}
[data-theme="light"] .global-status-pill.is-red {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

:root, [data-theme="dark"] {
    /* Primary Brand Colors — Indigo */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-bg: rgba(99, 102, 241, 0.12);
    /* Accent kept as alias of primary so any var(--accent*) usages still work */
    --accent: #6366f1;
    --accent-light: #818cf8;
    --accent-bg: rgba(99, 102, 241, 0.12);

    /* Status Colors */
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.15);
    --success-dark: #16a34a;
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --danger-dark: #dc2626;
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --running: #3b82f6;
    --running-light: rgba(59, 130, 246, 0.15);

    /* Neutral Colors - Dark Scale */
    --gray-50: #18181b;
    --gray-100: #1f1f23;
    --gray-200: #27272a;
    --gray-300: #3f3f46;
    --gray-400: #71717a;
    --gray-500: #a1a1aa;
    --gray-600: #d4d4d8;
    --gray-700: #e4e4e7;
    --gray-800: #f4f4f5;
    --gray-900: #fafafa;

    /* Background Layers */
    --bg-base: #09090b;
    --bg-surface: #18181b;
    --bg-elevated: #1f1f23;
    --bg-overlay: #27272a;

    /* Table Header */
    --table-header-bg: #1f1f23;
    --table-header-text: #e4e4e7;
    --table-header-hover: #27272a;

    /* Card & Surface */
    --card-bg: #18181b;
    --card-border: #27272a;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

    /* Text */
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;

    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --accent-gradient:  linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --success-gradient: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --info-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    --dark-gradient: linear-gradient(135deg, #18181b 0%, #1f1f23 100%);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Font Sizes */
    --font-xs: 0.7rem;
    --font-sm: 0.75rem;
    --font-base: 0.85rem;
    --font-md: 0.9rem;
    --font-lg: 1rem;
}

/* Light Theme */
[data-theme="light"] {
    /* Primary Brand Colors — Indigo (kept consistent with dark theme) */
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #6366f1;
    --primary-bg: rgba(79, 70, 229, 0.08);
    --accent: #4f46e5;
    --accent-light: #6366f1;
    --accent-bg: rgba(79, 70, 229, 0.08);

    /* Status Colors - Slightly adjusted for light bg */
    --success: #16a34a;
    --success-light: rgba(22, 163, 74, 0.12);
    --success-dark: #15803d;
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.1);
    --danger-dark: #b91c1c;
    --warning: #d97706;
    --warning-light: rgba(217, 119, 6, 0.12);
    --running: #2563eb;
    --running-light: rgba(37, 99, 235, 0.1);

    /* Neutral Colors - Light Scale with better contrast */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Background Layers - With subtle shades */
    --bg-base: #f1f5f9;
    --bg-surface: #f8fafc;
    --bg-elevated: #ffffff;
    --bg-overlay: #e2e8f0;

    /* Card backgrounds for light mode */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;

    /* Table Header */
    --table-header-bg: #e2e8f0;
    --table-header-text: #1e293b;
    --table-header-hover: #cbd5e1;

    /* Card & Surface */
    --card-bg: #ffffff;
    --card-border: #cbd5e1;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    /* Text - Dark text on light bg */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #475569;

    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --dark-gradient: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-base);
    min-height: 100vh;
    color: var(--text-primary);
    padding: 0;
    padding-top: 0;
    position: relative;
    overflow-x: auto;
    max-width: 100vw;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Global Header with AMD ROCm Logo */
.global-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--card-border);
    padding: 10px 30px;
    position: sticky;
    top: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 21, 41, 0.08);
}

.global-header-content {
    max-width: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.amd-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
}

.logo-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
}

.dashboard-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.header-links {
    display: flex;
    gap: 20px;
}

/* Theme Toggle Button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
    position: relative;
    /* Explicit color so SVG icons (theme toggle moon/sun, header `?`) inherit
       a visible foreground in dark mode. Without this, currentColor resolves
       to the body default which can be near-transparent on dark backgrounds. */
    color: rgba(255, 255, 255, 0.85);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.theme-icon-dark,
.theme-icon-light {
    position: absolute;
    transition: opacity 0.2s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Explicit Lucide icon size + color inside the theme toggle so the moon/sun
   render visibly on both themes. */
.theme-icon-dark [data-lucide], .theme-icon-dark svg.lucide,
.theme-icon-light [data-lucide], .theme-icon-light svg.lucide {
    width: 18px;
    height: 18px;
    color: currentColor;
    stroke: currentColor;
}

/* Dark theme: show moon, hide sun */
:root .theme-icon-dark,
[data-theme="dark"] .theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg);
}

:root .theme-icon-light,
[data-theme="dark"] .theme-icon-light {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Light theme: show sun, hide moon */
[data-theme="light"] .theme-icon-dark {
    opacity: 0;
    transform: rotate(90deg);
}

[data-theme="light"] .theme-icon-light {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="light"] .theme-toggle {
    background: #ffffff;
    border-color: #cbd5e1;
    /* Explicit dark slate color so the `?`, moon/sun, and any other
       icons inside the button render visibly on light backgrounds.
       Without this they inherit the dark-mode default (white-ish) and
       disappear into the white background. */
    color: #475569;
}

[data-theme="light"] .theme-toggle:hover {
    background: #f8fafc;
    border-color: #6366f1;
    color: #4f46e5;
}

/* Force the SVG icons inside light-mode header buttons to use the dark
   slate color too. Some browsers don't propagate `color` to inline SVG
   strokes consistently — be explicit. */
[data-theme="light"] .theme-toggle [data-lucide],
[data-theme="light"] .theme-toggle svg.lucide,
[data-theme="light"] .theme-toggle .theme-icon-dark [data-lucide],
[data-theme="light"] .theme-toggle .theme-icon-light [data-lucide],
[data-theme="light"] .theme-toggle .theme-icon-dark svg.lucide,
[data-theme="light"] .theme-toggle .theme-icon-light svg.lucide {
    color: #475569;
    stroke: #475569;
}
[data-theme="light"] .theme-toggle:hover [data-lucide],
[data-theme="light"] .theme-toggle:hover svg.lucide,
[data-theme="light"] .theme-toggle:hover .theme-icon-dark [data-lucide],
[data-theme="light"] .theme-toggle:hover .theme-icon-light [data-lucide],
[data-theme="light"] .theme-toggle:hover .theme-icon-dark svg.lucide,
[data-theme="light"] .theme-toggle:hover .theme-icon-light svg.lucide {
    color: #4f46e5;
    stroke: #4f46e5;
}

/* Same defensive override for the GitHub/Docs link icons in light mode —
   `.header-link` already sets a dark color, but some Lucide upgrades
   leave the SVG stroke default. Make it explicit. */
[data-theme="light"] .header-link [data-lucide],
[data-theme="light"] .header-link svg.lucide {
    color: #475569;
    stroke: #475569;
}
[data-theme="light"] .header-link:hover [data-lucide],
[data-theme="light"] .header-link:hover svg.lucide {
    color: #4f46e5;
    stroke: #4f46e5;
}

.header-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Lucide icons inside header links — explicit size + inherit color so they
   render visibly on the dark header bar. */
.header-link [data-lucide], .header-link svg.lucide {
    width: 16px;
    height: 16px;
    color: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}

.header-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Light theme header adjustments */
[data-theme="light"] .global-header {
    background: #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
}

[data-theme="light"] .header-link {
    color: #475569;
    background: rgba(0, 0, 0, 0.03);
    border-color: #e2e8f0;
}

[data-theme="light"] .header-link:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

[data-theme="light"] .dashboard-title {
    color: #1e293b;
}

[data-theme="light"] .logo-divider {
    background: #e2e8f0;
}

.github-icon, .docs-icon {
    font-size: 1rem;
}

/* Container adjustment for header */
.container {
    padding: 20px;
}

/* Clean background - no animation */

.container {
    max-width: none;
    margin: 0 auto;
    background: transparent;
    padding: 20px 30px;
    overflow-x: visible;
    width: 100%;
    box-sizing: border-box;
}

/* Header */
/* Tab page header — single rule used by every .tab-content > header. Token
   spacing + lighter divider line make the rhythm consistent across tabs.
   Sticky below the tab-nav bar so the page title, dropdowns, and refresh
   button stay visible while scrolling through long tables. */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-3) 0 var(--space-4) 0;
    border-bottom: 2px solid var(--card-border, rgba(255,255,255,0.10));
    /* Sticky: global-header ~60px + 8px gap + tab-nav ~48px + 24px mask
       = ~140px. Responsive overrides adjust the `top` value. */
    position: sticky;
    top: 140px;
    z-index: 40;
    background: var(--bg-base);
}
/* Mask below the sticky page-title header — hides content scrolling up
   into the gap between the page title and the first content section.
   Starts BELOW the border-bottom so the divider line stays visible. */
.tab-content > header::after {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: -30px;
    right: -30px;
    height: 16px;
    background: var(--bg-base);
    pointer-events: none;
    z-index: 1;
}
/* Right-side actions group: dropdowns + last-updated + buttons line up
   horizontally and don't push the h1 around. */
header .header-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Single source of truth for heading typography. Component overrides MUST
   inherit from these to keep the visual hierarchy consistent across tabs. */
h1 {
    font-size: var(--text-2xl);
    line-height: 1.2;
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: -0.01em;
}
h2 {
    font-size: var(--text-xl);
    line-height: 1.3;
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: -0.005em;
}
h3 {
    font-size: var(--text-lg);
    line-height: 1.35;
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Icon color in headings — covers BOTH the source <i data-lucide="…">
   markup AND the <svg class="lucide"> that Lucide swaps in at runtime.
   Without the SVG selectors, icons would lose their color the moment Lucide
   upgrades them, which was the source of the "some headings have colored
   icons, others don't" inconsistency. */
h1 i, h2 i, h3 i,
h1 > svg.lucide, h2 > svg.lucide, h3 > svg.lucide,
h1 [data-lucide], h2 [data-lucide], h3 [data-lucide],
.dashboard-section h2 svg.lucide,
.dashboard-section h2 [data-lucide],
.summary-section h2 svg.lucide,
.summary-section h2 [data-lucide] {
    color: var(--primary);
    stroke: currentColor;
}

@media (max-width: 768px) {
    h1 { font-size: var(--text-xl); }
    h2 { font-size: var(--text-lg); }
}

.header-info {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 0.9rem;
}

.branch-info, .last-updated {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.last-fetched {
    opacity: 0.85;
    font-size: 0.9em;
}

.branch-info strong {
    color: #333;
}

.refresh-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 40px;
    box-sizing: border-box;
}

.refresh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.refresh-btn:active {
    transform: translateY(0);
}

.refresh-btn i {
    transition: transform 0.3s;
}

.refresh-btn:hover i {
    transform: rotate(180deg);
}

/* Multi-Arch view switch (segmented two-button control replaces the
   two-option <select> dropdown in the Multi-Arch tab header). */
.ma-view-switch {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 3px;
    background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.ma-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
    line-height: 1;
    white-space: nowrap;
}

.ma-view-btn i {
    width: 14px;
    height: 14px;
}

.ma-view-btn:hover {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.04);
}

.ma-view-btn.is-active {
    background: var(--primary, #6366f1);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ma-view-btn.is-active i {
    color: #fff;
}

.ma-view-btn:active {
    transform: translateY(1px);
}

@media (max-width: 600px) {
    .ma-view-btn span {
        display: none;
    }
    .ma-view-btn {
        padding: 6px 10px;
    }
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
    max-width: 100%;
}

#ci-nightly-tab .dashboard-grid {
    grid-template-columns: 1fr 1fr;
}

.dashboard-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid var(--card-border);
    max-width: 100%;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Subtle "tag" inside an h2 section title — used for things like
   "develop branch" qualifier without adding visual weight. */
.section-meta {
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.12);
    color: var(--text-secondary, #888);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.dashboard-section:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dashboard-section.full-width {
    grid-column: 1 / -1;
}

.dashboard-section h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-section h2 i {
    color: var(--primary);
}

/* Tables */
.table-container {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--card-border, #e2e8f0);
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-elevated, transparent);
}

.table-container.horizontal-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    transition: background-color 0.3s ease;
}

th {
    background: var(--table-header-bg);
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: left;
    font-weight: 600;
    color: var(--table-header-text);
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 2px solid var(--card-border, rgba(255,255,255,0.10));
}

td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}

tr:hover {
    background: var(--bg-elevated);
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-style: italic;
}

/* ---------- Status Badges (redesigned) ----------
   Goals:
    - Single, readable hue per status (no clashing gradients).
    - Status-colored LEFT BORDER for emphasis (matches AI insight cards).
    - Cleaner typography: status icon on top, duration on a single muted
      line below — no nested mini-circle for queue time (that lives in
      the tooltip now).
    - For failure badges that open the AI investigate modal on click,
      reveal a "Investigate ›" hint on hover (status-badge-hint). Makes
      the badge feel clickable instead of just a status pill. */
.status-badge {
    position: relative;
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    min-width: 70px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    overflow: hidden;
    /* Subtle depth: a 1px white inset on the top edge (suggests light from
       above) + a small dark drop shadow (suggests the pill is slightly
       raised). Tuned to read as "polished button" not "neon glow". */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.30);
}

/* Light mode: same shape, lighter ink. Pure-black drop shadow is too
   heavy on white surfaces; soften it and bump the highlight slightly so
   the pill still feels lifted on bright backgrounds. */
[data-theme="light"] .status-badge {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 1px 2px rgba(15, 23, 42, 0.10);
}

/* Hover: gentle lift — uses the same translateY already applied by
   `a.status-link:hover .status-badge`, but adds a slightly softer
   shadow so the elevation feels intentional. */
a.status-link:hover .status-badge {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] a.status-link:hover .status-badge {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 2px 4px rgba(15, 23, 42, 0.15);
}

/* Investigate affordance — failure badges that open the AI modal show
   a tiny sparkle icon (✦) in the top-right corner. Very subtle at rest,
   brightens on hover + the rainbow glow border appears. Signals "AI
   investigation available" without covering the status content. */
.status-badge-hint { display: none; }

.status-badge-actionable {
    cursor: pointer;
}

/* Sparkle icon — purple/indigo tint, always visible; brightens on hover */
.status-badge-actionable::before {
    content: '✦';
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.5rem;
    line-height: 1;
    color: rgba(167, 139, 250, 0.5);
    pointer-events: none;
    transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
    z-index: 2;
}
.status-badge-actionable:hover::before,
a.status-link:hover .status-badge-actionable::before {
    color: #c4b5fd;
    transform: scale(1.4);
    text-shadow: 0 0 6px rgba(167, 139, 250, 0.6);
}

/* Rainbow glow border on hover */
.status-badge-actionable::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid transparent;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    background: linear-gradient(135deg, #fbbf24, #f87171, #a78bfa, #22d3ee) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}
.status-badge-actionable:hover::after,
a.status-link:hover .status-badge-actionable::after {
    opacity: 1;
    animation: glow-rotate 2s linear infinite;
}

@keyframes glow-rotate {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Dark mode: rich mid-tone fills — same visual pattern as the light-mode
   pastels but shifted into the dark palette. Saturated enough to pop on
   dark backgrounds, not so bright they sear your eyes at 1 AM. White
   text for maximum readability. Subtle colored left border for type cue. */
/* ---- Dark-mode badge palette ----
   Vibrant saturated fills matching the download-button aesthetic (the
   green/pink/amber pills the user liked). White text for readability.
   Left-border accent in a lighter shade of the same hue. */
.status-badge.pass {
    /* Use the canonical --success token so this badge matches every
       other "success" affordance in the dashboard. Was #34d399 (emerald
       400) which read as a slightly different green than text/tile
       greens that already use --success (#22c55e green-500). */
    background: var(--success);
    color: #ffffff;
}

a.status-link {
    text-decoration: none;
    display: inline-block;
}
a.status-link:hover .status-badge {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.status-badge.fail {
    background: #f43f5e;
    color: #ffffff;
}

.status-badge.skipped {
    background: #8b6e47;
    color: #ffffff;
}

.status-badge.running {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    color: #fefce8;

}

.status-badge.in-progress {
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    color: #e0e7ff;

    animation: pulse 2s infinite;
}

.status-badge.cancelled {
    background: #f97316;
    color: #ffffff;
}

.status-badge.no-data {
    background: #374151;
    color: #9ca3af;

}

[data-theme="light"] .status-badge.no-data {
    background: #f3f4f6;
    color: #6b7280;

}

.status-badge.pending {
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    color: #e0e7ff;

    animation: pulse 2s infinite;
}

.status-badge.unknown {
    background: #4b5563;
    color: #e5e7eb;

}

/* Light mode: same hues as dark for instant recognizability — the
   green/red/brown palette comes from the canonical state design and
   should not change between themes. Only running/in-progress/pending
   keep their softer light-mode tints since they animate. */
[data-theme="light"] .status-badge.pass     { background: #34d399; color: #ffffff; }
[data-theme="light"] .status-badge.fail     { background: #f43f5e; color: #ffffff; }
[data-theme="light"] .status-badge.skipped  { background: #8b6e47; color: #ffffff; }
[data-theme="light"] .status-badge.running  { background: linear-gradient(135deg, #fcd34d 0%, #fde68a 100%); color: #713f12; }
[data-theme="light"] .status-badge.in-progress { background: linear-gradient(135deg, #a5b4fc 0%, #c7d2fe 100%); color: #3730a3; }
[data-theme="light"] .status-badge.cancelled { background: #f97316; color: #ffffff; }
[data-theme="light"] .status-badge.pending  { background: linear-gradient(135deg, #a5b4fc 0%, #c7d2fe 100%); color: #3730a3; }
[data-theme="light"] .status-badge.unknown  { background: #e5e7eb; color: #374151; }

/* ============================================================================
   DESIGN POLISH — class aliases so the four parallel vocabularies render
   identically. Pure CSS aliases mean we don't need to rename any class in
   200+ JS template strings.
   ============================================================================ */

/* GitHub-style status names → match our existing badges */
.status-badge.success      { background: #34d399; color: #ffffff; font-weight: 600; }
.status-badge.failure,
.status-badge.timed_out,
.status-badge.startup_failure { background: #f43f5e; color: #ffffff; font-weight: 600; }
.status-badge.queued       { background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%); color: #e0e7ff; animation: pulse 2s infinite; }
.status-badge.completed    { background: #34d399; color: #ffffff; }
.status-badge.draft        { background: #4b5563; color: var(--text-secondary); }

/* Light theme aliases — keep the same green/red so the palette is
   identical to the screenshot's reference design across both themes. */
[data-theme="light"] .status-badge.success      { background: #34d399; color: #ffffff; }
[data-theme="light"] .status-badge.failure,
[data-theme="light"] .status-badge.timed_out,
[data-theme="light"] .status-badge.startup_failure { background: #f43f5e; color: #ffffff; }
[data-theme="light"] .status-badge.queued       { background: linear-gradient(135deg, #a5b4fc 0%, #c7d2fe 100%); color: #3730a3; }
[data-theme="light"] .status-badge.completed    { background: #34d399; color: #ffffff; }
[data-theme="light"] .status-badge.draft        { background: #e5e7eb; color: #374151; }

/* Three parallel "state" vocabularies (health-*, cat-*, pri-tile-*) all share
   the same green/yellow/red semantics. Map them to a single canonical look so
   rows in different tabs look identical. */
.health-good, .cat-pass,
.pri-tile-good   { color: #10b981; }
.health-warn, .cat-run,
.pri-tile-warn   { color: #f59e0b; }
.health-bad,  .cat-fail,
.pri-tile-bad    { color: #ef4444; }
.cat-na          { color: var(--text-muted, #6b7280); }
/* Existing detail rules (border-left, background tints, etc.) live in the
   per-component sections — these aliases just guarantee the *foreground*
   color is one of three canonical tones across every tab. */

/* ============================================================================
   PROFESSIONAL POLISH — alignment, numerals, focus, hover
   These rules give the dashboard the small details that separate a polished
   product from a prototype.
   ============================================================================ */

/* Tabular numerals — a single CSS rule that makes every number in tables and
   stat cards line up at the decimal point. Modern browsers support this on
   almost every system font. */
.status-table, .pytorch-table, .ci-hud-table,
.pri-tile-value, .pri-tile-sub,
.report-card .card-value,
.summary-trend-summary,
.component-health-pct,
.component-health-meta,
.health-cell,
.cat-badge,
.gpu-health-table,
table.status-table td,
table.pytorch-table td,
.gpu-health-table td,
.pri-recent-meta {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* Right-align numeric columns by default in our standard tables. The
   `[data-numeric]` attribute (set by JS or by future markup) opts a single
   cell into right-alignment without us having to add classes everywhere.
   Existing centered status columns are unaffected. */
td[data-numeric], th[data-numeric],
.col-numeric, .col-num, .num-cell {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
/* Common columns that ARE numeric in our tables — coerce them */
.status-table td.col-failures, .status-table td.col-passed,
.status-table td.col-total, .status-table td.col-percent,
.status-table td.col-duration, .status-table td.col-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Focus-visible: real accessibility for keyboard users. Most modern browsers
   only show focus rings when navigating by keyboard, hiding them on mouse
   click — exactly the right behavior. We add a clean ring that doesn't fight
   the existing visual language. */
:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.tab-button:focus-visible,
.tab-group-button:focus-visible,
.tab-sub-button:focus-visible,
.refresh-btn:focus-visible,
.cat-toggle-link:focus-visible {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
    border-radius: var(--radius-md, 6px);
}

/* Keyboard-only focus for tile cover-link pattern (entire-card-clickable) —
   put the ring on the parent so it wraps the whole card visually. */
.pri-tile:has(.pri-tile-cover:focus-visible) {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
}

/* Hover lift for clearly-clickable rows: give a 1px translateY + subtle bg
   so users know it's interactive. Non-clickable rows don't move. */
.bump-row:hover, .pri-recent-row:hover, .summary-list-item:hover,
tr.repo-ci-row:hover, .triage-cluster-row:hover {
    background: rgba(99, 102, 241, 0.04);
}

/* ============================================================================
   STATE COMPONENTS — loading / empty / error
   One canonical look + style for every "no data here" / "loading" message
   so all tabs feel the same. Used by tables, lists, sections.
   ============================================================================ */
.loading-state, td.loading,
.pri-recent-empty {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--space-5) var(--space-4);
    font-style: italic;
}
/* Subtle pulsing dot to convey "still loading" without a heavy spinner */
.loading-state::before, td.loading::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: var(--space-2);
    border-radius: 50%;
    background: var(--primary-light);
    vertical-align: middle;
    animation: loadingDotPulse 1.2s ease-in-out infinite;
}
@keyframes loadingDotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
}
.empty-state {
    color: var(--text-muted, #6b7280);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--space-5) var(--space-4);
}
.empty-state-icon {
    display: block;
    margin: 0 auto var(--space-2);
    color: var(--text-muted, #6b7280);
    opacity: 0.7;
}
.empty-state-icon [data-lucide], .empty-state-icon svg.lucide {
    width: 28px; height: 28px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* PyTorch Tables */
/* Fixed column widths for consistent table layout */
.col-arch { width: 140px; min-width: 140px; }
.col-status { width: 130px; min-width: 130px; }
.col-tarball { width: 60px; min-width: 60px; text-align: center; }
.col-deb { width: 60px; min-width: 60px; text-align: center; }
.col-rpm { width: 60px; min-width: 60px; text-align: center; }
.col-wheel-pkg { width: 90px; min-width: 90px; }

/* Sticky columns for PyTorch scrollable tables */
.horizontal-scroll {
    position: relative;
}

/* The four `!important`s here were originally fighting other rules with
   higher specificity that have since been removed. We can drop them
   safely: this selector (`.pytorch-table .sticky-left`) is more specific
   than any of the surviving rules that touch `position`/`left` on table
   cells, so the cascade picks it without help. The `-webkit-sticky` line
   is also no longer needed (Safari has supported plain `sticky` since 13). */
.pytorch-table .sticky-left {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--card-bg);
}

.pytorch-table thead .sticky-left {
    z-index: 12;
    background: var(--table-header-bg);
}

.pytorch-table thead th {
    z-index: 10;
}

.pytorch-table .sticky-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to right, rgba(0,0,0,0.15), transparent);
    pointer-events: none;
}

[data-theme="light"] .pytorch-table .sticky-left {
    background: #fff;
}
[data-theme="light"] .pytorch-table thead .sticky-left {
    background: var(--table-header-bg);
}

.pytorch-table tbody tr:hover .sticky-left {
    background: var(--card-bg);
}
[data-theme="light"] .pytorch-table tbody tr:hover .sticky-left {
    background: #f1f5f9;
}

/* Python version group separator (thick) and Build/Test separator (thin) */
.pytorch-table th.py-group-start,
.pytorch-table td.py-group-start {
    border-left: 3px solid var(--card-border);
}

.pytorch-table th.bt-separator,
.pytorch-table td.bt-separator {
    border-left: 1px dashed var(--card-border);
}

.pytorch-table {
    font-size: 0.75rem;
}

.pytorch-table th {
    padding: 10px 6px;
    text-align: center;
    white-space: nowrap;
    font-size: 0.75rem;
}

.pytorch-table td {
    padding: 6px 4px;
    text-align: center;
}

.pytorch-table .status-badge {
    font-size: 0.65rem;
    padding: 4px 4px;
    min-width: 36px;
    min-height: 24px;
    border-radius: 6px;
}

/* Links */
a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.build-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
}

.build-link i {
    font-size: 0.75rem;
}

/* Legend */
.legend,
.legend-section {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-top: 20px;
}

.legend h3,
.legend-section h4 {
    margin-bottom: 15px;
    color: var(--text-primary) !important;
    font-size: 1rem;
    font-weight: 600;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary) !important;
}

/* Legend status badges - make them visible with borders */
.legend-item .status-badge {
    min-width: 32px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 2px solid;
}

.legend-item .status-badge.success {
    background: #34d399;
    color: #ffffff;
    border-color: #10b981;
}

.legend-item .status-badge.failure {
    background: #cf5656de;
    color: #ffffff;
    border-color: #bb4646;
}

.legend-item .status-badge.running {
    background: #f59e0b;
    color: #1f2937;
    border-color: #d97706;
}

.legend-item .status-badge.skipped {
    background: #6b7280;
    color: white;
    border-color: #4b5563;
}

.legend-items {
    border-color: var(--card-border) !important;
}

.legend-tip {
    border-top: 1px solid var(--card-border);
}

.time-badge {
    background: var(--bg-overlay);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* h1 sizing controlled by tokens — no per-breakpoint override needed */

    .header-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .ci-run-dropdown {
        min-width: 100%;
        max-width: 100%;
    }

    .version-dropdown {
        min-width: 200px;
        max-width: 100%;
    }
}

/* Intermediate breakpoint for mobile desktop mode (~980px viewport) */
@media (max-width: 1024px) {
    .container {
        padding: 12px 16px;
    }

    .global-header {
        padding: 8px 16px;
    }

    /* Header shrinks to ~48px tall — adjust the sticky tab-nav offset
       and keep the 8px breathing-room gap. */
    .tab-nav-top {
        top: 56px;
    }

    /* Page title header: header(48) + gap(8) + tab-nav(~44) + mask(24) */
    .tab-content > header {
        top: 124px;
    }

    .amd-logo {
        height: 32px;
    }

    .dashboard-title {
        font-size: 1rem;
    }

    .header-links {
        gap: 8px;
    }

    .header-link {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    .tab-navigation {
        gap: 3px;
        padding: 3px;
    }

    .tab-button {
        padding: 8px 12px;
        font-size: 12px;
    }

    .dashboard-section {
        padding: 16px;
    }

    .dashboard-section h2 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .dashboard-grid {
        gap: 16px;
        margin-bottom: 16px;
    }

    .col-arch { width: 120px; min-width: 120px; }
    .col-status { width: 100px; min-width: 100px; }
    .col-tarball { width: 55px; min-width: 55px; }
    .col-deb { width: 55px; min-width: 55px; }
    .col-rpm { width: 55px; min-width: 55px; }
    .col-wheel-pkg { width: 95px; min-width: 95px; }

    .status-badge {
        min-width: 60px;
        min-height: 30px;
        font-size: 0.7rem;
        padding: 5px 6px;
    }

    #releases-tab .status-badge {
        width: 75px;
        min-width: 75px;
        max-width: 75px;
        height: 40px;
        min-height: 40px;
    }

    #releases-tab .status-badge .time-info {
        font-size: 8px;
        max-width: 70px;
    }

    #releases-tab .pytorch-table .status-badge {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 0.7rem;
    }

    #ci-nightly-tab .status-badge,
    #ci-nightly-tab .status-badge.shard {
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .pytorch-table {
        font-size: 0.65rem;
    }

    .pytorch-table th,
    .pytorch-table td {
        padding: 4px 3px;
    }

    .pytorch-table .status-badge {
        font-size: 0.6rem;
        padding: 3px 3px;
        min-width: 32px;
        min-height: 22px;
    }

    .status-table th,
    .status-table td {
        padding: 8px 6px;
    }

    .status-table {
        font-size: 0.82rem;
    }

    .build-info-panel {
        padding: 16px !important;
    }

    .workflow-runs-grid {
        gap: 10px !important;
    }

    /* h1 sizing controlled by tokens */

    .shard-badge {
        min-width: 60px;
        max-width: 72px;
        font-size: 10px;
    }

    .download-btn {
        font-size: 0.7rem;
        padding: 5px 10px;
        min-width: 70px;
        min-height: 28px;
    }
}

@media (max-width: 768px) {
    body {
        padding: 4px;
        overflow-x: auto;
    }

    .container {
        padding: 8px;
        border-radius: 0;
        max-width: 100%;
        overflow-x: visible;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
        padding-bottom: 15px;
    }

    h1 { line-height: 1.3; word-wrap: break-word; }

    .header-info {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-info > span {
        width: 100%;
    }

    .version-selector {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .version-selector label {
        margin-right: 0 !important;
    }

    .version-dropdown,
    .ci-run-dropdown {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        font-size: 14px;
        padding: 12px;
    }

    .branch-info,
    .last-updated {
        font-size: 0.85rem;
    }

    .refresh-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    .dashboard-section {
        padding: 12px;
        border-radius: 10px;
    }

    .dashboard-section h2 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .legend {
        padding: 15px;
    }

    .legend-items {
        flex-direction: column;
        gap: 10px;
    }

    .legend-item {
        font-size: 0.85rem;
    }

    /* Global Header Mobile */
    .global-header {
        padding: 8px 12px;
    }

    .global-header-content {
        gap: 8px;
        padding: 0;
    }

    .amd-logo {
        height: 28px;
    }

    .logo-divider {
        height: 22px;
    }

    .logo-section {
        gap: 8px;
        min-width: 0;
        flex-shrink: 1;
    }

    .dashboard-title {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .header-links {
        gap: 4px;
        flex-shrink: 0;
    }

    .header-link {
        font-size: 0.75rem;
        padding: 5px 8px;
    }
    /* On narrow screens, collapse GitHub/Docs to icon-only so the header
       stays one line. The icon is still tappable + the link tooltip
       reveals the label. */
    .header-link .header-link-text {
        display: none;
    }
    .header-link [data-lucide],
    .header-link svg.lucide {
        margin: 0;
    }

    /* Tab Navigation Mobile (legacy two-row layout — overridden by the
       new flat .tab-nav-top rules below; kept for any non-flat nav). */
    .tab-navigation:not(.tab-nav-top):not(.tab-nav-sub) {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }

    .tab-navigation:not(.tab-nav-top):not(.tab-nav-sub) .tab-button {
        flex: 1 1 auto;
        text-align: center;
        padding: 8px 10px;
        font-size: 0.75rem;
        min-width: 0;
    }
    /* For the flat .tab-nav-top layout, tabs must NOT grow/shrink — they
       keep their natural width and the row scrolls horizontally if needed.
       Without this, .tab-button's `flex:1 1 auto` makes them wrap into a
       broken grid (every tab on its own row). */
    .tab-nav-top .tab-button {
        flex: 0 0 auto;
        text-align: left;
    }

    /* Tables Mobile */
    .status-table {
        font-size: 0.8rem;
    }

    .status-table th,
    .status-table td {
        padding: 8px 6px;
    }

    .col-arch { width: 100px; min-width: 100px; }
    .col-status { width: 90px; min-width: 90px; }
    .col-tarball { width: 50px; min-width: 50px; }
    .col-deb { width: 50px; min-width: 50px; }
    .col-rpm { width: 50px; min-width: 50px; }
    .col-wheel-pkg { width: 80px; min-width: 80px; }

    .pytorch-table {
        font-size: 0.6rem;
    }

    .pytorch-table th,
    .pytorch-table td {
        padding: 4px 2px;
    }

    .pytorch-table .status-badge {
        font-size: 0.55rem;
        padding: 3px 2px;
        min-width: 28px;
        min-height: 20px;
    }

    .status-badge {
        font-size: 0.65rem;
        padding: 5px 6px;
        min-width: 55px;
        min-height: 28px;
    }

    /* Download buttons mobile */
    .download-btn {
        font-size: 0.65rem;
        padding: 4px 8px;
        min-width: 60px;
        min-height: 26px;
    }

    .download-btn .dl-icon {
        display: none;
    }

    .download-btn-group {
        gap: 3px;
    }

    /* Build info panel mobile */
    .workflow-runs-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    body {
        padding: 4px;
    }

    .container {
        padding: 8px;
        border-radius: 8px;
    }

    .global-header {
        padding: 6px 8px;
    }

    .logo-divider {
        display: none;
    }

    .header-link span:not(.github-icon):not(.docs-icon) {
        display: none;
    }

    /* h1 sizing controlled by tokens (very small viewport falls back automatically) */

    .dashboard-section {
        padding: var(--space-2);
        border-radius: var(--radius-lg);
    }

    .dashboard-section h2 {
        font-size: 0.9rem;
    }

    .col-arch { width: 80px; min-width: 80px; }
    .col-status { width: 70px; min-width: 70px; }
    .col-tarball,
    .col-deb,
    .col-rpm,
    .col-wheel-pkg { width: 45px; min-width: 45px; }

    .status-table th,
    .status-table td {
        padding: 6px 3px;
        font-size: 0.7rem;
    }

    .pytorch-table {
        font-size: 0.5rem;
    }

    .pytorch-table th,
    .pytorch-table td {
        padding: 2px 1px;
    }

    .status-badge {
        font-size: 0.55rem;
        padding: 3px 3px;
        min-width: 40px;
        min-height: 22px;
    }

    .download-btn {
        font-size: 0.6rem;
        padding: 3px 6px;
        min-width: 50px;
        min-height: 22px;
    }

    .tab-button {
        font-size: 0.65rem;
        padding: 6px 8px;
    }

    .legend-item {
        font-size: 0.75rem;
    }

    .build-info-panel {
        padding: 10px !important;
    }
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(102, 126, 234, 0.3);
    border-radius: 50%;
    border-top-color: #6366f1;
    animation: spin 1s ease-in-out infinite;
    vertical-align: middle;
}

.loading-spinner.large {
    width: 32px;
    height: 32px;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Table row hover -- subtle highlight only, no shift or pointer */
.status-table tbody tr {
    transition: background-color 0.2s ease;
}

.status-table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.04);
}

.pytorch-table tbody tr {
    transition: background-color 0.2s ease;
}

.pytorch-table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.05);
}

/* Timestamp styling */
td.timestamp {
    color: #6b7280;
    font-size: 0.9em;
    font-style: italic;
}

/* Architecture cell emphasis */
td strong {
    color: #4b5563;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* GPU Architecture Family Grouping - visual separation via border gap */
/* Visible separator between GPU families */
.arch-row.family-first td {
    border-top: 2px solid var(--card-border);
}

/* Thicker family separator in PyTorch/JAX tables (denser rows need stronger visual break) */
.pytorch-table .arch-row.family-first td {
    border-top: 3px solid var(--card-border);
}

/* Remove the separator above the very first family */
tbody tr.arch-row.family-first:first-child td {
    border-top: none;
}

.arch-row td:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.pytorch-table td:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* Better loading state */
td.loading {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 30px;
    background: var(--card-bg);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--card-bg);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Two-group flat nav. Layout (LTR):
     [ TheRock-only tabs ]                          [ Repo: ▼ | per-repo tabs ]
     └── left group ──────┘                         └── unified right group ──┘
   On wide viewports they sit on one row. On narrow viewports the right
   group wraps below the left group, and each group scrolls horizontally
   on its own row instead of items wrapping into a messy grid. */
.tab-nav-top {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 5px;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    align-items: center;

    /* Stick the primary nav row just below the global header so users can
       always switch tabs without scrolling back to the top. The global
       header is sticky at top:0 with z-index:1000 (~60px tall) — we sit
       at top:68px so there's an 8px breathing-room gap between the two
       sticky bars when the page is scrolled. Lower z-index (50) so any
       header dropdowns/popovers can layer above. The card-bg fill
       (above) keeps content from bleeding through when stuck. */
    position: sticky;
    top: 68px;
    z-index: 50;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* ABOVE the tab bar: fills the 8px gap between the global-header bottom
   edge and the tab-nav top edge. Without this, content scrolling up
   is briefly visible in that gap before disappearing behind the header. */
.tab-nav-top::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: -20px;
    right: -20px;
    height: 10px;
    background: var(--bg-base);
    pointer-events: none;
    z-index: 1;
}
/* BELOW the tab bar: fills the 24px margin between the bar and page
   content. Content scrolling up disappears behind this mask, preserving
   the same visible gap that exists at rest. The drop shadow sits here
   so the elevation cue starts at the bottom of the gap. */
.tab-nav-top::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 24px;
    background: var(--bg-base);
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
/* Left group: TheRock-only tabs. Takes its natural width on wide screens
   so the right group can sit beside it; takes full row + horizontal
   scroll on narrow screens (handled in media queries). */
.tab-nav-left-group {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 1;
    min-width: 0;
}
/* Right group: dropdown + per-repo tabs together, with a strong indigo-tinted
   container that visually unifies them. Auto-pushes to the right via flex. */
.tab-nav-right-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(129, 140, 248, 0.32);
    border-radius: 9px;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.04);
    flex-shrink: 0;
}
/* Per-repo tab buttons inside the unified group don't need their own
   underline accent — the group container's border does the unifying. */

/* Repo dropdown — a single unified pill that visually reads as one element
   (label + value + chevron all integrated). Sits at the LEFT edge of the
   right group, immediately adjacent to the per-repo tabs it controls.

   Design: dark filled pill with subtle indigo border. The "REPO" label is
   on the left in muted indigo, the value is bold white in the center, and
   the chevron is a clean SVG on the right. Hover lifts + brightens. */
.repo-selector {
    display: inline-flex;
    align-items: stretch;
    margin: 0 6px 0 2px;
    background: var(--bg-elevated, rgba(0, 0, 0, 0.35));
    border: 1px solid rgba(129, 140, 248, 0.45);
    border-radius: 8px;
    font-size: 0.78rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.repo-selector:hover {
    border-color: rgba(129, 140, 248, 0.7);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.repo-selector:focus-within {
    border-color: var(--primary-light, #818cf8);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Left side — "REPO" label + git icon, tinted indigo to anchor the brand.
   Slightly larger now so it visually matches the value text + tab labels. */
.repo-selector-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px 0 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(99, 102, 241, 0.10));
    color: var(--primary-light, #818cf8);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid rgba(129, 140, 248, 0.25);
}
.repo-selector-label [data-lucide], .repo-selector-label svg.lucide {
    width: 13px;
    height: 13px;
    color: var(--primary-light, #818cf8);
    stroke: currentColor;
}
/* Right side — the actual <select>, styled as a flush continuation of the
   pill. Matches the per-repo tab button text exactly (14px / 600 weight)
   so the dropdown value visually reads as part of the same row of tabs. */
.repo-selector select {
    background: transparent;
    color: var(--text-primary, #e4e4e7);
    border: none;
    padding: 9px 30px 9px 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    min-width: 140px;
    outline: none;
}
.repo-selector select:focus { outline: none; }
.repo-selector select option {
    background: var(--bg-surface, #18181b);
    color: var(--text-primary, #e4e4e7);
    font-weight: 600;
}
/* When a sub-repo is selected (not TheRock), give the pill a brighter
   indigo border + soft glow so it stands out as "you've narrowed scope". */
.repo-selector.repo-selector-active {
    border-color: rgba(129, 140, 248, 0.7);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12),
                0 2px 8px rgba(99, 102, 241, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tab-nav-sub { display: none !important; }

/* ----- Responsive nav: tablet (right group wraps below left) ----- */
@media (max-width: 1200px) {
    .tab-nav-right-group {
        margin-left: 0;
        margin-top: 4px;
        width: 100%;
        order: 2;
    }
    /* Both groups become independently horizontally scrollable when their
       contents don't fit. Each row shows a thin scrollbar at the bottom
       instead of wrapping items into a grid. */
    .tab-nav-left-group,
    .tab-nav-right-group {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .tab-nav-left-group > .tab-button,
    .tab-nav-right-group > .tab-button {
        flex-shrink: 0;
    }
    /* Make the dropdown stick to the left edge of the right group when it
       wraps to its own row, instead of being pushed to the right. */
    .repo-selector { margin-right: auto; }
}

/* ----- Responsive nav: mobile (compact spacing + scroll affordances) ----- */
@media (max-width: 768px) {
    .tab-nav-top {
        padding: 4px;
        gap: 4px;
        border-radius: 10px;
        /* Header shrinks (~44px tall) at this breakpoint, so adjust the
           sticky offset to keep the 8px breathing-room gap below it. */
        top: 52px;
    }

    /* Page title header: header(44) + gap(8) + tab-nav(~40) + mask(24) */
    .tab-content > header {
        top: 108px;
    }
    .tab-nav-left-group::-webkit-scrollbar,
    .tab-nav-right-group::-webkit-scrollbar { height: 4px; }
    .tab-nav-left-group::-webkit-scrollbar-thumb,
    .tab-nav-right-group::-webkit-scrollbar-thumb {
        background: rgba(129, 140, 248, 0.25);
        border-radius: 2px;
    }
    /* Right group: keep its indigo container but tighten the padding so it
       doesn't dominate the screen on small viewports. */
    .tab-nav-right-group {
        padding: 3px;
        gap: 2px;
        border-radius: 8px;
    }
    /* Tab buttons get tighter padding + shorter labels */
    .tab-group-button {
        padding: 7px 11px;
        font-size: 13px;
    }
    .tab-group-button .tab-label-text {
        white-space: nowrap;
    }
    /* Dropdown: make sure it doesn't shrink awkwardly */
    .repo-selector {
        margin: 0 4px 0 0;
        font-size: 0.74rem;
    }
    .repo-selector select {
        min-width: 110px;
        font-size: 13px;
        padding: 7px 24px 7px 10px;
    }
    .repo-selector-label {
        padding: 0 9px;
        font-size: 0.66rem;
    }
}

/* ----- Tiny viewports: hide labels on TheRock-only tabs, keep icons ----- */
@media (max-width: 480px) {
    .tab-nav-left-group .tab-group-button {
        padding: 8px 9px;
    }
    .tab-nav-left-group .tab-group-button .tab-label-text {
        display: none;
    }
    .tab-nav-left-group .tab-group-button [data-lucide],
    .tab-nav-left-group .tab-group-button svg.lucide {
        margin: 0;
    }
}
/* ============================================================================
   TAB NAVIGATION (Option B — distinctive SaaS dashboard look)
   - Top tab inactive: faint pill background, clearer hover
   - Top tab active: vibrant indigo gradient + soft glow shadow
   - Sub tab inactive: muted text, hover lifts subtle background
   - Sub tab active: solid indigo pill, white text, icon also white
   - All tabs: smooth transitions, clear focus rings for keyboard a11y
   ============================================================================ */
.tab-group-button {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary, #a1a1aa);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.tab-group-button [data-lucide], .tab-group-button svg.lucide {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.tab-group-button:hover:not(.active) {
    background: rgba(129, 140, 248, 0.08);
    color: var(--text-primary, #e4e4e7);
    border-color: rgba(129, 140, 248, 0.18);
}
.tab-group-button .tab-group-count {
    display: inline-block;
    margin-left: 2px;
    background: rgba(129, 140, 248, 0.18);
    color: var(--primary-light, #818cf8);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
    transition: background 0.15s ease, color 0.15s ease;
}
.tab-group-button.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #818cf8 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45),
                0 1px 3px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}
.tab-group-button.active .tab-group-count {
    background: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.98);
}

/* Sub-tab nav row */
.tab-sub-button {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #a1a1aa);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.tab-sub-button [data-lucide], .tab-sub-button svg.lucide {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.tab-sub-button:hover:not(.active) {
    background: rgba(129, 140, 248, 0.06);
    color: var(--text-primary, #e4e4e7);
}
.tab-sub-button.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.tab-sub-button.active [data-lucide], .tab-sub-button.active svg.lucide {
    color: white;
}
@media (max-width: 768px) {
    .tab-group-button, .tab-sub-button {
        flex-shrink: 0;
    }
}


/* Component health bars: shows pass rate per ROCm component category in the
   Overview tab. Each row = one component. Width of the green bar = pass rate.
   Inner row = name (120px) + bar (flex) + pct (52px) — raw counts moved to
   tooltip so each card stays comfortably narrow. */
.component-health-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.component-health-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease, border-color 0.1s ease;
    min-width: 0;        /* allow grid item to shrink instead of overflowing */
    overflow: hidden;    /* clip anything that would still overflow */
}
.component-health-row:hover {
    transform: translateY(-1px);
    border-color: var(--primary-light, #818cf8);
}
.component-health-name {
    flex: 0 0 120px;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary, #ddd);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.component-health-bar-track {
    flex: 1 1 auto;
    height: 8px;
    background: rgba(239,68,68,0.12);
    border-radius: 4px;
    overflow: hidden;
    min-width: 50px;
}
.component-health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    transition: width 0.3s ease;
}
.component-health-bar-fill.warn {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.component-health-bar-fill.bad {
    background: linear-gradient(90deg, #ef4444, #f87171);
}
.component-health-pct {
    flex: 0 0 52px;
    text-align: right;
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, monospace;
}
@media (max-width: 600px) {
    .component-health-bars { grid-template-columns: 1fr; }
}

/* Summary tab trend mini-charts: 3-column grid with compact charts so the
   Summary tab gets visual context without dominating the page. */
.summary-trends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.summary-trend-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.summary-trend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.summary-trend-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #ddd);
}
.summary-trend-summary {
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
    font-family: ui-monospace, monospace;
}
/* Chart.js canonical responsive pattern: canvas wrapped in a position:
   relative parent with explicit dimensions. Chart.js handles all sizing
   via responsive:true. We keep the canvas itself unstyled so Chart.js
   has full control. */
.summary-trend-canvas-wrap {
    position: relative;
    height: 110px;
    width: 100%;
}
.summary-trend-canvas-wrap canvas {
    display: block;
}
.failures-trend-wrap {
    position: relative;
    height: 240px;
    width: 100%;
}
.failures-trend-wrap canvas {
    display: block;
}

/* Failures tab — 2-line hotspot card. Line 1 reads (severity, count,
   pattern) at a glance; line 2 has all the secondary metadata (workflow,
   archs, repo, last-seen, action). Avoids the cramped 1-line flex-row
   that mixed signal with noise. */
.failures-hotspot-row {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.failures-hotspot-row + .failures-hotspot-row { margin-top: 2px; }
.failures-hotspot-row:hover {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.22);
}
/* Clickable hotspot rows (those with a sample URL we can extract runId/jobId
   from) get a stronger hover affordance + the small AI ↗ badge. */
.failures-hotspot-row[data-runid]:hover {
    background: rgba(129, 140, 248, 0.10);
    border-color: rgba(129, 140, 248, 0.4);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.15);
}
.failures-hotspot-ai {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(34,211,238,0.12));
    color: var(--primary-light, #818cf8);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    border: 1px solid rgba(129, 140, 248, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.failures-hotspot-row[data-runid]:hover .failures-hotspot-ai {
    background: linear-gradient(135deg, rgba(99,102,241,0.32), rgba(34,211,238,0.22));
    border-color: rgba(129, 140, 248, 0.5);
}

/* Rich AI insight card — replaces the old single-paragraph narrative on the
   Failures > AI Insights tab. Shows risk + headline + hypothesis + evidence
   + suggested actions in a structured format that's actually useful for
   triage. */
.ai-insight-card {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(34,211,238,0.03));
    border: 1px solid rgba(129, 140, 248, 0.25);
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 8px;
    padding: 14px 18px;
}
.ai-insight-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ai-insight-tag {
    background: rgba(129, 140, 248, 0.22);
    color: var(--primary-light, #818cf8);
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.ai-insight-risk {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ai-insight-headline {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    line-height: 1.45;
    margin-bottom: 8px;
}
.ai-insight-hypothesis {
    font-size: 0.88rem;
    color: var(--text-secondary, #a1a1aa);
    line-height: 1.6;
    margin-bottom: 14px;
    font-style: italic;
}
.ai-insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 10px;
}
@media (max-width: 768px) { .ai-insight-grid { grid-template-columns: 1fr; } }
.ai-insight-section { min-width: 0; }
.ai-insight-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary, #e4e4e7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.ai-insight-section-title [data-lucide],
.ai-insight-section-title svg.lucide {
    width: 14px;
    height: 14px;
    color: var(--primary-light, #818cf8);
}
.ai-insight-list {
    margin: 0;
    padding-left: 22px;
    color: var(--text-primary, #ddd);
    font-size: 0.84rem;
    line-height: 1.55;
}
.ai-insight-list li { margin-bottom: 4px; }
.ai-insight-list li::marker {
    color: var(--primary-light, #818cf8);
}
.ai-insight-source {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(129, 140, 248, 0.15);
    font-size: 0.7rem;
    color: var(--text-secondary, #a1a1aa);
}
.failures-hotspot-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.failures-hotspot-count {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: center;
}
.failures-hotspot-pattern {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.failures-hotspot-line2 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--text-secondary, #888);
    padding-left: 4px;
}
.failures-hotspot-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.failures-hotspot-meta-spacer { flex: 1; }
.failures-hotspot-investigate {
    color: var(--primary-light, #818cf8);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.74rem;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.failures-hotspot-investigate:hover {
    background: rgba(129, 140, 248, 0.10);
    border-color: rgba(129, 140, 248, 0.4);
}

/* Failure context modal — opens when user clicks a FAIL badge in Release
   Nightly tables. Shows job context, similar past failures, related issues,
   and one-click "Create issue on GitHub" with a prefilled draft. */
.failure-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    overflow-y: auto;
}
.failure-modal-overlay[hidden] { display: none; }
.failure-modal {
    position: relative;
    background: var(--bg-surface, #18181b);
    border: 1px solid var(--card-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 24px 28px;
    width: 100%;
    max-width: 880px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    color: var(--text-primary);
}
.failure-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.1s ease, color 0.1s ease;
}
.failure-modal-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
.failure-modal h2 {
    margin: 0 0 14px 0;
    font-size: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.failure-modal h3 {
    margin: 18px 0 8px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.06));
    padding-bottom: 6px;
}
.failure-modal-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 0.82rem;
    margin-bottom: 14px;
}
.failure-modal-meta dt {
    color: var(--text-secondary);
    font-weight: 600;
}
.failure-modal-meta dd {
    margin: 0;
    color: var(--text-primary);
    font-family: ui-monospace, monospace;
    word-break: break-all;
}
.failure-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--card-border, rgba(255,255,255,0.06));
}
.failure-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s ease, transform 0.1s ease;
}
.failure-modal-btn:hover {
    background: var(--primary-dark, #4f46e5);
    transform: translateY(-1px);
}
.failure-modal-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}
.failure-modal-btn-secondary:hover {
    background: rgba(255,255,255,0.04);
}
.failure-modal-issue {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    margin-bottom: 6px;
    font-size: 0.84rem;
}
.failure-modal-issue:hover {
    background: rgba(99,102,241,0.05);
    border-color: rgba(99,102,241,0.3);
}
.failure-modal-issue-state {
    flex: 0 0 50px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}
.failure-modal-issue-state.open  { background: rgba(34,197,94,0.15); color: #22c55e; }
.failure-modal-issue-state.closed { background: rgba(168,85,247,0.15); color: #a855f7; }
.failure-modal-issue-body { flex: 1; min-width: 0; }
.failure-modal-issue-body a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}
.failure-modal-issue-body a:hover { color: var(--primary-light); }
.failure-modal-issue-meta {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 2px;
}
.failure-modal-empty {
    padding: 14px;
    background: rgba(99,102,241,0.04);
    border: 1px dashed var(--card-border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}
.failure-modal-narrative {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(34,211,238,0.03));
    border-left: 3px solid var(--primary-light, #818cf8);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.failure-modal-narrative-tag {
    display: inline-block;
    background: rgba(129,140,248,0.18);
    color: var(--primary-light, #818cf8);
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: 8px;
}
/* ============================================================================
   Release Notes — "How PRs are categorized" reference card.
   Collapsible <details> block. When expanded, shows each rule as a numbered
   card with example mappings (input → category badge) so users see at a
   glance how a PR ends up in a category.
   ============================================================================ */
.rn-cat-rules {
    background: var(--card-bg, rgba(0, 0, 0, 0.18));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    margin-top: 18px;
    overflow: hidden;
}
.rn-cat-rules-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    list-style: none;
    transition: background 0.15s ease;
}
.rn-cat-rules-summary::-webkit-details-marker { display: none; }
.rn-cat-rules-summary:hover {
    background: rgba(255, 255, 255, 0.025);
}
.rn-cat-rules-summary i[data-lucide],
.rn-cat-rules-summary svg.lucide {
    width: 16px;
    height: 16px;
    color: var(--primary-light, #818cf8);
    flex-shrink: 0;
}
.rn-cat-rules-title {
    font-size: 0.95rem;
    flex-shrink: 0;
}
.rn-cat-rules-meta {
    flex: 1;
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.78rem;
    font-weight: 400;
}
.rn-cat-rules-meta strong {
    color: var(--primary-light, #818cf8);
    font-weight: 700;
}
.rn-cat-rules-chevron {
    transition: transform 0.2s ease;
    color: var(--text-secondary, #a1a1aa) !important;
}
.rn-cat-rules[open] .rn-cat-rules-chevron {
    transform: rotate(180deg);
}
.rn-cat-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.06));
}
.rn-cat-rule {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 8px;
    padding: 10px 12px;
}
.rn-cat-rule-fallback {
    border-left-color: var(--text-muted, #94a3b8);
    opacity: 0.85;
}
.rn-cat-rule-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.rn-cat-rule-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(99, 102, 241, 0.18);
    color: var(--primary-light, #818cf8);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rn-cat-rule-fallback .rn-cat-rule-num {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-secondary, #94a3b8);
}
.rn-cat-rule-head i[data-lucide],
.rn-cat-rule-head svg.lucide {
    width: 14px;
    height: 14px;
    color: var(--text-secondary, #a1a1aa);
    flex-shrink: 0;
}
.rn-cat-rule-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #e4e4e7);
}
.rn-cat-rule-examples {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.78rem;
}
.rn-cat-ex {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rn-cat-ex code {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--text-primary, #e4e4e7);
}
.rn-cat-arrow {
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    font-size: 0.85rem;
}
/* Category result badges. Colors loosely mirror the actual category
   pills used in the release-notes output table. */
.rn-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}
.rn-cat-badge.cat-features  { background: rgba(34, 197, 94, 0.16);  color: #22c55e; border-color: rgba(34, 197, 94, 0.35); }
.rn-cat-badge.cat-fixes     { background: rgba(239, 68, 68, 0.16);  color: #ef4444; border-color: rgba(239, 68, 68, 0.35); }
.rn-cat-badge.cat-breaking  { background: rgba(220, 38, 38, 0.20);  color: #f87171; border-color: rgba(220, 38, 38, 0.45); }
.rn-cat-badge.cat-ci        { background: rgba(99, 102, 241, 0.16); color: #818cf8; border-color: rgba(99, 102, 241, 0.35); }
.rn-cat-badge.cat-docs      { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); }
.rn-cat-badge.cat-deps      { background: rgba(245, 158, 11, 0.16); color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); }
.rn-cat-badge.cat-refactor  { background: rgba(168, 85, 247, 0.16); color: #c084fc; border-color: rgba(168, 85, 247, 0.35); }
.rn-cat-badge.cat-internal  { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); }
.rn-cat-badge.cat-other     { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.30); }

/* Per-repo tab page title — two-part layout:
     [ REPO chip ]   [ icon ] Tab Name
   The chip visually echoes the nav-bar Repo dropdown so users see the
   connection between dropdown choice and page content. The chip stays
   visible for all repos (TheRock included) for full consistency. */
h1.page-title-with-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.page-title-repo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 9px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 14px;
    color: var(--primary-light, #818cf8);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    cursor: help;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    /* Keep the chip vertically centered against the larger h1 text */
    align-self: center;
    flex-shrink: 0;
}
.page-title-repo-chip i,
.page-title-repo-chip svg.lucide {
    width: 13px;
    height: 13px;
    color: inherit;
}
/* Active state — when a sub-repo (not the default TheRock) is selected,
   the chip glows brighter to signal "you've narrowed scope". Mirrors the
   .repo-selector-active treatment in the nav-bar dropdown for visual
   continuity. */
.page-title-repo-chip-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.30), rgba(99, 102, 241, 0.14));
    border-color: rgba(129, 140, 248, 0.65);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10),
                0 1px 4px rgba(99, 102, 241, 0.18);
}
.page-title-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-primary, #e4e4e7);
}
.page-title-icon i,
.page-title-icon svg.lucide {
    width: 1em;
    height: 1em;
}
.page-title-text {
    display: inline-block;
    line-height: 1.2;
}
@media (max-width: 600px) {
    h1.page-title-with-chip {
        gap: 8px;
    }
    .page-title-repo-chip {
        font-size: 0.65rem;
        padding: 3px 9px;
    }
}

/* ============================================================================
   GPU Health Matrix v2 — combined "Top breakages" cards + smart matrix.
   ============================================================================ */

/* Top breakages card stack — surfaces the worst (arch × pipeline) combos
   above the matrix so the user sees what to fix first without scanning. */
.gpu-health-breakages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 16px 0;
}
.gpu-health-breakages-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.gpu-health-breakages-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary, #e4e4e7);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gpu-health-breakages-header h3 i,
.gpu-health-breakages-header h3 svg.lucide {
    width: 16px;
    height: 16px;
    color: #ef4444;
}
.gpu-health-breakages-meta {
    font-size: 0.78rem;
    color: var(--text-secondary, #a1a1aa);
}
.gpu-health-breakages-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-radius: 8px;
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.85rem;
}
.gpu-health-breakages-empty i,
.gpu-health-breakages-empty svg.lucide {
    width: 18px; height: 18px;
}

.gpu-health-breakage {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--text-muted, #94a3b8);
    border-radius: 8px;
    transition: background 0.15s ease;
}
.gpu-health-breakage:hover { background: rgba(255, 255, 255, 0.04); }
.gpu-health-breakage.sev-critical { }
.gpu-health-breakage.sev-major    { }
.gpu-health-breakage.sev-warn     { }
.breakage-icon {
    flex: 0 0 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1px;
}
.breakage-icon i, .breakage-icon svg.lucide { width: 18px; height: 18px; }
.gpu-health-breakage.sev-critical .breakage-icon i,
.gpu-health-breakage.sev-critical .breakage-icon svg.lucide { color: #dc2626; }
.gpu-health-breakage.sev-major .breakage-icon i,
.gpu-health-breakage.sev-major .breakage-icon svg.lucide { color: #f97316; }
.gpu-health-breakage.sev-warn .breakage-icon i,
.gpu-health-breakage.sev-warn .breakage-icon svg.lucide { color: #f59e0b; }
.breakage-body { flex: 1 1 auto; min-width: 0; }
.breakage-title {
    font-size: 1rem;
    color: var(--text-primary, #e4e4e7);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.breakage-title strong {
    font-family: ui-monospace, monospace;
    font-weight: 700;
}
.breakage-sep {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
}
.breakage-legacy {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-secondary, #94a3b8);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.breakage-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-secondary, #a1a1aa);
    flex-wrap: wrap;
}
.breakage-passrate {
    font-weight: 700;
    color: var(--text-primary, #e4e4e7);
    font-family: ui-monospace, monospace;
}
.gpu-health-breakage.sev-critical .breakage-passrate { color: #f87171; }
.gpu-health-breakage.sev-major    .breakage-passrate { color: #fb923c; }
.gpu-health-breakage.sev-warn     .breakage-passrate { color: #fbbf24; }
.breakage-counts { font-family: ui-monospace, monospace; }
.breakage-trend .arrow-up   { color: #22c55e; }
.breakage-trend .arrow-down { color: #ef4444; }
.breakage-trend .arrow-flat { color: var(--text-muted, #94a3b8); }
.breakage-secondary {
    margin-top: 5px;
    font-size: 0.76rem;
    color: var(--text-muted, #94a3b8);
}
.breakage-secondary code {
    background: rgba(255, 255, 255, 0.03);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}
.breakage-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.breakage-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    border: 1px solid transparent;
}
.breakage-btn i, .breakage-btn svg.lucide { width: 13px; height: 13px; }
.breakage-btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
.breakage-btn-primary:hover { transform: translateY(-1px); }
.breakage-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #e4e4e7);
    border-color: rgba(255, 255, 255, 0.08);
}
.breakage-btn-secondary:hover {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(129, 140, 248, 0.35);
}

/* Updated matrix cell — pass% + count + trend arrow inside one badge */
.health-cell-link {
    text-decoration: none;
    display: inline-block;
}
.health-cell-link:hover .health-cell {
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.health-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: ui-monospace, monospace;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.health-cell-rate { font-weight: 700; }
.health-cell-arrow { font-size: 0.95em; line-height: 1; }
.health-cell-arrow.arrow-up   { color: #22c55e; }
.health-cell-arrow.arrow-down { color: #ef4444; }
.health-cell-arrow.arrow-flat { opacity: 0.45; }
.health-cell-count {
    font-size: 0.7em;
    opacity: 0.75;
    font-weight: 500;
    margin-left: 1px;
}
.health-cell.health-good { background: rgba(34, 197, 94, 0.18); color: #22c55e; }
.health-cell.health-warn { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.health-cell.health-bad  { background: rgba(239, 68, 68, 0.20); color: #f87171; }
.health-cell.health-na   { background: rgba(148, 163, 184, 0.10); color: var(--text-muted, #94a3b8); padding: 3px 10px; }

/* Legacy arch row + chip styling — visually de-emphasized so legacy data
   doesn't compete with active arches when the user toggles "Show legacy". */
.arch-legacy-row { opacity: 0.65; }
.arch-legacy-row:hover { opacity: 1; }
.arch-legacy-chip {
    display: inline-block;
    margin-left: 6px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-muted, #94a3b8);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* "Show legacy" toggle below the matrix */
.gpu-health-legacy-toggle {
    margin-top: 10px;
    padding: 8px;
    text-align: center;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.06));
}

/* Sub-repo "not applicable" notice — shown on Bump PRs when a sub-repo
   is selected (sub-repos don't run bump_submodules.yml). */
.subrepo-na-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin: 12px 0;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-left: 3px solid #ef4444;
    border-radius: 8px;
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.85rem;
    line-height: 1.5;
}
.subrepo-na-notice i,
.subrepo-na-notice svg.lucide {
    width: 18px;
    height: 18px;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 1px;
}
.subrepo-na-notice strong {
    color: var(--text-primary, #e4e4e7);
}
.subrepo-na-notice code {
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: ui-monospace, monospace;
    color: var(--primary-light, #818cf8);
}
.subrepo-na-notice p {
    margin: 4px 0 0 0;
    font-size: 0.82rem;
}

/* Persistent paste-hint banner — appears below the "Copy & open #N" button
   after click. Stays visible until dismissed since the user's attention
   is now in the new GitHub tab; we want them to see this when they
   come back to switch tabs. */
.failure-action-paste-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 10px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-left: 3px solid #10b981;
    border-radius: 8px;
    color: var(--text-primary, #e4e4e7);
    font-size: 0.85rem;
    line-height: 1.55;
    animation: paste-hint-fadein 0.25s ease-out;
}
.failure-action-paste-hint i,
.failure-action-paste-hint svg.lucide {
    width: 18px; height: 18px;
    color: #10b981;
    flex-shrink: 0;
    margin-top: 1px;
}
.failure-action-paste-hint .paste-hint-body {
    flex: 1 1 auto;
}
.failure-action-paste-hint strong {
    display: block;
    color: var(--text-primary, #e4e4e7);
    margin-bottom: 2px;
}
.failure-action-paste-hint span {
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.82rem;
}
.failure-action-paste-hint.paste-hint-fail {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);

}
.failure-action-paste-hint.paste-hint-fail i,
.failure-action-paste-hint.paste-hint-fail svg.lucide {
    color: #f59e0b;
}
.paste-hint-dismiss {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 0 6px;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.paste-hint-dismiss:hover { color: var(--text-primary, #e4e4e7); }
@keyframes paste-hint-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Inline keyboard-shortcut keys — used in the help text + paste hint */
.failure-action-help kbd,
.failure-action-paste-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom-width: 2px;
    border-radius: 3px;
    font-family: ui-monospace, monospace;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #e4e4e7);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    margin: 0 1px;
}

/* Filter-flash effect when Failures tab inherits a filter from a deep link */
.failures-filter-flash {
    animation: failures-filter-flash 1.5s ease-out;
}
@keyframes failures-filter-flash {
    0%   { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* Weekly digest — rendered markdown preview.
   Tighter typography than a normal article so the digest reads as a
   compact summary card, not a long article. */
.weekly-digest-preview {
    background: var(--card-bg, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 18px 22px;
    color: var(--text-primary, #e4e4e7);
    line-height: 1.6;
    font-size: 0.92rem;
    min-height: 280px;
    max-height: 70vh;
    overflow-y: auto;
}
.weekly-digest-preview h3 {
    font-size: 1.1rem;
    margin: 14px 0 8px 0;
    color: var(--text-primary, #e4e4e7);
    font-weight: 700;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    padding-bottom: 6px;
}
.weekly-digest-preview h3:first-child { margin-top: 0; }
.weekly-digest-preview h4 {
    font-size: 0.95rem;
    margin: 12px 0 6px 0;
    color: var(--text-primary, #e4e4e7);
    font-weight: 600;
}
.weekly-digest-preview h5,
.weekly-digest-preview h6 {
    font-size: 0.85rem;
    margin: 10px 0 4px 0;
    color: var(--text-secondary, #a1a1aa);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.weekly-digest-preview p {
    margin: 6px 0 10px 0;
}
.weekly-digest-preview ul,
.weekly-digest-preview ol {
    margin: 6px 0 12px 0;
    padding-left: 22px;
}
.weekly-digest-preview li {
    margin: 4px 0;
}
.weekly-digest-preview li > strong:first-child {
    color: var(--primary-light, #818cf8);
}
.weekly-digest-preview code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.86em;
    font-family: ui-monospace, monospace;
    color: var(--primary-light, #818cf8);
}
.weekly-digest-preview a {
    color: var(--primary-light, #818cf8);
    text-decoration: none;
    border-bottom: 1px dotted rgba(129, 140, 248, 0.4);
}
.weekly-digest-preview a:hover {
    border-bottom-style: solid;
}
.weekly-digest-preview hr {
    border: none;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    margin: 14px 0;
}
.weekly-digest-preview strong { color: var(--text-primary, #e4e4e7); }
.weekly-digest-preview em { color: var(--text-secondary, #a1a1aa); font-style: italic; }

/* ============================================================================
   Failure modal — AI Investigation section (top of modal).
   Shown either as a CTA button (before AI runs) or as a rich insight
   card (after AI returns or on cache hit).
   ============================================================================ */
.failure-ai-section { margin: 14px 0 16px 0; }

/* CTA card — prominent invitation to invoke Claude */
.failure-ai-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(34, 211, 238, 0.04));
    border: 1px solid rgba(129, 140, 248, 0.30);
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s;
}
.failure-ai-cta:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(34, 211, 238, 0.06));
    border-color: rgba(129, 140, 248, 0.5);
}
.failure-ai-cta-body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.failure-ai-cta-body i,
.failure-ai-cta-body svg.lucide {
    width: 22px;
    height: 22px;
    color: var(--primary-light, #818cf8);
    flex-shrink: 0;
}
.failure-ai-cta-body strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary, #e4e4e7);
    margin-bottom: 2px;
}
.failure-ai-cta-body span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #a1a1aa);
    line-height: 1.45;
}
.failure-ai-cta button {
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

/* Rendered AI insight card */
.ai-insight-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.04));
    border: 1px solid rgba(129, 140, 248, 0.4);
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 10px;
    padding: 14px 18px;
}
.ai-insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ai-insight-cached {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-muted, #94a3b8);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.ai-insight-tag {
    background: rgba(99, 102, 241, 0.18);
    color: var(--primary-light, #818cf8);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
}
.ai-insight-refresh-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #a1a1aa);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ai-insight-refresh-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--text-primary, #e4e4e7);
    border-color: rgba(129, 140, 248, 0.35);
}
.ai-insight-refresh-btn i,
.ai-insight-refresh-btn svg.lucide {
    width: 12px;
    height: 12px;
}
.ai-insight-section-label {
    font-size: 0.72rem;
    color: var(--text-secondary, #a1a1aa);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 4px;
}
.ai-insight-rootcause {
    font-size: 0.92rem;
    color: var(--text-primary, #e4e4e7);
    line-height: 1.55;
    margin-bottom: 12px;
    font-style: italic;
}
.ai-insight-nextstep {
    font-size: 0.9rem;
    color: var(--text-primary, #e4e4e7);
    line-height: 1.5;
    margin-bottom: 12px;
}
.ai-insight-meta {
    font-size: 0.7rem;
    color: var(--text-muted, #94a3b8);
}
.ai-insight-meta code {
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Section h3 used in the modal between AI / Take action / Related issues */
.failure-section-h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--text-primary, #e4e4e7);
    margin: 18px 0 8px 0;
}
.failure-section-h3 i,
.failure-section-h3 svg.lucide {
    width: 16px;
    height: 16px;
    color: var(--primary-light, #818cf8);
}
.failure-action-subtitle-row {
    margin-bottom: 8px;
}

/* ============================================================================
   Failure modal — unified action panel
   Two side-by-side option cards (Comment on existing / Create new), with the
   recommended one highlighted by a ★ badge + brighter border. Clicking a
   card switches the active option, which updates the draft preview + the
   submit button below. Single source of truth for "what action to take".
   ============================================================================ */
.failure-action-panel {
    background: var(--card-bg, rgba(0, 0, 0, 0.18));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0 16px 0;
}
/* (Removed .failure-action-header — the internal h3 was replaced by an
   external .failure-section-h3 above the panel.) */
.failure-action-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary, #a1a1aa);
}
.failure-action-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 600px) {
    .failure-action-choices { grid-template-columns: 1fr; }
}
/* The two big option buttons. Uses real <button> for keyboard / a11y. */
.failure-action-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text-primary, #e4e4e7);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.failure-action-btn:hover:not(.is-active):not(.is-disabled) {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(129, 140, 248, 0.35);
}
.failure-action-btn.is-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.06));
    border-color: var(--primary-light, #818cf8);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.failure-action-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.failure-action-btn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.failure-action-btn-row i,
.failure-action-btn-row svg.lucide {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--text-primary, #e4e4e7);
}
.failure-action-btn.is-active .failure-action-btn-row i,
.failure-action-btn.is-active .failure-action-btn-row svg.lucide {
    color: var(--primary-light, #818cf8);
}
.failure-action-btn-title {
    font-weight: 600;
    font-size: 0.92rem;
    flex: 1 1 auto;
}
.failure-action-btn-sub {
    font-size: 0.78rem;
    color: var(--text-secondary, #a1a1aa);
    line-height: 1.4;
}
.failure-action-btn-sub strong {
    color: var(--text-primary, #e4e4e7);
}
.failure-action-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    cursor: help;
}
/* Heuristic suggestion — softer indigo, signals "informational, AI may differ" */
.failure-action-rec-badge.rec-badge-heuristic {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.08));
    color: var(--primary-light, #818cf8);
    border: 1px solid rgba(129, 140, 248, 0.35);
}
/* AI recommendation — green, signals "Claude analyzed this with full context" */
.failure-action-rec-badge.rec-badge-ai {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.10));
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.06);
}
.failure-action-reason {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: rgba(99, 102, 241, 0.08);
    border-left: 2px solid var(--primary-light, #818cf8);
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary, #a1a1aa);
    line-height: 1.5;
    margin-bottom: 10px;
}
.failure-action-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 4px 0 12px 0;
    font-size: 0.78rem;
}
.failure-action-labels-label {
    color: var(--text-secondary, #a1a1aa);
    font-weight: 600;
    margin-right: 4px;
}
.failure-action-draft-wrap {
    margin-top: 8px;
}
.failure-action-draft-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.failure-action-draft-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #a1a1aa);
    font-weight: 700;
}
.failure-action-help {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    margin: 6px 0 10px 0;
    line-height: 1.5;
}
.failure-action-submit-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.failure-action-submit-btn {
    /* Use the same style as failure-modal-btn but slightly more prominent */
    font-weight: 600;
}

/* GitHub-style label chips for the modal "Suggested labels" section.
   Background and text color come from inline style (computed from the
   actual GitHub label color). */
.gh-label-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: help;
}
/* Spinner used by the "Investigate with AI" button while loading */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; }
.failure-modal-draft-textarea {
    width: 100%;
    min-height: 240px;
    padding: 10px 12px;
    background: var(--bg-base, rgba(0,0,0,0.3));
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    resize: vertical;
}
/* FAIL pills in Release Nightly: use the shared .status-badge-actionable
   sparkle + hover ring from the global rules — do not add a second ::after
   (e.g. ⓘ) here or it overrides the actionable affordance on shard badges. */
#releases-tab .status-badge.fail:not(.status-badge-actionable),
#releases-tab .status-badge.failure:not(.status-badge-actionable) {
    cursor: pointer;
}
.summary-trend-link {
    align-self: flex-end;
    font-size: 0.72rem;
    color: var(--primary-light, #818cf8);
    text-decoration: none;
}
.summary-trend-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .summary-trends-grid { grid-template-columns: 1fr; }
}

.tab-button {
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tab-button:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
}

.tab-button.active {
    background: var(--primary);
    color: #ffffff;
}

.tab-content {
    display: block;
    max-width: 100%;
    overflow-x: visible;
}

.repo-section {
    margin-bottom: 20px;
}
/* Drop the harsh bottom-border separator — the section's own card border
   already provides visual separation from the next section. */
.repo-section:last-of-type {
    margin-bottom: 0;
}

/* Repo CI HUD tables now share .ci-hud-table class (see below) */

/* Row highlighting */
.repo-ci-row { cursor: pointer; transition: background 0.15s; }
.repo-ci-row:hover { background: rgba(99, 102, 241, 0.05); }
.repo-ci-row.repo-row-fail { background: rgba(239, 68, 68, 0.06); }
.repo-ci-row.repo-row-fail:hover { background: rgba(239, 68, 68, 0.1); }
.repo-ci-row.repo-row-run { background: rgba(245, 158, 11, 0.05); }

/* Category badges */
.cat-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 36px;
    text-align: center;
}
.cat-pass { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.cat-fail { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.cat-run { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.cat-na { background: transparent; color: var(--text-muted); font-weight: 400; }

/* Expanded detail row */
.repo-ci-expand-row td {
    padding: 0 !important;
    background: var(--bg-overlay, rgba(0,0,0,0.02));
}

/* Light theme overrides (shared via .ci-hud-table) */
[data-theme="light"] .repo-ci-row:hover td.sticky-col {
    background: #f1f5f9;
}
[data-theme="light"] .repo-ci-expand-row td {
    background: #f8fafc;
}

/* CI Specific Styles - Reusing main dashboard styles */

/* Test Artifacts Table - uses pytorch-table styles for consistency */

/* Version Dropdown Styling */
.version-dropdown {
    padding: 8px 15px;
    background: rgba(79, 70, 229, 0.35);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #f3f4f6;
    border-radius: 10px;
    font-weight: 600;
    min-width: 250px;
    cursor: pointer;
    font-size: 14px;
    /* Only transition colors/shadow. Transitioning `all` causes the hitbox to
       wobble during mousedown on <select>, which the browser interprets as
       "pointer left the button" and the native dropdown closes immediately. */
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
}

.version-dropdown:hover {
    background: rgba(79, 70, 229, 0.45);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    /* Do NOT translateY here — native <select> buttons close their popup if the
       element moves between mousedown and mouseup. */
    border-color: rgba(139, 92, 246, 0.5);
}

.version-dropdown:focus,
.version-dropdown:active {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
    /* Lock the background/position during press so the native popup stays open. */
    background: rgba(79, 70, 229, 0.45);
}

/* Dropdown options styling */
.version-dropdown option {
    background: #1a1a2e;
    color: #f3f4f6;
    padding: 10px;
    font-weight: normal;
}

.version-dropdown option:hover {
    background: #16213e;
}

/* Selected option */
.version-dropdown option:checked {
    background: #4f46e5;
    color: white;
}

/* Header Title Styling — keeps decorative properties; size/weight come from
   the global h1 rule above (using design tokens) so we don't fight specificity. */
h1.page-title {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin-bottom: var(--space-5);
}

/* CI Run Dropdown Styling - matches version dropdown */
.ci-run-dropdown {
    padding: 10px 14px;
    background: rgba(79, 70, 229, 0.35);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #f3f4f6;
    border-radius: 10px;
    min-width: 650px;
    max-width: 850px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    cursor: pointer;
    /* See .version-dropdown comment: transitioning `all` / translating on hover
       destabilises the native popup anchor and closes the dropdown on press. */
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    font-weight: 500;
}

.ci-run-dropdown:hover {
    background: rgba(79, 70, 229, 0.45);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.ci-run-dropdown:focus,
.ci-run-dropdown:active {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(79, 70, 229, 0.45);
}

.ci-run-dropdown option {
    background: #1a1a2e;
    color: #f3f4f6;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 400;
}

.ci-run-dropdown option:hover {
    background: #16213e;
}

.ci-run-dropdown option[data-status="success"] {
    background: #1a1a2e;
    border-left: 4px solid #10b981;
    padding-left: 12px;
}

.ci-run-dropdown option[data-status="failure"] {
    background: #1a1a2e;
    border-left: 4px solid #ef4444;
    padding-left: 12px;
}

.ci-run-dropdown option[data-status="in_progress"] {
    background: #1a1a2e;
    border-left: 4px solid #3b82f6;
    padding-left: 12px;
}

.ci-run-dropdown option[data-status="queued"] {
    background: #1a1a2e;
    border-left: 4px solid #f59e0b;
    padding-left: 12px;
}

.ci-run-dropdown option[data-status="completed"] {
    background: #1a1a2e;
    border-left: 4px solid #10b981;
    padding-left: 12px;
}

.ci-run-dropdown option[data-status="cancelled"] {
    background: #1a1a2e;
    border-left: 4px solid #6b7280;
    padding-left: 12px;
}

/* Sharded test container styles */
.shard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    align-items: stretch;
    padding: 2px;
    max-width: 100%;
}

.shard-badge {
    flex: 0 0 auto;
    min-width: 70px;
    max-width: 85px;
    font-size: 11px;
}

/* Compact sharded status badges */
.status-badge.shard {
    padding: 4px 6px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2px 0;
    border-radius: 4px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.status-badge.shard .shard-line {
    font-weight: 600;
    font-size: 11px;
}

.status-badge.shard .duration-line {
    font-size: 9px;
    opacity: 0.9;
    font-weight: normal;
}

/* Status badge duration - uses the same badge styles as main dashboard */
.status-badge small {
    display: block;
    margin-top: 1px;
    font-weight: normal;
    line-height: 1.1;
    font-size: 9px;
}

/* Duration text below the status icon */
.status-badge .time-info {
    display: block;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.95;
    margin-top: 2px;
    line-height: 1.3;
    letter-spacing: 0.3px;
}


/* ========================================
   Releases Tab - Badge Sizing with Queue Times
   ======================================== */

/* Status badges in Releases tab — consistent sizing */
#releases-tab .status-badge {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    height: 50px;
    min-height: 50px;
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
}

/* Sanitizers tab — same badge sizing as Release Nightly for consistency */
#ci-asan-tab .status-badge {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    height: 50px;
    min-height: 50px;
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
}

#ci-asan-tab .status-badge .time-info {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 85px;
    line-height: 1.2;
    margin-top: 2px;
}

#ci-asan-tab td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 6px 4px;
}

/* Time info display in releases tab */
#releases-tab .status-badge .time-info {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 85px;
    line-height: 1.2;
    margin-top: 2px;
}

#releases-tab .status-badge .queue-indicator {
    font-size: 7px;
    padding: 0 2px;
    margin-left: 2px;
    opacity: 0.85;
}

/* PyTorch tables in Releases tab - fixed consistent badge sizes */
#releases-tab .pytorch-table .status-badge {
    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 6px !important;
    font-size: 0.8rem;
    padding: 3px 4px;
}

#releases-tab .pytorch-table .status-badge .time-info {
    font-size: 8px;
    margin-top: 2px;
    line-height: 1.2;
    max-width: 70px;
}

#releases-tab .pytorch-table .status-badge .queue-indicator {
    font-size: 7px;
    opacity: 0.9;
}

/* PyTorch table cell alignment */
#releases-tab .pytorch-table td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 4px 2px;
}

/* ========================================
   Releases Tab - Sharded PyTorch Full Test
   (overrides the blanket #releases-tab .pytorch-table .status-badge rule
   above so shard badges stay compact and the shard-container fits in a cell)
   ======================================== */

/* Fill the full width of the section. Per-column width hints (set inline
   from JS, proportional to shard count) make the browser distribute extra
   space 6:3:2 between Default, Distributed, and Inductor — so each group
   gets room proportional to how many pills it holds. Min-widths still
   protect narrow viewports (the .horizontal-scroll wrapper kicks in if
   the viewport is narrower than the sum of min-widths). */
#releases-tab #pytorch-test-full-table {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

#releases-tab .pytorch-test-full-table .shard-cell {
    padding: 8px 12px !important;
    vertical-align: middle;
    /* Each cell holds N shard badges in a single horizontal row. The
       table-container is `.horizontal-scroll`, so when the viewport is
       narrower than the row needs, the whole table scrolls horizontally
       instead of badges wrapping into a 2nd row. */
    white-space: nowrap;
    text-align: center;
}

/* Vertical divider between every shard column (skip the first one so
   the divider doesn't leak in front of the GPU Architecture cell). */
#releases-tab .pytorch-test-full-table thead th.col-test-config + th.col-test-config,
#releases-tab .pytorch-test-full-table tbody td.shard-cell + td.shard-cell {
    border-left: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
}

#releases-tab .pytorch-test-full-table .shard-container {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    /* Centre pills inside each (now wider) column so they sit visually
       under the centred header — instead of clustering at the left edge
       and leaving big empty space on the right. */
    justify-content: center;
    align-items: stretch;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

#releases-tab .pytorch-test-full-table .shard-badge {
    flex: 0 0 auto;
    display: inline-flex;
}

/* Shard badge size matches #releases-tab .pytorch-table .status-badge (75×44).
   Inherits the base .status-badge shadow (inset highlight + tiny drop)
   automatically — no override needed now that the elevation lives at the
   base level. */
#releases-tab .pytorch-test-full-table .status-badge.shard {
    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 6px !important;
    padding: 4px 5px !important;
    font-size: 11px;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
}

#releases-tab .pytorch-test-full-table .status-badge.shard .shard-line {
    font-weight: 600;
    font-size: 11px;
}

#releases-tab .pytorch-test-full-table .status-badge.shard .duration-line {
    font-size: 9px;
    opacity: 0.9;
    font-weight: 500;
}

/* Let the shared actionable hover ring (inset -2px) show outside the pill;
   base .status-badge uses overflow:hidden which would clip it on shards. */
#releases-tab .pytorch-test-full-table .status-badge.shard.status-badge-actionable {
    overflow: visible;
}

/* Inline workflow link in the section header (↗) */
.dashboard-section h2 .section-workflow-link {
    margin-left: 6px;
    font-size: 0.9rem;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.dashboard-section h2 .section-workflow-link:hover {
    opacity: 1;
}

.dashboard-section .section-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
    margin: -6px 0 10px 0;
    font-weight: normal;
}

.dashboard-section .section-subtitle code {
    background: var(--code-bg, rgba(127, 127, 127, 0.15));
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.78rem;
}

/* Column header hint (e.g. "Default (6 shards)") */
#releases-tab .pytorch-test-full-table .shard-count-hint {
    font-weight: normal;
    font-size: 0.72rem;
    opacity: 0.7;
    margin-left: 4px;
}

/* Test combo strip — same vocabulary as other release summary chips */
.pt-test-full-combo {
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid var(--card-border, rgba(139, 92, 246, 0.22));
    border-radius: var(--radius-md, 8px);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.pt-test-full-combo code {
    font-size: 0.78rem;
}

[data-theme="light"] .pt-test-full-combo {
    background: rgba(99, 102, 241, 0.06);
}

/* Full-test table headers: match sibling PyTorch tables (readability),
   centred above the centred pill rows below. */
#releases-tab .pytorch-test-full-table thead th.col-test-config {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    vertical-align: bottom;
    padding: 0 12px 12px 12px;
    text-align: center;
}

/* Fixed narrow GPU Architecture column to match the CI HUD table above
   (140px is the canonical arch column width used elsewhere). The shard
   columns share whatever space is left, distributed 6:3:2 by their
   inline width hints. */
#releases-tab .pytorch-test-full-table thead th.col-arch,
#releases-tab .pytorch-test-full-table tbody td.sticky-left {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    text-align: left;
    padding-left: 12px;
}

#releases-tab .pytorch-test-full-table tbody td.sticky-left {
    font-size: 0.8125rem;
}

/* Shard-summary line added to the workflow card (e.g. "✓ 9/11 passed • ✗ 2 failed") */
.workflow-run-card .workflow-shard-summary {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary, #888);
    font-weight: 500;
}

/* ========================================
   CI Nightly Tab - Consistent Badge Sizing
   ======================================== */

/* CI Nightly — consistent badge sizing */
#ci-nightly-tab .status-badge,
#ci-nightly-tab .status-badge.shard {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#ci-nightly-tab .shard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

#ci-nightly-tab .shard-badge {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ci-nightly-tab .status-table td,
#ci-nightly-tab .pytorch-table td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px 4px;
}

#ci-nightly-tab .status-badge .time-info {
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 85px;
    line-height: 1.2;
}

/* Architecture column - left aligned with proper spacing for arrow */
#ci-nightly-tab .status-table td:first-child,
#ci-nightly-tab .pytorch-table td:first-child {
    text-align: left !important;
    padding-left: 24px !important;
    position: relative;
}

/* ========================================
   Build Info Panel Styles
   ======================================== */

.build-info-panel {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}

.build-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.build-info-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.build-info-badges {
    display: flex;
    align-items: center;
    gap: 10px;
}

.build-info-version {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
    font-family: 'Consolas', 'Monaco', monospace;
}

.release-type-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.release-type-badge.nightly {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: white;
}

.release-type-badge.dev {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
}

.release-type-badge.prerelease {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: white;
}

/* Workflow Runs Grid */
.workflow-runs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.workflow-run-card {
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px;
    transition: all 0.2s ease;
}

.workflow-run-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    border-color: var(--primary);
}

.workflow-run-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.workflow-icon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 1.1rem;
    color: var(--text-secondary, #888);
}
.workflow-icon [data-lucide], .workflow-icon svg.lucide {
    width: 16px;
    height: 16px;
}

.workflow-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.workflow-run-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workflow-run-link {
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.workflow-run-link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.workflow-run-sha {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Build Download Section */
.build-download-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.build-info-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.build-info-value {
    font-size: 0.9rem;
    color: #1f2937;
    font-weight: 500;
    word-break: break-all;
}

.build-info-link {
    color: #6366f1;
    text-decoration: none;
    transition: color 0.2s;
}

.build-info-link:hover {
    color: #818cf8;
    text-decoration: underline;
}

/* Download Button Group */
.download-btn-group {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Download buttons — colored gradient backgrounds (original style) with
   WHITE text so icons and labels are always readable. Light mode gets
   softer tints instead of the full-saturation gradients. */
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 10px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
    border: none;
    min-width: 36px;
    min-height: 32px;
    letter-spacing: 0;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.download-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.download-btn .dl-icon {
    font-size: 0.8rem;
}

.download-btn.dl-tarball {
    background: linear-gradient(135deg, #059669 0%, #34d399 100%);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3);
}
.download-btn.dl-tarball:hover {
    box-shadow: 0 5px 15px rgba(5, 150, 105, 0.4);
}

.download-btn.dl-deb {
    background: linear-gradient(135deg, #db2777 0%, #f472b6 100%);
    box-shadow: 0 3px 8px rgba(219, 39, 119, 0.3);
}
.download-btn.dl-deb:hover {
    box-shadow: 0 5px 15px rgba(219, 39, 119, 0.4);
}

.download-btn.dl-rpm {
    background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.3);
}
.download-btn.dl-rpm:hover {
    box-shadow: 0 5px 15px rgba(217, 119, 6, 0.4);
}

/* Light theme: softer pastel backgrounds so they don't scream on white */
[data-theme="light"] .download-btn.dl-tarball { background: linear-gradient(135deg, #6ee7b7 0%, #a7f3d0 100%); color: #064e3b; box-shadow: 0 2px 6px rgba(5,150,105,0.2); }
[data-theme="light"] .download-btn.dl-deb     { background: linear-gradient(135deg, #f9a8d4 0%, #fbcfe8 100%); color: #831843; box-shadow: 0 2px 6px rgba(219,39,119,0.2); }
[data-theme="light"] .download-btn.dl-rpm     { background: linear-gradient(135deg, #fde68a 0%, #fef3c7 100%); color: #78350f; box-shadow: 0 2px 6px rgba(217,119,6,0.2); }

/* No Download Available */
.no-download {
    color: #9ca3af;
    font-size: 0.8rem;
    font-style: italic;
}

/* Responsive adjustments for build info */
@media (max-width: 768px) {
    .build-info-panel {
        padding: 15px;
    }

    .build-info-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }


}

/* ========================================
   Submodule PRs Tab Styles
   ======================================== */

/* Submodule PRs Table specific styles */
#submodule-prs-table td,
#pr-activity-table td {
    vertical-align: middle;
}

#submodule-prs-table .status-badge,
#pr-activity-table .status-badge {
    min-width: 80px;
    font-size: 0.7rem;
    padding: 6px 10px;
    min-height: 28px;
}

/* CI Checks Badge - Compact version */
#pr-activity-table .status-badge {
    font-size: 0.75rem;
    min-width: 60px;
}

/* ========================================
   Bump PRs Tab Specific Styles
   ======================================== */

/* SHA Code Display */
.sha-code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.8rem;
    padding: 3px 8px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 4px;
    color: #4b5563;
    letter-spacing: 0.5px;
}

/* Path Code Display */
.path-code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 2px 6px;
    background: rgba(107, 114, 128, 0.1);
    border-radius: 4px;
    color: #6b7280;
}

/* Submodule Name Link */
.submodule-name-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 600;
}

.submodule-name-link:hover {
    color: var(--primary);
}

/* SHA Link */
.sha-link {
    text-decoration: none;
}

.sha-link:hover .sha-code {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

/* Commits Behind Badge */
.commits-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 80px;
}

.commits-badge.current {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.commits-badge.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.commits-badge.stale {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.commits-badge.unknown {
    background: #e5e7eb;
    color: #6b7280;
}

/* Age Badge */
.age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.age-badge.current {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.age-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.age-badge.stale {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* No PR Indicator */
.no-pr {
    color: #9ca3af;
    font-style: italic;
}

/* Bump PRs Table Styles */
#open-bump-prs-table td,
#submodule-status-table td,
#merged-bump-prs-table td {
    vertical-align: middle;
}

.bump-date {
    color: #888;
    font-size: 0.85em;
    margin-left: 4px;
}

#bump-prs-tab .status-badge {
    min-width: 70px;
    font-size: 0.7rem;
    padding: 5px 8px;
    min-height: 26px;
}

/* ========================================
   Issues Tab Styles
   ======================================== */

/* Issue Stats in Header */
.issue-stats {
    display: flex;
    gap: 15px;
    align-items: center;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-item span {
    font-weight: 700;
    font-size: 1rem;
}

.stat-item.open span {
    color: #60a5fa;
}

.stat-item.resolved span {
    color: #34d399;
}

/* Add Issue Button */
.add-issue-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.add-issue-btn:hover {
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4) !important;
}

/* Issues Filters */
.issues-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: var(--card-shadow);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group select,
.filter-group input {
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    background: #18181b;
    transition: all 0.2s ease;
    cursor: pointer;
}

.filter-group select:hover,
.filter-group input:hover {
    border-color: #6366f1;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.search-group {
    flex: 1;
    min-width: 200px;
}

/* Date Filter */
.date-filter-group {
    min-width: auto;
}

.date-filter-wrapper {
    display: flex;
    align-items: stretch;
    background: #18181b;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.date-filter-wrapper:hover {
    border-color: #6366f1;
}

.date-filter-wrapper:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.date-field-select {
    padding: 8px 10px;
    border: none;
    border-right: 1px solid var(--card-border);
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 105px;
    outline: none;
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 0;
}

.date-input-box {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}

.date-input-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0.7;
}

.date-input-box input {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 8px 2px;
    cursor: pointer;
    outline: none;
    width: 115px;
}

.date-input-box input.has-value {
    color: var(--text-primary);
    font-weight: 500;
}

.date-input-box input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-style: italic;
}

.date-input-box input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.date-input-box input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.date-range-arrow {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

.date-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: none;
    border-left: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.date-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    opacity: 1;
}

/* Multi-select Label Filter */
.label-filter-group {
    min-width: 200px;
}

.multi-select-container {
    position: relative;
    min-width: 200px;
}

.multi-select-btn {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    font-size: 0.9rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    color: #1f2937;
    background: #18181b;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    align-items: center;
    transition: all 0.2s ease;
}

.multi-select-btn:hover {
    border-color: #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.multi-select-btn:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.multi-select-btn .dropdown-arrow {
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
    margin-left: 8px;
}

.multi-select-btn.open .dropdown-arrow {
    transform: rotate(180deg);
}

.multi-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-height: 400px;
    overflow: hidden;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.multi-select-dropdown.hidden {
    display: none;
}

.label-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border);
    background: var(--bg-surface);
}

.label-dropdown-header .match-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #6366f1;
    cursor: pointer;
    font-weight: 500;
}

.label-dropdown-header .match-mode input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #6366f1;
}

.clear-labels-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366f1;
    background: #18181b;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.clear-labels-btn:hover {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.label-options {
    overflow-y: auto;
    max-height: 320px;
    padding: 8px;
}

.label-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 8px;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.label-option:hover {
    background: var(--bg-overlay);
}

.label-option:has(input:checked) {
    background: var(--primary-bg);
    border: 1px solid var(--primary);
    margin: -1px;
    margin-bottom: 1px;
}

.label-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6366f1;
    border-radius: 4px;
    flex-shrink: 0;
}

.label-option .label-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.label-option .label-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-option .label-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-light);
    background: var(--bg-overlay);
    padding: 3px 8px;
    border-radius: 12px;
    min-width: 28px;
    text-align: center;
}

/* Selected Labels Tags */
.selected-labels-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.selected-labels-tags:empty {
    display: none;
}

.label-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4338ca;
    border-radius: 20px;
    border: 1px solid #c7d2fe;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.1);
    transition: all 0.15s ease;
}

.label-tag:hover {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2);
}

.label-tag .tag-color {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.label-tag .remove-tag {
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: #6366f1;
    opacity: 0.6;
    transition: all 0.15s ease;
    margin-left: 2px;
}

.label-tag .remove-tag:hover {
    opacity: 1;
    color: #dc2626;
}

.label-tag .remove-tag:hover {
    opacity: 1;
}

.search-group input {
    width: 100%;
}

/* Issues Table */
.issues-table {
    width: 100%;
    table-layout: fixed;
}

.issues-table th {
    background: var(--table-header-bg);
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--table-header-text);
    padding: var(--spacing-md) var(--spacing-sm);
    white-space: nowrap;
    overflow: hidden;
    border: none;
    border-bottom: 1px solid var(--gray-400);
}

.issues-table td {
    padding: 10px 6px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issues-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}

.issues-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
}

/* Issue Labels */
.issue-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
    overflow: hidden;
}

.issue-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.author-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.action-btn.view {
    background: var(--primary);
    color: white;
    width: auto;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

.action-btn.view:hover {
    background: var(--primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Status Badge for Issues Tab */
#issues-tab .status-badge {
    min-width: 85px;
    font-size: 0.7rem;
    padding: 6px 10px;
    min-height: 28px;
}

#issues-tab .status-badge.resolved {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Responsive Styles for Issues Tab */
@media (max-width: 768px) {
    .issues-filters {
        flex-direction: column;
        gap: 12px;
    }

    .filter-group {
        min-width: 100%;
    }

    .date-filter-wrapper {
        flex-wrap: wrap;
    }

    .date-field-select {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
    }

    .date-range-inputs {
        width: 100%;
    }

    .form-row {
        grid-template-columns: 1fr;
    }


    .issue-actions {
        flex-direction: column;
        gap: 4px;
    }

    .action-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .issue-stats {
        flex-wrap: wrap;
        gap: 8px;
    }

    .stat-item {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}

/* ========================================
   Issues Report / Aggregated Dashboard
   ======================================== */

.issues-report {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.report-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
    font-weight: 700;
}

.report-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.report-controls select {
    padding: 8px 14px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.report-controls select:hover {
    border-color: #6366f1;
}

.report-controls select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.report-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Report Summary Cards */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.report-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: var(--card-bg);
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    border: 1px solid var(--card-border);
}

.report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.report-card .card-icon {
    font-size: 2rem;
    line-height: 1;
}

.report-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.report-card .card-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.report-card .card-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.report-card.summary {
    border-color: rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), var(--card-bg));
}

.report-card.summary .card-value {
    color: var(--primary-light);
}

.report-card.open {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), var(--card-bg));
}

.report-card.open .card-value {
    color: var(--running);
}

.report-card.closed {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), var(--card-bg));
}

.report-card.closed .card-value {
    color: var(--success);
}

.report-card.rate {
    border-color: rgba(168, 85, 247, 0.3);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), var(--card-bg));
}

.report-card.rate .card-value {
    color: var(--text-secondary);
}

/* Report Breakdown Section */
.report-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.breakdown-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.breakdown-section h4 {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* Top Labels */
.top-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Top label styling (used in Issues Report) */
.top-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-elevated);
    color: var(--text-primary) !important;
    border: 1px solid var(--card-border);
    transition: transform 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.top-label:hover {
    transform: scale(1.05);
    border-color: var(--primary);
    text-decoration: none;
}

.top-label .count {
    background: var(--primary);
    color: white !important;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 4px;
}

[data-theme="light"] .top-label {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b !important;
}

[data-theme="light"] .top-label .count {
    background: #4f46e5;
    color: white !important;
}

.top-label-placeholder,
.top-contributor-placeholder {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.85rem;
}

/* Top Contributors */
.top-contributors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contributor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-overlay);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.contributor-item:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.contributor-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--card-border);
}

.contributor-count {
    background: var(--primary-bg);
    color: var(--primary-light);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ========================================
   Sortable Table Headers
   ======================================== */

.issues-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.2s ease;
}

.issues-table th.sortable:hover {
    background: var(--table-header-hover);
}

.issues-table th.sortable .sort-icon {
    font-size: 0.7rem;
    opacity: 0.5;
    margin-left: 4px;
    transition: all 0.2s ease;
    color: white;
}

.issues-table th.sortable:hover .sort-icon {
    opacity: 0.8;
}

.issues-table th.sortable.sort-asc .sort-icon,
.issues-table th.sortable.sort-desc .sort-icon {
    opacity: 1;
    color: #a5b4fc;
}

.issues-table th.sortable.sort-asc .sort-icon::after {
    content: '↑';
}

.issues-table th.sortable.sort-desc .sort-icon::after {
    content: '↓';
}

.issues-table th.sortable.sort-asc .sort-icon,
.issues-table th.sortable.sort-desc .sort-icon {
    font-size: 0;
}

.issues-table th.sortable.sort-asc .sort-icon::after,
.issues-table th.sortable.sort-desc .sort-icon::after {
    font-size: 0.8rem;
}

/* Responsive for Report */
@media (max-width: 768px) {
    .issues-report {
        padding: 15px;
    }

    .report-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .report-card {
        padding: 12px 15px;
    }

    .report-card .card-icon {
        font-size: 1.5rem;
    }

    .report-card .card-value {
        font-size: 1.4rem;
    }

    .report-breakdown {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Issues Pagination Controls
   ======================================== */

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-info span {
    font-weight: 700;
    color: var(--primary);
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--card-border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #818cf8;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 8px;
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--card-border);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #818cf8;
    transition: all 0.2s ease;
}

.pagination-page:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pagination-page.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.pagination-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pagination-size select {
    padding: 6px 10px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.pagination-size select:focus {
    outline: none;
    border-color: #6366f1;
}

@media (max-width: 768px) {
    .pagination-controls {
        flex-direction: column;
        gap: 10px;
    }

    .pagination-buttons {
        order: -1;
    }
}

/* ============= CI HUD Tab Styles ============= */
/* Compact stat-pill row used in per-repo CI HUD sub-sections (rocm-systems,
   rocm-libraries). Uses thin colored borders + tinted backgrounds for a
   clean status-pill look that matches the overall design system. */
.ci-hud-stats {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ci-hud-stats .stat-item {
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}
.ci-hud-stats .stat-item span {
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 2px;
}
.ci-hud-stats .stat-item.all-pass {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.30);
    color: #10b981;
}
.ci-hud-stats .stat-item.failing {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.30);
    color: #ef4444;
}
.ci-hud-stats .stat-item.running {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.30);
    color: #f59e0b;
}

.ci-hud-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.ci-hud-container {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow-x: auto;
    max-width: 100%;
}

/* Main CI HUD table (shares structure with repo CI HUD) */
.ci-hud-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ci-hud-table thead {
    background: var(--card-bg);
}
.ci-hud-table thead th {
    background: var(--card-bg);
    padding: 12px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--card-border);
    white-space: nowrap;
}

.ci-hud-table thead th.sticky-col,
.ci-hud-table tbody td.sticky-col {
    box-sizing: border-box;
}
.ci-hud-table thead th.sticky-col {
    position: sticky;
    z-index: 3;
    background: var(--card-bg);
}
.ci-hud-table thead th.col-sha { left: 0; width: 80px; min-width: 80px; }
.ci-hud-table thead th.col-pr { left: 80px; width: 60px; min-width: 60px; }
.ci-hud-table thead th.col-msg { left: 140px; width: 220px; min-width: 220px; }
.ci-hud-table thead th.col-auth { left: 360px; width: 110px; min-width: 110px; }
.ci-hud-table thead th.col-time { left: 470px; width: 80px; min-width: 80px; }

.ci-hud-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
}

.ci-hud-table tbody td.sticky-col {
    position: sticky;
    z-index: 1;
    background: var(--card-bg);
}
.ci-hud-table tbody td.col-sha { left: 0; width: 80px; min-width: 80px; }
.ci-hud-table tbody td.col-sha a {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.82rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.ci-hud-table tbody td.col-sha a:hover { text-decoration: underline; }
.ci-hud-table tbody td.col-pr { left: 80px; width: 60px; min-width: 60px; font-size: 0.82rem; white-space: nowrap; }
.ci-hud-table tbody td.col-pr a { color: var(--primary); text-decoration: none; }
.ci-hud-table tbody td.col-pr a:hover { text-decoration: underline; }
.ci-hud-table tbody td.col-msg {
    left: 140px; width: 220px; min-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.78rem; color: var(--text-primary);
}
.ci-hud-table tbody td.col-auth {
    left: 360px; width: 110px; min-width: 110px;
    font-size: 0.75rem; white-space: nowrap;
}
.ci-hud-table tbody td.col-time {
    left: 470px; width: 80px; min-width: 80px;
}
.ci-hud-table thead th.col-time {
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.3);
}
.ci-hud-table tbody td.col-time {
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.15);
    font-size: 0.72rem; color: var(--text-muted); white-space: nowrap;
}
.ci-hud-table tbody td.col-auth img.author-avatar {
    width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 4px;
}
.ci-hud-table tbody td.col-cat {
    text-align: center; white-space: nowrap;
}

.ci-hud-table .repo-ci-row { cursor: pointer; }
.ci-hud-table .repo-ci-row:hover td { background: var(--bg-overlay); }
.ci-hud-table .repo-ci-row:hover td.sticky-col { background: var(--bg-overlay); }
.ci-hud-table .repo-row-fail td { background: rgba(239, 68, 68, 0.04); }
.ci-hud-table .repo-row-fail:hover td { background: rgba(239, 68, 68, 0.07); }
.ci-hud-table .repo-row-run td { background: var(--warning-light); }
.ci-hud-table .ci-hud-row.expanded td { background: var(--bg-overlay); }
.ci-hud-table .ci-hud-row.expanded td.sticky-col { background: var(--bg-overlay); }

.ci-hud-table .repo-ci-expand-row td {
    background: var(--bg-elevated);
    padding: 16px 20px;
    border-bottom: 2px solid var(--card-border);
}


/* CI HUD expanded detail content (inside expand row <td>) */
.ci-hud-table .repo-ci-expand-row .ci-hud-expanded-grid {
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.ci-hud-expanded-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.expanded-section {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--card-border);
}

.expanded-section.full-width {
    grid-column: 1 / -1;
}

.expanded-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}

.expanded-section h5 {
    margin: 10px 0 8px 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.expanded-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.expanded-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.expanded-item.success {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.expanded-item.success:hover {
    background: #d1fae5;
}

.expanded-item.failure {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.expanded-item.failure:hover {
    background: #fee2e2;
}

.expanded-item.running {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.expanded-item.na {
    background: var(--bg-overlay);
    color: var(--text-muted);
    border: 1px solid var(--card-border);
}

.item-icon {
    font-weight: 700;
}

.expanded-actions {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.expanded-actions .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #6366f1;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    width: auto;
    height: auto;
    white-space: nowrap;
}

.expanded-actions .action-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* CI HUD pagination */
.ci-hud-pagination {
    padding: 15px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* CI HUD loading/empty/error states */
.ci-hud-loading,
.ci-hud-empty,
.ci-hud-error {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 1rem;
}

.ci-hud-error {
    color: #dc2626;
}

/* Responsive */
@media (max-width: 1200px) {
    .ci-hud-expanded-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .ci-hud-expanded-grid {
        grid-template-columns: 1fr;
    }
}

/* CI HUD Pagination Controls */
.ci-hud-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    margin-top: 15px;
}

.ci-hud-pagination-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ci-hud-page-btn {
    padding: 8px 16px;
    border: 1px solid var(--card-border);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
}

.ci-hud-page-btn:hover:not(:disabled) {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.ci-hud-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ci-hud-page-nums {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ci-hud-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--card-border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
}

.ci-hud-page-num:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.ci-hud-page-num.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    cursor: default;
}

span.ci-hud-page-num.active {
    cursor: default;
}

/* Refresh Button States */
.refresh-btn {
    position: relative;
    transition: all 0.2s ease;
}

.refresh-btn.refreshing {
    background: #818cf8 !important;
    cursor: wait;
}

.refresh-btn.refresh-success {
    background: #10b981 !important;
    border-color: #10b981 !important;
}

.refresh-btn.refresh-error {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

/* Custom Tooltip - Shows Below */
.refresh-btn::after {
    content: 'Force re-fetch (live via webhooks, auto-refreshes every 2 min)';
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.refresh-btn::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    right: 16px;
    border: 6px solid transparent;
    border-bottom-color: #1e293b;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.refresh-btn:hover::after,
.refresh-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

.refresh-btn.refreshing::after,
.refresh-btn.refreshing::before,
.refresh-btn.refresh-success::after,
.refresh-btn.refresh-success::before,
.refresh-btn.refresh-error::after,
.refresh-btn.refresh-error::before {
    display: none;
}

.export-excel-btn {
    background: #059669;
    color: #fff;
    border: 1px solid #047857;
    min-height: 40px;
    box-sizing: border-box;
}
.export-excel-btn:hover {
    background: #047857;
    box-shadow: 0 5px 15px rgba(5, 150, 105, 0.4);
}
/* Override Refresh tooltip for Export button - must win over .refresh-btn::after */
.refresh-btn.export-excel-btn::after {
    content: 'Download Release report as Excel (.xlsx)';
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.refresh-btn.export-excel-btn:hover::after {
    opacity: 1;
    visibility: visible;
}
.refresh-btn.export-excel-btn::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    right: 16px;
    border: 6px solid transparent;
    border-bottom-color: #1e293b;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.refresh-btn.export-excel-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   COMPREHENSIVE THEME OVERRIDES
   ======================================== */

/* Light Theme - Complete Override */
[data-theme="light"] {
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-text: #1f2937;
}

[data-theme="light"] .version-dropdown,
[data-theme="light"] .ci-run-dropdown {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: #1f2937;
}

[data-theme="light"] .version-dropdown option,
[data-theme="light"] .ci-run-dropdown option {
    background: #ffffff;
    color: #1f2937;
}

[data-theme="light"] .filter-group select,
[data-theme="light"] .filter-group input {
    background: #ffffff;
    border-color: #d1d5db;
    color: #1f2937;
}

[data-theme="light"] .date-filter-wrapper {
    background: #ffffff;
    border-color: #d1d5db;
}

[data-theme="light"] .date-field-select {
    background: rgba(99, 102, 241, 0.06);
    border-right-color: #d1d5db;
    color: #1f2937;
}

[data-theme="light"] .date-input-box input {
    color: #6b7280;
}

[data-theme="light"] .date-input-box input.has-value {
    color: #1f2937;
}

[data-theme="light"] .date-input-box input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.5;
}

[data-theme="light"] .date-clear-btn {

    color: #6b7280;
}

[data-theme="light"] .multi-select-btn {
    background: #ffffff;
    border-color: #d1d5db;
    color: #1f2937;
}

[data-theme="light"] .multi-select-dropdown {
    background: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .label-dropdown-header {
    background: #f8fafc;
    border-color: #e5e7eb;
}

[data-theme="light"] .label-option {
    color: #374151;
}

[data-theme="light"] .label-option:hover {
    background: #f3f4f6;
}

[data-theme="light"] .label-option .label-name {
    color: #1e293b;
}

[data-theme="light"] .label-option .label-count {
    background: #e2e8f0;
    color: #4f46e5;
}

[data-theme="light"] .label-option:has(input:checked) {
    background: #eef2ff;
    border-color: #c7d2fe;
}

[data-theme="light"] .pagination-controls {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .pagination-info {
    color: #6b7280;
}

[data-theme="light"] .pagination-info span {
    color: #4f46e5;
}

[data-theme="light"] .pagination-page {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

[data-theme="light"] .pagination-page:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}

[data-theme="light"] .pagination-page.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}

[data-theme="light"] .pagination-size {
    color: #6b7280;
}

[data-theme="light"] .pagination-size select {
    background: #ffffff;
    border-color: #d1d5db;
    color: #1f2937;
}

/* CI HUD Light Theme Fixes */
[data-theme="light"] .ci-hud-container {
    background: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .ci-hud-filters {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ci-hud-table thead th {
    background: #f8fafc;
    color: #475569;
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .ci-hud-table thead th.sticky-col {
    background: #f8fafc;
}
[data-theme="light"] .ci-hud-table tbody td.sticky-col {
    background: #fff;
}
[data-theme="light"] .ci-hud-table .repo-ci-row:hover td.sticky-col {
    background: #f1f5f9;
}
[data-theme="light"] .ci-hud-table tbody td {
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .ci-hud-table .repo-ci-expand-row td {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .ci-hud-table .repo-row-fail td {
    background: rgba(220, 38, 38, 0.04);
}
[data-theme="light"] .ci-hud-table .repo-row-fail:hover td {
    background: rgba(220, 38, 38, 0.07);
}

[data-theme="light"] .expanded-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .expanded-section h4 {
    color: #1f2937;
    border-bottom-color: #e5e7eb;
}

[data-theme="light"] .expanded-section h5 {
    color: #4b5563;
}



[data-theme="light"] .col-time {
    color: #6b7280;
}

/* Issues Report Light Theme */
[data-theme="light"] .issues-report {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-color: rgba(139, 92, 246, 0.15);
}

[data-theme="light"] .report-card {
    background: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .report-card.summary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), #ffffff);
}

[data-theme="light"] .report-card.open {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), #ffffff);
}

[data-theme="light"] .report-card.closed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), #ffffff);
}

[data-theme="light"] .report-card.rate {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), #ffffff);
}

[data-theme="light"] .report-card .card-value {
    color: #1f2937;
}

[data-theme="light"] .report-card .card-label {
    color: #6b7280;
}

[data-theme="light"] .breakdown-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

[data-theme="light"] .breakdown-section h4 {
    color: #374151;
}

[data-theme="light"] .issues-filters {
    background: #ffffff;
    border-color: #e5e7eb;
}

/* Issue stats light theme */
[data-theme="light"] .stat-item {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
}

[data-theme="light"] .stat-item span {
    color: #1e293b;
}

[data-theme="light"] .stat-item.open span {
    color: #2563eb;
}

[data-theme="light"] .stat-item.resolved span {
    color: #059669;
}

[data-theme="light"] .contributor-item {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
}

[data-theme="light"] .report-controls select {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

/* Legend Dark Theme */
[data-theme="dark"] .legend,
[data-theme="dark"] .legend-section,
:root .legend,
:root .legend-section {
    background: #1f1f23;
    border-color: #3f3f46;
}

[data-theme="dark"] .legend h3,
[data-theme="dark"] .legend-section h4,
:root .legend h3,
:root .legend-section h4 {
    color: #e4e4e7 !important;
}

[data-theme="dark"] .legend-item,
:root .legend-item {
    color: #a1a1aa !important;
}

/* Legend Light Theme */
[data-theme="light"] .legend,
[data-theme="light"] .legend-section {
    background: #ffffff;
    border-color: #cbd5e1;
}

[data-theme="light"] .legend h3,
[data-theme="light"] .legend-section h4 {
    color: #1e293b !important;
}

[data-theme="light"] .legend-item {
    color: #334155 !important;
}

/* Table Light Theme */
[data-theme="light"] table {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] th {
    background: #f1f5f9;
    border-bottom: 2px solid #e2e8f0;
    color: #374151;
    border-color: #e5e7eb;
}

[data-theme="light"] td {
    color: #374151;
    border-color: #e5e7eb;
}

[data-theme="light"] tr:hover {
    background: #f8fafc;
}

/* Issues Table Light Theme */
[data-theme="light"] .issues-table th {
    background: #f8fafc;
    color: #374151;
}

[data-theme="light"] .issues-table td {
    color: #374151;
}


/* GPU Architecture column - ensure visibility in both themes */
[data-theme="dark"] .status-table td:first-child,
[data-theme="dark"] .pytorch-table td:first-child,
:root .status-table td:first-child,
:root .pytorch-table td:first-child {
    color: #e4e4e7 !important;
}

[data-theme="light"] .status-table td:first-child,
[data-theme="light"] .pytorch-table td:first-child {
    color: #1f2937 !important;
}


/* Submodule name visibility in dark mode */
[data-theme="dark"] .submodule-name-link,
:root .submodule-name-link {
    color: #e4e4e7 !important;
}

[data-theme="dark"] .submodule-name-link:hover,
:root .submodule-name-link:hover {
    color: #818cf8 !important;
}

[data-theme="light"] .submodule-name-link {
    color: #1f2937 !important;
}

[data-theme="light"] .submodule-name-link:hover {
    color: #4f46e5 !important;
}


/* Ensure dropdown arrows are visible */
[data-theme="light"] .multi-select-btn .dropdown-arrow {
    color: #6b7280;
}

/* Pagination buttons light theme */
[data-theme="light"] .pagination-btn {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

[data-theme="light"] .pagination-btn:hover {
    background: #f3f4f6;
    border-color: var(--primary);
}

[data-theme="light"] .pagination-btn.active {
    background: var(--primary);
    color: #ffffff;
}

/* Dark mode text fixes for stat cards */
[data-theme="dark"] .report-card.summary .card-value {
    color: #818cf8;
}

[data-theme="dark"] .report-card.open .card-value {
    color: #60a5fa;
}

[data-theme="dark"] .report-card.closed .card-value {
    color: #4ade80;
}

[data-theme="dark"] .report-card.rate .card-value {
    color: #a1a1aa;
}

/* ========================================
   ADDITIONAL THEME FIXES
   ======================================== */

/* Light Theme - Better shades and text visibility */
[data-theme="light"] body {
    background: #f1f5f9;
}

[data-theme="light"] .global-header {
    background: #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .global-header .site-title {
    color: #1e293b;
}

[data-theme="light"] .global-header .header-link {
    color: #475569;
    background: #ffffff;
    border-color: #cbd5e1;
}

[data-theme="light"] .global-header .header-link:hover {
    background: #f8fafc;
    border-color: #6366f1;
    color: #4f46e5;
}

[data-theme="light"] .container {
    background: transparent;
}

[data-theme="light"] .dashboard-section {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .dashboard-section h2,
[data-theme="light"] .dashboard-section h3,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    color: #0f172a !important;
}

[data-theme="light"] .build-info-header h3 {
    color: #0f172a !important;
}

[data-theme="light"] .report-header h3 {
    color: #0f172a !important;
}

[data-theme="light"] p {
    color: #334155;
}

[data-theme="light"] .tab-navigation {
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .tab-button {
    color: #475569;
}

[data-theme="light"] .tab-button:hover {
    background: #e2e8f0;
    color: #0f172a;
}

[data-theme="light"] .tab-button.active {
    background: #4f46e5;
    color: #ffffff !important;
}

[data-theme="light"] .ci-hud-pagination {
    background: #f8fafc;
    border-color: #e2e8f0;
}

[data-theme="light"] .ci-hud-page-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}

[data-theme="light"] .ci-hud-page-btn:hover {
    background: #f1f5f9;
    border-color: #4f46e5;
}

[data-theme="light"] .ci-hud-page-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

/* Light theme pagination page numbers */
[data-theme="light"] .ci-hud-page-num {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}

[data-theme="light"] .ci-hud-page-num:hover {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

[data-theme="light"] .ci-hud-page-num.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

/* Workflow run cards - Light theme */
[data-theme="light"] .workflow-run-card {
    background: #ffffff;
    border-color: #cbd5e1;
}

[data-theme="light"] .workflow-name {
    color: #1e293b;
}

[data-theme="light"] .workflow-run-sha {
    color: #64748b;
}


[data-theme="light"] .issues-report {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(139, 92, 246, 0.06));
    border-color: #cbd5e1;
}

/* Dark Theme - Text visibility fixes */
[data-theme="dark"] .dashboard-section h2,
[data-theme="dark"] .dashboard-section h3,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
:root .dashboard-section h2,
:root .dashboard-section h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .build-info-header h3,
:root .build-info-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
:root p {
    color: var(--text-secondary);
}


/* Action button text visibility */
[data-theme="light"] .action-btn.view {
    background: #4f46e5;
    color: #ffffff;
}

/* ============= CI HUD Expandable Category Columns ============= */

.col-cat-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.col-cat-header:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}
.col-cat-header.expanded {
    background: rgba(99, 102, 241, 0.05) !important;
    border-bottom: 2px solid var(--accent);
}
/* (removed) `.cat-expand-icon` was the original inline `▾`/`▸` chevron
   span used in every expandable column header. All rendering sites now
   use the unified `.col-expand-pill` (see top of this file). */

.cat-toggle-link {
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.pr-age-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}
.pr-age-badge.pr-age-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.45);
}
.pr-age-badge.pr-age-stale {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.45);
}

.gpu-health-table th {
    text-align: center;
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 8px 6px;
}
.gpu-health-table td:first-child {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85rem;
    white-space: nowrap;
}
.gpu-health-table td {
    text-align: center;
    padding: 6px 4px;
}
.health-cell {
    display: inline-block;
    min-width: 44px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
}
.health-cell.health-good {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.45);
}
.health-cell.health-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
}
.health-cell.health-bad {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.45);
}
.health-cell.health-na {
    background: transparent;
    color: var(--text-muted, #888);
    font-weight: 400;
}

.dashboard-loading::after {
    content: '· loading…';
    margin-left: 8px;
    color: var(--primary-light, #818cf8);
    font-size: 0.75rem;
    animation: dashLoadPulse 1s ease-in-out infinite;
}
@keyframes dashLoadPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Skeleton loader: subtle shimmering bars users see while data is fetching.
   Drop-in replacement for plain "Loading..." text — looks like content. */
@keyframes hudSkelShimmer {
    0%   { background-position: -100% 0; }
    100% { background-position:  200% 0; }
}
.hud-skel {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%
    );
    background-size: 200% 100%;
    animation: hudSkelShimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
    height: 12px;
    width: 60%;
    margin: 4px 0;
}
.hud-skel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}
.hud-skel-row .hud-skel:nth-child(1) { width: 32px; height: 16px; }
.hud-skel-row .hud-skel:nth-child(2) { flex: 1; height: 12px; }
.hud-skel-row .hud-skel:nth-child(3) { width: 80px; height: 12px; }

.rn-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.rn-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rn-form-row > label:first-child {
    min-width: 140px;
    color: var(--text-secondary, #888);
    font-weight: 500;
    font-size: 0.85rem;
}
.rn-form-row input[type="text"] {
    flex: 1;
    min-width: 280px;
    padding: 8px 10px;
    background: var(--bg-overlay, rgba(0,0,0,0.04));
    border: 1px solid var(--card-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--text-primary, #eee);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85rem;
}
.rn-form-row input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-light, #818cf8);
}
.rn-checkboxes {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.rn-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}
.rn-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.rn-status {
    font-size: 0.78rem;
    color: var(--text-secondary, #888);
}
.rn-status-ok { color: #10b981; }
.rn-status-error { color: #ef4444; }
.rn-status-loading { color: var(--primary-light, #818cf8); animation: dashLoadPulse 1s ease-in-out infinite; }

.rn-output-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
#rn-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    background: var(--bg-overlay, rgba(0,0,0,0.06));
    border: 1px solid var(--card-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--text-primary, #eee);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 320px;
}
.rn-stats {
    color: var(--text-secondary, #888);
    font-weight: 400;
    font-size: 0.85rem;
    margin-left: 8px;
}
.rn-error {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.85rem;
}

/* ===== Release Notes rendered preview ===== */
.rn-preview {
    background: var(--card-bg, rgba(24, 27, 40, 0.8));
    border: 1px solid var(--card-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 18px 22px;
    max-height: 640px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.55;
}
.rn-preview-header {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.08));
}
.rn-preview-range {
    color: var(--text-secondary, #aaa);
    font-size: 0.85rem;
}
.rn-preview-range code {
    background: rgba(129,140,248,0.12);
    color: var(--primary-light, #818cf8);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.82rem;
}
.rn-preview-repo {
    margin-bottom: 24px;
}
.rn-preview-repo h3 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
    color: var(--text-primary, #eee);
}
.rn-preview-repo h3 a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.rn-preview-repo h3 a:hover {
    border-bottom-color: var(--primary-light, #818cf8);
}
.rn-preview-count {
    font-size: 0.75rem;
    color: var(--text-secondary, #aaa);
    font-weight: 400;
    margin-left: 6px;
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 10px;
}
.rn-preview-count-sm {
    font-size: 0.72rem;
    color: var(--text-secondary, #aaa);
    font-weight: 400;
}
.rn-preview-cat {
    margin: 12px 0 6px 0;
    font-size: 0.88rem;
    color: var(--primary-light, #818cf8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.rn-preview-list {
    margin: 0 0 12px 0;
    padding-left: 22px;
    list-style: disc;
}
.rn-preview-list li {
    margin-bottom: 4px;
    color: var(--text-primary, #ddd);
}
.rn-preview-pr {
    color: var(--primary-light, #818cf8);
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 1px 6px;
    background: rgba(129,140,248,0.1);
    border-radius: 3px;
    margin-right: 4px;
}
.rn-preview-pr:hover {
    background: rgba(129,140,248,0.2);
}
.rn-preview-author {
    color: var(--text-secondary, #aaa);
    text-decoration: none;
    font-size: 0.82rem;
}
.rn-preview-author:hover {
    color: var(--primary-light, #818cf8);
}
.rn-preview-empty {
    color: var(--text-muted, #666);
    font-style: italic;
    padding: 8px 0;
}
.rn-view-toggle label {
    cursor: pointer;
    color: var(--text-secondary, #aaa);
}
.rn-view-toggle input[type="radio"] {
    margin-right: 4px;
    vertical-align: middle;
}

/* ===== Bump expand panel + history (#33) ===== */
.bump-expand-btn {
    background: transparent;
    border: 1px solid var(--card-border, rgba(255,255,255,0.1));
    color: var(--text-primary, #eee);
    width: 24px; height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    line-height: 1;
}
.bump-expand-btn:hover { background: rgba(99,102,241,0.15); border-color: var(--primary-light, #818cf8); }
.bump-expand-btn.expanded { background: rgba(99,102,241,0.25); border-color: var(--primary-light, #818cf8); }
.bump-expand-na { color: var(--text-muted, #888); font-size: 0.8rem; }

.bump-detail-row td { padding: 0 !important; background: var(--bg-overlay, rgba(0,0,0,0.04)); border-top: 0; }
.bump-detail-body { padding: 16px 20px; border-left: 3px solid var(--primary-light, #818cf8); }
.bump-detail-loading { color: var(--text-secondary, #888); font-style: italic; padding: 8px 0; }
.bump-detail-error { color: #ef4444; padding: 8px 12px; background: rgba(239,68,68,0.08); border-radius: 6px; font-size: 0.85rem; }
.bump-detail-note { color: var(--text-secondary, #888); padding: 8px 12px; background: rgba(99,102,241,0.06); border-radius: 6px; margin-top: 10px; font-size: 0.85rem; font-style: italic; }

.bump-sha-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85rem; }
.bump-sha-strip code { padding: 3px 8px; background: var(--bg-overlay, rgba(0,0,0,0.06)); border-radius: 4px; }
.bump-sha-strip .bump-arrow { color: var(--text-muted); }

.bump-stats-strip { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; background: var(--bg-overlay, rgba(0,0,0,0.04)); border-radius: 8px; }
.bump-stat { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.bump-stat-label { font-size: 0.7rem; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.04em; }
.bump-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #eee); }
.bump-stat-na { color: var(--text-muted, #888); font-weight: 400; }

.bump-pr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .bump-pr-list { grid-template-columns: 1fr; } }
.bump-pr-cat { background: var(--bg-overlay, rgba(0,0,0,0.04)); border-radius: 6px; padding: 10px 12px; }
.bump-pr-cat h5 { margin: 0 0 8px; font-size: 0.78rem; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.bump-pr-count { background: var(--primary-light, #818cf8); color: white; padding: 1px 8px; border-radius: 8px; font-size: 0.65rem; font-weight: 700; }
.bump-pr-cat ul { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; }
.bump-pr-cat li { padding: 4px 0; font-size: 0.78rem; line-height: 1.4; border-bottom: 1px dashed var(--card-border, rgba(255,255,255,0.05)); }
.bump-pr-cat li:last-child { border-bottom: none; }
.bump-pr-author { color: var(--text-secondary, #888); font-size: 0.72rem; }
.bump-pr-more { color: var(--text-muted, #888); font-style: italic; font-size: 0.72rem; }

.bump-history-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .bump-history-container { grid-template-columns: 1fr; } }
.bump-history-section { background: var(--bg-overlay, rgba(0,0,0,0.04)); border-radius: 8px; padding: 12px 16px; }
.bump-history-section h4 { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-primary, #eee); display: flex; align-items: center; gap: 8px; }
.bump-history-loading { font-size: 0.7rem; color: var(--text-muted, #888); font-weight: 400; font-style: italic; }
.bump-history-list { display: flex; flex-direction: column; gap: 4px; }
.bump-history-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; padding: 4px 0; }
.bump-history-time { color: var(--text-secondary, #888); font-size: 0.72rem; min-width: 70px; }
.bump-history-title { color: var(--text-primary, #eee); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bump-history-empty { color: var(--text-muted, #888); font-style: italic; font-size: 0.78rem; }
.bump-tag { font-size: 0.6rem; padding: 1px 6px; border-radius: 8px; font-weight: 700; }
.bump-tag-merged { background: rgba(168,85,247,0.18); color: #c084fc; border: 1px solid rgba(168,85,247,0.45); }
.bump-tag-open { background: rgba(34,197,94,0.18); color: #22c55e; border: 1px solid rgba(34,197,94,0.45); }

/* ===== PR Insights (#30) ===== */
.pri-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pri-controls label { color: var(--text-secondary, #888); font-size: 0.85rem; font-weight: 500; }
.pri-controls select {
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Stat tile row — used at the top of every tab so they all feel like
   siblings. Same visual language as PR Insights / Issues which the team
   liked. `.pri-tiles` retained as alias for existing markup. */
.page-stats, .pri-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3, 14px);
    margin-bottom: var(--space-5, 20px);
}
@media (max-width: 900px) {
    .page-stats, .pri-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .page-stats, .pri-tiles { grid-template-columns: 1fr; }
}
.page-stat {
    padding: var(--space-4, 16px) var(--space-4, 18px);
    background: var(--card-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--card-border, rgba(255,255,255,0.06));
    border-radius: var(--radius-lg, 10px);
    border-left: 3px solid var(--primary-light, #818cf8);
    position: relative;
}
.page-stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
}
.page-stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.page-stat-sub {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.page-stat-good { }
.page-stat-warn { }
.page-stat-bad  { }
.page-stat-neutral { border-left-color: var(--text-muted, #6b7280); }

/* Single-row tab summary bar — replaces the 4-tile page-stats grid on tabs
   where four independent metrics added little value (Multi-Arch, CI Nightly,
   Sanitizers). One status sentence + one sub-line + one drill-in chip. */
.tab-summary-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 14px) var(--space-5, 20px);
    background: var(--card-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--card-border, rgba(255,255,255,0.06));
    border-radius: var(--radius-lg, 10px);
    border-left: 4px solid var(--text-muted, #6b7280);
    margin-bottom: var(--space-5, 20px);
}
.tab-summary-good    { }
.tab-summary-warn    { }
.tab-summary-bad     { }
.tab-summary-neutral { border-left-color: var(--text-muted, #6b7280); }

.tab-summary-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
}
.tab-summary-icon i { width: 18px; height: 18px; }
.tab-summary-good .tab-summary-icon { color: #10b981; background: rgba(16,185,129,0.10); }
.tab-summary-warn .tab-summary-icon { color: #f59e0b; background: rgba(245,158,11,0.10); }
.tab-summary-bad  .tab-summary-icon { color: #ef4444; background: rgba(239,68,68,0.10); }

.tab-summary-body {
    flex: 1 1 auto;
    min-width: 0;
}
.tab-summary-headline {
    font-size: var(--text-base, 1rem);
    font-weight: var(--fw-semibold, 600);
    color: var(--text-primary);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tab-summary-sub {
    margin-top: 4px;
    font-size: var(--text-sm, 0.85rem);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.tab-summary-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--text-muted, #6b7280);
    cursor: help;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
    outline: none;
}
.tab-summary-info i { width: 14px; height: 14px; }
.tab-summary-info:hover, .tab-summary-info:focus { opacity: 1; color: var(--primary-light, #818cf8); }

.tab-summary-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md, 8px);
    background: rgba(99,102,241,0.10);
    color: var(--primary-light, #818cf8);
    font-size: var(--text-sm, 0.85rem);
    font-weight: var(--fw-semibold, 600);
    text-decoration: none;
    border: 1px solid rgba(99,102,241,0.25);
    transition: background 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
}
.tab-summary-action:hover {
    background: rgba(99,102,241,0.18);
    color: #fff;
}
.tab-summary-action i { width: 14px; height: 14px; }
.tab-summary-action:active { transform: translateY(1px); }

@media (max-width: 700px) {
    .tab-summary-bar {
        flex-wrap: wrap;
    }
    .tab-summary-action {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.pri-tile {
    padding: 16px 18px;
    background: var(--card-bg, var(--bg-elevated, rgba(255,255,255,0.03)));
    border: 1px solid var(--card-border, rgba(255,255,255,0.06));
    border-radius: 10px;
    border-left: 3px solid var(--primary-light, #818cf8);
    display: block;
    text-decoration: none;
    color: inherit;
    /* Establish a stacking context so the absolutely-positioned cover link
       sits above the tile background but below interactive child links. */
    position: relative;
}
.pri-tile-link {
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.pri-tile-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    border-color: rgba(129,140,248,0.5);
}
/* Invisible "cover link" overlay — makes the entire tile clickable without
   needing to wrap the tile content in an <a> (which causes nested-anchor bugs
   when sub-rows have their own real links). z-index 1 so it sits above the
   plain tile background but below explicitly-positioned links. */
.pri-tile-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
/* Inline links inside a tile (e.g. "older than 30d") — bumped above the
   cover link so they receive their own clicks, not the tile's. */
.pri-tile-inline-link {
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(129,140,248,0.5);
}
.pri-tile-inline-link:hover {
    text-decoration-color: var(--primary-light, #818cf8);
}
.pri-tile-ext {
    font-size: 0.75rem;
    opacity: 0.55;
    margin-left: 4px;
}
.pri-tile-good { }
.pri-tile-warn { }
.pri-tile-bad  { }
.pri-tile-label { font-size: 0.7rem; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 6px; }
.pri-tile-value { font-size: 1.7rem; font-weight: 800; color: var(--text-primary, #eee); line-height: 1.1; }
.pri-tile-sub { margin-top: 4px; font-size: 0.72rem; color: var(--text-secondary, #888); }

.pri-recent-merged {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 480px;
    overflow-y: auto;
}
.pri-recent-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 5px;
    transition: background 0.1s ease;
    font-size: 0.88rem;
    flex-wrap: wrap;
}
.pri-recent-row:hover {
    background: rgba(255,255,255,0.03);
}
.pri-recent-pr {
    color: var(--primary-light, #818cf8);
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 1px 6px;
    background: rgba(129,140,248,0.1);
    border-radius: 3px;
    flex-shrink: 0;
}
.pri-recent-pr:hover {
    background: rgba(129,140,248,0.22);
}
.pri-recent-title {
    flex: 1;
    min-width: 200px;
    color: var(--text-primary, #ddd);
}
.pri-recent-meta {
    color: var(--text-secondary, #aaa);
    font-size: 0.78rem;
    white-space: nowrap;
}
.pri-recent-meta a {
    color: inherit;
    text-decoration: none;
}
.pri-recent-meta a:hover {
    color: var(--primary-light, #818cf8);
}
.pri-recent-meta code {
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}
.pri-recent-empty {
    padding: 16px;
    color: var(--text-muted, #666);
    font-style: italic;
    text-align: center;
}

.pri-chart-wrap {
    position: relative;
    height: 280px;
    margin-top: 8px;
}
.pri-error {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 6px;
    color: #ef4444;
}

.trend-panel {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--bg-overlay, rgba(0,0,0,0.04));
    border: 1px solid var(--card-border, rgba(255,255,255,0.06));
    border-radius: 8px;
}
.trend-section { margin-bottom: 10px; }
.trend-section:last-child { margin-bottom: 0; }
.trend-section h4 { margin: 0 0 6px; font-size: 0.78rem; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.trend-rows { display: flex; flex-direction: column; gap: 4px; }
.trend-row { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; padding: 3px 6px; border-radius: 4px; }
.trend-row:hover { background: rgba(99,102,241,0.06); }
.trend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-key { color: var(--text-secondary, #888); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.72rem; }
.trend-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 0.62rem; font-weight: 700; line-height: 1.6; flex-shrink: 0; }
.trend-tag.trend-new   { background: rgba(239,68,68,0.18); color: #ef4444; border: 1px solid rgba(239,68,68,0.45); }
.trend-tag.trend-still { background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.45); }
.trend-tag.trend-flake { background: rgba(168,85,247,0.18); color: #c084fc; border: 1px solid rgba(168,85,247,0.45); }
.trend-tag.trend-fixed { background: rgba(16,185,129,0.18); color: #10b981; border: 1px solid rgba(16,185,129,0.45); }
.trend-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.trend-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 0.65rem; font-weight: 700; border-radius: 3px; }
.trend-dot.trend-pass { background: rgba(16,185,129,0.25); color: #10b981; }
.trend-dot.trend-fail { background: rgba(239,68,68,0.25); color: #ef4444; }
.trend-dot.trend-run  { background: rgba(99,102,241,0.25); color: #818cf8; }
.trend-dot.trend-skip { background: rgba(148,163,184,0.20); color: var(--text-muted, #94a3b8); }
.trend-dot.trend-na   { background: transparent; color: var(--text-muted, #94a3b8); }
.trend-legend { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--card-border, rgba(255,255,255,0.08)); font-size: 0.68rem; color: var(--text-secondary, #888); }
.trend-legend strong { color: var(--text-primary, #eee); }

.tab-content > header > h1,
.tab-content > header h1.tab-title {
    font-size: 1.8rem;
    margin: 0;
}

/* Summary tab: visual rhythm between stacked sections. The actual section
   chrome (.dashboard-section) and content rows (.pri-tile, .pri-recent-row)
   are reused from PR Insights so the look matches the rest of the app. */
.summary-section + .summary-section {
    margin-top: 6px;
}
.summary-section h2 .rn-preview-count {
    background: rgba(255, 255, 255, 0.06);
}
.summary-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 480px;
    overflow-y: auto;
}

/* ===== AI Failure Insights ===== */
.insights-h3 {
    font-size: 0.95rem;
    color: var(--text-primary, #eee);
    margin: 14px 0 8px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.insights-h3 i { font-size: 0.85rem; color: var(--text-secondary, #888); }

/* Narrative callout: highlighted band at the top of the section */
.insights-narrative {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(129,140,248,0.08), rgba(34,211,238,0.04));
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 6px;
    margin-bottom: 6px;
}
.insights-narrative-body {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-primary, #ddd);
    font-style: italic;
}
.insights-narrative-source {
    font-size: 0.7rem;
    color: var(--text-secondary, #888);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Two-column grid for the arch / workflow pivots */
.insights-pivots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 6px;
}
@media (max-width: 900px) {
    .insights-pivots-grid { grid-template-columns: 1fr; gap: 16px; }
}

.insights-bar-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.insights-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    padding: 5px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.insights-bar:hover {
    background: rgba(255, 255, 255, 0.03);
}
.insights-bar-rank {
    flex: 0 0 18px;
    text-align: right;
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    opacity: 0.6;
}
.insights-bar-label {
    flex: 0 0 32%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.insights-bar-track {
    flex: 1;
    height: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.insights-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Severity tiers — set on .insights-bar; cascade picks the fill color.
   The eye reads "where the heat is concentrated" instantly: the top
   one or two rows are deep red, the middle band is amber, the long
   tail is muted gray. Replaces the previous all-red wall. */
.insights-bar.tier-critical .insights-bar-fill {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25) inset;
}
.insights-bar.tier-warning  .insights-bar-fill {
    background: linear-gradient(90deg, #f97316, #fb923c);
}
.insights-bar.tier-notable  .insights-bar-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    opacity: 0.85;
}
.insights-bar.tier-muted    .insights-bar-fill {
    background: linear-gradient(90deg, #64748b, #94a3b8);
    opacity: 0.55;
}
.insights-bar-count {
    flex: 0 0 78px;
    text-align: right;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--text-primary, #eee);
}
.insights-bar-count strong {
    font-weight: 600;
}
.insights-bar-share {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    font-size: 0.72rem;
    margin-left: 2px;
}
/* Bottom tier rows fade their numbers a bit too, so the visual
   hierarchy is consistent: critical = bold, muted = quiet. */
.insights-bar.tier-critical .insights-bar-count strong { color: #f87171; }
.insights-bar.tier-warning  .insights-bar-count strong { color: #fb923c; }
.insights-bar.tier-muted    .insights-bar-count           { opacity: 0.65; }

/* "Needs attention" cards */
.insights-attention-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Failures tab — per-category section subtitle (workflow chips) */
.failures-cat-meta code {
    background: rgba(255,255,255,0.04);
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
}

/* Failures tab — header window dropdown should align with the rest of the
   header row (refresh button, last-updated, etc.) */
#failures-window-select {
    margin-right: 16px;
}

/* Summary tab — make the failure-insights teaser card visually clickable */
#failure-insights-teaser {
    transition: border-color 0.15s ease, background 0.15s ease;
}
#failure-insights-teaser:hover {
    border-color: rgba(129,140,248,0.4);
    background: rgba(129,140,248,0.03);
}
.insights-attention-card {
    padding: 10px 14px;
    background: var(--card-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--card-border, rgba(255,255,255,0.06));
    border-left: 3px solid var(--text-secondary, #888);
    border-radius: 6px;
}
.insights-sev-high  { background: rgba(239,68,68,0.04); }
.insights-sev-medium{ background: rgba(245,158,11,0.04); }
.insights-sev-low   { background: rgba(16,185,129,0.04); }
.insights-attention-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.insights-attention-reason {
    font-size: 0.8rem;
    color: var(--text-secondary, #aaa);
    margin-left: 38px;
}
@media (max-width: 600px) {
    .insights-attention-reason { margin-left: 0; }
    .insights-bar { gap: 8px; padding: 4px 4px; }
    .insights-bar-rank { display: none; }
    .insights-bar-label { flex: 0 0 38%; }
    .insights-bar-count { flex: 0 0 64px; font-size: 0.72rem; }
}
@media (max-width: 768px) {
    .tab-content > header > h1,
    .tab-content > header h1.tab-title {
        font-size: 1.4rem;
    }
}
.cat-toggle-link:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.6);
}
.cat-toggle-link:active {
    transform: translateY(1px);
}

/* Job sub-header row — vertical text. Pure 90° rotation packs the most
   columns into the smallest horizontal footprint. Smart label
   shortening (_shortenJobLabel in app.js) strips redundant prefixes
   like "Build linux" so unique tokens lead.

   Horizontal alignment: the narrow rotated strip is centered over the
   status-dot column below it. Inner span is inline-block (not block) so
   text-align:center on the parent th can position the strip; otherwise a
   block span fills the cell width and the rotated text anchors at the
   left edge — visibly off-center from the dots below. */
.ci-hud-job-header-row th.col-job-header {
    /* Tightened from 120px → 88px so the rotated label sits close to
       the data column it describes. Old height left ~40-50px of empty
       cell above the bottom-aligned text, which looked like a
       mysterious dark gap when a workflow was expanded with only
       arch sub-headers (and no taller neighbour). 88px still fits
       the longest gfx token (`GFX1153`, `gfx94X-dcgpu` shortened
       to `GFX94X`) at 0.68rem without clipping. */
    padding: 4px 0;
    height: 88px;
    min-width: 32px;
    max-width: 36px;
    width: 34px;
    vertical-align: bottom;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.ci-hud-job-header-row th.col-job-header .job-header-text {
    display: inline-block;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 80px;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: 0.3px;
    transition: color 0.15s ease;
}
.ci-hud-job-header-row th.col-job-header:hover .job-header-text {
    color: var(--primary-light, #818cf8);
}

/* Job status dot cells */
.col-job-cell {
    padding: 2px !important;
    text-align: center;
    min-width: 32px;
    max-width: 36px;
    width: 34px;
    border-left: 1px solid rgba(255,255,255,0.03);
}
.job-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.1s;
}
.job-dot:hover {
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    z-index: 5;
    position: relative;
}
.job-dot.job-pass { background: #22c55e; color: #fff; }
.job-dot.job-fail { background: #ef4444; color: #fff; }
.job-dot.job-run  { background: #f59e0b; color: #fff; animation: pulse-dot 1.5s infinite; }
.job-dot.job-na   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.25); }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Light theme */
[data-theme="light"] .col-cat-header:hover { background: rgba(99, 102, 241, 0.08) !important; }
[data-theme="light"] .ci-hud-job-header-row th.col-job-header { border-left-color: rgba(0,0,0,0.06); }
[data-theme="light"] .col-job-cell { border-left-color: rgba(0,0,0,0.04); }
[data-theme="light"] .job-dot.job-na { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.2); }

/* ============= Full Responsive Overhaul ============= */

/* Ultra-wide screens (2K, 4K, ultrawide monitors) */
@media (min-width: 1921px) {
    .container { padding: 24px 48px; }
    .global-header { padding: 12px 48px; }
    .dashboard-section { padding: 24px; }
    /* h1 sizing controlled by tokens */
    .ci-hud-table { font-size: var(--text-sm); }
    .ci-hud-table thead th { padding: 14px 16px; font-size: var(--text-xs); }
    .status-badge { font-size: var(--text-sm); padding: 6px 12px; }
    .tab-button { font-size: var(--text-md); padding: 12px 24px; }
}

@media (min-width: 2560px) {
    .container { padding: 32px 64px; }
    .global-header { padding: 14px 64px; }
    .tab-button { font-size: var(--text-base); padding: 14px 28px; }
    .ci-hud-table { font-size: var(--text-md); }
}

/* Mobile: ensure all tables scroll horizontally */
@media (max-width: 768px) {
    .table-container,
    .horizontal-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        max-width: 100vw;
    }

    .ci-hud-table,
    .status-table,
    .pytorch-table,
    .issues-table {
        min-width: 600px;
    }

    .ci-hud-table thead th.col-sha { min-width: 60px; width: 60px; }
    .ci-hud-table thead th.col-pr { min-width: 40px; width: 40px; }
    .ci-hud-table thead th.col-msg { min-width: 120px; width: 120px; }
    .ci-hud-table thead th.col-auth { min-width: 70px; width: 70px; }
    .ci-hud-table thead th.col-time { min-width: 60px; width: 60px; }

    .ci-hud-table td.col-msg { max-width: 120px; }
    .ci-hud-table td.col-auth { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
    .author-avatar { display: none; }

    .col-cat-header { font-size: 0.6rem !important; padding: 6px 4px !important; }
    .cat-badge { font-size: 0.65rem; padding: 2px 5px; }

    .col-job-header { min-width: 26px !important; max-width: 28px !important; width: 27px !important; }
    .col-job-cell { min-width: 26px !important; max-width: 28px !important; width: 27px !important; }
    .job-dot { width: 18px; height: 18px; font-size: 0.6rem; }
    .ci-hud-job-header-row th.col-job-header { height: 90px; }
    .ci-hud-job-header-row th.col-job-header .job-header-text { font-size: 0.55rem; max-height: 85px; }

    .ci-hud-expanded-grid { grid-template-columns: 1fr !important; }
    .expanded-section { padding: 8px !important; }
    .expanded-items { gap: 4px !important; }
    .expanded-item { font-size: 0.7rem !important; padding: 3px 6px !important; }
}

/* Small phones */
@media (max-width: 480px) {
    .tab-navigation { gap: 4px; padding: 6px; }
    .tab-button { padding: 6px 8px; font-size: 0.65rem; }
    .container { padding: 6px 8px; }
    .dashboard-section { padding: 8px; margin-bottom: 12px; }
    .ci-hud-table { font-size: 0.7rem; }
    .ci-hud-table thead th { padding: 6px 4px; font-size: 0.6rem; }

    .issues-filters,
    .ci-hud-filters { flex-direction: column; gap: 8px; }
    .filter-group { width: 100%; }
    .filter-group select,
    .filter-group input { width: 100%; min-width: 0; }

    .ci-hud-pagination-btns { flex-wrap: wrap; gap: 4px; }
    .ci-hud-page-btn { font-size: 0.7rem; padding: 6px 10px; }
    .ci-hud-page-nums { gap: 2px; }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .container { padding: 16px 20px; }
    .ci-hud-table td.col-msg { max-width: 200px; }
}

/* ========================================
   Issues Pivot (Arch × Torch/JAX version)
   ======================================== */

#issues-pivot-section .section-subtle {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    font-weight: normal;
    margin-left: 4px;
}

.pivot-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 8px 0 14px 0;
}

.pivot-ecosystem-switch {
    display: inline-flex;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 8px;
    overflow: hidden;
}

.pivot-eco-btn {
    background: transparent;
    border: none;
    color: inherit;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.pivot-eco-btn + .pivot-eco-btn {
    border-left: 1px solid rgba(139, 92, 246, 0.25);
}

.pivot-eco-btn:hover {
    background: rgba(99, 102, 241, 0.12);
}

.pivot-eco-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
}

.pivot-state-toggle,
.pivot-platform-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.pivot-state-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.pivot-platform-filter select {
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.88rem;
}

.pivot-hint {
    color: var(--text-secondary, #888);
    font-size: 0.8rem;
    margin-left: auto;
    font-style: italic;
}

/* Pivot table */
.pivot-table {
    width: auto;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.pivot-table thead th {
    background: var(--table-header-bg, #1a1a2e);
    color: var(--table-header-text, #fff);
    padding: 10px 14px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    white-space: nowrap;
}

.pivot-table thead .pivot-corner,
.pivot-table tbody .pivot-row-label,
.pivot-table .sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--table-header-bg, #1a1a2e);
    color: var(--table-header-text, #fff);
    text-align: left !important;
    padding-right: 18px !important;
    white-space: nowrap;
}

.pivot-table tbody .pivot-row-label {
    font-weight: 600;
    background: rgba(79, 70, 229, 0.1);
}

.pivot-col-total {
    margin-top: 2px;
    font-size: 0.7rem;
    opacity: 0.75;
    font-weight: 400;
}

.pivot-table td.pivot-cell {
    text-align: center;
    padding: 0;
    vertical-align: middle;
    border-bottom: 1px solid rgba(127, 127, 127, 0.1);
}

.pivot-table td.pivot-empty {
    color: var(--text-secondary, #888);
    opacity: 0.4;
    padding: 10px 14px;
}

.pivot-cell-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 44px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    color: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

.pivot-cell-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.35) 100%);
    border-color: rgba(139, 92, 246, 0.7);
    transform: translateY(-1px);
}

.pivot-cell-btn.ghost {
    background: transparent;
    border-color: rgba(127, 127, 127, 0.3);
    opacity: 0.8;
}

.pivot-cell-btn.ghost:hover {
    background: rgba(127, 127, 127, 0.1);
    opacity: 1;
}

.pivot-table .pivot-unknown .pivot-cell-btn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.4);
}

.pivot-table .pivot-unknown .pivot-cell-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.15) 100%);
    border-color: rgba(245, 158, 11, 0.6);
}

.pivot-table td.pivot-row-total {
    text-align: center;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--text-secondary, #888);
    background: rgba(127, 127, 127, 0.05);
}

.pivot-table .pivot-totals-row th,
.pivot-table .pivot-totals-row td {
    background: rgba(79, 70, 229, 0.12) !important;
    border-top: 2px solid rgba(139, 92, 246, 0.4);
    font-weight: 600;
    padding: 10px 14px;
}

.pivot-table .pivot-grand-total {
    color: #8b5cf6;
    font-size: 1.05rem;
    text-align: center;
}

/* Drilldown panel */
.pivot-drilldown {
    margin-top: 16px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.05);
    overflow: hidden;
}

.pivot-drilldown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.25);
}

.pivot-drilldown-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.pivot-drilldown-count {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 6px;
    font-size: 0.9rem;
}

.pivot-drilldown-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
}

.pivot-drilldown-close:hover {
    background: rgba(127, 127, 127, 0.2);
}

.pivot-drilldown-body {
    padding: 12px 18px;
    max-height: 520px;
    overflow-y: auto;
}

.pivot-drilldown-empty {
    text-align: center;
    padding: 30px;
    color: var(--text-secondary, #888);
}

.pivot-drilldown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.pivot-drilldown-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary, #888);
    padding: 6px 8px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.pivot-drilldown-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.12);
    vertical-align: middle;
}

.pivot-drilldown-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

.pivot-issue-title {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pivot-issue-title a {
    color: inherit;
    text-decoration: none;
}

.pivot-issue-title a:hover {
    text-decoration: underline;
    color: #8b5cf6;
}

.pivot-assignee-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pivot-assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(127, 127, 127, 0.3);
    display: inline-block;
}

.pivot-assignee-more {
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    margin-left: 4px;
}

.pivot-assignee-none {
    color: var(--text-secondary, #888);
    opacity: 0.5;
}

/* Status pills */
.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-pill.closed         { background: rgba(127, 127, 127, 0.2); color: #9ca3af; }
.status-pill.triage         { background: rgba(88, 93, 215, 0.2);   color: #a5b4fc; }
.status-pill.assessed       { background: rgba(230, 216, 19, 0.2);  color: #fbbf24; }
.status-pill.fix-submitted  { background: rgba(117, 217, 126, 0.2); color: #34d399; }
.status-pill.unlabeled      { background: rgba(239, 68, 68, 0.15);  color: #f87171; }

/* Light theme tweaks for pivot */
[data-theme="light"] .pivot-table thead th,
[data-theme="light"] .pivot-table .sticky-left {
    background: #eef2ff;
    color: #1e1b4b;
}

[data-theme="light"] .pivot-table tbody .pivot-row-label {
    background: #f5f3ff;
}

[data-theme="light"] .pivot-drilldown {
    background: #fafafa;
}

/* ============================================================================
   Mobile dropdown safety net — placed at the end of the file so it wins
   over earlier base rules (mobile overrides defined earlier in this file
   were being defeated by `.ci-run-dropdown { min-width: 650px }` at L2862,
   and inline `style="min-width:400px"` on a few <select>s).

   With !important, dropdowns and their containers are guaranteed never to
   overflow the viewport on small screens regardless of inline styles or
   source-order conflicts.
   ============================================================================ */
@media (max-width: 768px) {
    .ci-run-dropdown,
    .version-dropdown,
    select[id$="-select"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* Header-info containers on tab pages — let children shrink + wrap */
    .header-info {
        min-width: 0;
        flex-wrap: wrap;
        width: 100%;
    }
    .header-info > * {
        max-width: 100%;
        min-width: 0;
    }
    /* Section-level header-info (Multi-Arch Release pipeline section,
       CI Nightly run-selector, etc.) should stack vertically on mobile */
    .dashboard-section .header-info {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    /* Multi-Arch CI filter bar — keep filter pills from spilling sideways */
    .ci-hud-filters {
        flex-wrap: wrap;
        gap: 8px;
    }
    .ci-hud-filters .filter-group {
        min-width: 0;
        flex: 1 1 auto;
    }
    .ci-hud-filters .filter-group select,
    .ci-hud-filters .filter-group input {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================================
   Release History tab — version-wise rollup of the 7 nightly release pipelines
   ============================================================================
   Most of the row layout reuses existing .ci-hud-table / .ci-hud-row patterns
   (sticky-left cols + clickable expand-rows). Only the bits below are
   specific to this tab: the 2-line workflow cell + the per-row Downloads
   button + the floating downloads modal.

   Why we don't re-use #release-* selectors from the existing release tab:
     - They scope to #releases-tab (different DOM container).
     - The Release Nightly tab shows ONE date in detail; this tab shows N dates
       at a glance, so layout priorities differ (compactness vs detail).
*/

#release-history-tab .release-history-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

#release-history-tab .release-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--table-header-bg);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 12px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--card-border);
}

#release-history-tab .release-history-table thead th.col-version,
#release-history-tab .release-history-table thead th.col-date,
#release-history-tab .release-history-table thead th.col-time,
#release-history-tab .release-history-table thead th.col-age,
#release-history-tab .release-history-table thead th.col-commit {
    text-align: left;
    padding-left: 14px;
}

/* Per-version row — clickable to expand into the 7 detail tables */
#release-history-tab .rh-row {
    cursor: pointer;
    transition: background 120ms ease;
}
#release-history-tab .rh-row:hover {
    background: var(--row-hover-bg, rgba(99, 102, 241, 0.04));
}
#release-history-tab .rh-row.is-expanded {
    background: rgba(99, 102, 241, 0.08);
}
[data-theme="light"] #release-history-tab .rh-row.is-expanded {
    background: rgba(99, 102, 241, 0.06);
}

#release-history-tab .rh-row td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
    white-space: nowrap;
}

#release-history-tab .rh-row td.rh-cell-version {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}
#release-history-tab .rh-row td.rh-cell-date {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
#release-history-tab .rh-row td.rh-cell-time,
#release-history-tab .rh-row td.rh-cell-age {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
#release-history-tab .rh-row td.rh-cell-commit a {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--accent-light);
    text-decoration: none;
}
#release-history-tab .rh-row td.rh-cell-commit a:hover {
    text-decoration: underline;
}

/* The expand caret column — narrow, just visual affordance */
#release-history-tab .rh-row td.rh-cell-caret {
    width: 28px;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    user-select: none;
}
#release-history-tab .rh-row.is-expanded td.rh-cell-caret {
    color: var(--text-primary);
}

/* The 7 per-workflow cells. Two-line layout: top = status + counts, bottom
   = arch / job count breakdown. Center-aligned so the row reads as a
   horizontal "status strip". */
#release-history-tab .rh-row td.rh-cell-wf {
    text-align: center;
    padding: 6px 8px;
    min-width: 92px;
}
#release-history-tab .rh-wf-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    line-height: 1.2;
    border: 1px solid transparent;
    background: var(--bg-elevated);
    transition: filter 120ms ease, transform 120ms ease;
    cursor: default;
}
#release-history-tab .rh-row:hover .rh-wf-pill { filter: brightness(1.04); }

#release-history-tab .rh-wf-pill.is-pass    { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #22c55e; }
#release-history-tab .rh-wf-pill.is-fail    { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.35); color: #f43f5e; }
#release-history-tab .rh-wf-pill.is-running { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #f59e0b; }
#release-history-tab .rh-wf-pill.is-na      { background: rgba(120, 120, 120, 0.06); border-color: rgba(120, 120, 120, 0.20); color: var(--text-muted); }

#release-history-tab .rh-wf-pill .rh-wf-icon { font-size: 0.95rem; font-weight: 700; }
#release-history-tab .rh-wf-pill .rh-wf-counts { font-size: 0.65rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Downloads button at the end of each row */
#release-history-tab .rh-row td.rh-cell-downloads {
    text-align: center;
    width: 130px;
}
#release-history-tab .rh-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-light);
    border: 1px solid rgba(99, 102, 241, 0.25);
    cursor: pointer;
    transition: background 120ms ease;
}
#release-history-tab .rh-download-btn:hover {
    background: rgba(99, 102, 241, 0.22);
}

/* Expanded row — colspan'd cell containing the 7 detail panels */
#release-history-tab .rh-expand-row td {
    background: var(--bg-base);
    padding: 16px 20px 24px;
    border-bottom: 2px solid var(--card-border);
}
#release-history-tab .rh-expand-section {
    margin-bottom: 24px;
}
#release-history-tab .rh-expand-section:last-child { margin-bottom: 0; }
#release-history-tab .rh-expand-section h4 {
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
#release-history-tab .rh-expand-section .rh-section-meta {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* The mini-tables inside the expanded section reuse pytorch-table /
   pytorch-test-full-table styles already defined elsewhere — we just
   ensure they don't blow out the row width. */
#release-history-tab .rh-expand-section table {
    font-size: 0.78rem;
    width: 100%;
    border-collapse: collapse;
}
#release-history-tab .rh-expand-section table th,
#release-history-tab .rh-expand-section table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}
#release-history-tab .rh-expand-section table th {
    background: var(--table-header-bg);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------------------
   Downloads modal/popover
   ----------------------------------------------------------------------------
   The modal markup uses .modal / .modal-backdrop / .modal-content /
   .modal-header / .modal-body / .modal-close. Until now ONLY the inner
   .release-downloads-modal-content was styled — the base classes had no
   rules at all, so when JS set display:flex the modal opened in normal
   document flow with no fixed positioning, no backdrop, no z-index. To
   the user it looked like "the download button does nothing" because the
   body content was simply pushed below the page (or invisible behind
   other elements). These base rules fix that: full-viewport overlay,
   click-out-to-close backdrop, centered card, proper close-X button. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    /* JS toggles between display:none (hidden) and display:flex (shown);
       we provide the centering rules so the .modal-content lands in the
       middle of the viewport regardless of body scroll position. */
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: modal-fade-in 0.18s ease;
}
.modal-content {
    position: relative;
    background: var(--card-bg, #1f2937);
    color: var(--text-primary, #e5e7eb);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55);
    max-width: 720px;
    width: min(720px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-slide-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-header {
    flex: 0 0 auto;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: var(--card-bg, #1f2937);
    background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
}
.modal-header h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.modal-body {
    flex: 1 1 auto;
    /* CRITICAL min-height:0 — same trick as the tree-view sidebar — lets
       this flex item shrink below content size so overflow:auto works. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px;
}
.modal-close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}
.modal-close:hover {
    color: var(--status-fail, #ef4444);
    background: rgba(239, 68, 68, 0.08);
}
@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modal-slide-up {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
[data-theme="light"] .modal-content {
    background: #fff;
    color: #1e293b;
    border-color: #e2e8f0;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .modal-header {
    background-color: #f8fafc;
    background-image: none;
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .modal-close:hover {
    background: rgba(239, 68, 68, 0.06);
}

.release-downloads-modal-content {
    max-width: 880px;
    width: min(880px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.release-downloads-modal-content .modal-body {
    overflow-y: auto;
    padding: 0 24px 20px;
}

#release-downloads-body .rd-section {
    margin-bottom: 20px;
}
#release-downloads-body .rd-section h4 {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
#release-downloads-body .rd-section .rd-section-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

#release-downloads-body table.rd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
#release-downloads-body table.rd-table th {
    background: var(--table-header-bg);
    text-align: left;
    padding: 6px 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
#release-downloads-body table.rd-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
}
#release-downloads-body table.rd-table td.rd-arch {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 600;
    color: var(--text-primary);
    width: 140px;
}
#release-downloads-body .rd-link,
#release-downloads-body .rd-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-light);
    border: 1px solid rgba(99, 102, 241, 0.25);
    text-decoration: none;
    cursor: pointer;
    margin-right: 4px;
}
#release-downloads-body .rd-link:hover,
#release-downloads-body .rd-copy:hover {
    background: rgba(99, 102, 241, 0.22);
}
#release-downloads-body .rd-link.is-secondary,
#release-downloads-body .rd-copy.is-secondary {
    background: rgba(120, 120, 120, 0.10);
    color: var(--text-secondary);
    border-color: rgba(120, 120, 120, 0.25);
}

#release-downloads-body .rd-snippet {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.74rem;
    background: var(--bg-elevated);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 6px 0 0;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* Multi-Arch Release - Nightly downloads modal — additional install-instruction
   widgets used by `_marRenderDownloadsBody`. The shared rd-* classes above
   handle the table-style sections; the cards + grids below are for the
   per-family pip-install grid. */
#release-downloads-body .rd-install-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
#release-downloads-body .rd-install-card {
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--bg-elevated, rgba(255,255,255,0.02));
}
#release-downloads-body .rd-install-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
#release-downloads-body .rd-install-card-head .rd-arch {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--primary-light, #818cf8);
}
#release-downloads-body .rd-install-card-head .rd-install-card-hw {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.2;
}
#release-downloads-body .rd-section-footer {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
#release-downloads-body .rd-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
#release-downloads-body .rd-link-list li {
    padding: 4px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
#release-downloads-body .rd-copy.is-tiny {
    padding: 1px 6px;
    font-size: 0.66rem;
}

#release-downloads-body .rd-checksum {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Confirmation toast for the "copied" state */
.rh-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.95);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: rhToastFade 2.2s ease forwards;
}
@keyframes rhToastFade {
    0%   { opacity: 0; transform: translate(-50%, 8px); }
    10%  { opacity: 1; transform: translate(-50%, 0); }
    85%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* ============================================================================
   Release History — visual overrides
   ============================================================================
   These rules supersede the earlier verbose-pill block (CSS source order).
   Goal: match CI HUD's compact `.cat-badge` style so the two tabs feel
   visually consistent, and reduce visual noise from "no run" cells.
   ============================================================================ */

/* Tighter row spacing — match CI HUD density */
#release-history-tab .rh-row td {
    padding: 5px 10px;
    line-height: 1.2;
}

/* Row tinting like CI HUD's repo-row-fail / repo-row-run */
#release-history-tab .rh-row.rh-row-fail { background: rgba(239, 68, 68, 0.05); }
#release-history-tab .rh-row.rh-row-fail:hover { background: rgba(239, 68, 68, 0.10); }
#release-history-tab .rh-row.rh-row-run { background: rgba(245, 158, 11, 0.05); }
#release-history-tab .rh-row.rh-row-run:hover { background: rgba(245, 158, 11, 0.10); }
#release-history-tab .rh-row:hover { background: rgba(99, 102, 241, 0.05); }
#release-history-tab .rh-row.is-expanded {
    background: var(--bg-overlay, rgba(99, 102, 241, 0.08));
    box-shadow: inset 3px 0 0 var(--accent-light);
}

/* Compact single-line pill matching .cat-badge */
#release-history-tab .rh-wf-pill {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1.4;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 44px;
    transition: background 120ms ease;
    cursor: pointer;
}
#release-history-tab .rh-wf-pill .rh-wf-icon {
    font-size: 0.78rem;
    font-weight: 700;
}
#release-history-tab .rh-wf-pill .rh-wf-counts {
    font-size: 0.66rem;
    font-weight: 500;
    color: inherit;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}
#release-history-tab .rh-wf-pill.is-pass    { background: rgba(16, 185, 129, 0.15); color: #10b981; }
#release-history-tab .rh-wf-pill.is-fail    { background: rgba(239, 68, 68, 0.15);  color: #ef4444; }
#release-history-tab .rh-wf-pill.is-running { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* "No run" cells get the lightest possible visual treatment so they don't
   compete with real signals. Just a subtle dot + muted text. */
#release-history-tab .rh-wf-pill.is-na {
    background: transparent;
    color: var(--text-muted);
    font-weight: 400;
    opacity: 0.55;
}
#release-history-tab .rh-wf-pill.is-na .rh-wf-counts { display: none; }
#release-history-tab .rh-wf-pill.is-na .rh-wf-icon { font-size: 0.92rem; opacity: 0.7; }

#release-history-tab .rh-row:hover .rh-wf-pill:not(.is-na) {
    filter: brightness(1.06);
}

/* Tighter cell metric */
#release-history-tab .rh-row td.rh-cell-wf {
    text-align: center;
    padding: 4px 8px;
    min-width: 78px;
}

/* Caret: make hover state obvious so the click affordance is clear */
#release-history-tab .rh-row td.rh-cell-caret {
    width: 26px;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 120ms ease, transform 120ms ease;
}
#release-history-tab .rh-row:hover td.rh-cell-caret { color: var(--accent-light); }
#release-history-tab .rh-row.is-expanded td.rh-cell-caret { color: var(--accent-light); }

/* Downloads button — slightly compact, fits the new row height */
#release-history-tab .rh-download-btn {
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Expanded row: match CI HUD's expand-row treatment exactly */
#release-history-tab .rh-expand-row td {
    background: var(--bg-overlay, rgba(0, 0, 0, 0.02));
    padding: 16px 20px 22px !important;
    border-bottom: 2px solid var(--card-border);
}
[data-theme="light"] #release-history-tab .rh-expand-row td {
    background: #f8fafc;
}

/* Status badges inside expanded mini-tables — keep CI HUD scale */
#release-history-tab .rh-expand-section .status-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
    line-height: 1.4;
}

/* ============================================================================
   Release History — collapsible expanded sections
   ============================================================================
   Each of the 7 workflow detail panels inside a row's expanded view is
   independently collapsible so a user can focus on one pipeline (e.g. just
   the PyTorch wheels matrix) without scrolling past the others.
   ============================================================================ */

#release-history-tab .rh-expand-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.74rem;
    color: var(--text-muted);
}
#release-history-tab .rh-expand-controls-label {
    font-weight: 600;
    color: var(--text-secondary);
}
#release-history-tab .rh-expand-mini-btn {
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.10);
    color: var(--accent-light);
    border: 1px solid rgba(99, 102, 241, 0.22);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}
#release-history-tab .rh-expand-mini-btn:hover {
    background: rgba(99, 102, 241, 0.20);
}
#release-history-tab .rh-expand-controls-hint {
    margin-left: auto;
    font-style: italic;
    opacity: 0.85;
}

#release-history-tab .rh-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 120ms ease;
    border-left: 3px solid transparent;
}
#release-history-tab .rh-section-header:hover {
    background: rgba(99, 102, 241, 0.06);
}
#release-history-tab .rh-section-header.is-pass { border-left-color: #10b981; }
#release-history-tab .rh-section-header.is-fail { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.04); }
#release-history-tab .rh-section-header.is-fail:hover { background: rgba(239, 68, 68, 0.10); }
#release-history-tab .rh-section-header.is-run  { border-left-color: #f59e0b; }
#release-history-tab .rh-section-header.is-empty {
    cursor: default;
    color: var(--text-muted);
    font-weight: 500;
    border-left-color: transparent;
    opacity: 0.65;
}
#release-history-tab .rh-section-header.is-empty:hover { background: transparent; }

#release-history-tab .rh-section-caret {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.76rem;
}
#release-history-tab .rh-section-header:not(.is-empty):hover .rh-section-caret {
    color: var(--accent-light);
}
#release-history-tab .rh-section-empty-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}
#release-history-tab .rh-section-stats-inline {
    margin-left: auto;
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-weight: 500;
}

#release-history-tab .rh-expand-section.is-collapsed .rh-section-body {
    display: none;
}

/* Smooth-ish opening — no JS animation but a tiny fade keeps it from feeling
   like a hard pop when toggling sections. */
#release-history-tab .rh-section-body {
    animation: rhSectionFade 140ms ease;
}
@keyframes rhSectionFade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   Release History — final override pass
   ============================================================================
   Earlier rules built a parallel visual system (`.rh-row`, `.rh-wf-pill`,
   etc.) that diverged from CI HUD. The renderer now emits CI-HUD class
   names directly (`.repo-ci-row`, `.cat-badge`, `.sticky-col`, `.col-cat`)
   so the row, hover, expand, and badge styles inherit automatically.
   The block below is just the bits that CAN'T be inherited:
     - the Downloads button styling inside a `.col-cat` cell
     - the per-section collapsible behavior inside the expanded panel
     - section-header tinting (CI HUD doesn't have sub-sections inside
       its expand row, so this is genuinely Release-History-specific)
   ============================================================================ */

/* The Downloads cell uses .col-cat for column sizing but the badge is a
   button (clickable, doesn't link). Override only what's different. */
#release-history-tab .rh-download-btn.cat-badge {
    border: 1px solid rgba(99, 102, 241, 0.30);
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-light);
    cursor: pointer;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 86px;
    transition: background 120ms ease, transform 120ms ease;
}
#release-history-tab .rh-download-btn.cat-badge:hover {
    background: rgba(99, 102, 241, 0.22);
    transform: translateY(-1px);
}

/* Stop earlier .rh-row rules from overriding CI HUD's row treatment.
   These DELETE the prior custom styles by resetting them. */
#release-history-tab .repo-ci-row td {
    /* let CI HUD's row padding from .ci-hud-table take effect */
}

/* Caret indicator on the leftmost sticky column when row is expanded */
#release-history-tab .repo-ci-row.expanded td.col-sha::before {
    content: '▾';
    display: inline-block;
    width: 12px;
    margin-right: 4px;
    color: var(--accent-light);
    font-size: 0.78rem;
}
#release-history-tab .repo-ci-row:not(.expanded) td.col-sha::before {
    content: '▸';
    display: inline-block;
    width: 12px;
    margin-right: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ============================================================================
   Release History — column-expansion overrides
   ============================================================================
   We now mirror CI HUD's column-expand model exactly (no row-expand). Most
   styling comes free via .col-cat-header / .col-job-cell / .job-dot etc.
   These overrides only handle Release-History-specific concerns:
     - empty workflow header (no jobs to expand) — non-clickable, dim
     - the Downloads button styling stays the same as before
   ============================================================================ */

#release-history-tab .col-cat-header.is-empty {
    cursor: default;
    color: var(--text-muted);
    opacity: 0.55;
}
#release-history-tab .col-cat-header.is-empty:hover {
    background: transparent !important;
}
#release-history-tab .col-cat-header.is-empty .col-expand-pill {
    opacity: 0.3;
}

/* Info banner that explains how to read the Release History table. Sits
   between the page header and the filters panel. Looks like a subtle,
   primary-tinted callout — much more readable than the previous misuse
   of `.section-meta`, which was actually a tiny all-caps pill badge style
   meant for inline title metadata (it made the paragraph render as one
   absurd long uppercase ribbon). */
/* Matrix-control toolbar — small toolbar that sits between the filters
   row and the matrix table. Hosts the "Expand all" / "Collapse all"
   controls. Was originally tucked into the right edge of the filters
   row where users couldn't find it; promoted to its own row with bigger
   button styling so the matrix-expansion feature is discoverable. */
.mar-matrix-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 8px 0 14px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--card-border, var(--border-color));
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.mar-matrix-toolbar-label {
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    margin-right: 4px;
}
.mar-matrix-toolbar-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 8px;
}
.mar-matrix-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--card-border, var(--border-color));
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}
.mar-matrix-btn i[data-lucide],
.mar-matrix-btn svg.lucide {
    width: 14px;
    height: 14px;
    color: var(--primary-light, #818cf8);
}
.mar-matrix-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.45);
}
.mar-matrix-btn:active { transform: translateY(1px); }
.mar-matrix-btn-primary {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.40);
    color: var(--text-primary);
}
.mar-matrix-btn-primary:hover {
    background: rgba(99, 102, 241, 0.24);
    border-color: rgba(99, 102, 241, 0.60);
}
.mar-matrix-btn-primary i[data-lucide],
.mar-matrix-btn-primary svg.lucide {
    color: var(--primary-light, #818cf8);
}
[data-theme="light"] .mar-matrix-toolbar { background: #f8fafc; }
[data-theme="light"] .mar-matrix-btn { background: #fff; }
[data-theme="light"] .mar-matrix-btn-primary { background: rgba(99, 102, 241, 0.10); }

@media (max-width: 600px) {
    .mar-matrix-toolbar-hint { display: none; }
    .mar-matrix-btn { padding: 8px 12px; min-height: 36px; }
}

/* ============================================================================
   Multi-Arch Release - Nightly: per-test-component column expansion
   ============================================================================
   Tests-phase arch column headers (.mar-arch-drillable) carry a chevron
   so the user can expand each arch into per-test-component sub-sub-
   columns — matching the existing "click ▸ to expand a column" mental
   model used by the workflow-level headers. The expanded per-component
   columns (.mar-archcomp-header) reuse the rotated-label treatment
   from the wheel-matrix cells. */
/* ============================================================================
   Unified expand pill (.col-expand-pill) — used EVERYWHERE the user can
   drill a column into sub-columns: CI HUD, Multi-Arch, Per-Repo CI HUD,
   Release History (workflow + arch), Multi-Arch Release Nightly (workflow
   + arch). ONE visual affordance for "expand this column".

   Two layout strategies, same pill visual:
     • INLINE (default)         — short horizontal cells (CI HUD-style)
                                  Pill renders inline before the label,
                                  replacing the old `▾`/`▸` text glyph.
     • ABSOLUTE bottom-center   — tall cells with vertically-rotated arch
                                  labels (MAR, RH). Pill pinned to a
                                  reserved 30px strip at the bottom of
                                  the cell. Triggered by adding a host
                                  class: `.mar-arch-drillable`,
                                  `.mar-wf-drillable`, `.rh-arch-drilled`,
                                  or `.rh-wf-drillable`.

   pointer-events: none on the pill so the parent <th> absorbs the click
   as one big target — no fiddly 22px hit box.
   ============================================================================ */

.col-expand-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0 6px 0 0;
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--accent-light, #818cf8);
    cursor: pointer;
    opacity: 0.75;
    pointer-events: none;
    vertical-align: middle;
    flex: 0 0 auto;
    transition:
        opacity var(--dur-fast) var(--ease-standard),
        background var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard),
        transform var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard);
}
.col-expand-pill i,
.col-expand-pill svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.5;
    display: block;
}
[data-theme="light"] .col-expand-pill {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent, #6366f1);
}

/* Universal hover + expanded states — any parent th carrying one of the
   expandable-column classes lights the pill to solid indigo when the
   user hovers the cell or when the column is currently expanded. */
.col-cat-header:hover            .col-expand-pill,
.col-cat-header.expanded         .col-expand-pill,
.rh-cat-header:hover             .col-expand-pill,
.rh-cat-header.expanded          .col-expand-pill,
.mar-arch-drillable:hover        .col-expand-pill,
.mar-arch-drillable.expanded     .col-expand-pill,
.mar-wf-drillable:hover          .col-expand-pill,
.mar-wf-drillable.expanded       .col-expand-pill,
.rh-arch-drillable:hover         .col-expand-pill,
.rh-arch-drillable.expanded      .col-expand-pill,
.rh-arch-drilled                 .col-expand-pill {
    opacity: 1;
    background: var(--accent, #6366f1);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

/* Absolute-positioned variants — used by tall cells with rotated arch
   labels OR by the version-matrix workflow headers where there's
   plenty of vertical space below the 2-line OS+stage label. Pill pinned
   to bottom-center in a reserved 30px strip. */
.mar-arch-drillable,
.mar-wf-drillable,
.rh-arch-drillable,
.rh-wf-drillable {
    position: relative;
    padding-bottom: 30px !important;
}
.mar-arch-drillable,
.rh-arch-drillable {
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast) var(--ease-standard);
}
.mar-arch-drillable .job-header-text,
.rh-arch-drillable .job-header-text {
    /* Cap the rotated gfx label so it can't extend into the reserved
       30px pill strip at the bottom. With the tightened 88px cell
       height (was 120px), 50px gives the rotated label comfortable
       room for any gfx token while keeping the pill area completely
       clear (30px pill strip + ~4px gap + 50px label = ~84px, fits
       in 88px cell). */
    max-height: 50px !important;
}
.mar-arch-drillable:hover,
.rh-arch-drillable:hover {
    background: rgba(99, 102, 241, 0.10) !important;
}
.mar-arch-drillable.expanded,
.rh-arch-drillable.expanded,
.rh-arch-drilled {
    background: rgba(99, 102, 241, 0.08) !important;
    border-bottom: 2px solid var(--accent-light, #818cf8) !important;
}

/* Inside an absolute host: pin the pill at bottom-center, override the
   default inline margin. The hover transform shifts it 1px up for a
   subtle lift effect. */
.mar-arch-drillable .col-expand-pill,
.mar-wf-drillable   .col-expand-pill,
.rh-arch-drillable  .col-expand-pill,
.rh-wf-drillable    .col-expand-pill {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    margin: 0;
}
.mar-arch-drillable:hover    .col-expand-pill,
.mar-wf-drillable:hover      .col-expand-pill,
.rh-arch-drillable:hover     .col-expand-pill,
.rh-wf-drillable:hover       .col-expand-pill {
    transform: translateX(-50%) translateY(-1px);
}

@media (max-width: 768px) {
    /* Touch devices: hover never fires, so make pills fully visible at
       rest. Also shave the rotated label so they don't crowd on narrow
       screens. */
    .col-expand-pill { opacity: 1; }
    .mar-arch-drillable .job-header-text,
    .rh-arch-drillable  .job-header-text { max-height: 44px !important; }
}
.mar-archcomp-header {
    /* Lighter background tint so the per-component sub-sub-columns read
       as a NESTED group under their parent arch, not as peer arches. */
    background: rgba(99, 102, 241, 0.04) !important;
}
.mar-archcomp-header .job-header-text {
    /* Component names (rocblas, miopen, …) are slightly longer than gfx
       tokens — give them a tiny bit more vertical room to breathe. */
    font-size: 0.66rem;
}

/* Page-level info banner — used on Release History AND Multi-Arch Release
   (and intended for any future tab that needs a "how to read this table"
   prelude). Originally `#release-history-tab .rh-info-banner` so the
   identical class on the MAR tab silently rendered unstyled, which is
   what made the MAR banner read as "rookie / not aligned with other
   tabs". Ungated now so the same class produces the same visual on
   every tab that uses it. */
.rh-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.20);
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: var(--lh-normal);
    color: var(--text-secondary, #94a3b8);
}
.rh-info-banner i[data-lucide],
.rh-info-banner svg.lucide {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--primary-light, #818cf8);
    margin-top: 1px;
}
.rh-info-banner strong {
    color: var(--text-primary);
}
.rh-info-banner code {
    background: rgba(99, 102, 241, 0.12);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--text-primary);
}
[data-theme="light"] .rh-info-banner {
    background: rgba(99, 102, 241, 0.05);
    border-color: rgba(99, 102, 241, 0.18);
}

/* Release-History filters use the SAME `.ci-hud-filters` + `.filter-group`
   pattern as the CI HUD tab — see lines ~6096 (.ci-hud-filters) and ~5005
   (.filter-group). The shared rules give us the padded-card background,
   label-above-input layout, and the right-aligned action buttons via
   `margin-left:auto`. Below we only add the native-control theme hints
   so the date-picker calendar and the <select> popup follow night mode. */
#release-history-tab .ci-hud-filters input[type="date"],
#release-history-tab .ci-hud-filters select {
    color-scheme: dark;
}
[data-theme="light"] #release-history-tab .ci-hud-filters input[type="date"],
[data-theme="light"] #release-history-tab .ci-hud-filters select {
    color-scheme: light;
}
#release-history-tab .ci-hud-filters select option {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

/* Date range styling now uses the shared `.date-filter-wrapper` / `.date-input-box`
   classes from the Issues tab (defined further up in this file) — keeps the
   UI consistent across tabs. No tab-specific overrides needed. */

/* ============================================================================
   Release History — flat PyTorch-HUD-style column insertion
   ============================================================================
   All headers share ONE row. Clicking a workflow header inserts arch cells
   right after it; clicking an arch header inserts sub-dim cells right after
   it. Every column is the same narrow CI-HUD width (~34px) with a vertical
   `.job-header-text` rotation. Workflow and arch cells have distinct chrome
   so the visual hierarchy is preserved even though everything lives in one
   header row.
   ============================================================================ */

/* Release History sticky-col layout: just ROCm Version + Commit (Date
   + Time + Age + PR + Message were all stripped — date is already in
   the version stamp, time was just noise, the rest were CI-HUD
   carry-overs). col-sha widened to 180px so `7.14.0a20260518` fits on
   ONE line at 0.82rem monospace; col-time pinned right after.
   Scoped to .release-history-table so the CI HUD tab keeps its
   original 5-column sticky layout. */
.release-history-table thead th.col-sha,
.release-history-table tbody td.col-sha {
    width: 180px !important;
    min-width: 180px !important;
    white-space: nowrap !important;
}
.release-history-table thead th.col-time,
.release-history-table tbody td.col-time {
    left: 180px !important;
    width: 90px !important;
    min-width: 90px !important;
    white-space: nowrap !important;
}

/* Sticky-col bleed-through fix:
   Row-tint rules (`.repo-row-fail td { background: rgba(…0.04); }` etc.)
   replace the sticky cells' opaque `var(--card-bg)` with a SEMI-TRANSPARENT
   colour. When the user scrolls right, data cells slide under the sticky
   columns and become visible through the transparency — looks like the
   right-hand columns "merged" with the left ones on the affected row.
   Fix: layer the tint as `background-image` on top of a solid
   `background-color`, so the cell stays fully opaque while preserving
   the row's red/orange tint. */
.release-history-table .repo-row-fail td.sticky-col {
    background-color: var(--card-bg);
    background-image: linear-gradient(rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.04));
}
.release-history-table .repo-row-fail:hover td.sticky-col {
    background-color: var(--card-bg);
    background-image: linear-gradient(rgba(239, 68, 68, 0.07), rgba(239, 68, 68, 0.07));
}
.release-history-table .repo-row-run td.sticky-col {
    background-color: var(--card-bg);
    background-image: linear-gradient(var(--warning-light), var(--warning-light));
}
.release-history-table .repo-ci-row:hover td.sticky-col,
.release-history-table .ci-hud-row:hover td.sticky-col,
.release-history-table .ci-hud-row.expanded td.sticky-col {
    background-color: var(--card-bg);
    background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay));
}

/* HEADER sticky-col bleed-through fix — robust version.
   With border-collapse:collapse on the table, sticky table cells in some
   browsers paint their `background-color` only over the natural-content
   area, NOT the full row-stretched height. So when the header row gets
   stretched to 120px by rotated `.col-job-header` cells, the sticky
   header cells (ROCm Version / Date / Time / Commit) only paint ~36px
   of opaque bg at the bottom — and rotated text from the scrolled
   detail headers bleeds through the upper ~84px.
   The fix is to force this specific table into `border-collapse:separate`
   mode. With separate borders, each cell paints its background over its
   FULL cell box (including the stretched height), so the sticky cells
   reliably cover everything beneath. We zero `border-spacing` so the
   visual result is identical to collapsed mode (no visible gaps).
   We also push the sticky-col z-index higher to defend against any
   future stacking-context changes. */
.release-history-table {
    border-collapse: separate;
    border-spacing: 0;
}
.release-history-table thead th.sticky-col {
    /* Solid card-bg with `!important` to win over any row-state tint rules.
       Sticky cells must NEVER be transparent in any state — that's the
       whole reason we have separate `repo-row-fail` / hover overrides
       further down. */
    background-color: var(--card-bg) !important;
    background-image: none !important;
    vertical-align: bottom;
    padding-bottom: 10px;
    z-index: 6;
}
.release-history-table tbody td.sticky-col {
    z-index: 2;
    background-clip: padding-box;
}
/* Right-edge separator on the LAST sticky-col so users see where the
   sticky region ends — also reinforces that the scrolling detail
   columns slide UNDER the sticky frame. */
.release-history-table thead th.col-time,
.release-history-table tbody td.col-time {
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.45);
}

/* Workflow header — wider than arch/detail cells, distinct background so it
   acts as a "group anchor" within the flat row. Same height as everything
   else so the row stays aligned. Shared between Release History and
   Multi-Arch Release tabs (both render the same `rh-*` class structure). */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header {
    background: rgba(99, 102, 241, 0.08);
    border-left: 2px solid rgba(99, 102, 241, 0.55);
    cursor: pointer;
    padding: 4px 8px;
    text-align: center;
    vertical-align: bottom;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--primary-light, #818cf8);
    white-space: nowrap;
    min-width: 36px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
/* Expanded workflow header — significantly stronger visual state so the
   user can see at a glance which workflows are open:
   • Filled primary background (was 0.22 alpha → now 0.35 with white text)
   • 3px bottom border + outer glow box-shadow drawing the eye down to
     the inserted arch columns underneath
   • Brighter, bigger chevron */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header.expanded {
    background: rgba(99, 102, 241, 0.35);
    color: #fff;
    border-bottom: 3px solid var(--primary, #6366f1);
    box-shadow: inset 0 -3px 0 var(--primary, #6366f1),
                0 2px 6px rgba(99, 102, 241, 0.25);
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header:not(.is-empty):hover {
    background: rgba(99, 102, 241, 0.28);
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header.expanded:hover {
    background: rgba(99, 102, 241, 0.45);
}

/* ── Group-cohesion: connect inserted arch/detail cells to their parent ──
   When a workflow is expanded, all its child columns (arch + detail) carry
   `.rh-grp-child` so we can paint a subtle primary tint across the entire
   vertical strip. The strip + the parent workflow header's matching tint
   visually communicates "these belong together". The strip persists in
   body cells too (header + body share the look), so even when scrolled
   horizontally far from the workflow header, the user can still tell what
   group a cell is part of by its tint.
   The first cell of each group (the workflow header / body) carries
   `.rh-grp-start` and gets a thicker left border to mark the boundary. */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-grp-child,
:is(#release-history-tab, #multi-arch-release-tab) td.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.035);
}
:is(#release-history-tab, #multi-arch-release-tab) tbody tr:nth-child(even) td.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.055);
}
/* Drilled-arch and detail headers have their own existing tints; keep the
   group child tint as an underlay using `background-image` so the local
   style still wins visually but the group tint remains. */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-drilled.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.14);
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-detail-header.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.05);
}

/* Body-cell group-start: same left-border treatment as the workflow header
   so the boundary line runs the full height of the table. */
:is(#release-history-tab, #multi-arch-release-tab) td.rh-grp-start {
    border-left: 2px solid rgba(99, 102, 241, 0.55);
}

/* Hover affordance for the column-group: hovering a child cell highlights
   it via the usual rules; we also lift its tint slightly so the user gets
   feedback that the cell belongs to a clickable group. */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-grp-child:hover {
    background-color: rgba(99, 102, 241, 0.10);
}

[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) th.rh-grp-child,
[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) td.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.04);
}
[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) tbody tr:nth-child(even) td.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.07);
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header.is-empty {
    cursor: default;
    opacity: 0.5;
}
/* (removed) Per-tab chevron sizing for `.cat-expand-icon` was specific
   to the old `▾`/`▸` glyph. Both tabs now use the unified
   `.col-expand-pill` rendered by the renderers, so sizing is handled
   in one place at the top of this file. */

/* Cat cell label is HORIZONTAL (long enough to read at glance). The arch /
   detail cells in the same row use vertical-rotated `.job-header-text` for
   their narrow columns. */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header .job-header-text {
    writing-mode: horizontal-tb;
    transform: none;
}

:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header {
    cursor: pointer;
    padding: 4px 0;
    text-align: center;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.12s ease, color 0.12s ease;
    /* Same 34px column width and 120px height as the rest of the row's
       cells (inherited from .col-job-header). Vertical-lr rotated arch
       name lives inside .job-header-text. The expand icon sits at the
       top of the cell, horizontal, above the rotated label. */
    position: relative;
}
/* (removed) `.rh-arch-icon` was the old inline `▾`/`▸` glyph at the
   top of each drillable arch cell. Replaced by the unified
   `.col-expand-pill` pinned to the bottom-center of the cell via the
   `.rh-arch-drillable` host class (defined at the top of this file). */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header:hover .job-header-text {
    color: var(--primary-light, #818cf8);
}

/* Leaf arch — single-dim workflows (Linux Packages / Windows Packages)
   where arch IS the leaf. No drill is possible: no hover affordance, no
   icon, cursor stays default. */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-leaf {
    cursor: default;
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-leaf:hover {
    background: rgba(255, 255, 255, 0.02);
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-leaf:hover .job-header-text {
    color: var(--text-primary);
}
/* (no rh-arch-icon to hide — handled by the renderer not emitting
   a `.col-expand-pill` for leaf-only arch cells.) */

/* Drilled arch — strong primary-tinted background, 3px underline + outer
   glow, and a big bright chevron. Mirrors the workflow header's open
   state so the drilled-arch column visually "pairs" with its inserted
   detail columns to the right (PyTorch HUD pattern). */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-drilled {
    background: rgba(99, 102, 241, 0.28);
    border-bottom: 3px solid var(--primary, #6366f1);
    box-shadow: inset 0 -3px 0 var(--primary, #6366f1),
                0 2px 6px rgba(99, 102, 241, 0.2);
}
/* (the drilled-state pill styling is handled by the universal
   `.rh-arch-drilled .col-expand-pill` rule at the top of this file —
   solid indigo background, white icon, glow.) */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-drilled .job-header-text {
    color: #fff;
    font-weight: 700;
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-drilled:hover {
    background: rgba(99, 102, 241, 0.38);
}

/* Detail header — narrowest, most muted, shows sub-dim coordinates
   (e.g. "3.10 · Bld · tip" for wheels, "Def · 1" for shards). Pairs with
   its drilled-arch neighbour to the left. */
:is(#release-history-tab, #multi-arch-release-tab) th.rh-detail-header {
    background: rgba(255, 255, 255, 0.01);
    border-left: 1px solid rgba(255, 255, 255, 0.04);
}
:is(#release-history-tab, #multi-arch-release-tab) th.rh-detail-header .job-header-text {
    color: var(--text-muted, #aaa);
    font-size: 0.64rem;
}

[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header:hover {
    background: rgba(99, 102, 241, 0.10);
}
[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) th.rh-arch-header.rh-arch-drilled {
    background: rgba(99, 102, 241, 0.10);
}
[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header {
    background: rgba(99, 102, 241, 0.05);
}
[data-theme="light"] :is(#release-history-tab, #multi-arch-release-tab) th.rh-cat-header.expanded {
    background: rgba(99, 102, 241, 0.12);
}

/* ============================================================================
   Multi-Arch Release tab — sticky-col positioning + workflow column widths
   ============================================================================
   The Multi-Arch Release table reuses Release History's `.release-history-table`
   class for the separate-borders + sticky-col bleed-through fixes, but it has
   only TWO sticky cols (ROCm Version + Commit) instead of Release History's
   FOUR (Version + Date + Time + Commit). Without these overrides, `col-time`
   inherits the `left: 360px !important` rule from `.release-history-table`
   (which assumes 80+60+220px of preceding sticky cols) and ends up floating
   far to the right, overlapping workflow columns. We:

   1. Pin col-sha at left:0 with width 130px (room for `7.13.0a20260514`)
   2. Pin col-time at left:130px with width 90px (room for 8-char commit hash)
   3. Give non-perArch workflow columns (Multiarch Build/Test) min-width so
      the long header label (`Multiarch — Build`) doesn't get crushed to the
      cat-badge width. Mathlib columns auto-size when collapsed (badge-width)
      and expand to N×34px arch cells when opened. */
/* ROCm version + run-number suffix + ↗ link must all stay on a SINGLE
   line — wrapping bloats every body row by an extra ~18px. Widened
   from 130px → 195px so `7.13.0a20260518 #35 ↗` (the longest realistic
   payload: 15-char synthesized version + 4-char #N + 2-char arrow at
   monospace) fits without overflowing or wrapping. */
.multi-arch-release-table thead th.col-sha,
.multi-arch-release-table tbody td.col-sha {
    width: 195px !important;
    min-width: 195px !important;
    white-space: nowrap !important;
}
.multi-arch-release-table thead th.col-time,
.multi-arch-release-table tbody td.col-time {
    left: 195px !important; /* directly after the widened col-sha */
    width: 90px !important;
    min-width: 90px !important;
    white-space: nowrap !important;
}

/* ── Stage-wise column layout (11 stages × Build+Test = 22 columns) ───────
   Each cat-header is rendered as a 2-line label ("Stage" on top, "Build"
   or "Test" on the bottom) using inline spans. Layout aims to:

   • Keep each non-perArch column compact (~85px) so all 22 fit without
     extreme horizontal scroll. perArch (Math-Libs) columns auto-size:
     ~85px when collapsed, ~85 + N×34px when expanded into per-arch dots.

   • Visually pair Build + Test of the same stage. Cells with the same
     `data-mar-stage` get a SHARED background tint (alternating soft
     palette across stages) plus a thicker left-border on the Build column
     to mark the start of each stage group. Tests within a stage get NO
     left border so the pair reads as one block.

   • Phase indicator: a tiny "BUILD" / "TEST" sub-label below the stage
     name, in muted color so the dominant visual is the stage name (the
     thing users care about at a glance). */
#multi-arch-release-tab th.rh-cat-header {
    /* 2-line label: OS prefix ("LINUX" / "WINDOWS") on top, stage name
       below. white-space:normal lets the inline-span layout flow naturally
       without overflowing the column. */
    white-space: normal;
    line-height: 1.15;
    padding: 6px 6px;
    /* 26 columns at 90px = ~2340px workflow width, plus ~330px for sticky
       cols + Downloads = ~2670px — fits horizontal-scroll. Bumped from 80
       to 90 to give "WINDOWS" + "Compiler-Runtime" comfortable room. */
    min-width: 90px;
    width: 90px;
}
#multi-arch-release-tab th.rh-cat-header .mar-stage-os {
    /* "LINUX" / "WINDOWS" tag at the top of each header — sits above the
       stage name in a smaller / lighter style, color-coded per OS for
       at-a-glance OS recognition. */
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 2px;
}
#multi-arch-release-tab th.rh-cat-header .mar-stage-name {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.15;
}
/* `is-empty` here means "non-expandable by design" (most non-perArch
   columns). Don't fade them — their data IS meaningful. */
#multi-arch-release-tab th.rh-cat-header.is-empty {
    opacity: 1;
    cursor: default;
}
/* (removed) The old inline `.cat-expand-icon` chevron on workflow
   headers was replaced by the unified `.col-expand-pill` defined at
   the top of this file. Pill is pinned to the bottom-center of the
   header via the `.mar-wf-drillable` host class. */

/* ── CI-HUD-style multi-row header ────────────────────────────────────
   When a workflow column is expanded, its arch sub-columns now appear
   in a SECOND header row directly beneath the workflow header (instead
   of inline to the right). When an arch is further drilled into per-
   test-components, those appear in a THIRD header row.

   The sub-rows use a slightly stronger top-border + a small left-pad
   bump on the first cell of each lane so the visual grouping under
   each workflow header is unambiguous. */
:is(#multi-arch-release-tab, #release-history-tab) tr.mar-sub-row > th,
:is(#multi-arch-release-tab, #release-history-tab) tr.mar-subsub-row > th,
:is(#multi-arch-release-tab, #release-history-tab) tr.rh-sub-row > th,
:is(#multi-arch-release-tab, #release-history-tab) tr.rh-subsub-row > th {
    border-top: 1px solid rgba(99, 102, 241, 0.18);
}
/* Drilled-arch header in the row-2 strip gets a stronger bottom border
   so the user reads it as a SUB-GROUP HEAD that has component cells
   sitting under it in row 3. */
:is(#multi-arch-release-tab, #release-history-tab) tr.mar-sub-row > th.rh-arch-drilled,
:is(#multi-arch-release-tab, #release-history-tab) tr.rh-sub-row > th.rh-arch-drilled {
    border-bottom: 2px solid var(--accent-light, #818cf8) !important;
}
/* Make the sub-rows visually slightly recessed compared to the row-1
   workflow headers — same chrome, just a hair darker, so the layered
   hierarchy is obvious without being noisy. */
:is(#multi-arch-release-tab, #release-history-tab) tr.mar-sub-row,
:is(#multi-arch-release-tab, #release-history-tab) tr.rh-sub-row,
:is(#multi-arch-release-tab, #release-history-tab) tr.mar-subsub-row,
:is(#multi-arch-release-tab, #release-history-tab) tr.rh-subsub-row {
    background: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] :is(#multi-arch-release-tab, #release-history-tab) tr.mar-sub-row,
[data-theme="light"] :is(#multi-arch-release-tab, #release-history-tab) tr.rh-sub-row,
[data-theme="light"] :is(#multi-arch-release-tab, #release-history-tab) tr.mar-subsub-row,
[data-theme="light"] :is(#multi-arch-release-tab, #release-history-tab) tr.rh-subsub-row {
    background: rgba(99, 102, 241, 0.04);
}

/* ── Lane-boundary borders ─────────────────────────────────────────────
   Each lane (Setup / Linux Build / Linux Pkg / Linux Publish / Linux
   Tests / Linux Wheels / Windows Build / Windows Pkg / Windows Publish /
   Windows Tests / Windows Wheels) starts at the column carrying
   `data-mar-lane-start="true"`. A thicker 2px primary-tinted border on
   that boundary visually segments the 26-column strip into 11 lanes.
   Body cells inherit the same boundary attribute via the renderer. */
#multi-arch-release-tab th[data-mar-lane-start="true"],
#multi-arch-release-tab td[data-mar-lane-start="true"] {
    border-left: 2px solid rgba(99, 102, 241, 0.55) !important;
}

/* ── Lane group row (Row 0) ────────────────────────────────────────────
   Top-most header row showing per-lane group cells. Each cell spans
   over its lane's visible body cols and (when the lane has >=2 wfs)
   exposes a chevron pill that toggles the lane between collapsed and
   expanded. Collapsed lanes show a single summary cell below; expanded
   lanes show the per-stage columns we always had. */
#multi-arch-release-tab thead tr.mar-lane-row > th {
    padding: 4px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #9ca3af);
    background-color: rgba(99, 102, 241, 0.04);
    border-bottom: 1px solid rgba(99, 102, 241, 0.18);
    position: relative;
}
/* Sticky cells (ROCm Version, Commit) live in this lane row via
   rowspan so their pinning extends through every header row. The
   lane-row blanket `position: relative` rule above would otherwise
   override `.ci-hud-table thead th.sticky-col { position: sticky }`
   (higher specificity wins) — combined with the existing
   `.col-time { left: 195px }` that's intended as the STICKY pin
   offset, it shifts Commit 195px to the right of its natural position
   and breaks the entire row's horizontal layout. Restore `sticky`
   for sticky cells in the lane row so `left:0` / `left:195px` go
   back to being pin offsets, not relative-position offsets. */
#multi-arch-release-tab thead tr.mar-lane-row > th.sticky-col {
    position: sticky;
}
#multi-arch-release-tab th.mar-lane-group {
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
}
#multi-arch-release-tab th.mar-lane-group:hover {
    background-color: rgba(99, 102, 241, 0.10);
    color: var(--text-primary, #e5e7eb);
}
#multi-arch-release-tab th.mar-lane-group.collapsed {
    /* Slightly more saturated tint when collapsed so the eye notices
       there's a hidden group waiting to be opened. */
    background-color: rgba(99, 102, 241, 0.09);
    color: var(--text-primary, #e5e7eb);
}
#multi-arch-release-tab th.mar-lane-group-fixed {
    /* Single-col lanes — no chevron, no hover affordance (nothing to
       toggle). Keeps the label visible without implying interactivity. */
    cursor: default;
    color: var(--text-muted, #9ca3af);
}
#multi-arch-release-tab th.mar-lane-group .mar-lane-group-label {
    display: inline-block;
    vertical-align: middle;
}
#multi-arch-release-tab th.mar-lane-group .col-expand-pill {
    margin-left: 6px;
    vertical-align: middle;
    /* Always visible on lane group headers (unlike per-column pills
       which fade in on hover) — the user shouldn't have to hover to
       discover the lane group can be toggled. */
    opacity: 0.85;
}
#multi-arch-release-tab th.mar-lane-group:hover .col-expand-pill {
    opacity: 1;
}

/* Lane-summary HEADER cell (Row 1, when the lane is collapsed). Looks
   like a normal workflow header but spans rowspan=bottomRows and shows
   the lane label + stage count. */
#multi-arch-release-tab th.mar-lane-summary-header {
    cursor: pointer;
    text-align: center;
    background-color: rgba(99, 102, 241, 0.05);
}
#multi-arch-release-tab th.mar-lane-summary-header:hover {
    background-color: rgba(99, 102, 241, 0.12);
}

/* Stage-count label inside the collapsed lane-summary header.
   No longer paired with a duplicate lane-name `<span>` (the Row 0 lane
   group already carries the title), so center the single line on its
   own and de-emphasize a bit so it doesn't compete with the chevron
   above. */
#multi-arch-release-tab th.mar-lane-summary-header .mar-lane-stage-count {
    display: block;
    text-align: center;
    font-weight: 500;
    opacity: 0.65;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Lane-summary BODY cell — single aggregate "passed/total" badge for a
   collapsed lane. Lives in a single col so the row stays compact even
   when the underlying lane has 11 stages. The badge uses the SAME
   .cat-pass / .cat-fail / .cat-run sizing as the other "M/N" columns
   (e.g. test-artifacts 242/369) so a collapsed lane reads consistently
   with its expanded siblings. */
#multi-arch-release-tab td.mar-lane-summary {
    text-align: center;
    background-color: rgba(99, 102, 241, 0.04);
}

/* ── Per-LANE body tint ────────────────────────────────────────────────
   11 distinct soft palettes — each lane (Setup, Linux Build, Linux Pkg,
   Linux Publish, Linux Tests, Linux Wheels, Windows Build, Windows Pkg,
   Windows Publish, Windows Tests, Windows Wheels) gets its own subtle
   background. Tests, Build, and Wheels for the SAME OS share related
   hue families (cool blues for Linux, warmer reds/oranges for Windows)
   so the eye groups them. */
#multi-arch-release-tab tbody td[data-mar-lane="setup"]          { background-color: rgba(148, 163, 184, 0.05); }
/* Linux family — cool blues + greens */
#multi-arch-release-tab tbody td[data-mar-lane="linuxBuild"]     { background-color: rgba(56, 189, 248, 0.04); }
#multi-arch-release-tab tbody td[data-mar-lane="linuxPkg"]       { background-color: rgba(34, 197, 94, 0.04); }
#multi-arch-release-tab tbody td[data-mar-lane="linuxPublish"]   { background-color: rgba(20, 184, 166, 0.06); }
#multi-arch-release-tab tbody td[data-mar-lane="linuxTests"]     { background-color: rgba(132, 204, 22, 0.05); }
#multi-arch-release-tab tbody td[data-mar-lane="linuxWheels"]    { background-color: rgba(168, 85, 247, 0.06); }
/* Windows family — warmer ambers + reds */
#multi-arch-release-tab tbody td[data-mar-lane="windowsBuild"]   { background-color: rgba(251, 146, 60, 0.04); }
#multi-arch-release-tab tbody td[data-mar-lane="windowsPkg"]     { background-color: rgba(244, 114, 182, 0.04); }
#multi-arch-release-tab tbody td[data-mar-lane="windowsPublish"] { background-color: rgba(251, 191, 36, 0.06); }
#multi-arch-release-tab tbody td[data-mar-lane="windowsTests"]   { background-color: rgba(239, 68, 68, 0.04); }
#multi-arch-release-tab tbody td[data-mar-lane="windowsWheels"]  { background-color: rgba(96, 165, 250, 0.06); }

/* Per-arch / wheels-matrix expanded child cells get a slightly stronger
   tint so the "drilled" strip stands out as the focal group. */
#multi-arch-release-tab tbody td[data-mar-stage="linMathLibs"].rh-grp-child,
#multi-arch-release-tab tbody td[data-mar-stage="winMathLibs"].rh-grp-child {
    background-color: rgba(56, 189, 248, 0.08);
}
#multi-arch-release-tab tbody td[data-mar-stage="linTests"].rh-grp-child,
#multi-arch-release-tab tbody td[data-mar-stage="winTests"].rh-grp-child {
    background-color: rgba(132, 204, 22, 0.08);
}
#multi-arch-release-tab tbody td[data-mar-stage="linWheels"].rh-grp-child,
#multi-arch-release-tab tbody td[data-mar-stage="winWheels"].rh-grp-child {
    background-color: rgba(168, 85, 247, 0.10);
}

/* OS chip color in the cat-header `mar-stage-os` block — Linux gets
   teal-ish, Windows gets amber, Setup keeps default muted gray. */
#multi-arch-release-tab th[data-mar-lane^="linux"] .mar-stage-os    { color: rgb(56, 189, 248); }
#multi-arch-release-tab th[data-mar-lane^="windows"] .mar-stage-os  { color: rgb(251, 146, 60); }

/* Downloads cell at the far right — give the column header room for the
   "DOWNLOADS" label so it doesn't wrap. */
#multi-arch-release-tab .ci-hud-table thead th.col-cat:last-child,
#multi-arch-release-tab .ci-hud-table tbody td.col-cat:last-child {
    min-width: 130px;
    border-left: 2px solid rgba(99, 102, 241, 0.45) !important;
    text-align: center;
}

/* The Downloads button on the Multi-Arch tab uses the same `rh-download-btn`
   class as Release History but the existing styles for that class are
   scoped to `#release-history-tab`, so without these rules the button
   would be unstyled (default browser button) — making it look like a
   plain ugly link the user might not even recognize as a download
   button. Mirror Release History's pill styling here. */
#multi-arch-release-tab .rh-download-btn.cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.14);
    color: var(--accent-light, #818cf8);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
#multi-arch-release-tab .rh-download-btn.cat-badge:hover {
    background: rgba(99, 102, 241, 0.26);
    border-color: rgba(99, 102, 241, 0.55);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}
#multi-arch-release-tab .rh-download-btn.cat-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.2);
}
[data-theme="light"] #multi-arch-release-tab .rh-download-btn.cat-badge {
    background: rgba(99, 102, 241, 0.10);
    color: #4f46e5;
}
[data-theme="light"] #multi-arch-release-tab .rh-download-btn.cat-badge:hover {
    background: rgba(99, 102, 241, 0.22);
    color: #fff;
}

/* Icon-only cat-badge for non-expandable workflow cells. The default
   `.cat-badge` is sized for "M/N" text (~32px wide, padding for digits);
   the icon variant is squarer, slightly smaller, and centered cleanly.
   Color comes from the standard cat-pass/cat-fail/cat-run classes. */
#multi-arch-release-tab .cat-badge.mar-status-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

/* Make the day-row visibly clickable. The whole TR opens the tree-view
   sidebar; the Downloads button intercepts via stopPropagation. */
#multi-arch-release-tab .ci-hud-table tbody tr.ci-hud-row {
    cursor: pointer;
}
#multi-arch-release-tab .ci-hud-table tbody tr.ci-hud-row:hover td.sticky-col {
    box-shadow: inset 4px 0 0 var(--primary, #6366f1);
}

/* ============================================================================
   Multi-Arch Release — Tree-View Sidebar
   ============================================================================
   Slide-in panel from the right covering ~46% of viewport width (min 540px,
   max 760px). Pipeline tree shows Stage → Phase → Component → individual
   jobs, each level a collapsible row. Failure branches default-expanded so
   the user lands on the things that need attention.
   ========================================================================= */
.mar-tree-sidebar {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    justify-content: flex-end;
}
.mar-tree-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    animation: mar-tree-fade-in 0.18s ease;
}
.mar-tree-panel {
    position: relative;
    width: 46vw;
    min-width: 540px;
    max-width: 760px;
    height: 100vh;
    background: var(--card-bg);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    animation: mar-tree-slide-in 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes mar-tree-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes mar-tree-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mar-tree-header {
    flex: 0 0 auto;
    padding: 14px 18px 10px 18px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    /* SOLID background — `--bg-elevated` is only ~2% white in dark theme,
       so the scrolling body content was bleeding through the header.
       Layer a solid card-bg underneath a faint white tint for the
       "elevated" feel without losing opacity. */
    background-color: var(--card-bg);
    background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
    /* Defense-in-depth positioning. The flex layout already pins the
       header at the top of the panel (header has flex:0, body has flex:1
       + overflow:auto), but `position:sticky; top:0` adds a second line
       of defense: even if some upstream change inadvertently lets the
       panel itself become the scroll container (instead of just
       .mar-tree-body), the header stays glued to the top of the visible
       area instead of scrolling away and reappearing mid-content.
       z-index:5 protects against any descendant accidentally creating a
       higher stacking context. */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 5;
    /* Subtle drop-shadow under the header so users see the visual
       separation between the (sticky) header and scrolling content. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.mar-tree-titles { flex: 1 1 auto; min-width: 0; }
.mar-tree-titles h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mar-tree-titles h3 #mar-tree-version {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--primary-light, #818cf8);
}
.mar-tree-meta {
    margin-top: 4px;
    font-size: 0.74rem;
    color: var(--text-muted, #888);
    line-height: 1.4;
}
.mar-tree-meta a {
    color: var(--primary-light, #818cf8);
    text-decoration: none;
}
.mar-tree-meta a:hover { text-decoration: underline; }
.mar-tree-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mar-tree-toolbtn {
    background: transparent;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    color: var(--text-secondary, #aaa);
    padding: 4px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mar-tree-toolbtn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--primary-light, #818cf8);
}
.mar-tree-toolbtn.is-active {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.6);
    color: #fff;
}
.mar-tree-toolbtn-icon { margin-right: 4px; }
.mar-tree-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    transition: color 0.12s;
}
.mar-tree-close:hover { color: var(--status-fail, #ef4444); }

.mar-tree-body {
    flex: 1 1 auto;
    /* CRITICAL: without min-height:0, a flex item's default min-height:auto
       prevents shrinking below its content size — so overflow:auto never
       kicks in and the body GROWS to fit content, pushing the header
       offscreen visually (or letting body content render OVER the header
       in some browsers). Setting min-height:0 lets the body shrink to its
       allotted flex space and triggers proper internal scrolling. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    font-size: 0.8rem;
    line-height: 1.4;
    /* Independent stacking context below the header (which is z-index:2).
       Defends against any descendant accidentally elevating above the
       header through a transform/will-change/etc. side effect. */
    position: relative;
    z-index: 1;
}
.mar-tree-panel {
    /* Defense in depth — even if the body's overflow somehow misbehaves,
       the panel itself clips its children at its 100vh box. */
    overflow: hidden;
}
.mar-tree-loading,
.mar-tree-empty,
.mar-tree-error {
    padding: 32px 18px;
    text-align: center;
    color: var(--text-muted, #888);
}
.mar-tree-error { color: var(--status-fail, #ef4444); }

/* Tree rows. Each level is indented +16px from parent. The row contains:
   chevron (▸/▾, hidden for leaves) + status icon + label + secondary text. */
.mar-tree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px 4px 6px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s ease;
    user-select: none;
}
.mar-tree-row:hover {
    background: rgba(99, 102, 241, 0.07);
    border-left-color: rgba(99, 102, 241, 0.5);
}
.mar-tree-row.is-leaf { cursor: default; }
.mar-tree-row.is-leaf:hover { background: transparent; }
.mar-tree-row.is-leaf a:hover ~ * { /* placeholder for future selectors */ }

/* Tree expand chevron — small pill, same visual vocabulary as the
   matrix column-expander `.col-expand-pill`. 16x16 (vs 22x22 in the
   matrix) because tree rows are denser. Lucide chevron icon inside.
   pointer-events:none so the parent .mar-tree-row absorbs the click
   as one big target. Indentation per level is set inline via
   padding-left on the row. */
.mar-tree-chevron {
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-light, #818cf8);
    pointer-events: none;
    opacity: 0.7;
    transition:
        opacity var(--dur-fast) var(--ease-standard),
        background var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard);
}
.mar-tree-chevron i,
.mar-tree-chevron svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.5;
    display: block;
}
[data-theme="light"] .mar-tree-chevron {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent, #6366f1);
}
/* Leaf rows (no children to expand) — hide the pill entirely but
   keep the span for indentation alignment. */
.mar-tree-row.is-leaf .mar-tree-chevron {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mar-tree-row.is-leaf .mar-tree-chevron i,
.mar-tree-row.is-leaf .mar-tree-chevron svg {
    display: none;
}
/* Hover on the row brightens the pill — same affordance as the
   matrix column-header pill. */
.mar-tree-row:not(.is-leaf):hover .mar-tree-chevron {
    opacity: 1;
    background: var(--accent, #6366f1);
    color: #fff;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.35);
}
/* Expanded row keeps the pill locked bright. */
.mar-tree-row.is-expanded > .mar-tree-chevron {
    opacity: 1;
    background: var(--accent, #6366f1);
    color: #fff;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.35);
}

.mar-tree-icon {
    flex: 0 0 18px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}
.mar-tree-icon.s-pass    { color: var(--status-pass, #22c55e); }
.mar-tree-icon.s-fail    { color: var(--status-fail, #ef4444); }
.mar-tree-icon.s-running { color: var(--status-running, #f59e0b); }
.mar-tree-icon.s-na      { color: var(--text-muted, #888); }

.mar-tree-label {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mar-tree-row.s-row-fail > .mar-tree-label {
    color: var(--status-fail, #ef4444);
}
.mar-tree-summary {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding-left: 8px;
}
.mar-tree-summary .pass-count { color: var(--status-pass, #22c55e); }
.mar-tree-summary .fail-count { color: var(--status-fail, #ef4444); font-weight: 700; }
.mar-tree-summary .run-count  { color: var(--status-running, #f59e0b); }

.mar-tree-children {
    /* No nested tree depth styling — each row sets its own padding-left
       inline so the indent is uniform per depth level. */
}

/* Leaf job rows — slightly different styling: monospace job-name suffix,
   right-aligned link arrow, smaller font. */
.mar-tree-row.is-leaf .mar-tree-label {
    font-weight: 500;
    font-size: 0.76rem;
    color: var(--text-secondary, #aaa);
}
.mar-tree-row.is-leaf .mar-tree-label code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.72rem;
    background: transparent;
    padding: 0;
    color: inherit;
}
.mar-tree-leaf-link {
    flex: 0 0 auto;
    color: var(--primary-light, #818cf8);
    text-decoration: none;
    font-size: 0.72rem;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.12s;
}
.mar-tree-row.is-leaf:hover .mar-tree-leaf-link { opacity: 1; }
.mar-tree-leaf-link:hover { text-decoration: underline; }

/* Per-stage tint on the top-level stage rows mirrors the matrix table's
   stage-pair tinting so users can mentally connect the two views. */
/* Per-LANE tint on top-level lane rows in the tree — mirrors the matrix
   table's lane tinting so users can mentally connect the matrix column to
   the tree branch. Stages within a lane don't get their own tint here —
   they inherit the lane row's color via the parent visual context. */
.mar-tree-row[data-mar-lane="setup"]          { background-color: rgba(148, 163, 184, 0.05); }
.mar-tree-row[data-mar-lane="linuxBuild"]     { background-color: rgba(56, 189, 248, 0.04); }
.mar-tree-row[data-mar-lane="linuxPkg"]       { background-color: rgba(34, 197, 94, 0.04); }
.mar-tree-row[data-mar-lane="linuxPublish"]   { background-color: rgba(20, 184, 166, 0.06); }
.mar-tree-row[data-mar-lane="linuxTests"]     { background-color: rgba(132, 204, 22, 0.05); }
.mar-tree-row[data-mar-lane="linuxWheels"]    { background-color: rgba(168, 85, 247, 0.06); }
.mar-tree-row[data-mar-lane="windowsBuild"]   { background-color: rgba(251, 146, 60, 0.04); }
.mar-tree-row[data-mar-lane="windowsPkg"]     { background-color: rgba(244, 114, 182, 0.04); }
.mar-tree-row[data-mar-lane="windowsPublish"] { background-color: rgba(251, 191, 36, 0.06); }
.mar-tree-row[data-mar-lane="windowsTests"]   { background-color: rgba(239, 68, 68, 0.04); }
.mar-tree-row[data-mar-lane="windowsWheels"]  { background-color: rgba(96, 165, 250, 0.06); }

/* "Failures only" filter — when active, hide tree-rows that don't have
   `data-has-failures="true"`. Container-wide attribute toggles visibility. */
.mar-tree-body[data-failures-only="true"] .mar-tree-row[data-has-failures="false"],
.mar-tree-body[data-failures-only="true"] .mar-tree-children[data-has-failures="false"] {
    display: none;
}

/* Light-theme adjustments */
[data-theme="light"] .mar-tree-panel {
    background: #fff;
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .mar-tree-row:hover { background: rgba(99, 102, 241, 0.07); }
[data-theme="light"] .mar-tree-header {
    /* Override both layers in light theme — solid pale-slate background,
       no white overlay (would wash it out). */
    background-color: #f8fafc;
    background-image: none;
    border-bottom-color: #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Narrow-screen fallback — sidebar takes near-full width */
@media (max-width: 768px) {
    .mar-tree-panel { width: 92vw; min-width: 0; }
}

/* Re-run indicator: small spinning glyph next to a terminal status when a
 * higher run_attempt is currently running. Keeps the headline status
 * authoritative (the last completed attempt) while signaling that a
 * re-run is in flight. */
.rerun-inflight-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    font-size: 0.75em;
    line-height: 1.2;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    cursor: help;
    animation: rerun-spin 2.4s linear infinite;
    transform-origin: center;
    vertical-align: middle;
}
@keyframes rerun-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------------
   Internal KPI dashboard helpers — chip-bar filters, regression-alert banner,
   sparkline SVG. All scoped to the internal Build Metrics tab (see
   frontend/internal/index.html).
   ---------------------------------------------------------------------------- */

/* Chip-bar multi-select. Pattern: render every option as a pill;
   .bm-chip-active marks selected ones. JS toggles the class and calls
   the change handler on click. Much simpler than a real <select multiple>
   widget for short lists (~4-15 items). */
.bm-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}
.bm-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12));
    color: var(--text-secondary, #94a3b8);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bm-chip:hover {
    background: var(--card-bg-hover, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #e5e7eb);
}
.bm-chip-active {
    background: var(--primary-light, #818cf8);
    border-color: var(--primary-light, #818cf8);
    color: #0f172a;
    font-weight: 600;
}

/* Regression alert banner at the top of the KPI dashboard. Single row
   summary (counts + worst delta) with click-to-jump-to-section links.
   Color toned by severity: red when any flagged, dim when none. */
.bm-alerts-banner {
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 14px 0;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.88rem;
}
.bm-alerts-banner-warn {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.45);
    color: var(--text-primary, #e5e7eb);
}
.bm-alerts-banner-good {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.30);
    color: var(--text-secondary, #94a3b8);
}
.bm-alerts-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.05rem;
}
.bm-alerts-banner-warn .bm-alerts-icon {
    background: rgba(239, 68, 68, 0.20);
    color: rgb(254, 202, 202);
}
.bm-alerts-banner-good .bm-alerts-icon {
    background: rgba(34, 197, 94, 0.20);
    color: rgb(187, 247, 208);
}
.bm-alerts-banner button.bm-alerts-jump {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
}
.bm-alerts-banner button.bm-alerts-jump:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Inline SVG sparkline used inside the Build extremes KPI cards (spec
   2.3 / 2.4 optional "Trend (sparkline) of that component's build time
   over the selected period"). The size is fixed at 120x28 to avoid
   layout shift when data loads. */
.bm-sparkline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.bm-sparkline path { fill: none; stroke-width: 1.4; }
.bm-sparkline circle { fill: currentColor; }

/* ============================================================================
 * Utility classes — extracted from inline `style="..."` attributes in app.js
 *
 * Backstory: the SPA had ~491 inline-style attributes, most of which were the
 * same 10-12 patterns copy-pasted into hundreds of template literals. This
 * block captures the highest-frequency patterns so future code paths can use
 * a single class instead of re-typing the recipe.
 *
 * Top patterns extracted (occurrences in app.js at the time of the cleanup):
 *   22  color:inherit;text-decoration:none;                          → .table-link
 *   13  text-align:center;padding:20px;color:var(--text-secondary);  → .empty-cell-muted
 *   12  color:var(--text-muted);                                     → .text-muted
 *    9  text-align:center;padding:20px;                              → .empty-cell
 *    9  color:inherit;                                               → .text-inherit
 *    7  white-space:nowrap;                                          → .nowrap
 *    7  text-align:center;                                           → .text-center
 *    7  font-size:0.78rem;                                           → .text-sm
 *    6  text-align:center;padding:18px;color:var(--text-secondary);  → .empty-cell-sm
 *    6  padding:30px;text-align:center;color:var(--text-secondary);  → .empty-cell-lg
 *    6  font-size:0.7rem;                                            → .text-xs
 *    6  color:var(--text-muted,#888);                                → .text-muted
 *
 * Naming intentionally mirrors Tailwind (.text-muted, .text-center, .nowrap)
 * so it stays familiar even though we're not pulling in the framework. The
 * `.empty-cell-*` ladder fixes a paper cut where empty-state cells were
 * styled with 18 / 20 / 30 px padding in three different files for no
 * principled reason — `.empty-cell-muted` is the default; the small / large
 * variants are only kept because they appear that many times and removing
 * the variance would be a visual regression.
 * ========================================================================== */

.table-link {
    color: inherit;
    text-decoration: none;
}
.text-inherit { color: inherit; }
.text-muted { color: var(--text-muted, #888); }
.text-secondary { color: var(--text-secondary); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.text-sm { font-size: 0.78rem; }
.text-xs { font-size: 0.7rem; }
/* Monospace + small font — combined into one class because the codebase used
 * the two declarations together every single time. */
.font-mono-sm {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
}
.success-text { color: var(--success); }
.primary-light-text { color: var(--primary-light); }
.warning-text { color: var(--warning); }
.hidden { display: none; }
.va-top { vertical-align: top; }
.mt-1 { margin-top: 4px; }
/* `.num-cell` is paired with `.text-right` for numeric table cells —
 * extracted because right-align + bold is the standard recipe for the
 * "value" column in the project's stats tables. */
.num-cell { font-weight: 600; }

.empty-cell {
    text-align: center;
    padding: 20px;
}
.empty-cell-muted {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
}
.empty-cell-sm {
    text-align: center;
    padding: 18px;
    color: var(--text-secondary);
}
.empty-cell-lg {
    padding: 30px;
    text-align: center;
    color: var(--text-secondary);
}

/* Insights-tab workflow chip — a label/badge for the workflow name shown
 * next to investigation summaries. The accent colour is keyed off the
 * theme variable so dark/light modes pick up the right shade. */
.insights-wf-link {
    background: rgba(129, 140, 248, 0.18);
    color: var(--accent-light, #818cf8);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}