/* ============================================================================
   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: var(--status-pass);
    color: #ffffff;
    border-color: var(--status-pass);
}

.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;
    }

    .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;
    }
}