/* ============================================
   LineupIQ Stacks modal (team sports)
   Stack Exposure / Team Stacks / Game Stacks; box sized to content by JS
   ============================================ */

/* Overlay content box (the .slate-modal overlay itself centers it) —
   sized for this content rather than the slate picker's 1200px/70vh */
.stacks-modal-content {
    /* Width is set by LineupIQStacks.fitModalWidth() on open: one steady
       width for all three tabs = the widest tab's natural table width
       (+ the settings column on Stack Exposure), capped at 92vw. These are
       the pre-measure fallbacks. */
    width: 92%;
    max-width: 92vw;
    height: auto;
    max-height: 86vh;
}

/* Reset button: explicit colors — Bootstrap's btn-outline-secondary is
   near-invisible against our light-mode footer */
#stacksResetBtn {
    color: var(--liq-text-secondary);
    border-color: var(--liq-border-color);
    background: var(--liq-bg-primary);
}

    #stacksResetBtn:hover {
        color: var(--liq-text-primary);
        border-color: var(--liq-accent-green);
    }

    .stacks-modal-content .slate-modal-header {
        padding: 1rem 1.25rem;
    }

        .stacks-modal-content .slate-modal-header h2 {
            font-size: 1.15rem;
            margin: 0;
        }

/* Tab bar */
.stacks-tabbar {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 1.25rem 0;
    border-bottom: 1px solid var(--liq-border-color);
    flex-shrink: 0;
}

.stacks-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    color: var(--liq-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .stacks-tab:hover {
        color: var(--liq-text-primary);
    }

    .stacks-tab.active {
        color: var(--liq-accent-green);
        border-bottom-color: var(--liq-accent-green);
    }

/* Body: the only scroll region */
.stacks-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* No top padding on the SCROLLER: sticky headers park at top: 0 of the
       scrollport, so the breathing room lives on the pane instead */
    padding: 0 1.25rem 1rem;
    position: relative;   /* anchors off-screen measuring of hidden panes */
}

.stacks-pane {
    display: none;
    padding-top: 1rem;
}

    .stacks-pane.active {
        display: block;
    }

    /* fitModalWidth(): render a hidden pane invisibly to read its natural width */
    .stacks-pane.stacks-measuring {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        visibility: hidden;
        pointer-events: none;
    }

    /* ...and while measuring, every table reports its NATURAL width even
       if it normally stretches (Team Stacks) */
    .stacks-modal.stacks-measure .stacks-table-wrap {
        display: inline-block !important;
        width: auto !important;
    }

    .stacks-modal.stacks-measure .stacks-table {
        width: auto !important;
    }

/* Stack Exposure: table + settings column side by side (settings wrap
   under the table only if the box is narrower than both; mobile puts
   them on top, see the media block) */
.stacks-exposure-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.stacks-exposure-main {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

    /* The notes under the table must not widen the column (their long
       text would push the settings panel onto the next line): contribute
       0 to intrinsic width, then stretch to the table's width */
    .stacks-exposure-main > .form-text {
        width: 0;
        min-width: 100%;
    }

.stacks-settings-row.stacks-settings-panel {
    flex: 1 1 300px;
    min-width: 280px;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 0;
    overflow: hidden;   /* nothing may bleed past the card */
}

    /* Everything inside the column must be able to shrink and wrap */
    .stacks-settings-panel .stacks-setting {
        min-width: 0;
        max-width: 100%;
    }

    .stacks-settings-panel .stacks-bb-row {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .stacks-settings-panel .stacks-bb-count {
        flex: 0 0 auto;
    }

    .stacks-settings-panel .stacks-bb-pct span {
        white-space: nowrap;
    }

    .stacks-settings-panel .form-text {
        overflow-wrap: anywhere;
    }

/* Footer */
.stacks-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--liq-border-color);
    background: var(--liq-bg-tertiary);
    flex-shrink: 0;
}

    .stacks-footer-note {
        margin-left: auto;
    }

/* Global stack settings row (gap / orders / bring-back) */
.stacks-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--liq-bg-tertiary);
    border: 1px solid var(--liq-border-color);
    border-radius: 8px;
}

.stacks-setting {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 150px;
}

    .stacks-setting > label {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--liq-text-secondary);
    }

    .stacks-setting .form-text {
        font-size: 0.7rem;
        margin: 0;
    }

/* Bring-back: toggle + count + share */
.stacks-bb-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .stacks-bb-row .stacks-bb-count {
        width: 88px;
    }

    .stacks-bb-pct {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
    }

        .stacks-bb-pct input {
            width: 64px;
            text-align: center;
        }

        .stacks-bb-pct span {
            font-size: 0.8rem;
            color: var(--liq-text-secondary);
        }

.stacks-posted {
    color: var(--liq-accent-green);
    font-size: 0.72rem;
}

/* Pool exposure column: actual share of the generated pool */
.stacks-pool-col .stacks-pool-n {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}

.stacks-pool-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--liq-text-secondary);
}

    .stacks-pool-cell.stacks-pool-ok {
        color: var(--liq-accent-green);
    }

    .stacks-pool-cell.stacks-pool-warn {
        color: var(--liq-accent-yellow, #f59e0b);
    }

    .stacks-pool-cell.stacks-pool-bad {
        color: var(--liq-accent-red, #ef4444);
    }

/* Entry column: the same shares over lineups actually entered into contests.
   Only rendered once contests are assigned, so it sits to the right of Pool
   and carries a left rule to read as a separate pane. */
.stacks-entry-col,
.stacks-entry-cell {
    border-left: 1px solid var(--liq-border, rgba(255,255,255,0.12));
}

.stacks-entry-col .stacks-pool-n {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}

/* Batting-order chips 1..9 */
.stacks-order-chips {
    display: flex;
    gap: 0.2rem;
}

.stacks-chip.stacks-chip-wide {
    width: 40px;
}

.stacks-chip {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--liq-border-color);
    border-radius: 5px;
    background: var(--liq-bg-primary);
    color: var(--liq-text-muted, var(--liq-text-secondary));
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

    .stacks-chip.active {
        background: rgba(16, 185, 129, 0.15);
        border-color: var(--liq-accent-green);
        color: var(--liq-accent-green);
    }

/* Tables (the body scrolls; the table just needs its border/radius).
   overflow: clip (not hidden) keeps the rounded clip WITHOUT making the
   wrap a scroll container - that's what lets the sticky header row stick
   to the top of the scrolling body instead of to a box that never scrolls. */
.stacks-table-wrap {
    border: 1px solid var(--liq-border-color);
    border-radius: 8px;
    overflow: hidden;
    overflow: clip;
}

.stacks-table {
    font-size: 0.85rem;
    color: var(--liq-text-primary);
    --bs-table-bg: transparent;
    --bs-table-color: var(--liq-text-primary);
    --bs-table-border-color: var(--liq-border-color);
}

    .stacks-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--liq-bg-tertiary);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--liq-text-secondary);
        white-space: nowrap;
    }

    .stacks-table td {
        vertical-align: middle;
    }

    /* Sortable headers: click cycles desc -> asc -> original */
    .stacks-table th[data-sort] {
        cursor: pointer;
        user-select: none;
        padding-right: 1.1rem;
        /* no position here: the th is position: sticky (frozen header),
           which already anchors the ::after sort arrow; a relative here
           would outrank the sticky rule and un-freeze the row */
    }

        .stacks-table th[data-sort]:hover {
            color: var(--liq-text-primary);
        }

        .stacks-table th[data-sort]::after {
            content: '';
            position: absolute;
            right: 0.35rem;
            top: 50%;
            transform: translateY(-50%);
            border: 4px solid transparent;
            opacity: 0;
        }

        .stacks-table th[data-sort].sorted-desc::after {
            border-top-color: var(--liq-accent-green);
            border-bottom: 0;
            opacity: 1;
        }

        .stacks-table th[data-sort].sorted-asc::after {
            border-bottom-color: var(--liq-accent-green);
            border-top: 0;
            opacity: 1;
        }

        .stacks-table th[data-sort].sorted {
            color: var(--liq-accent-green);
        }

    .stacks-table .w-check {
        width: 40px;
    }

    .stacks-table .w-num {
        width: 96px;
    }

    /* Stack type: left-aligned, fixed comfortable width so the numeric
       columns sit close instead of the label spanning the whole table */
    .stacks-table th:nth-child(2),
    .stacks-table td.stacks-label {
        text-align: left;
        width: 140px;
    }

    /* Per-shape stack-mate chips (NFL) */
    .stacks-table .w-mates {
        width: 150px;
    }

    .stacks-row-mates {
        gap: 0.15rem;
    }

    /* NFL Stack Exposure: per-shape run-back (⇄) + mini (2 / 3) chips */
    .stacks-table .w-extras {
        width: 216px;
    }

    .stacks-row-extras {
        gap: 0.2rem;
    }

        .stacks-row-extras .stacks-chip-x {
            width: 26px;
        }

        .stacks-row-extras .stacks-chip-x .bi {
            font-size: 0.7rem;
        }

        /* "-" row has no run-back: keep the column aligned with a blank slot */
        .stacks-row-extras .stacks-chip-blank {
            display: inline-block;
            visibility: hidden;
        }

    /* NFL Team Stacks: per-team shapes + stack-mates */
    .stacks-table .w-shapes {
        width: 196px;
    }

    .stacks-row-shapes .stacks-chip.stacks-chip-sm {
        width: 30px;
    }

        /* Shape unticked on Stack Exposure: not available to any team */
        .stacks-row-shapes .stacks-chip.is-goff {
            opacity: 0.3;
            text-decoration: line-through;
            cursor: not-allowed;
        }

    /* Inherited-vs-override: active chips always read the same (solid);
       an override is marked by a small dot before the row, not by dimming
       the chips (dim read as "inactive") */
    .stacks-row-mates,
    .stacks-row-orders,
    .stacks-row-shapes,
    .stacks-row-teammates,
    .stacks-row-extras {
        position: relative;
        padding-left: 0.55rem;
    }

        .stacks-row-mates::before,
        .stacks-row-orders::before,
        .stacks-row-shapes::before,
        .stacks-row-teammates::before,
        .stacks-row-extras::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 5px;
            height: 5px;
            margin-top: -2.5px;
            border-radius: 50%;
            background: var(--liq-accent-green);
            opacity: 0;
        }

        .stacks-row-mates:not(.is-default)::before,
        .stacks-row-orders:not(.is-default)::before,
        .stacks-row-shapes:not(.is-default)::before,
        .stacks-row-teammates:not(.is-default)::before,
        .stacks-row-extras:not(.is-default)::before {
            opacity: 1;
        }

    .stacks-chip.stacks-chip-sm {
        width: 34px;
        height: 22px;
        font-size: 0.68rem;
    }

/* Tables don't need the full box width — let each size to its columns
   and sit left, so a 5-column NFL table isn't stretched across empty
   space while the 9-column MLB Team Stacks table uses what it needs */
.stacks-body .stacks-table-wrap {
    display: inline-block;
    max-width: 100%;
}

    /* Only when the box had to be capped at 92vw (fitModalWidth sets the
       class) do wraps scroll sideways - that costs the sticky header, so
       it's opt-in */
    .stacks-modal.stacks-capped .stacks-body .stacks-table-wrap {
        overflow-x: auto;
    }

.stacks-body .stacks-table {
    width: auto;
}

/* Team Stacks: per-team batting-order chips (MLB) */
.stacks-table .w-orders {
    width: 232px;
}

    .stacks-row-orders {
        gap: 0.12rem;
    }

        .stacks-row-orders .stacks-chip.stacks-chip-sm {
            width: 22px;
        }

/* Team Stacks: compact numeric inputs + a Gap select so ten columns fit.
   The table stretches to the box (MLB fills it anyway; on NFL the QB-name
   column takes the slack instead of leaving the right half empty). */
.stacks-body #stacksTabTeams .stacks-table-wrap {
    display: block;
}

.stacks-body .stacks-teams-table {
    width: 100%;
}

.stacks-teams-table th:nth-child(2),
.stacks-teams-table td.stacks-label {
    width: 96px;   /* logo + abbr; the generic 140px label width is for shape names */
}

.stacks-teams-table th:nth-child(3) {
    width: 56px;   /* Opp */
}

.stacks-teams-table .w-orders {
    width: 222px;
}

.stacks-teams-table input[type="number"] {
    width: 64px;
}

.stacks-teams-table .w-num {
    width: 80px;
}

.stacks-teams-table .w-gap {
    width: 104px;
}

    .stacks-teams-table .stacks-team-gap {
        width: 96px;   /* "global (Any)" + the arrow */
        padding: 2px 22px 2px 6px;
        font-size: 0.78rem;
    }

        /* Lineup posted but this spot isn't in it: hollow, dashed */
        .stacks-row-orders .stacks-chip.is-unposted {
            border-style: dashed;
            opacity: 0.55;
        }

/* Game Stacks: status line above the table */
.stacks-games-status {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--liq-border-color);
    background: var(--liq-bg-tertiary);
    color: var(--liq-text-secondary);
}

    .stacks-games-status.is-on {
        border-color: rgba(16, 185, 129, 0.45);
    }

    .stacks-games-status.is-on strong {
        color: var(--liq-accent-green);
    }

    .stacks-games-status.is-off strong {
        color: var(--liq-accent-yellow, #f59e0b);
    }

.stacks-games-table .w-allow {
    width: 120px;
}

.stacks-games-table td.stacks-allow-cell {
    text-align: center;
}

    .stacks-table input[type="number"] {
        width: 80px;
        text-align: center;
    }

    .stacks-table tr.stacks-row-off .stacks-label {
        opacity: 0.45;
        text-decoration: line-through;
    }

.stacks-label {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.stacks-team-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .stacks-team-cell .stacks-team-logo {
        width: 18px;
        height: 18px;
        display: block;
    }

    .stacks-team-cell .team-logo-missing {
        display: none;
    }

    .stacks-team-cell.stacks-team-off {
        opacity: 0.45;
        text-decoration: line-through;
    }

/* Game Stacks tab: AWAY @ HOME cell */
.stacks-game-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

    .stacks-game-cell .stacks-game-at {
        font-size: 0.7rem;
        font-weight: 400;
        color: var(--liq-text-secondary);
    }

.stacks-games-table th:first-child,
.stacks-games-table td.stacks-label {
    width: 190px;
    text-align: left;
}

/* Time column (2nd) — narrower than the generic 2nd-column label width */
.stacks-games-table th:nth-child(2),
.stacks-games-table td.stacks-label + td {
    width: 84px;
    text-align: left;
    white-space: nowrap;
}

/* ============================================
   Stacks modal — mobile (<= 768px)
   Full-screen box (matches the slate picker), scrollable tab strip,
   settings above the table, tables scroll sideways inside their wrap,
   footer wraps to two rows.
   ============================================ */
@media (max-width: 768px) {
    .stacks-modal-content {
        width: 100% !important;   /* fitModalWidth() clears its inline width here too */
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

        .stacks-modal-content .slate-modal-header {
            padding: 0.75rem 1rem;
        }

    .stacks-tabbar {
        padding: 0.35rem 0.75rem 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .stacks-tabbar::-webkit-scrollbar {
            display: none;
        }

    .stacks-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.45rem 0.7rem;
    }

    /* Footer: let the note wrap fully (it was clipping) and keep some
       breathing room above the iOS home indicator */
    .stacks-footer {
        flex-wrap: wrap;
        row-gap: 0.35rem;
        padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    }

    .stacks-footer-note {
        flex: 1 1 100%;
        margin-left: 0;
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .stacks-body {
        padding: 0 0.75rem 0.75rem;
    }

    .stacks-pane {
        padding-top: 0.75rem;
    }

    /* Settings first, full width, one setting per row */
    .stacks-exposure-layout {
        gap: 0.75rem;
    }

    .stacks-settings-row.stacks-settings-panel {
        order: -1;
        flex: 1 1 100%;
        min-width: 0;
        padding: 0.5rem 0.6rem 0.6rem;
    }

    .stacks-exposure-main {
        flex: 1 1 100%;
        min-width: 0;
    }

    .stacks-bb-row {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    /* Tables: full-width scroll containers */
    .stacks-body .stacks-table-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stacks-table {
        font-size: 0.8rem;
    }

        /* Slimmer inputs: the 5-column Stack Exposure table then fits a
           375px screen without sideways scroll */
        .stacks-table input[type="number"] {
            width: 56px;
        }

        .stacks-table .w-num {
            width: 64px;
        }

        .stacks-table th:nth-child(2),
        .stacks-table td.stacks-label {
            width: auto;
            min-width: 84px;
        }

    /* Wide tables (Team Stacks, Game Stacks) scroll sideways; keep the
       identifying columns pinned so the row stays readable while scrolling */
    .stacks-teams-table th:nth-child(1),
    .stacks-teams-table td:nth-child(1),
    .stacks-teams-table th:nth-child(2),
    .stacks-teams-table td:nth-child(2),
    .stacks-table-qb th:nth-child(1),
    .stacks-table-qb td:nth-child(1),
    .stacks-table-qb th:nth-child(2),
    .stacks-table-qb td:nth-child(2),
    .stacks-games-table th:nth-child(1),
    .stacks-games-table td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--liq-bg-secondary);
    }

    .stacks-teams-table th:nth-child(2),
    .stacks-teams-table td:nth-child(2),
    .stacks-table-qb th:nth-child(2),
    .stacks-table-qb td:nth-child(2) {
        left: 40px;   /* after the On / allow column */
        box-shadow: 4px 0 6px -4px var(--liq-shadow);
    }

    .stacks-games-table th:nth-child(1),
    .stacks-games-table td:nth-child(1) {
        box-shadow: 4px 0 6px -4px var(--liq-shadow);
    }

    /* Header cells are sticky-top already; pinned ones need both + a higher layer */
    .stacks-teams-table thead th:nth-child(1),
    .stacks-teams-table thead th:nth-child(2),
    .stacks-table-qb thead th:nth-child(1),
    .stacks-table-qb thead th:nth-child(2),
    .stacks-games-table thead th:nth-child(1) {
        z-index: 3;
        background: var(--liq-bg-tertiary);
    }

    .stacks-games-status {
        font-size: 0.75rem;
    }

    /* Footer: note drops to its own row under the buttons */
    .stacks-footer {
        flex-wrap: wrap;
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

        .stacks-footer-note {
            order: 3;
            flex: 1 1 100%;
            margin-left: 0;
            font-size: 0.72rem;
        }

        .stacks-footer #stacksDoneBtn {
            margin-left: auto;
        }
}

/* Stack Exposure (NFL) extras cell: [⇄ 1 2 3] · [⌥ 2 3 4] */
.stacks-row-extras .stacks-x-glyph {
    display: inline-flex;
    align-items: center;
    color: var(--liq-text-secondary);
    font-size: 0.72rem;
    margin-right: 0.05rem;
}

.stacks-row-extras .stacks-x-sep {
    width: 1px;
    height: 18px;
    background: var(--liq-border-color);
    margin: 0 0.25rem;
}

.stacks-row-extras .stacks-chip-x.stacks-chip-sm {
    width: 22px;
}

/* NFL shapes table: seven columns incl. the extras cell - trim the others
   so the table + settings column still fit a 1280 screen side by side */
.stacks-table-qb th:nth-child(2),
.stacks-table-qb td.stacks-label {
    width: 118px;
}

.stacks-table-qb .w-mates {
    width: 128px;
}

    .stacks-table-qb .stacks-row-mates .stacks-chip.stacks-chip-sm {
        width: 30px;
    }

.stacks-table-qb .w-num {
    width: 84px;
}

    .stacks-table-qb input[type="number"] {
        width: 70px;
    }

.stacks-table-qb .w-extras {
    width: 238px;   /* [⇄ – 1 2 3] · [– 2 3 4] */
}

    .stacks-table-qb .stacks-row-extras .stacks-chip-x.stacks-chip-sm {
        width: 21px;
        font-size: 0.66rem;
    }

    .stacks-table-qb .stacks-row-extras {
        gap: 0.15rem;
    }

/* Global run-back / secondary size chips in the settings column (NFL) */
.stacks-global-sizes {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

    .stacks-global-sizes .stacks-x-glyph {
        color: var(--liq-text-secondary);
        font-size: 0.75rem;
        margin-right: 0.15rem;
    }

    .stacks-global-sizes .stacks-chip.stacks-chip-sm {
        width: 26px;
        height: 24px;
    }

.stacks-setting > label .stacks-label-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
    margin-left: 0.3rem;
}