/* ============================================================================
   sticky-cols.css — mobile sticky first-two-columns for ranking tables
   ----------------------------------------------------------------------------
   Opt-in: add class "sticky-cols" to a table whose column 1 is the rank
   (#/R#) and column 2 is PLAYER. On mobile/tablet (<= 991.98px) those two
   columns freeze on the left while the stat columns scroll under them.

   Ported verbatim (sticky mechanics only) from hashtagfootball.com
   /assets/css/data.css. Deliberately does NOT include the football
   ".psg-sep" section-spacer columns or the "pos-pill" position colours —
   this file is purely the pinned-column behaviour.

   Requirements:
     - the table must sit inside a horizontally-scrolling container
       (Bootstrap ".table-responsive").
     - if the rank cell (col 1) is wider than a plain number — e.g. a rank
       that also shows an up/down arrow or is a pill — add "sticky-rank-pill"
       alongside "sticky-cols" to widen col 1's reserved slot (--sticky-c1).

   How the "no transparency" requirement is met: each pinned cell gets an
   opaque background AND overrides Bootstrap's striped-row variables
   (--bs-table-bg-state / --bs-table-bg-type), so the coloured stat cells
   scrolling underneath never bleed through. The cell's own border is set to
   0 and rebuilt with inset box-shadows so the frame survives position:sticky.
   ============================================================================ */

/* Reserved width of the pinned rank column (col 1). Col 2 (PLAYER) is pinned
   at exactly this offset, so --sticky-c1 MUST be >= col 1's real rendered
   width. If col 1 renders wider than the slot (e.g. a 3-digit rank like #579
   needs ~42.5px but the slot was 40px), PLAYER overlaps col 1 and the pinned
   border visibly shifts on horizontal scroll. 48px fits a 3-digit rank.
   owner decision 2026-06-21. */
.sticky-cols { --sticky-c1: 48px; }

/* Wider still for pages whose rank cell is a pill / carries an arrow. */
.sticky-cols.sticky-rank-pill { --sticky-c1: 56px; }

@media (max-width: 991.98px) {
    .sticky-cols {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* # column: fixed width + sticky at left:0 */
    .sticky-cols th:nth-child(1),
    .sticky-cols td:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        width: var(--sticky-c1, 48px);
        min-width: var(--sticky-c1, 48px);
        isolation: isolate;
        border: 0;
    }

    /* # header (light) */
    .sticky-cols th:nth-child(1) {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-cols th:nth-child(1) {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* # body cells (light, striped) */
    .sticky-cols tr td:nth-child(1) {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-cols tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-cols tr td:nth-child(1) {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-cols tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Narrower PLAYER column on mobile */
    .sticky-cols th:nth-child(2) {
        min-width: 110px !important;
    }

    /* Sticky base */
    .sticky-cols td:nth-child(2),
    .sticky-cols th:nth-child(2) {
        position: -webkit-sticky;
        position: sticky;
        left: var(--sticky-c1, 48px);
        z-index: 2;
        isolation: isolate;
        border: 0;
    }

    /* Header (light) */
    .sticky-cols th:nth-child(2) {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-cols th:nth-child(2) {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* Body cells (light, striped) */
    .sticky-cols tr td:nth-child(2) {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-cols tr:nth-of-type(odd) td:nth-child(2) {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-cols tr td:nth-child(2) {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-cols tr:nth-of-type(odd) td:nth-child(2) {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Decorative right-edge gradient (scroll shadow on the PLAYER column) */
    .sticky-cols td:nth-child(2)::after,
    .sticky-cols th:nth-child(2)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 6px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    }
    .dark-layout .sticky-cols td:nth-child(2)::after,
    .dark-layout .sticky-cols th:nth-child(2)::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
}

/* ============================================================================
   sticky-team — pin ONLY the first column on mobile/tablet (<= 991.98px).
   Unlike .sticky-cols (which freezes cols 1+2 for a rank+player layout), this
   freezes just column 1 at whatever width it naturally has, and puts the
   scroll-shadow on its right edge. Used where the leftmost column is a single
   wide label (e.g. the Team column in the advanced schedule grid,
   extra/asg/*.ascx). Opt-in: add class "sticky-team" to the table.
   ============================================================================ */
@media (max-width: 991.98px) {
    .sticky-team {
        border-collapse: separate;
        border-spacing: 0;
    }

    .sticky-team th:nth-child(1),
    .sticky-team td:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        isolation: isolate;
        border: 0;
    }

    /* Header (light) */
    .sticky-team th:nth-child(1) {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-team th:nth-child(1) {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* Body cells (light, striped) */
    .sticky-team tr td:nth-child(1) {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-team tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-team tr td:nth-child(1) {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-team tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Right-edge scroll shadow on the pinned first column */
    .sticky-team td:nth-child(1)::after,
    .sticky-team th:nth-child(1)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 6px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    }
    .dark-layout .sticky-team td:nth-child(1)::after,
    .dark-layout .sticky-team th:nth-child(1)::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
}

/* On phones (<= 575.98px, where the short team name shows) halve the pinned
   first column: a 200px (mw200) slot is far too wide for a short code like
   "ATL"/"GP". Needs !important + higher specificity to beat ".mw200
   { min-width:200px !important }". owner request 2026-06-21. */
@media (max-width: 575.98px) {
    .sticky-team th:nth-child(1),
    .sticky-team td:nth-child(1) {
        min-width: 100px !important;
        width: 100px;
        max-width: 100px;
    }
}

/* The pinned first-column header label is wrapped in <span> for the responsive
   "Sort: Position" / "Sort: POS" toggle. style.css's
   ".table--statistics th span { font-size: 0.8rem }" (intended for two-line
   sub-label headers) otherwise shrinks that label, so the header rendered
   smaller than its un-wrapped sibling sort headers. Keep it at the header's
   own font size. Scoped to the page-specific "sticky-dvp" class (not the shared
   "sticky-team") so it only affects nba-defense-vs-position, never the other
   pinned-first-column pages. owner-reported 2026-06-22. */
.sticky-dvp th span {
    font-size: inherit !important;
}

/* ============================================================================
   sticky-adp — pin a WIDE first column (the PLAYER name) on mobile.
   Same pinned-column mechanism as sticky-team above, but the first column holds a
   player name rather than a 3-letter team code: it shows the short name on phones
   and GROWS to fit long names (min 110px) instead of being capped at 100px.
   Standalone (does NOT depend on sticky-team) so it can't affect the team pages.
   NOTE: if you change the pinned-column borders/shadows in sticky-team above,
   mirror the change here. Opt-in: add class "sticky-adp". Used by
   fantasy-basketball-adp.aspx. owner request 2026-06-22.
   ============================================================================ */
@media (max-width: 991.98px) {
    .sticky-adp {
        border-collapse: separate;
        border-spacing: 0;
    }

    .sticky-adp th:nth-child(1),
    .sticky-adp td:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        isolation: isolate;
        border: 0;
    }

    /* Header (light) */
    .sticky-adp th:nth-child(1) {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-adp th:nth-child(1) {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* Body cells (light, striped) */
    .sticky-adp tr td:nth-child(1) {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-adp tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-adp tr td:nth-child(1) {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-adp tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Right-edge scroll shadow on the pinned first column */
    .sticky-adp td:nth-child(1)::after,
    .sticky-adp th:nth-child(1)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 6px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    }
    .dark-layout .sticky-adp td:nth-child(1)::after,
    .dark-layout .sticky-adp th:nth-child(1)::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
}

/* Phone (<= 575.98px, where the short name shows): grow the PLAYER column to fit
   the name with a 110px floor, overriding the cell's mw200 full-name width so the
   pinned column isn't 200px wide on a small screen. */
@media (max-width: 575.98px) {
    .sticky-adp th:nth-child(1),
    .sticky-adp td:nth-child(1) {
        min-width: 110px !important;
        width: auto;
        max-width: none;
    }
}

/* ============================================================================
   sticky-rd — like sticky-cols (freeze the rank + PLAYER columns on mobile),
   but PIN BY CLASS instead of nth-child. Used on the import-v4 category
   rank/waiver pages where dynasty columns (OV#/CO#/RE#) sit BETWEEN R# and
   PLAYER in the desktop markup. On mobile those originals are hidden and a
   duplicate dynasty set is shown AFTER PLAYER (Bootstrap d-lg utilities), so
   PLAYER is not a fixed nth-child and must be targeted by class. ".srank" = the
   rank cell (col 1), ".splayer" = the PLAYER cell. Mechanism is otherwise a
   faithful copy of .sticky-cols above (opaque bg over striped rows, inset-shadow
   borders, dark-layout variants, right-edge scroll shadow). Opt-in: add
   "sticky-rd" to the table + "srank"/"splayer" to the two cells.
   owner request 2026-06-23. */
.sticky-rd { --sticky-c1: 48px; }

@media (max-width: 991.98px) {
    /* Stay in COLLAPSE mode (NOT separate): these import-v4 pages are hand-built
       <table>s whose row-separator lines come from a 1px border on <tr>, and a
       <tr> border only renders in border-collapse:collapse. (The GridView pages
       get away with the original sticky-cols "separate" because ASP.NET renders
       an inline border-collapse:collapse on the GridView <table> that overrides
       it.) Forcing "separate" here silently dropped every data-row line in the
       non-frozen columns. position:sticky + the box-shadow frame on the frozen
       cells both work fine in collapse mode. owner-reported 2026-06-23. */
    .sticky-rd {
        border-collapse: collapse;
    }

    /* R# column: fixed width + sticky at left:0 */
    .sticky-rd th.srank,
    .sticky-rd td.srank {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        width: var(--sticky-c1, 48px);
        min-width: var(--sticky-c1, 48px);
        isolation: isolate;
        border: 0;
    }

    /* R# header (light) */
    .sticky-rd th.srank {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-rd th.srank {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* R# body cells (light, striped) */
    .sticky-rd tr td.srank {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-rd tr:nth-of-type(odd) td.srank {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-rd tr td.srank {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-rd tr:nth-of-type(odd) td.srank {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Narrower PLAYER column on mobile (beats the cell's mw220) */
    .sticky-rd th.splayer {
        min-width: 110px !important;
    }

    /* PLAYER sticky base */
    .sticky-rd td.splayer,
    .sticky-rd th.splayer {
        position: -webkit-sticky;
        position: sticky;
        left: var(--sticky-c1, 48px);
        z-index: 2;
        isolation: isolate;
        border: 0;
    }

    /* PLAYER header (light) */
    .sticky-rd th.splayer {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-rd th.splayer {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* PLAYER body cells (light, striped) */
    .sticky-rd tr td.splayer {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-rd tr:nth-of-type(odd) td.splayer {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-rd tr td.splayer {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-rd tr:nth-of-type(odd) td.splayer {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Decorative right-edge gradient (scroll shadow on the PLAYER column) */
    .sticky-rd td.splayer::after,
    .sticky-rd th.splayer::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 6px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    }
    .dark-layout .sticky-rd td.splayer::after,
    .dark-layout .sticky-rd th.splayer::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
}

/* ============================================================================
   sticky-stand — pin the leading column(s) of the team-standings tables on
   mobile, in COLLAPSE mode. Used by the hand-built <table>s on beast-cat-*
   (League Standings → pin TEAM), smash-cat-* (Head-to-Head → pin WEEK) and
   scouting-cat-* (Overall Team Power Rankings → pin R# + TEAM). Like .sticky-rd,
   these tables draw their row-separator lines from a 1px <tr> border, which only
   renders in border-collapse:collapse — so this stays collapse, not separate.
   No short/abbreviated text on these (full team names wrap in the pinned col).
   Class-pinned: ".spin1" = first frozen column (left:0), ".spin2" = second
   frozen column (the R#+TEAM scouting layout). "--spin1w" is the first frozen
   column's width AND the .spin2 left offset (default 130px = a TEAM-name col;
   override with .sw-week for a short WEEK col, .sw-rt for an R# col). ".spinedge"
   marks the right-edge frozen cell carrying the scroll shadow.
   owner request 2026-06-23. */
.sticky-stand { --spin1w: 130px; }
.sticky-stand.sw-week { --spin1w: 100px; }  /* smash: WEEK (short) is col 1 */
.sticky-stand.sw-rt { --spin1w: 48px; }     /* scouting: R# is col 1, TEAM col 2 */

@media (max-width: 991.98px) {
    .sticky-stand {
        border-collapse: collapse;
    }

    /* first frozen column (TEAM on beast, WEEK on smash, R# on scouting) */
    .sticky-stand th.spin1,
    .sticky-stand td.spin1 {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        width: var(--spin1w);
        min-width: var(--spin1w) !important;
        max-width: var(--spin1w);
        isolation: isolate;
        border: 0;
    }

    /* second frozen column (TEAM on the scouting R#+TEAM layout) */
    .sticky-stand th.spin2,
    .sticky-stand td.spin2 {
        position: -webkit-sticky;
        position: sticky;
        left: var(--spin1w);
        z-index: 2;
        width: 130px;
        min-width: 130px !important;
        max-width: 130px;
        isolation: isolate;
        border: 0;
    }

    /* Header (light) */
    .sticky-stand th.spin1,
    .sticky-stand th.spin2 {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-stand th.spin1,
    .dark-layout .sticky-stand th.spin2 {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* Body cells (light, striped) */
    .sticky-stand tr td.spin1,
    .sticky-stand tr td.spin2 {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-stand tr:nth-of-type(odd) td.spin1,
    .sticky-stand tr:nth-of-type(odd) td.spin2 {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-stand tr td.spin1,
    .dark-layout .sticky-stand tr td.spin2 {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-stand tr:nth-of-type(odd) td.spin1,
    .dark-layout .sticky-stand tr:nth-of-type(odd) td.spin2 {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Right-edge scroll shadow on the last frozen column */
    .sticky-stand td.spinedge::after,
    .sticky-stand th.spinedge::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 6px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    }
    .dark-layout .sticky-stand td.spinedge::after,
    .dark-layout .sticky-stand th.spinedge::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
}

/* ============================================================
   sticky-1c — pin the FIRST column (addressed by position, not a helper
   class) on mobile, COLLAPSE mode. For hand-built tables whose only frozen
   column is column 1: the plan (H2H Planner) pages' Matchup Comparison table
   (BEFORE/AFTER label + team-name first column) and the Player Roster (PLAYER
   first column). Collapse — not separate — so the <tr> row separator lines
   render (same fix as .sticky-rd). Width via --c1w (default 130px). The short
   player name is plain markup on the cell; this class only freezes the column.
   owner request 2026-06-23.
   ============================================================ */
.sticky-1c { --c1w: 130px; }

@media (max-width: 991.98px) {
    .sticky-1c {
        border-collapse: collapse;
    }

    .sticky-1c th:nth-child(1),
    .sticky-1c td:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        width: var(--c1w);
        min-width: var(--c1w) !important;
        max-width: var(--c1w);
        isolation: isolate;
        border: 0;
    }

    /* Header (light) */
    .sticky-1c th:nth-child(1) {
        background-color: #f3f2f7 !important;
        --bs-table-bg-state: #f3f2f7;
        --bs-table-bg-type: #f3f2f7;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f3f2f7;
        z-index: 3;
    }
    .dark-layout .sticky-1c th:nth-child(1) {
        background-color: #343d55 !important;
        --bs-table-bg-state: #343d55;
        --bs-table-bg-type: #343d55;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #343d55;
    }

    /* Body cells (light, striped) */
    .sticky-1c tr td:nth-child(1) {
        background-color: #fff !important;
        --bs-table-bg-state: #fff;
        --bs-table-bg-type: #fff;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #fff;
    }
    .sticky-1c tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #f6f6f9 !important;
        --bs-table-bg-state: #f6f6f9;
        --bs-table-bg-type: #f6f6f9;
        box-shadow:
            inset 1px 0 0 #ebe9f1,
            inset -1px 0 0 #ebe9f1,
            inset 0 1px 0 #ebe9f1,
            inset 0 -1px 0 #ebe9f1,
            -2px 0 0 0 #f6f6f9;
    }
    .dark-layout .sticky-1c tr td:nth-child(1) {
        background-color: #283046 !important;
        --bs-table-bg-state: #283046;
        --bs-table-bg-type: #283046;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #283046;
    }
    .dark-layout .sticky-1c tr:nth-of-type(odd) td:nth-child(1) {
        background-color: #242b3d !important;
        --bs-table-bg-state: #242b3d;
        --bs-table-bg-type: #242b3d;
        box-shadow:
            inset 1px 0 0 #3b4253,
            inset -1px 0 0 #3b4253,
            inset 0 1px 0 #3b4253,
            inset 0 -1px 0 #3b4253,
            -2px 0 0 0 #242b3d;
    }

    /* Right-edge scroll shadow on the frozen column */
    .sticky-1c td:nth-child(1)::after,
    .sticky-1c th:nth-child(1)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 6px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    }
    .dark-layout .sticky-1c td:nth-child(1)::after,
    .dark-layout .sticky-1c th:nth-child(1)::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
}