/* ==========================================================================
   tables.css — Sortable stat tables (CORE component)
   ========================================================================== */

/* --- Table wrapper (horizontal overflow on mobile) ----------------------- */
.stat-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Stat table ----------------------------------------------------------- */
.stat-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

/* --- Header --------------------------------------------------------------- */
.stat-table thead th {
    background: var(--c-surface-2);
    font-family: var(--f-body);
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-dim);
    padding: var(--s-12) var(--s-8);
    text-align: left;
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
    user-select: none;
    border-bottom: 2px solid var(--c-border);
}

/* Sort indicator arrows */
.stat-table thead th[aria-sort]::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--s-4);
    border: 4px solid transparent;
    vertical-align: middle;
}

.stat-table thead th[aria-sort="ascending"]::after {
    border-bottom-color: var(--c-accent);
}

.stat-table thead th[aria-sort="descending"]::after {
    border-top-color: var(--c-accent);
}

/* Active sort column header underline */
.stat-table thead th[aria-sort] {
    border-bottom: 2px solid var(--c-accent);
    color: var(--c-text);
}

/* --- Body rows ------------------------------------------------------------ */
.stat-table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background var(--dur) var(--ease);
}

.stat-table tbody tr:nth-child(even) {
    background: var(--c-surface);
}

.stat-table tbody tr:hover {
    background: var(--c-surface-2);
}

/* --- Cells ---------------------------------------------------------------- */
.stat-table td {
    padding: var(--s-12) var(--s-8);
    font-family: var(--f-body);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
}

/* Team name column */
.stat-table td.team-name {
    font-weight: 600;
    white-space: nowrap;
}

/* Position column */
.stat-table td.pos {
    font-weight: 600;
    color: var(--c-text-dim);
    text-align: center;
    width: 40px;
}

/* --- Mobile: priority columns --------------------------------------------- */
.stat-table .col-priority-2,
.stat-table .col-priority-3 {
    /* Hidden on mobile, shown on desktop — controlled in responsive.css */
}

/* --- Sticky first column on mobile ---------------------------------------- */
@media (max-width: 767px) {
    .stat-table thead th:first-child,
    .stat-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 5;
        background: var(--c-bg);
    }

    .stat-table tbody tr:nth-child(even) td:first-child {
        background: var(--c-surface);
    }

    .stat-table thead th:first-child {
        background: var(--c-surface-2);
        z-index: 11;
    }
}