/* ============================================================================
   adp.css (hockey) - fantasy-hockey-adp draft boards: board grid, draft-pick
   cards, the position colour tokens, and the source segmented toggle.
   Ported from hashtagbasketball assets/css/adp.css (?v=22) on 2026-08-31;
   basketball's block in turn came from hashtagfootball adp.css + data.css.
   Loaded from the page head placeholder, which precedes the framework CSS in
   main-ad.master, so overrides must win by specificity, not source order.
   ============================================================================ */

/* Position colour tokens and the .pos-pill/.adp-pos-col styles moved to
   pos-pill.css 2026-08-31 (shared with the points-league and import-v2
   pages). This file must be loaded together with pos-pill.css on the ADP
   page; the .adp-primary overrides below target the pill classes it
   defines. */

.draft-board-scroll { overflow-x: auto; }
/* ONE shared min-width for all three boards (football used 950/1100/1280,
   which made the boards render different total widths when switching team
   counts). Every board fills the card to the same overall width; the 1fr
   tracks give each board its own uniform per-cell width (10-team cells wider
   than 14-team). Below 1100px the boards all scroll identically. */
.draft-board { min-width: 1100px; }
.draft-row {
    display: grid;
    /* minmax(0,1fr), NOT bare 1fr: bare 1fr means minmax(auto,1fr), so an
       unbreakable name (A.Vasilevskiy) grows its track and steals width from
       the other cells in the row. minmax(0,1fr) locks every track equal;
       overflow-wrap on .draft-pick breaks the long names instead. */
    grid-template-columns: 40px repeat(12, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 4px;
}
.draft-row--10 { grid-template-columns: 40px repeat(10, minmax(0, 1fr)); }
.draft-row--14 { grid-template-columns: 40px repeat(14, minmax(0, 1fr)); }
.psg-day-pill input { display: none; }
.adp-view-pills { display: flex; gap: 4px; }
.draft-row--header {
    font-weight: 600;
    font-size: 0.78rem;
    text-align: center;
    color: var(--bs-secondary-color, #6e6b7b);
    padding-bottom: 4px;
}
.draft-row--header > div { padding: 4px 0; }
.draft-cell--label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--bs-secondary-color, #6e6b7b);
}
/* Cell text stays #1f2937 in BOTH themes, exactly like football/basketball
   (dark mode mutes the fills instead of lightening the text). One shared text
   colour, not a per-position tint: multi-position cells are var()-token
   gradients set inline by the page, so a single colour must read over every
   position fill. */
.draft-pick {
    position: relative;
    padding: 6px 8px 14px;
    border-radius: 4px;
    color: #1f2937;
    font-size: 0.78rem;
    line-height: 1.2;
    min-height: 52px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.draft-pick__name  { font-weight: 700; }
.draft-pick__meta  { font-size: 0.7rem; opacity: 0.85; }
.draft-pick__order {
    position: absolute;
    right: 5px;
    bottom: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}
/* No parseable position (rare: a few rows lack one source's string and the
   page falls back across all three): neutral cell, theme-appropriate text. */
.draft-pick--none {
    background: #f3f2f7;
    color: #5e5873;
}
.dark-layout .draft-pick--none {
    background: #343d55;
    color: #b4b7bd;
}
@media (max-width: 767.98px) {
    .draft-pill-suffix { display: none; }
}

.adp-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.adp-board-header h5 { margin: 0; }
.adp-board-header--end { justify-content: flex-end; }
.adp-board-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.adp-order-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-body-color, #6e6b7b);
    padding: 6px 4px;
}
.dark-layout .adp-order-label {
    color: #b4b7bd;
}
/* Segmented toggle: basketball's orange swapped for the hockey site blue
   (#4662aa, the psg-styles.css pill/accent colour). */
.adp-segmented {
    display: inline-flex;
    background: rgba(70, 98, 170, 0.08);
    padding: 3px;
    border-radius: 8px;
    gap: 2px;
}
.adp-segmented__btn {
    border: 0;
    background: transparent;
    color: var(--bs-body-color, #6e6b7b);
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.adp-segmented__btn:hover:not(.active) {
    color: #4662aa;
}
.adp-segmented__btn.active {
    background: #4662aa;
    color: #fff;
    box-shadow: 0 1px 3px rgba(70, 98, 170, 0.4);
}
.dark-layout .adp-segmented {
    background: rgba(70, 98, 170, 0.12);
}
.dark-layout .adp-segmented__btn {
    color: #b4b7bd;
}
.dark-layout .adp-segmented__btn:hover:not(.active) {
    color: #6e8ad0;
}
.dark-layout .adp-segmented__btn.active {
    color: #fff;
}
@media (max-width: 575.98px) {
    .adp-segmented { width: 100%; }
    .adp-segmented__btn { flex: 1; padding: 6px 8px; }
    .adp-order-label { display: none; }
    .adp-board-controls { width: 100%; }
}

/* ---- Primary colour mode ----
   The page emits --pos-primary (the projection table's pos token) on every
   cell and pill; toggling class adp-primary on a view card swaps the
   multi-position background for the single primary colour. !important because
   the multi background is an inline style. */
.adp-primary .draft-pick:not(.draft-pick--none) {
    background: var(--pos-primary) !important;
}
.adp-primary .pos-pill__seg {
    background: var(--pos-primary) !important;
}

/* ---- Section dividers (separator columns), opt-in via .psg-sep ----
   Ported from football data.css: removes the header/stripe fill so the gutter
   shows the card colour, and punches the row lines out of the channel.
   border-style HIDDEN (not transparent): dark mode adds a 2px row line and in
   border-collapse the wider border wins, but hidden suppresses it regardless. */
.table--statistics th.psg-sep,
.table--statistics td.psg-sep {
    background-color: #fff !important;
    --bs-table-accent-bg: none !important;
    border-top: 1px hidden !important;
    border-bottom: 1px hidden !important;
    /* Channel width = this horizontal padding x2 (football's original width). */
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
.dark-layout .table--statistics th.psg-sep,
.dark-layout .table--statistics td.psg-sep {
    background-color: #283046 !important;
}

/* ---- Mobile: sticky NAME column on the raw table ----
   Ported from football adp.css verbatim: NAME is the rowspan-2 first cell of
   header row 1. */
@media (max-width: 575.98px) {
    .table--statistics {
        /* SEPARATE (not collapse): position:sticky cells render correctly only in
           border-collapse:separate (collapse breaks the sticky cell's border in
           Firefox/Safari). Separate drops the <tr> divider, so the non-frozen cells
           repaint a 1px bottom line via box-shadow below. owner decision 2026-06-25
           (football). */
        border-collapse: separate;
        border-spacing: 0;
    }

    .table--statistics td:not(.psg-sep),
    .table--statistics th:not(.psg-sep) {
        box-shadow: inset 0 -1px 0 #ebe9f1;
    }
    .dark-layout .table--statistics td:not(.psg-sep),
    .dark-layout .table--statistics th:not(.psg-sep) {
        box-shadow: inset 0 -1px 0 #3b4253;
    }

    /* Narrower NAME column on mobile */
    .table--statistics tr:first-child th:nth-child(1) {
        min-width: 110px !important;
    }

    /* Sticky base: body name cells + the NAME header cell.
       No translate3d / will-change: GPU layers leave hairline gaps between the
       box-shadow row dividers (sub-pixel layer rounding). owner decision
       2026-06-25 (football). */
    .table--statistics tr:first-child th:nth-child(1),
    .table--statistics tr td:nth-child(1) {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        isolation: isolate;
        border: 0;
    }

    /* Header (light) */
    .table--statistics tr:first-child 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;
        z-index: 3;
    }
    .dark-layout .table--statistics tr:first-child 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;
    }

    /* Body cells (light, striped) */
    .table--statistics 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;
    }
    .table--statistics 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;
    }
    .dark-layout .table--statistics 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;
    }
    .dark-layout .table--statistics 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;
    }

    /* Decorative right-edge gradient */
    .table--statistics tr td:nth-child(1)::after,
    .table--statistics tr:first-child 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 .table--statistics tr td:nth-child(1)::after,
    .dark-layout .table--statistics tr:first-child th:nth-child(1)::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
}

/* ============================================
   Raw table: Order By also filters columns
   (blend = all; a single source shows only its
   own group + NAME/TEAM + BLEND, which stays
   visible in every mode - basketball owner
   decision 2026-08-20; draft boards keep all
   sections)
   ============================================ */
#rawDataTable.adp-raw-yahoo .adp-col-e,
#rawDataTable.adp-raw-espn .adp-col-y {
    display: none;
}