/* =========================
   DAYS
   ========================= */

.days-navigation {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: stretch;

    gap: 10px;
    margin-top: 10px;
}

.days {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 10px;
    min-width: 0;
}


/* =========================
   DAY NAVIGATION
   ========================= */

.day-nav {
    min-width: 105px;
    height: 58px;

    padding: 0 14px;

    font-weight: 600;
    white-space: nowrap;
}

.day-nav:disabled {
    opacity: .35;
    cursor: default;
}


/* =========================
   DAY
   ========================= */

.day {
    width: 100%;
    min-width: 0;
    min-height: 58px;

    padding: 10px 8px;

    font: inherit;
    font-weight: 600;

    white-space: nowrap;
}

.day:hover {
    transform: translateY(-1px);
}

.day.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--panel-active);
}


/* =========================
   GAMES
   ========================= */

.games {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(230px, 1fr));

    gap: 14px;
}

.game {
    display: flex;
    flex-direction: column;

    min-height: 125px;
    padding: 18px;
}

.game:hover {
    transform: translateY(-2px);
}

.game.active {
    border-color: var(--accent);
    background: var(--panel-active);
}

.game-stage {
    margin-bottom: 12px;

    color: var(--muted);

    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.matchup {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: auto;
    margin-bottom: auto;

    font-size: 21px;
    font-weight: 700;
}

.team-code {
    color: var(--text);
}

.vs {
    color: var(--muted);

    font-size: 14px;
    font-weight: 500;
}

.game-hint {
    color: var(--accent);

    font-size: 13px;
    text-align: center;
}


/* =========================
   SCOREBOARD
   ========================= */

.scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 20px;
}

.score-team {
    text-align: center;
}

.score-team-code {
    font-size: 27px;
    font-weight: 800;

    white-space: nowrap;
}

.score-team-name {
    margin-top: 4px;

    color: var(--muted);

    font-size: 14px;
}

.score-center {
    text-align: center;
}

.score {
    font-size: 32px;
    font-weight: 800;

    white-space: nowrap;
}

.score-separator {
    margin: 0 5px;

    color: var(--muted);

    font-size: 20px;
}

.winner-ball {
    display: inline-block;

    margin-left: 5px;

    font-size: 18px;
    vertical-align: middle;
}


/* =========================
   SCORELINE
   ========================= */

.scoreline {
    width: 100%;
    max-width: fit-content;

    margin: 18px auto 0;
    padding-top: 12px;

    border-top: 1px solid var(--border);
}

.scoreline-row {
    display: grid;
    grid-template-columns:
        50px
        repeat(var(--periods), 42px)
        55px;

    align-items: center;

    width: max-content;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
    column-gap: 0;
}

.scoreline-row + .scoreline-row {
    margin-top: 2px;
}

.scoreline-team {
    text-align: left;

    font-size: 13px;
    font-weight: 800;
}

.scoreline-period {
    color: var(--muted);

    font-size: 11px;
    font-weight: 600;
}

.scoreline-value {
    font-size: 13px;
    font-weight: 600;
}

.scoreline-total {
    font-size: 13px;
    font-weight: 800;
}

.scoreline-period.ot {
    color: var(--muted);
}


/* =========================
   BOXSCORE
   ========================= */

.boxscore-container {
    display: none;

    overflow: hidden;
}

.boxscore-container.visible {
    display: block;
}

.boxscore-header {
    padding: 22px 20px;

    border-bottom: 1px solid var(--border);
    background: #15181e;
}

.boxscore-stage,
.boxscore-rating {
    color: var(--muted);

    font-size: 13px;
    text-align: center;
}

.boxscore-stage {
    margin-bottom: 12px;
}

.boxscore-rating {
    margin-bottom: 12px;
}

.boxscore-body {
    padding: 18px;
}

.team-boxscore {
    margin-bottom: 28px;
}

.team-boxscore:last-child {
    margin-bottom: 0;
}

.team-title {
    margin-bottom: 10px;

    font-size: 18px;
    font-weight: 700;
}

.table-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-small);

    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
}

.all-stats-button {
    display: none;

    margin-top: 10px;

    height: 36px;
    padding: 0 12px;

    color: var(--accent);

    font-size: 13px;
    font-weight: 600;
}

table {
    width: 100%;

    border-collapse: collapse;

    font-size: 13px;
}

th,
td {
    padding: 9px 10px;

    border-bottom: 1px solid var(--border);

    white-space: nowrap;
    text-align: right;
}

th {
    color: var(--muted);

    font-weight: 600;

    background: #15181e;
}

th:first-child,
td:first-child {
    width: 200px;
    min-width: 200px;
    max-width: 200px;

    text-align: left;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--panel-hover);
}

.player-name {
    color: var(--accent);
    font-weight: 600;
}


/* Starting 5 separator */

tbody tr:nth-child(5) td {
    border-bottom: 3px solid #4a5260;
}

.totals-row td {
    border-top: 2px solid #4a5260;

    background: #15181e;

    font-weight: 700;
}

.totals-row td:first-child {
    color: var(--text);
}


/* =========================
   BOXSCORE NAVIGATION
   ========================= */

.boxscore-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 0 18px 18px;
}

.boxscore-navigation button {
    min-width: 190px;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

    /* DAYS */

    .days-navigation {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .days {
        grid-column: 1 / -1;
        grid-row: 1;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 8px;

        width: 100%;
    }

    .day {
        padding: 9px 3px;
        font-size: 13px;
    }

    .day-nav {
        width: 100%;
        min-width: 0;
        height: 40px;
    }

    .days-navigation .day-nav:first-child {
        grid-column: 1;
        grid-row: 2;
    }

    .days-navigation .day-nav:last-child {
        grid-column: 2;
        grid-row: 2;
    }


    /* GAMES */

    .games {
        grid-template-columns: 1fr;
    }


    /* SCOREBOARD */

    .scoreboard {
        gap: 10px;
    }

    .score-team-code {
        font-size: 22px;
    }

    .score-team-name {
        font-size: 12px;
    }

    .score {
        font-size: 27px;
    }

    .score-separator {
        margin: 0 3px;
        font-size: 18px;
    }

    .winner-ball {
        margin-left: 3px;
        font-size: 15px;
    }


    /* SCORELINE */

    .scoreline {
        max-width: 100%;

        margin-top: 14px;
        padding-top: 10px;

        overflow-x: hidden;
    }

    .scoreline-row {
        min-width: 0;

        grid-template-columns:
            45px
            repeat(var(--periods), 42px)
            50px;
    }

    .scoreline-team {
        font-size: 12px;
    }

    .scoreline-period {
        font-size: 10px;
    }

    .scoreline-value,
    .scoreline-total {
        font-size: 12px;
    }


    /* BOXSCORE */

    .all-stats-button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        margin-top: 14px;
    }

    .boxscore-container:not(.all-stats) .stat-orb,
    .boxscore-container:not(.all-stats) .stat-drb {
        display: none;
    }

    /* =================================
       BOXSCORE - MOBILE COMPACT
       ================================= */

    .boxscore-container .boxscore-body {
        padding: 10px 4px;
    }

    .boxscore-container .team-boxscore {
        margin-bottom: 18px;
    }

    .boxscore-container .team-title {
        margin-bottom: 6px;

        font-size: 15px;
    }

    .boxscore-container .table-container {
        border-radius: var(--radius-small);
    }

    .boxscore-container .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* =========================
       BOXSCORE - COMPACT COLUMNS
       ========================= */

    .boxscore-container table {
        table-layout: fixed;
        width: 100%;
    }

    /* Player */
    .boxscore-container th:first-child,
    .boxscore-container td:first-child {
        width: 82px;
        min-width: 82px;
        max-width: 82px;
    }

    /* Standardowe kolumny statystyczne */
    .boxscore-container th:not(:first-child),
    .boxscore-container td:not(:first-child) {
        width: 27px;
        min-width: 27px;
        max-width: 27px;

        padding-left: 2px;
        padding-right: 2px;
    }

    /* FG / 3PT / FT - potrzebują trochę więcej miejsca */
    .boxscore-container .stat-fg,
    .boxscore-container .stat-3pt,
    .boxscore-container .stat-ft {
        width: 32px;
        min-width: 32px;
        max-width: 32px;
    }

    /* Nagłówki */
    .boxscore-container th {
        font-size: 9px;
        padding-left: 1px;
        padding-right: 1px;
    }

    /* Wartości */
    .boxscore-container td {
        font-size: 10px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .boxscore-container .totals-row .stat-fg,
    .boxscore-container .totals-row .stat-tpm,
    .boxscore-container .totals-row .stat-ft {
        font-size: 8px;
        letter-spacing: -0.6px;
        padding-left: 0;
        padding-right: 0;
    }

    .boxscore-navigation {
        gap: 8px;
    }

    .boxscore-navigation button {
        min-width: 0;
        flex: 1;

        padding: 0 8px;

        font-size: 13px;
    }
}