/* Page-specific styles for the unified leaderboard table */
.container {
    max-width: 1564px;
}

/* ── Sticky filters ─────────────────────────────────────────── */
.filters {
    position: sticky;
    top: var(--header-height, 240px);
    z-index: 100;
    background: var(--bg-secondary);
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

/* ── CTA in section header ──────────────────────────────────── */
.cta-text {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
}

.cta-link {
    color: var(--sonar-blue);
    font-weight: 600;
    text-decoration: none;
}

.cta-link:hover {
    text-decoration: underline;
}

/* ── Sections ───────────────────────────────────────────────── */
.leaderboard-section {
    margin-bottom: 40px;
}

.leaderboard-section .section-header {
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    scroll-margin-top: calc(var(--header-height, 240px) + 20px);
}

.section-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 12px 20px 16px;
    margin: 0;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.leaderboard-section .leaderboard-wrapper {
    border-radius: 0 0 12px 12px;
}

.chart-wrapper-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 24px 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.leaderboard-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: var(--bg-card);
    margin-bottom: 16px;
}

/* ── Table base ──────────────────────────────────────────────── */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ── Group header row (row 1 of thead) ───────────────────────── */
.leaderboard-table thead tr.group-header-row th {
    padding: 8px 12px;
    text-align: center;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

/* Override for the colored group-header cells */
.leaderboard-table .group-header {
    font-weight: 700;
    font-size: 0.75rem;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
}

.leaderboard-table .group-vuln {
    background: var(--color-danger);
}
.leaderboard-table .group-rel {
    background: var(--color-warning);
}
.leaderboard-table .group-maint {
    background: var(--color-success);
}

.col-unit {
    font-weight: 400;
    font-size: 0.65rem;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Sub-header row (row 2 of thead) ─────────────────────────── */
.leaderboard-table thead tr.subheader-row th {
    padding: 5px 10px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    text-align: right;
    border-bottom: 2px solid var(--border-color);
}

.leaderboard-table thead tr.subheader-row .group-vuln-col {
    background: rgba(248, 81, 73, 0.07);
    color: var(--color-danger);
}

.leaderboard-table thead tr.subheader-row .group-rel-col {
    background: rgba(210, 153, 34, 0.07);
    color: var(--color-warning);
}

.leaderboard-table thead tr.subheader-row .group-maint-col {
    background: rgba(63, 185, 80, 0.07);
    color: var(--color-success);
}

/* Left border at the start of each severity group in subheader row
   (cols 1, 3, 5 in the subheader which correspond to Vuln/Rel/Maint Blocker) */
.leaderboard-table thead tr.subheader-row th:nth-child(1),
.leaderboard-table thead tr.subheader-row th:nth-child(3),
.leaderboard-table thead tr.subheader-row th:nth-child(5) {
    border-left: 2px solid var(--border-color);
}

/* Separator borders on Lang (col 3), Released (col 4), Pass Rate (col 5),
   Issues (col 6), LOC (col 7), Cog. Complexity (col 8), and all group headers
   (cols 9, 10, 11) */
.leaderboard-table thead tr.group-header-row th:nth-child(3),
.leaderboard-table thead tr.group-header-row th:nth-child(4),
.leaderboard-table thead tr.group-header-row th:nth-child(5),
.leaderboard-table thead tr.group-header-row th:nth-child(6),
.leaderboard-table thead tr.group-header-row th:nth-child(7),
.leaderboard-table thead tr.group-header-row th:nth-child(8),
.leaderboard-table thead tr.group-header-row th:nth-child(9),
.leaderboard-table thead tr.group-header-row th:nth-child(10),
.leaderboard-table thead tr.group-header-row th:nth-child(11) {
    border-left: 2px solid var(--border-color);
}

/* ── Sortable header styles ───────────────────────────────────── */
.leaderboard-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: filter 0.12s;
}

.leaderboard-table th.sortable:hover {
    filter: brightness(0.92);
}

.leaderboard-table th.sorted {
    color: var(--accent-blue);
}

/* Override sorted color for colored group sub-headers */
.leaderboard-table thead tr.subheader-row th.sorted.group-vuln-col {
    color: var(--color-danger);
}
.leaderboard-table thead tr.subheader-row th.sorted.group-rel-col {
    color: var(--color-warning);
}
.leaderboard-table thead tr.subheader-row th.sorted.group-maint-col {
    color: var(--color-success);
}

.sort-arrow {
    font-size: 0.6rem;
    opacity: 0.65;
    margin-left: 3px;
}

/* ── Body rows ───────────────────────────────────────────────── */
.leaderboard-table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
}

.leaderboard-table tbody tr:last-child {
    border-bottom: none;
}

.leaderboard-table tbody tr.model-even {
    background: var(--bg-primary);
}

.leaderboard-table tbody tr:hover {
    background: rgba(31, 111, 235, 0.06);
}

/* Separator between model groups */
.leaderboard-table tbody tr.model-group-first {
    border-top: 1px solid var(--border-color);
}

.leaderboard-table tbody tr.model-group-first:first-child {
    border-top: none;
}

/* ── Body cells ──────────────────────────────────────────────── */
.leaderboard-table td {
    padding: 8px 10px;
    vertical-align: middle;
}

/* Separator borders applied via class (nth-child unreliable with rowspan) */
.leaderboard-table tbody td.col-sep {
    border-left: 2px solid var(--border-color);
}

/* ── Model cell ──────────────────────────────────────────────── */
.col-model {
    min-width: 162px;
    text-align: left !important;
}

.model-cell {
    font-weight: 500;
    color: var(--text-primary);
}

.model-cell .org {
    font-weight: 400;
    font-size: 0.6875rem;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
    padding-left: 22px;
}

.model-name-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Language cell ───────────────────────────────────────────── */
.col-lang {
    width: 48px;
    text-align: center !important;
}

/* ── Release date cell ───────────────────────────────────────── */
.col-release {
    width: 110px;
    text-align: center !important;
}

.release-cell {
    text-align: center;
    white-space: nowrap;
}

.lang-cell {
    text-align: center;
    vertical-align: middle;
}

.lang-cell-inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lang-icon {
    width: 16px;
    height: 16px;
    opacity: 0.9;
    transition: opacity 0.12s;
}

.lang-icon:hover {
    opacity: 1;
}

/* ── Pass rate, issue density, LOC & cog complexity headers ──── */
.col-passrate,
.col-issuedensity,
.col-loc,
.col-cogcomp {
    text-align: right !important;
    min-width: 89px;
}

/* ── Value cells ─────────────────────────────────────────────── */
.value-cell {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 61px;
}

.value-cell.passrate-cell {
    color: #005ec4;
}

.value-cell.severity-blocker {
    color: var(--color-danger);
}
.value-cell.severity-critical {
    color: #a35317;
}

/* ── Warning icon & tooltip ──────────────────────────────────── */
.warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: help;
}

.warning-icon svg {
    width: 14px;
    height: 14px;
    color: var(--color-warning);
}

.warning-tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 1000;
    background: rgba(30, 41, 59, 0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.warning-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(30, 41, 59, 0.95);
}

.warning-icon:hover .warning-tooltip {
    visibility: visible;
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
    margin-bottom: 32px;
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition:
        background 0.12s,
        border-color 0.12s,
        color 0.12s;
    user-select: none;
}

.pagination-btn:hover:not(:disabled):not(.pagination-active) {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

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

.pagination-btn.pagination-active {
    background: var(--sonar-blue);
    color: #fff;
    border-color: var(--sonar-blue);
    font-weight: 600;
}

.pagination-page {
    min-width: 36px;
    text-align: center;
}

.pagination-ellipsis {
    padding: 6px 4px;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.pagination-info {
    margin-left: 16px;
    color: var(--text-muted);
    font-size: 0.75rem;
}