/* Layout-only now — the dark "gamer-y" color scheme this class used to scope here is the site's
   only theme (see theme.css's :root), so this class just handles the Dashboard's own fixed-height,
   no-page-scroll grid layout. Global (not a .razor.css) because the dashboard's markup is split
   across several sibling components with no shared scoped-CSS boundary. */
.dashboard-dark {
    height: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-owner-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex: 0 0 auto;
}

/* Fills whatever height dashboard-dark has left after the owner bar — on desktop that's the
   full browser viewport minus the top bar, so the whole dashboard sits snug with no page-level
   scrollbar. Individual cards get their own overflow-y below, so a card with more content than
   its cell can hold scrolls internally instead of pushing the page taller. */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr auto;
    grid-template-areas:
        "week week"
        "matchup games"
        "matchup extra"
        "roster roster";
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.dashboard-area-week { grid-area: week; }
.dashboard-area-matchup { grid-area: matchup; min-height: 0; display: flex; }
.dashboard-area-games { grid-area: games; min-height: 0; display: flex; }
.dashboard-area-extra { grid-area: extra; min-height: 0; display: flex; }
.dashboard-area-roster { grid-area: roster; }

@media (max-width: 900px) {
    /* Below this width the dashboard reverts to a normal scrolling page — six stacked sections
       plus a roster bar genuinely don't fit one mobile screen at once. */
    .dashboard-dark {
        height: auto;
        overflow: visible;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "week"
            "matchup"
            "games"
            "extra"
            "roster";
    }

    .dashboard-area-matchup, .dashboard-area-games, .dashboard-area-extra {
        min-height: auto;
        display: block;
    }
}

.week-indicator {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    border-radius: 0.6rem;
    padding: 0.85rem 1.25rem;
    font-weight: 700;
}

.week-indicator-number {
    font-size: 1.2rem;
}

.week-indicator-empty {
    background: linear-gradient(90deg, var(--brand-text-muted), var(--brand-surface));
    opacity: 0.9;
}

.week-indicator-range {
    font-weight: 500;
    opacity: 0.85;
}

.dashboard-card {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0.6rem;
    padding: 1rem 1.1rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.dashboard-card-title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-text-muted);
    margin-bottom: 0.75rem;
}

.fantasy-matchup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.fantasy-matchup-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.fantasy-matchup-side.is-me {
    background-color: rgba(var(--brand-primary-rgb), 0.18);
}

.fantasy-matchup-team {
    font-weight: 600;
}

.fantasy-matchup-score {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fantasy-matchup-vs {
    color: var(--brand-text-muted);
    font-size: 0.85rem;
}

.fantasy-matchup-h2h {
    font-size: 0.75rem;
}

.matchup-points-breakdown-link {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.banner-h2h-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0.75rem 0 0.35rem;
}

.banner-h2h-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--brand-border);
}

.banner-h2h-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    padding: 0.35rem;
    border-radius: 0.4rem;
}

.banner-h2h-side .avatar-initials {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.65rem;
}

.banner-h2h-side.is-winner {
    background-color: rgba(45, 224, 143, 0.15);
}

.banner-h2h-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.banner-h2h-bonus {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-success);
}

.banner-h2h-vs {
    font-size: 0.75rem;
}

.banner-h2h-note {
    font-size: 0.75rem;
    font-style: italic;
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
}

/* .dashboard-card's own overflow-y:auto scrolls the whole card (title included) — these cards
   override that so only their own *-scroll-area scrolls, keeping the title pinned. */
.upcoming-games-card, .matchup-points-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.upcoming-games-card .dashboard-card-title, .matchup-points-card .dashboard-card-title {
    flex: 0 0 auto;
}

.matchup-points-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.upcoming-games-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.upcoming-games-day-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand-text-muted);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--brand-border);
}

.upcoming-games-day-header:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.upcoming-games-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--brand-surface-muted);
    border-radius: 0.4rem;
    border-left: 3px solid transparent;
    font-size: 0.9rem;
}

/* A lighter shade than the normal (not-yet-played) row background, so completed matches visually
   recede a bit compared to what's still upcoming. */
.upcoming-games-row.is-completed {
    background-color: var(--brand-surface);
}

.upcoming-games-row.is-my-game {
    border-left-color: var(--brand-primary);
    background-color: rgba(var(--brand-primary-rgb), 0.08);
}

.upcoming-games-row.is-clickable {
    cursor: pointer;
}

.upcoming-games-row.is-clickable:hover {
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.upcoming-games-league {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.upcoming-games-league.league-LEC {
    color: #ffa94d;
}

.upcoming-games-league.league-LCS {
    color: #ffffff;
}

.upcoming-games-bo {
    flex: 0 0 auto;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    background-color: var(--brand-surface);
    color: var(--brand-text-muted);
    white-space: nowrap;
}

/* Each segment (team name, optional score, "vs", optional score, team name) is its own element
   spaced by gap — Razor doesn't reliably preserve whitespace between text and @if-conditional
   markup, so relying on that instead of gap made spacing collapse when scores weren't shown. */
.upcoming-games-teams {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.is-winner-score {
    color: #ffffff;
    font-weight: 700;
}

.is-loser-score {
    color: var(--brand-text-muted);
}

.upcoming-games-my-players {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.upcoming-games-my-players .avatar-initials {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.55rem;
}

.upcoming-games-time {
    color: var(--brand-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.lineup-lock-strip {
    padding: 0.6rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.lineup-lock-strip.is-open {
    background-color: rgba(45, 224, 143, 0.18);
    color: var(--brand-success);
}

.lineup-lock-strip.is-locked {
    background-color: rgba(255, 92, 122, 0.15);
    color: var(--brand-danger);
}

.roster-manipulation-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 0 0 0.6rem 0.6rem;
    padding: 1rem;
}

.roster-slot-chip {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--brand-surface-muted);
    border: 1px solid var(--brand-border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.5rem;
    cursor: grab;
}

.roster-slot-chip[draggable="false"] {
    cursor: default;
}

.roster-slot-chip.is-empty {
    opacity: 0.5;
}

/* Diagonal stripe using the theme's own surface/border tones (same as a regular chip's
   background, alternating with a slightly lighter shade of it) rather than an unrelated gray —
   subtle enough to stay easy on the eye while still flagging Bench1/Bench2 as the two slots that
   don't count toward the week's score. */
.roster-slot-chip.is-non-scoring {
    background-image: repeating-linear-gradient(
        45deg,
        var(--brand-surface-muted),
        var(--brand-surface-muted) 12px,
        var(--brand-border) 12px,
        var(--brand-border) 24px
    );
}

.roster-slot-divider {
    align-self: stretch;
    width: 2px;
    background-color: var(--brand-border);
    margin: 0 0.35rem;
}

.roster-slot-chip-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand-text-muted);
}

.roster-slot-chip-name {
    font-weight: 600;
    text-align: center;
}