/* ===== Mobile: pin leading identity columns while scrolling wide tables ===== */
:root {
    /* The pinned Pos and Car # columns are exactly these wide, so the second can be pinned right where the first ends. */
    --pin-pos-w: 3.75rem;
    --pin-car-w: 4.5rem;
}

@media (max-width: 767.98px) {
    .table-scroll-container th.stick-left,
    .table-scroll-container td.stick-left {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    /* Second pinned column (e.g. Car # after Pos on the results table). */
    .table-scroll-container th.stick-left-2,
    .table-scroll-container td.stick-left-2 {
        position: sticky;
        left: var(--pin-pos-w);
        z-index: 1;
    }

    /* Fixed widths, held against the content (a table cell otherwise grows to fit it), so each pinned column is where the next one expects it. */
    .table-scroll-container th.stick-pos-w,
    .table-scroll-container td.stick-pos-w,
    .table-scroll-container th.stick-left-2,
    .table-scroll-container td.stick-left-2 {
        box-sizing: border-box;
        overflow: hidden;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .table-scroll-container th.stick-pos-w,
    .table-scroll-container td.stick-pos-w {
        width: var(--pin-pos-w);
        min-width: var(--pin-pos-w);
        max-width: var(--pin-pos-w);
    }

    .table-scroll-container th.stick-left-2,
    .table-scroll-container td.stick-left-2 {
        width: var(--pin-car-w);
        min-width: var(--pin-car-w);
        max-width: var(--pin-car-w);
    }

    /* A badge beside the car number (speeding) wraps under it instead of spilling into the next column. */
    .table-scroll-container td.stick-left-2 {
        white-space: normal;
    }

    /* Pinned header cells must sit ABOVE the other sticky-top headers (z-index 2), which are opaque
       and later in the DOM, or they paint over the pinned header as you scroll horizontally. */
    .table-scroll-container thead th.stick-left,
    .table-scroll-container thead th.stick-left-2 {
        z-index: 3;
        background-color: var(--surface-raised);
    }
}

/* ===== Pinned cells: an opaque background in the row's state, above the scrolled cells (STS-399) =====
   Every table that pins columns shares .stick-left / .stick-left-2 inside .table-scroll-container (results tables, lap board,
   combined results, running cars, all runs, standings, device statuses), so this is the one place their pinned look is decided.
   The Bootstrap overrides above make row tints semi-transparent (and the warning and secondary ones !important), so a pinned cell
   that only copied them let the scrolled cells show through. Instead each row states its base and tints as variables, and the
   pinned cell paints the tints as gradients over an opaque base. Both layers a real cell has are modelled: the row's own tint,
   then the cell's tint over it. Pinned cells stack above scrolled cells (z-index 1) and below the sticky headers (2 and 3). */
:root {
    --row-tint-stripe: rgba(255, 255, 255, 0.03);
    --row-tint-warning: rgba(255, 200, 87, 0.18);
    --row-tint-secondary: rgba(255, 255, 255, 0.06);
}

@media (max-width: 767.98px) {
    /* Row states, later wins: normal, striped, hover, warning (offline, first place), secondary (second place). */
    .table-scroll-container tbody tr {
        --pin-base: var(--surface);
        --pin-row-tint: transparent;
        --pin-cell-tint: transparent;
    }

    .table-scroll-container .table-striped > tbody > tr:nth-of-type(odd) {
        --pin-cell-tint: var(--row-tint-stripe);
    }

    .table-scroll-container .table-hover > tbody > tr:hover {
        --pin-base: var(--surface-raised);
        --pin-cell-tint: transparent;
    }

    .table-scroll-container .table > tbody > tr.table-warning {
        --pin-base: var(--surface);
        --pin-row-tint: var(--row-tint-warning);
        --pin-cell-tint: var(--row-tint-warning);
    }

    .table-scroll-container .table > tbody > tr.table-secondary {
        --pin-base: var(--surface);
        --pin-row-tint: var(--row-tint-secondary);
        --pin-cell-tint: var(--row-tint-secondary);
    }

    /* !important because the warning and secondary overrides above set the cell background with it. */
    .table-scroll-container tbody td.stick-left,
    .table-scroll-container tbody td.stick-left-2 {
        background-color: var(--pin-base) !important;
        background-image:
            linear-gradient(var(--pin-cell-tint), var(--pin-cell-tint)),
            linear-gradient(var(--pin-row-tint), var(--pin-row-tint));
    }
}

/* A lap deleted for a track-limits violation: still shown, but plainly out of the running. */
.lap-deleted {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}