/* schedule-grid.css - NBA Schedule Grid + Fantasy Optimizer */

/* ========================================
   GLOBAL OVERRIDES
   Reset front.css globals that break this page
   ======================================== */
.schedule-page button {
    background-color: transparent !important;
    margin-bottom: 0 !important;
}

.schedule-page button:hover {
    background-color: transparent !important;
}

.schedule-page table tr th {
    background-color: inherit;
    border-bottom: none;
}

.schedule-page table tr:nth-child(even) {
    background-color: transparent;
}

.schedule-page table tr:hover {
    background-color: transparent;
    cursor: default;
}

.schedule-page table tr td,
.schedule-page table tr th {
    vertical-align: middle !important;
}

/* ========================================
   PAGE LAYOUT
   ======================================== */
.schedule-page {
    padding: 15px 20px;
}

/* ========================================
   CONTROLS ROW
   ======================================== */
.schedule-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.controls-left {
    display: flex;
    align-items: center;
}

.controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sport Selector Buttons — match /players default Bootstrap sizing */

/* Week Selector — match button height/font */
#week-selector {
    width: 160px;
    min-width: 160px;
    font-size: 14px;
    height: 38px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Week dropdown: past weeks italic + grey, current week bold */
#week-selector option[data-past] {
    font-style: italic !important;
    color: var(--tmb-gray-600) !important;
}

#week-selector option[data-current] {
    font-weight: bold !important;
    color: #000 !important;
}

/* Optimize Button */
.schedule-page .btn-optimize {
    background-color: var(--tmb-brand) !important;
    color: white !important;
    font-weight: bold;
    border: none !important;
    padding: 6px 22px;
    font-size: 14px;
    height: 38px;
}

.schedule-page .btn-optimize:hover {
    background-color: var(--tmb-green) !important;
    color: white !important;
}

/* Share Button */
.schedule-page .btn-share {
    background-color: transparent !important;
    color: var(--tmb-gray-600) !important;
    border: 1px solid var(--tmb-gray-400) !important;
    font-weight: bold;
    padding: 6px 22px;
    font-size: 14px;
    height: 38px;
    white-space: nowrap;
}

.schedule-page .btn-share i,
.schedule-page .btn-share .fas,
.schedule-page .btn-share .fa-share-alt,
.schedule-page .btn-share .fa-check {
    display: inline !important;
    vertical-align: baseline;
}

.schedule-page .btn-share:hover {
    background-color: var(--tmb-gray-100) !important;
    color: var(--tmb-gray-700) !important;
    border-color: var(--tmb-gray-500) !important;
}

.schedule-page .btn-share .fa-check {
    color: var(--tmb-brand);
}

/* ========================================
   SCHEDULE TABLE
   ======================================== */

/* Contained scroll area — rows scroll inside here and never escape behind the header */
#schedule-grid-container {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    overflow-x: auto;
}

#schedule-table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
}

#schedule-table thead th {
    background-color: var(--tmb-brand-dark) !important;
    color: #fff !important;
    font-weight: bold;
    padding: 8px 6px !important;
    text-align: center;
    border: none;
    position: sticky;
    top: 0;
    z-index: 8;
    white-space: nowrap;
    /* box-shadow paints ON TOP at the header's z-index, so body cell borders can never bleed through */
    box-shadow: inset 0 0 0 1px var(--tmb-brand-dark), 0 2px 0 0 var(--tmb-brand-dark);
}

#schedule-table thead th small {
    display: block;
    font-weight: normal;
    font-size: 10px;
    opacity: 0.8;
}

#schedule-table thead th.team-col,
#schedule-table tbody td.team-col {
    text-align: left;
    min-width: 60px;
    width: 60px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-right: 2px solid #000;
}

#schedule-table thead th.gp-col,
#schedule-table tbody td.gp-col {
    min-width: 35px;
    width: 35px;
    border-right: 2px solid #000;
    font-weight: bold;
    text-align: center;
}

#schedule-table tbody td.game-cell {
    text-align: center;
    padding: 5px 4px;
    white-space: nowrap;
    min-width: 75px;
    font-size: 12px;
    border: 1px solid var(--tmb-gray-300);
    font-weight: bold;
    color: var(--tmb-gray-900);
}

#schedule-table tbody td.game-away {
    color: var(--tmb-gray-700);
}

.rank-label {
    font-weight: normal;
    font-size: 10px;
    opacity: 0.7;
}

/* College: a ranked team's place in the Top 25 before its name ("#6"), on a
   row's own team and on an opponent, in both grids (schedule-grid.js,
   pollRankSpan). Named for this page: the stylesheet is loaded for a whole
   dashboard. */
.sched-poll-rank {
    font-weight: normal;
    font-size: 10px;
    opacity: 0.75;
    margin-right: 3px;
}

#schedule-table tbody td.no-game {
    background-color: var(--tmb-gray-100);
}

#schedule-table tbody tr:hover td {
    filter: brightness(0.93);
}

/* Past Day Greying — body cells only use opacity */
#schedule-table tbody td.past-day,
#optimizer-table tbody td.past-day {
    opacity: 0.35;
}

/* Header past-day: fully opaque muted colors (no opacity so rows can't bleed through) */
#schedule-table thead th.past-day,
#optimizer-table thead th.past-day {
    background-color: color-mix(in srgb, var(--tmb-brand-dark), white 15%) !important;
    color: color-mix(in srgb, var(--tmb-gray-100) 50%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tmb-brand-dark), white 23%), 0 2px 0 0 color-mix(in srgb, var(--tmb-brand-dark), white 23%);
}

#schedule-table thead th.past-day small,
#optimizer-table thead th.past-day small {
    color: color-mix(in srgb, var(--tmb-gray-100) 35%, transparent) !important;
}

/* Next Week Preview — greyed out reference columns (desktop only) */
#schedule-table thead th.next-week {
    background-color: color-mix(in srgb, var(--tmb-brand-dark), white 15%) !important;
    color: color-mix(in srgb, var(--tmb-gray-100) 50%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tmb-brand-dark), white 23%), 0 2px 0 0 color-mix(in srgb, var(--tmb-brand-dark), white 23%);
}

#schedule-table thead th.next-week small {
    color: color-mix(in srgb, var(--tmb-gray-100) 35%, transparent) !important;
}

#schedule-table tbody td.next-week {
    opacity: 0.35;
}

/* Separator between current and next week */
#schedule-table thead th.next-week-first {
    border-left: 3px solid #000 !important;
}

#schedule-table tbody td.next-week-first {
    border-left: 3px solid var(--tmb-gray-400) !important;
}

/* Past Week View — italicize entire grid, remove per-cell dimming */
#week-selector option[data-past="1"] { font-style: italic; }
.past-week-view #schedule-table tbody { font-style: italic; }
.past-week-view #schedule-table tbody td.past-day { opacity: 1; }
.past-week-view #schedule-table thead th.past-day {
    background-color: var(--tmb-brand-dark) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px var(--tmb-brand-dark), 0 2px 0 0 var(--tmb-brand-dark) !important;
}
.past-week-view #schedule-table thead th.past-day small {
    opacity: 0.8 !important;
    color: #fff !important;
}

/* Team Exclude Button (hover X replaces GP number) */
.team-exclude-btn {
    display: none;
    color: var(--tmb-gray-600);
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    background: var(--tmb-gray-100);
    border: 1px solid var(--tmb-gray-400);
    border-radius: 4px;
    width: 22px;
    height: 20px;
    padding: 0;
    vertical-align: middle;
    /* Flex to perfectly center the × */
    align-items: center;
    justify-content: center;
}

#schedule-table tbody tr:hover .team-exclude-btn {
    display: inline-flex;
}

#schedule-table tbody tr:hover .gp-number {
    display: none;
}

.team-exclude-btn:hover {
    color: #fff;
    background: color-mix(in srgb, var(--tmb-red-700), var(--tmb-orange) 29%);
    border-color: color-mix(in srgb, var(--tmb-yellow), var(--tmb-red-700) 89%);
}

/* ========================================
   OPTIMIZER PANEL
   ======================================== */
#optimizer-panel {
    margin-bottom: 15px;
    border-top: 3px solid var(--tmb-brand);
    padding-top: 12px;
}

#optimizer-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
    padding: 10px 12px;
    background-color: var(--tmb-gray-100);
    border: 1px solid var(--tmb-gray-300);
    border-radius: 4px;
}

.opt-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.opt-group label {
    font-size: 12px;
    font-weight: bold;
    color: var(--tmb-gray-600);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.opt-group select {
    font-size: 13px;
    padding: 5px 10px;
    min-width: 100px;
    height: 34px;
}

/* H/A Splits Toggle — matches matchup page filter-switch */
.schedule-page .filter-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 0;
    height: 34px;
}

.schedule-page .filter-switch input {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.schedule-page .filter-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--tmb-gray-400);
    border-radius: 24px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.schedule-page .filter-slider:before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px var(--tmb-black-15);
}

.schedule-page .filter-switch input:checked + .filter-slider {
    background-color: var(--tmb-switch-on);
}

.schedule-page .filter-switch input:checked + .filter-slider:before {
    transform: translateX(20px);
}

.schedule-page .filter-switch:hover .filter-slider {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tmb-blue-alt-hover) 10%, transparent);
}

/* Games Filter Checkboxes (Bootstrap custom-checkbox) */
.games-filter-checks {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 34px;
}

.games-check-wrap {
    padding-left: 1.4rem;
    min-height: auto;
    margin: 0;
}

.games-check-wrap .custom-control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tmb-gray-700);
    cursor: pointer;
    line-height: 1.4;
    padding-top: 1px;
}

.games-check-wrap .custom-control-label::before,
.games-check-wrap .custom-control-label::after {
    top: 0.15rem;
}

.games-check-wrap .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tmb-brand);
    border-color: var(--tmb-brand);
}

/* Info Circle Tooltips (CSS-based) */
.opt-info-wrap {
    position: relative;
    display: inline-block;
    margin-left: 2px;
    vertical-align: baseline;
}

.opt-info-wrap .fa-info-circle {
    color: var(--tmb-gray-500);
    font-size: 11px;
    cursor: help;
}

.opt-info-wrap:hover .fa-info-circle {
    color: var(--tmb-gray-600);
}

.opt-info-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--tmb-gray-900);
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: normal;
    width: 200px;
    z-index: 100;
    box-shadow: 0 2px 6px var(--tmb-black-20);
}

.opt-info-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--tmb-gray-900);
}

.opt-info-wrap:hover .opt-info-text {
    display: block;
}

/* Custom Scoring Panel */
#custom-scoring-panel {
    margin-bottom: 12px;
    padding: 10px 12px;
    background-color: var(--tmb-gray-100);
    border: 1px solid var(--tmb-success-bg);
    border-radius: 4px;
}

.custom-scoring-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.custom-score-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 55px;
}

.custom-score-item label {
    font-size: 10px;
    font-weight: bold;
    color: var(--tmb-gray-600);
    margin: 0;
    text-transform: uppercase;
}

.custom-score-item input {
    font-size: 12px;
    padding: 3px 4px;
    width: 60px;
    height: 28px;
    text-align: center;
}

/* Removable stat items (all stats have × button) */
.custom-score-item label {
    display: flex;
    align-items: center;
    gap: 3px;
}

.custom-remove {
    color: color-mix(in srgb, var(--tmb-yellow), var(--tmb-red-700) 89%);
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}

.custom-remove:hover {
    color: color-mix(in srgb, var(--tmb-red-700), var(--tmb-orange) 35%);
}

/* Add Stat + Apply row */
.custom-scoring-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

#add-stat-select {
    width: 130px;
    font-size: 12px;
    height: 30px;
    padding: 3px 6px;
    color: var(--tmb-gray-600);
}

.schedule-page .btn-apply-scoring {
    background-color: var(--tmb-brand-dark) !important;
    color: white !important;
    font-weight: bold;
    border: none !important;
    padding: 5px 18px;
    height: 30px;
    line-height: 1;
    font-size: 12px;
    white-space: nowrap;
}

.schedule-page .btn-apply-scoring:hover {
    background-color: var(--tmb-brand-dark) !important;
    color: white !important;
}

.schedule-page .btn-sort {
    background-color: var(--tmb-brand-dark) !important;
    color: white !important;
    font-weight: bold;
    border: none !important;
    padding: 6px 24px;
    height: 34px;
    line-height: 1;
}

.schedule-page .btn-sort:hover {
    background-color: var(--tmb-brand-dark) !important;
    color: white !important;
}

.schedule-page .btn-sort:disabled {
    opacity: 0.6;
}

/* ========================================
   OPTIMIZER RESULTS TABLE
   ======================================== */
#optimizer-table {
    font-size: 12px;
    border-collapse: collapse;
    width: 100%;
}

#optimizer-table thead th {
    background-color: var(--tmb-brand-dark) !important;
    color: #fff !important;
    font-weight: bold;
    text-align: center;
    padding: 8px 6px !important;
    border: 1px solid var(--tmb-brand-dark);
    border-bottom: 1px solid var(--tmb-brand-dark) !important;
    white-space: nowrap;
}

#optimizer-table thead th small {
    display: block;
    font-weight: normal;
    font-size: 10px;
    opacity: 0.8;
}

#optimizer-table thead th.score-col {
    min-width: 55px;
    width: 55px;
}

#optimizer-table thead th.gp-col,
#optimizer-table thead th.moves-col {
    min-width: 40px;
    width: 40px;
}

#optimizer-table .score-col {
    text-align: right;
    padding-right: 8px;
    font-size: 13px;
    border-right: 2px solid #000;
}

#optimizer-table .gp-col {
    text-align: center;
    font-weight: bold;
}

#optimizer-table .moves-col {
    text-align: center;
    color: var(--tmb-gray-600);
    border-right: 2px solid #000;
}

#optimizer-table td.opt-cell {
    text-align: center;
    padding: 5px 35px !important;
    white-space: nowrap;
    min-width: 90px;
    font-size: 12px;
    border: 1px solid var(--tmb-gray-300);
    position: relative;
}

#optimizer-table td.opt-empty {
    background-color: var(--tmb-gray-100);
}

.opt-team {
    font-weight: bold;
    color: var(--tmb-gray-900);
}

.opt-opponent {
    font-size: 11px;
    color: var(--tmb-gray-700);
    font-weight: normal;
}

/* Segment hover highlight (applied via JS) */
#optimizer-table td.opt-seg-hover {
    filter: brightness(0.90);
}

/* Team segment boxing — uses box-shadow to avoid border-collapse conflicts.
   box-shadow doesn't merge across rules, so every combo is explicit. */

/* Middle cells: top + bottom only */
#optimizer-table td.opt-seg {
    box-shadow: inset 0 2px 0 0 #000, inset 0 -2px 0 0 #000;
}

/* First cell of segment: left bar + top + bottom */
#optimizer-table td.opt-seg.opt-seg-start {
    box-shadow: inset 3px 0 0 0 var(--tmb-gray-900), inset 0 2px 0 0 #000, inset 0 -2px 0 0 #000;
}

/* Last cell of segment: right bar + top + bottom */
#optimizer-table td.opt-seg.opt-seg-end {
    box-shadow: inset -3px 0 0 0 var(--tmb-gray-900), inset 0 2px 0 0 #000, inset 0 -2px 0 0 #000;
}

/* Single-cell segment: left bar + right bar + top + bottom */
#optimizer-table td.opt-seg.opt-seg-start.opt-seg-end {
    box-shadow: inset 3px 0 0 0 var(--tmb-gray-900), inset -3px 0 0 0 var(--tmb-gray-900), inset 0 2px 0 0 #000, inset 0 -2px 0 0 #000;
}

/* ========================================
   EXCLUDE / INCLUDE BUTTONS
   ======================================== */

/* Schedule grid per-cell exclude (top-right corner) */
.schedule-page .btn-exclude {
    font-size: 11px;
    padding: 0 3px !important;
    color: var(--tmb-gray-500);
    background: none !important;
    border: none !important;
    cursor: pointer;
    line-height: 1;
    vertical-align: top;
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0 !important;
}

.schedule-page .btn-exclude:hover {
    color: color-mix(in srgb, var(--tmb-red-700), var(--tmb-orange) 29%);
    background: none !important;
}

/* Optimizer segment exclude — styled pill matching schedule grid GP exclude.
   Uses .schedule-page for specificity to beat the global button reset. */
.schedule-page button.btn-seg-exclude {
    display: none;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: bold;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--tmb-gray-600);
    background-color: #fff !important;
    border: 1px solid var(--tmb-gray-400) !important;
    border-radius: 4px;
    width: 18px;
    height: 16px;
    cursor: pointer;
    line-height: 1;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Show exclude button when its segment is hovered */
#optimizer-table td.opt-seg-hover .btn-seg-exclude {
    display: inline-flex;
}

.schedule-page button.btn-seg-exclude:hover {
    color: #fff !important;
    background-color: color-mix(in srgb, var(--tmb-red-700), var(--tmb-orange) 29%) !important;
    border-color: color-mix(in srgb, var(--tmb-yellow), var(--tmb-red-700) 89%) !important;
}

/* ========================================
   EXCLUDED TEAMS
   ======================================== */
#excluded-teams-container {
    margin-bottom: 10px;
    padding: 6px 10px;
    background-color: var(--tmb-danger-bg-light);
    border: 1px solid var(--tmb-danger-bg);
    border-radius: 4px;
    font-size: 12px;
}

.excluded-label {
    font-weight: bold;
    color: var(--tmb-gray-600);
    margin-right: 6px;
}

.excluded-badge {
    display: inline-block;
    background-color: var(--tmb-gray-100);
    border: 1px solid var(--tmb-gray-400);
    border-radius: 3px;
    padding: 2px 8px;
    margin: 2px 3px;
    font-size: 11px;
    font-weight: bold;
}

.btn-include {
    color: var(--tmb-brand);
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    margin-left: 4px;
}

.btn-include:hover {
    color: color-mix(in srgb, var(--tmb-brand), black 27%);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .content-wrapper > .schedule-page {
        padding: 10px 16px !important;
    }
    /* Tables go full width, breaking out of 16px padding */
    .schedule-page .table-responsive,
    .schedule-page #schedule-grid-container,
    .schedule-page #optimizer-container {
        margin-left: -16px;
        margin-right: -16px;
    }

    .schedule-controls {
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    /* btn sizing handled by front.css */

    .controls-left {
        flex: 0 0 auto;
    }

    .schedule-page .nfl-pill {
        padding: 3px 8px;
        font-size: 10px;
    }
}

/* Container-query version of the rest of the old mobile block: everything
   below is inside .tmb-cq-root (see schedule-body.php — both the
   controls-right fragment and the main grid/optimizer fragment are
   wrapped), so it responds to THIS WIDGET'S width on /my-dash/ rather than
   only a narrow browser viewport. The .schedule-page-prefixed rules above
   stay real-page-only since that class never appears inside a widget. */
@container (max-width: 767px) {
    .controls-right {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .controls-right #week-selector {
        flex: 1 1 120px;
        min-width: 120px;
    }

    #schedule-table,
    #optimizer-table {
        font-size: 10px;
    }

    #schedule-table tbody td.game-cell {
        min-width: 55px;
        padding: 3px 2px;
    }

    /* Mobile has no hover, so the opponent name is tappable to reveal the
       full team name in place of the abbreviation (see schedule-grid.js). */
    #schedule-table tbody td.game-cell .opp-name {
        border-bottom: 1px dotted currentColor;
        cursor: pointer;
    }

    #optimizer-table td.opt-cell {
        min-width: 55px;
        padding: 3px 35px !important;
    }

    /* Optimizer options: 2-column grid, labels stacked above controls */
    #optimizer-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .opt-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .opt-group select,
    .opt-group .filter-switch,
    .opt-group .games-filter-checks {
        width: 100%;
    }

    /* Scrollable table containers */
    #schedule-grid-container {
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 140px);
    }

    #optimizer-results-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Switch to border-spacing for sticky column support */
    #schedule-table,
    #optimizer-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* ---- Schedule table: freeze Team (col 0) + GP (col 1) ---- */
    #schedule-table thead th.team-col,
    #schedule-table tbody td.team-col {
        position: sticky;
        left: 0;
        z-index: 6;
    }

    #schedule-table thead th.gp-col,
    #schedule-table tbody td.gp-col {
        position: sticky;
        left: 60px; /* matches team-col width */
        z-index: 6;
    }

    /* Header frozen cells need highest z (sticky top + sticky left) */
    #schedule-table thead th.team-col,
    #schedule-table thead th.gp-col {
        z-index: 10;
    }

    /* Body frozen cells need solid backgrounds so content doesn't show through */
    #schedule-table tbody td.team-col {
        background-color: #fff;
    }

    #schedule-table tbody td.gp-col {
        background-color: #fff;
    }

    /* Keep hover colour on frozen cells (solid bg needed for sticky) */
    #schedule-table tbody tr:hover td.team-col,
    #schedule-table tbody tr:hover td.gp-col {
        background-color: var(--tmb-gray-100) !important;
    }

    /* ---- Optimizer table: freeze Score (col 0), GP (col 1), Moves (col 2) ---- */
    #optimizer-table thead th.score-col,
    #optimizer-table tbody td.score-col {
        position: sticky;
        left: 0;
        z-index: 6;
    }

    #optimizer-table thead th.gp-col,
    #optimizer-table tbody td.gp-col {
        position: sticky;
        left: 50px; /* score-col ~50px on mobile */
        z-index: 6;
    }

    #optimizer-table thead th.moves-col,
    #optimizer-table tbody td.moves-col {
        position: sticky;
        left: 82px; /* score-col 50 + gp-col 32 */
        z-index: 6;
    }

    /* Header frozen cells need highest z */
    #optimizer-table thead th.score-col,
    #optimizer-table thead th.gp-col,
    #optimizer-table thead th.moves-col {
        z-index: 10;
    }

    /* Body frozen cells need solid background */
    #optimizer-table tbody td.score-col,
    #optimizer-table tbody td.gp-col,
    #optimizer-table tbody td.moves-col {
        background-color: #fff;
    }

    #optimizer-table .opt-row:hover td.score-col,
    #optimizer-table .opt-row:hover td.gp-col,
    #optimizer-table .opt-row:hover td.moves-col {
        background-color: var(--tmb-gray-100) !important;
    }

    /* Hide next-week preview columns on mobile */
    #schedule-table thead th.next-week,
    #schedule-table tbody td.next-week {
        display: none;
    }

    #week-selector {
        min-width: 200px;
        font-size: 13px;
    }

    /* ---- NFL table mobile: freeze team column ---- */
    #nfl-grid-container {
        -webkit-overflow-scrolling: touch;
    }

    #nfl-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    #nfl-table thead th.nfl-team-col,
    #nfl-table tbody td.nfl-team-col {
        position: sticky;
        left: 0;
        z-index: 6;
    }

    #nfl-table thead th.nfl-team-col {
        z-index: 10;
    }

    #nfl-table tbody td.nfl-team-col {
        background-color: #fff;
    }

    #nfl-table tbody tr:hover td.nfl-team-col {
        background-color: var(--tmb-gray-100) !important;
    }

    .nfl-cell {
        min-width: 38px !important;
        font-size: 10px !important;
        padding: 3px 2px !important;
    }

    .nfl-mode-bar {
        flex-wrap: wrap;
    }

    .nfl-factor-pills {
        gap: 6px;
    }

    .nfl-grad-bar {
        width: 120px;
    }
}

/* ========================================
   NFL SITUATIONAL HEATMAP
   ======================================== */
#nfl-grid-container {
    overflow-x: auto;
    margin-bottom: 16px;
}

#nfl-table {
    font-size: 12px;
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
}

#nfl-table thead th {
    background-color: var(--tmb-brand-dark) !important;
    color: #fff !important;
    font-weight: bold;
    text-align: center;
    padding: 6px 4px !important;
    border: 1px solid var(--tmb-brand-dark);
    white-space: nowrap;
    font-size: 11px;
}

#nfl-table tbody td.nfl-team-col {
    font-weight: bold;
    font-size: 12px;
    padding: 5px 8px;
    white-space: nowrap;
    border: 1px solid var(--tmb-gray-300);
    min-width: 60px;
}

.nfl-cell {
    text-align: center;
    padding: 5px 4px;
    white-space: nowrap;
    min-width: 45px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--tmb-gray-300);
    cursor: default;
}

#nfl-table .nfl-bye {
    background-color: var(--tmb-gray-300) !important;
    color: var(--tmb-gray-600) !important;
    font-style: italic;
    font-weight: normal;
}

/* Always black text on NFL heatmap cells */
#nfl-table .nfl-cell {
    color: var(--tmb-gray-900) !important;
}

/* NFL-specific heatmap colors (more aggressive gradient) */
/* Four distinct steps of Team Comparison Stats' scale (front.css's
   .rankcolor1-16), the greens mirroring the reds below. Until 2026-10-08
   +2 and +3 were one shade and +4 a darker green that is not on the scale. */
.nfl-green-1 { background-color: var(--tmb-good-6) !important; }  /* +1 */
.nfl-green-2 { background-color: var(--tmb-good-4) !important; }  /* +2 */
.nfl-green-3 { background-color: var(--tmb-good-2) !important; }  /* +3 */
.nfl-green-4 { background-color: var(--tmb-good-1) !important; }  /* +4+: the scale's strongest green */
.nfl-red-1   { background-color: var(--tmb-bad-3) !important; }  /* -1: light pink */
.nfl-red-2   { background-color: var(--tmb-bad-5) !important; }  /* -2: medium red */
.nfl-red-3   { background-color: var(--tmb-bad-7) !important; }  /* -3: strong red */
.nfl-red-4   { background-color: var(--tmb-bad-8) !important; }  /* -4+: dark red */

/* Column hover highlight */
#nfl-table td.nfl-col-hover,
#nfl-table th.nfl-col-hover {
    filter: brightness(0.90);
}

/* Solo mode dimming */
.nfl-solo-miss {
    opacity: 0.2;
}
.nfl-solo-hit {
    font-weight: bold;
}

/* ========================================
   NFL CONTROLS (mode bar + factor pills + gradient legend)
   ======================================== */
.nfl-controls {
    padding: 8px 0 4px;
}

/* Mode bar (now in controls row, flush right) */
.nfl-mode-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nfl-mode-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--tmb-gray-600);
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Heatmap / Layers / Solo, Situations / SOS Grid, All On / All Off: front.css's .tmb-pill (2026-10-23). */

/* Schedule-view toggle (Situational Factors / Matchup Grid) — the outer
   view switch, distinct from the Heatmap/Layers/Solo sub-toggle within the
   situational view. Green accent (brand color) to read as the primary
   selector, sitting to the left of the mode buttons in controls-right. */
/* The view switch stays on one line, and the row wraps instead: on a phone the
   Heatmap / Layers / Solo pills go to a second line, never past the screen. */
.controls-right-toggle {
    flex-wrap: wrap;
    row-gap: 6px;
}

.schedule-view-toggle {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    margin-right: 4px;
    border-right: 1px solid var(--tmb-gray-300);
}

/* NFL/NCAAF situational toggle row — week selector + share match the
   toggle buttons' height so the controls row doesn't grow when the
   Matchup Grid sub-controls appear. */
.controls-right-toggle #week-selector {
    height: 30px;
    padding: 4px 24px 4px 10px;
    font-size: 13px;
}

.controls-right-toggle .btn-share {
    height: 30px;
    padding: 4px 16px;
    font-size: 13px;
}

@container (max-width: 767px) {
    .schedule-view-toggle {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }
}

/* Factor pills container */
.nfl-factor-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    max-height: 200px;
    opacity: 1;
    overflow: visible;
    transition: opacity 0.2s ease, max-height 0.3s ease;
}

.nfl-pills-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* Bulk toggle buttons */
.nfl-bulk-toggles {
    display: flex;
    gap: 6px;
    margin-right: 8px;
}

.nfl-bulk-hidden {
    display: none !important;
}

/* Pill groups */
.nfl-pill-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.nfl-pill-group-label {
    font-size: 11px;
    font-weight: bold;
    color: var(--tmb-gray-600);
    margin-right: 2px;
}

/* Individual pills */
.schedule-page .nfl-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* Advantage pills */
.schedule-page .nfl-pill-adv {
    background-color: #fff !important;
    color: color-mix(in srgb, var(--tmb-green), black 25%) !important;
    border: 1.5px solid var(--tmb-good-1) !important;
}

.schedule-page .nfl-pill-adv:hover {
    background-color: var(--tmb-good-7) !important;
}

.schedule-page .nfl-pill-adv.nfl-pill-active {
    background-color: var(--tmb-good-1) !important;
    color: var(--tmb-gray-900) !important;
    border-color: var(--tmb-brand) !important;
}

.schedule-page .nfl-pill-adv.nfl-pill-solo {
    background-color: var(--tmb-brand) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--tmb-green), black 3%) !important;
}

/* Disadvantage pills */
.schedule-page .nfl-pill-dis {
    background-color: #fff !important;
    color: var(--tmb-red-700) !important;
    border: 1.5px solid var(--tmb-bad-4) !important;
}

.schedule-page .nfl-pill-dis:hover {
    background-color: var(--tmb-bad-1) !important;
}

.schedule-page .nfl-pill-dis.nfl-pill-active {
    background-color: var(--tmb-bad-4) !important;
    color: var(--tmb-gray-900) !important;
    border-color: var(--tmb-bad-8) !important;
}

.schedule-page .nfl-pill-dis.nfl-pill-solo {
    background-color: var(--tmb-bad-8) !important;
    color: #fff !important;
    border-color: var(--tmb-red-700) !important;
}

/* Info pills (amber/gold — neutral factors) */
.schedule-page .nfl-pill-info {
    background-color: #fff !important;
    color: var(--tmb-gold) !important;
    border: 1.5px solid color-mix(in srgb, var(--tmb-yellow), white 30%) !important;
}

.schedule-page .nfl-pill-info:hover {
    background-color: var(--tmb-warning-bg-light) !important;
}

.schedule-page .nfl-pill-info.nfl-pill-active {
    background-color: color-mix(in srgb, var(--tmb-yellow), white 30%) !important;
    color: var(--tmb-gray-900) !important;
    border-color: var(--tmb-yellow) !important;
}

.schedule-page .nfl-pill-info.nfl-pill-solo {
    background-color: var(--tmb-yellow) !important;
    color: #fff !important;
    border-color: var(--tmb-chart-orange) !important;
}

/* Solo mode: info highlight (amber) */
.nfl-solo-info-hit {
    background-color: color-mix(in srgb, var(--tmb-yellow), white 30%) !important;
}

/* Weight badge inside pill */
.nfl-pill-weight {
    font-size: 10px;
    opacity: 0.7;
}

/* Gradient legend bar (inline with title, flush right) */
.nfl-gradient-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--tmb-gray-600);
}

.nfl-grad-bar {
    width: 180px;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, var(--tmb-good-1), var(--tmb-good-8), var(--tmb-bad-1), var(--tmb-bad-8));
    border: 1px solid var(--tmb-black-10);
}

.nfl-grad-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--tmb-gray-600);
}

/* ========================================
   NFL CELL TOOLTIP
   ======================================== */
.nfl-tooltip {
    position: absolute;
    z-index: 9999;
    background: var(--tmb-gray-900);
    color: var(--tmb-gray-100);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    box-shadow: 0 3px 12px var(--tmb-black-30);
}

.nfl-tooltip-visible {
    opacity: 1;
}

.nfl-tip-line {
    padding: 1px 0;
}

.nfl-tip-adv {
    color: var(--tmb-green-300);
}

.nfl-tip-dis {
    color: var(--tmb-bad-5);
}

.nfl-tip-info {
    color: color-mix(in srgb, var(--tmb-yellow), white 30%);
}

.nfl-tip-net {
    border-top: 1px solid var(--tmb-gray-700);
    margin-top: 4px;
    padding-top: 4px;
    font-weight: 700;
    font-size: 12px;
}

.nfl-tip-pos {
    color: var(--tmb-green-300);
}

.nfl-tip-neg {
    color: var(--tmb-bad-5);
}