/* ============================================================================
   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);
}

/* 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. */