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

/* ========================================
   GLOBAL OVERRIDES
   Reset prod-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;
    max-width: 1200px;
}

/* ========================================
   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 matchup pages (Bootstrap primary) */
.schedule-page .btn-group .btn {
    min-width: 80px;
    font-weight: 600;
    font-size: 14px;
    height: 38px;
}

/* Week Selector — match button height/font */
#week-selector {
    min-width: 260px;
    font-size: 14px;
    height: 38px;
}

/* Optimize Button */
.schedule-page .btn-optimize {
    background-color: #00bd4c !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: #00a843 !important;
    color: white !important;
}

/* Share Button */
.schedule-page .btn-share {
    background-color: transparent !important;
    color: #888 !important;
    border: 1px solid #ccc !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: #f0f0f0 !important;
    color: #444 !important;
    border-color: #aaa !important;
}

.schedule-page .btn-share .fa-check {
    color: #00bd4c;
}

/* ========================================
   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: #07250e !important;
    color: #fefefe !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 #0a3a14, 0 2px 0 0 #0a3a14;
}

#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 #eee;
    font-weight: bold;
    color: #222;
}

#schedule-table tbody td.game-away {
    color: #555;
}

#schedule-table tbody td.no-game {
    background-color: #f5f5f5;
}

#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: #2a4a30 !important;
    color: rgba(254, 254, 254, 0.5) !important;
    box-shadow: inset 0 0 0 1px #3a5a40, 0 2px 0 0 #3a5a40;
}

#schedule-table thead th.past-day small,
#optimizer-table thead th.past-day small {
    color: rgba(254, 254, 254, 0.35) !important;
}

/* Team Exclude Button (hover X replaces GP number) */
.team-exclude-btn {
    display: none;
    color: #999;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    background: #eee;
    border: 1px solid #ccc;
    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: #e20000;
    border-color: #c00;
}

/* ========================================
   OPTIMIZER PANEL
   ======================================== */
#optimizer-panel {
    margin-bottom: 15px;
    border-top: 3px solid #00bd4c;
    padding-top: 12px;
}

#optimizer-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
    padding: 10px 12px;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 4px;
}

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

.opt-group label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    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: #cbd5e1;
    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 rgba(0, 0, 0, 0.15);
}

.schedule-page .filter-switch input:checked + .filter-slider {
    background-color: #3b82f6;
}

.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 rgba(59, 130, 246, 0.1);
}

/* 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: #444;
    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: #00bd4c;
    border-color: #00bd4c;
}

/* 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: #aaa;
    font-size: 11px;
    cursor: help;
}

.opt-info-wrap:hover .fa-info-circle {
    color: #666;
}

.opt-info-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    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 rgba(0,0,0,0.2);
}

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

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

/* Custom Scoring Panel */
#custom-scoring-panel {
    margin-bottom: 12px;
    padding: 10px 12px;
    background-color: #f0f4f0;
    border: 1px solid #d0ddd0;
    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: #666;
    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: #c00;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}

.custom-remove:hover {
    color: #e00;
}

/* 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: #666;
}

.schedule-page .btn-apply-scoring {
    background-color: #07250e !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: #0a3a14 !important;
    color: white !important;
}

.schedule-page .btn-sort {
    background-color: #07250e !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: #0a3a14 !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: #07250e !important;
    color: #fefefe !important;
    font-weight: bold;
    text-align: center;
    padding: 8px 6px !important;
    border: 1px solid #0a3a14;
    border-bottom: 1px solid #0a3a14 !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: #888;
    border-right: 2px solid #000;
}

#optimizer-table td.opt-cell {
    text-align: center;
    padding: 5px 4px;
    white-space: nowrap;
    min-width: 90px;
    font-size: 12px;
    border: 1px solid #ddd;
    position: relative;
}

#optimizer-table td.opt-empty {
    background-color: #f5f5f5;
}

.opt-team {
    font-weight: bold;
    color: #111;
}

.opt-opponent {
    font-size: 11px;
    color: #555;
    font-weight: normal;
}

.opt-row:hover td {
    filter: brightness(0.95);
}

/* ========================================
   EXCLUDE / INCLUDE BUTTONS
   ======================================== */
.schedule-page .btn-exclude {
    font-size: 11px;
    padding: 0 3px !important;
    color: #bbb;
    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: #e20000;
    background: none !important;
}

/* ========================================
   EXCLUDED TEAMS
   ======================================== */
#excluded-teams-container {
    margin-bottom: 10px;
    padding: 6px 10px;
    background-color: #fff8f8;
    border: 1px solid #f0d0d0;
    border-radius: 4px;
    font-size: 12px;
}

.excluded-label {
    font-weight: bold;
    color: #888;
    margin-right: 6px;
}

.excluded-badge {
    display: inline-block;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 8px;
    margin: 2px 3px;
    font-size: 11px;
    font-weight: bold;
}

.btn-include {
    color: #00bd4c;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    margin-left: 4px;
}

.btn-include:hover {
    color: #008a38;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .schedule-page {
        padding: 10px 8px;
    }

    .schedule-controls {
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

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

    .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,
    #optimizer-table td.opt-cell {
        min-width: 55px;
        padding: 3px 2px;
    }

    /* 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: #f0f0f0 !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: #f5f5f5 !important;
    }

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