/* MLB / NFL editable season and postseason lab. */

.league-predictor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.league-conference-board > header > span,
.league-bracket-conference > header > span,
.league-final-card > div > span,
.league-predictor-notes span {
    color: var(--sport-accent);
    font-family: var(--bt-mono);
    font-size: 7px;
    letter-spacing: .13em;
}

.league-predictor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px;
    border: 1px solid #2d2b34;
    background: #101016;
}

.league-predictor-tabs,
.league-predictor-actions {
    display: flex;
    gap: 5px;
}

.league-predictor-tabs button,
.league-predictor-actions button {
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid #34313b;
    border-radius: 0;
    background: #15151b;
    color: #8a8691;
    font-family: var(--bt-mono);
    font-size: 7px;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.league-predictor-tabs button:hover,
.league-predictor-actions button:hover {
    border-color: #625d6a;
    color: #fff;
}

.league-predictor-tabs button.active,
.league-predictor-actions button.primary {
    border-color: var(--sport-accent);
    background: color-mix(in srgb, var(--sport-accent), #111117 78%);
    color: #fff;
}

.league-predictor-status {
    min-height: 31px;
    margin: 0;
    padding: 9px 12px;
    border-left: 2px solid var(--sport-accent);
    background: var(--sport-glow);
    color: #8e8995;
    font-family: var(--bt-mono);
    font-size: 7px;
}

.league-standings-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.league-conference-board {
    min-width: 0;
    border: 1px solid #2d2b34;
    background: #101016;
}

.league-conference-board > header,
.league-bracket-conference > header {
    position: relative;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #2b2932;
    background: linear-gradient(90deg, var(--sport-glow), transparent 55%);
}

.league-conference-board > header h3,
.league-bracket-conference > header h3 {
    margin-top: 4px;
    font-family: var(--bt-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.league-conference-board > header small {
    position: absolute;
    right: 20px;
    bottom: 15px;
    color: #66616d;
    font-family: var(--bt-mono);
    font-size: 6px;
    text-transform: uppercase;
}

.league-division-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #292731;
}

html[data-sport="mlb"] .league-division-grid {
    grid-template-columns: 1fr;
}

.league-division-card {
    padding: 13px;
    background: #121218;
}

.league-division-card h4 {
    margin-bottom: 7px;
    color: #77727e;
    font-family: var(--bt-mono);
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.league-standing-row {
    display: grid;
    grid-template-columns: 22px 31px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 43px;
    margin-top: 3px;
    padding: 4px 6px;
    border: 1px solid #24222b;
    background: #15141b;
}

.league-standing-row.playoff {
    border-left-color: var(--sport-accent);
}

.league-seed {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: var(--sport-accent);
    color: #fff;
    font-family: var(--bt-mono);
    font-size: 7px;
    font-weight: 500;
}

.league-seed.outside { background: #2b2932; color: #66616d; }

.league-standing-logo {
    width: 29px;
    height: 29px;
}

.league-standing-row > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.league-standing-row > span strong {
    overflow: hidden;
    font-family: var(--bt-display);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.league-standing-row > span small {
    color: #68636f;
    font-family: var(--bt-mono);
    font-size: 6px;
}

.league-standing-row > em,
.league-standing-row > label {
    display: flex;
    align-items: baseline;
    color: #ddd9e2;
    font-family: var(--bt-mono);
    font-size: 13px;
    font-style: normal;
}

.league-standing-row > em i,
.league-standing-row > label i {
    margin-left: 2px;
    color: #67636e;
    font-size: 6px;
    font-style: normal;
}

.league-standing-row input {
    width: 47px;
    padding: 5px;
    border: 1px solid var(--sport-accent);
    border-radius: 0;
    outline: 0;
    background: #0e0e13;
    color: #fff;
    font-family: var(--bt-mono);
    font-size: 11px;
}

.league-playoffs-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.league-seed-editor {
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--sport-accent) 40%, #2d2b34);
    background: #101016;
}

.league-seed-editor-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
}

.league-seed-editor-heading span,
.nba-seed-editor-heading span {
    color: var(--sport-accent-soft, #aeb2ff);
    font-family: var(--bt-mono, monospace);
    font-size: 8px;
    letter-spacing: .12em;
}

.league-seed-editor-heading h3,
.nba-seed-editor-heading h3 {
    margin: 3px 0 0;
    font-size: 16px;
    font-weight: 600;
}

.league-seed-editor-heading p,
.nba-seed-editor-heading p {
    max-width: 480px;
    margin: 0;
    color: #77727e;
    font-size: 9px;
    line-height: 1.45;
}

.league-seed-columns,
.nba-seed-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.league-seed-columns > section > h4,
.nba-seed-columns > section > h4 {
    margin: 0 0 6px;
    color: #aaa5b0;
    font-size: 10px;
    font-weight: 600;
}

.league-seed-list,
.nba-seed-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.league-seed-row,
.nba-seed-row {
    display: grid;
    grid-template-columns: 14px 22px 30px minmax(120px, 1fr) auto minmax(128px, .7fr);
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 5px 7px;
    border: 1px solid #292730;
    background: #15151b;
}

.league-seed-row.dragging,
.nba-seed-row.dragging { opacity: .5; }
.league-seed-handle,
.nba-seed-handle { color: #5d5864; cursor: grab; font-size: 12px; letter-spacing: -4px; }
.league-seed-row > b,
.nba-seed-row > b { color: var(--sport-accent-soft, #aeb2ff); font-family: var(--bt-mono, monospace); font-size: 10px; font-weight: 500; text-align: center; }
.league-seed-logo,
.nba-seed-logo { width: 28px; height: 28px; object-fit: contain; }
.league-seed-row > span strong,
.nba-seed-row > span strong { display: block; overflow: hidden; font-size: 10px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.league-seed-row > span small,
.nba-seed-row > span small { display: block; margin-top: 2px; color: #6e6975; font-size: 7px; }
.league-seed-row select,
.nba-seed-row select { width: 100%; min-width: 0; padding: 7px; border: 1px solid #36333d; border-radius: 4px; background: #0d0d12; color: #d5d2d8; font-size: 8px; }
.league-seed-move,
.nba-seed-move { display: flex; gap: 3px; }
.league-seed-move button,
.nba-seed-move button { width: 26px; height: 26px; border: 1px solid #34313a; background: #111117; color: #aaa5b0; cursor: pointer; }
.league-seed-move button:disabled,
.nba-seed-move button:disabled { opacity: .28; cursor: default; }

.league-playoff-seed-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.league-playoff-seed-note span {
    padding: 8px 10px;
    border: 1px solid #2d2b34;
    background: #101016;
    color: #7d7884;
    font-family: var(--bt-mono);
    font-size: 7px;
}

.league-playoff-seed-note b {
    margin-right: 8px;
    color: var(--sport-accent-soft);
    font-weight: 500;
}

.league-bracket-conference {
    min-width: 0;
    border: 1px solid #2d2b34;
    background: #101016;
}

.league-bracket-rounds {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    min-width: 760px;
    background: #292731;
    gap: 1px;
}

.league-bracket-conference {
    overflow-x: auto;
}

.league-bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 335px;
    padding: 14px;
    background: #121218;
}

.league-bracket-round > div:first-child {
    display: flex;
    min-height: 38px;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.league-bracket-round > div strong {
    color: var(--sport-accent-soft);
    font-family: var(--bt-display);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.league-bracket-round > div small {
    color: #66616d;
    font-family: var(--bt-mono);
    font-size: 6px;
}

.league-match {
    padding: 7px;
    border: 1px solid #2c2a33;
    background: #0e0e13;
}

.league-match > small {
    display: block;
    padding: 0 3px 5px;
    color: #5f5a66;
    font-family: var(--bt-mono);
    font-size: 6px;
    text-transform: uppercase;
}

.league-match button {
    display: grid;
    grid-template-columns: 18px 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 39px;
    padding: 4px 6px;
    border: 0;
    border-top: 1px solid #25232b;
    border-radius: 0;
    background: transparent;
    color: #8d8994;
    cursor: default;
    text-align: left;
}

.league-predictor:has(#leaguePlayoffsView:not(.hidden)) .league-predictor-toolbar:has(#leagueEditBtn) + .league-predictor-status + * + #leaguePlayoffsView .league-match button {
    cursor: pointer;
}

.league-match button.winner {
    background: color-mix(in srgb, var(--sport-accent), transparent 90%);
    color: #f3f1f5;
    box-shadow: inset 2px 0 var(--sport-accent);
}

.league-match button > b {
    color: #68636f;
    font-family: var(--bt-mono);
    font-size: 7px;
    font-weight: 500;
}

.league-match-logo {
    width: 27px;
    height: 27px;
}

.league-match button > span {
    overflow: hidden;
    font-family: var(--bt-display);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.league-match button > em {
    color: #77727e;
    font-family: var(--bt-mono);
    font-size: 7px;
    font-style: normal;
}

.league-match-tbd {
    padding: 10px;
    color: #5f5a66;
    font-family: var(--bt-mono);
    font-size: 7px;
}

.league-final-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 440px);
    align-items: center;
    gap: 22px;
    min-height: 170px;
    padding: 28px 34px;
    border: 1px solid var(--sport-accent);
    background:
        radial-gradient(circle at 20% 100%, var(--sport-glow), transparent 48%),
        #111117;
}

.league-final-card h3 {
    margin-top: 5px;
    font-family: var(--bt-display);
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: .9;
    text-transform: uppercase;
}

.league-final-card p {
    margin-top: 7px;
    color: #77727e;
    font-family: var(--bt-mono);
    font-size: 7px;
    text-transform: uppercase;
}

.league-predictor-notes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 17px 0;
    border-top: 1px solid #282630;
}

.league-predictor-notes p {
    max-width: 680px;
    margin-top: 4px;
    color: #77727e;
    font-size: 10px;
    line-height: 1.5;
}

#leaguePredictorSources {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

#leaguePredictorSources a {
    padding: 5px 7px;
    border: 1px solid #34313b;
    color: #8d8994;
    font-family: var(--bt-mono);
    font-size: 7px;
    text-decoration: none;
}

#leaguePredictorSources a:hover {
    border-color: var(--sport-accent);
    color: #fff;
}

@media (max-width: 980px) {
    .league-standings-view {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 760px) {
    .league-predictor-toolbar,
    .league-predictor-notes {
        align-items: stretch;
        flex-direction: column;
    }

    .league-predictor-tabs,
    .league-predictor-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .league-predictor-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .league-division-grid {
        grid-template-columns: 1fr;
    }

    .league-final-card {
        grid-template-columns: 1fr;
        padding: 24px 18px;
    }

    #leaguePredictorSources {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .league-predictor-actions {
        grid-template-columns: 1fr;
    }

    .league-conference-board > header small {
        position: static;
        display: block;
        margin-top: 5px;
    }

    .league-playoff-seed-note {
        grid-template-columns: 1fr;
    }

    .league-seed-editor-heading,
    .nba-seed-editor-heading { align-items: start; flex-direction: column; gap: 5px; }
    .league-seed-columns,
    .nba-seed-columns { grid-template-columns: 1fr; }
    .league-seed-row,
    .nba-seed-row { grid-template-columns: 12px 18px 28px minmax(0, 1fr) auto; }
    .league-seed-row label,
    .nba-seed-row label { grid-column: 4 / 6; }
}

/* Standings, seeds, and playoff rounds keep one top-to-bottom reading order. */
html[data-sport="mlb"] .league-standings-view,
html[data-sport="nfl"] .league-standings-view,
html[data-sport="mlb"] .league-division-grid,
html[data-sport="nfl"] .league-division-grid,
html[data-sport="mlb"] .league-playoff-seed-note,
html[data-sport="nfl"] .league-playoff-seed-note,
html[data-sport="mlb"] .league-bracket-rounds,
html[data-sport="nfl"] .league-bracket-rounds {
    grid-template-columns: 1fr;
}

html[data-sport="mlb"] .league-bracket-rounds,
html[data-sport="nfl"] .league-bracket-rounds {
    min-width: 0;
}

html[data-sport="mlb"] .league-bracket-round,
html[data-sport="nfl"] .league-bracket-round {
    min-height: 0;
}

html[data-sport="mlb"] .league-final-card,
html[data-sport="nfl"] .league-final-card {
    grid-template-columns: 1fr;
}