/* ============================================================================
   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). */
#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 */
#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);
}
#multi-arch-release-tab th.rh-cat-header:not(.is-empty):hover {
    background: rgba(99, 102, 241, 0.28);
}
#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. */
#multi-arch-release-tab th.rh-grp-child,
#multi-arch-release-tab td.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.035);
}
#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. */
#multi-arch-release-tab th.rh-arch-header.rh-arch-drilled.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.14);
}
#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. */
#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. */
#multi-arch-release-tab th.rh-grp-child:hover {
    background-color: rgba(99, 102, 241, 0.10);
}

[data-theme="light"] #multi-arch-release-tab th.rh-grp-child,
[data-theme="light"] #multi-arch-release-tab td.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.04);
}
[data-theme="light"] #multi-arch-release-tab tbody tr:nth-child(even) td.rh-grp-child {
    background-color: rgba(99, 102, 241, 0.07);
}
#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. */
#multi-arch-release-tab th.rh-cat-header .job-header-text {
    writing-mode: horizontal-tb;
    transform: none;
}

#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). */
#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. */
#multi-arch-release-tab th.rh-arch-header.rh-arch-leaf {
    cursor: default;
}
#multi-arch-release-tab th.rh-arch-header.rh-arch-leaf:hover {
    background: rgba(255, 255, 255, 0.02);
}
#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). */
#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.) */
#multi-arch-release-tab th.rh-arch-header.rh-arch-drilled .job-header-text {
    color: #fff;
    font-weight: 700;
}
#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. */
#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);
}
#multi-arch-release-tab th.rh-detail-header .job-header-text {
    color: var(--text-muted, #aaa);
    font-size: 0.64rem;
}

[data-theme="light"] #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"] #multi-arch-release-tab th.rh-arch-header:hover {
    background: rgba(99, 102, 241, 0.10);
}
[data-theme="light"] #multi-arch-release-tab th.rh-arch-header.rh-arch-drilled {
    background: rgba(99, 102, 241, 0.10);
}
[data-theme="light"] #multi-arch-release-tab th.rh-cat-header {
    background: rgba(99, 102, 241, 0.05);
}
[data-theme="light"] #multi-arch-release-tab th.rh-cat-header.expanded {
    background: rgba(99, 102, 241, 0.12);
}