/* _content/Dashboard/Components/Pages/Commands.razor.rz.scp.css */
/* Command toggles as a responsive card grid instead of full-width stacked rows, so a handful of
   commands fill the width instead of leaving a large empty area to the right (whitespace audit). */
.command-grid[b-m6mnzxicjp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}
/* _content/Dashboard/Components/Pages/DivisionStandings.razor.rz.scp.css */
/* Public division-standings page — genuinely new styling only; everything else reuses the shared
   .app-card / .detail-stats-table / .row-clickable / .replay-stats-num patterns (STYLE.md §4.4). */

/* Round/Recent/Upcoming match rows: three-column layout (home | score | away[, date]) inside the
   shared .detail-stats-table, header-less. */
.league-match-table td[b-t7ddqtenxu] {
    vertical-align: middle;
}

.league-match-team[b-t7ddqtenxu] {
    width: 40%;
}

.league-match-team--home[b-t7ddqtenxu] {
    text-align: right;
}

/* In the wide main column (round navigator), push each team to its own side — scoreboard style — so a
   "Team vs Team" row fills the width instead of both teams clustering around the centre. The compact
   rail (--compact) keeps its centred look. */
.league-match-table:not(.league-match-table--compact) .league-match-team--home[b-t7ddqtenxu] {
    text-align: left;
}

.league-match-table:not(.league-match-table--compact) .league-match-team:not(.league-match-team--home)[b-t7ddqtenxu] {
    text-align: right;
}

/* Score/"vs" column — centered, not right-aligned like .replay-stats-num (a plain reuse of that
   class here would fight this rule at equal specificity, so it gets its own small class instead). */
.league-match-score[b-t7ddqtenxu] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    /* DS reserves the mono face for scores; tabular figures keep 1:0 and 3:2 the same width. */
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--app-fw-semibold);
    /* The result reads a touch larger than the surrounding names/rows. */
    font-size: 14px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ── Two-column page layout: wide main column (standings + rounds) + a fixed-width right rail
   (last 5 + upcoming). The rail collapses under the main column on narrow viewports. ── */
.league-layout[b-t7ddqtenxu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

/* No rail content → main column spans the full width. */
.league-layout--single[b-t7ddqtenxu] {
    grid-template-columns: minmax(0, 1fr);
}

/* min-width:0 lets the table/tab tracks shrink inside the grid instead of overflowing. */
.league-main[b-t7ddqtenxu],
.league-rail[b-t7ddqtenxu] {
    min-width: 0;
}

/* Below this width the rail can't hold match rows comfortably → stack it under the main column. */
@media (max-width: 1100px) {
    .league-layout[b-t7ddqtenxu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact "Last 5" rows in the narrow rail: smaller text + tighter score padding, names may wrap. */
.league-match-table--compact td[b-t7ddqtenxu] {
    font-size: var(--app-fs-table-head, 0.6875rem);
}

.league-match-table--compact .league-match-score[b-t7ddqtenxu] {
    /* Compact rows shrink to 11px; the result stays a hair larger so it still stands out. */
    font-size: 13px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Upcoming matches are grouped by day: a weekday header caps each day's cluster, and every match sits
   in its own inset box so matches on the same day read as distinct from one another. */
.league-upcoming-day + .league-upcoming-day[b-t7ddqtenxu] {
    margin-top: 1rem;
}

.league-upcoming-day-header[b-t7ddqtenxu] {
    font-weight: var(--app-fw-semibold);
    color: var(--mud-palette-text-secondary);
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--app-border);
}

/* Individual match box. The shared .row-clickable hover only targets .detail-stats-table rows, so these
   need their own affordance. */
.league-upcoming-match[b-t7ddqtenxu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--app-surface-inner);
    border: 1px solid var(--app-border);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.league-upcoming-match:hover[b-t7ddqtenxu] {
    background: var(--app-hover-bg);
    border-color: var(--mud-palette-primary);
}

.league-upcoming-match-time[b-t7ddqtenxu] {
    flex: 0 0 auto;
    min-width: 3rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--app-fw-semibold);
    color: var(--mud-palette-text-secondary);
}

.league-upcoming-match .league-upcoming-pairing[b-t7ddqtenxu] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .league-upcoming-match[b-t7ddqtenxu] {
        transition: none;
    }
}

/* Upcoming pairing: fixed centre column for "vs" so it lines up across rows regardless of team-name
   length; each team hugs the centre from its own side (home right-aligned, away left-aligned). */
.league-upcoming-pairing[b-t7ddqtenxu] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.375rem;
}

.league-upcoming-pairing > :first-child[b-t7ddqtenxu] { text-align: right; }
.league-upcoming-pairing > :last-child[b-t7ddqtenxu]  { text-align: left; }
/* _content/Dashboard/Components/Pages/DraftLobby.razor.rz.scp.css */
/* DraftLobby — scoped styles (UI-rework plan §6.1).

   These lived in an inline <style> block inside DraftLobby.razor, which meant ~520 lines of
   CSS were injected into the global stylesheet on every render of the page and stayed there
   for the rest of the session. STYLE.md §5.7 rules that out.

   Safe to scope: all 70 rules select the page's own classes (.draft-*, .hero-*,
   .game-summary-*), and not one of those classes sits on a MudBlazor component — checked
   before moving, because Blazor's CSS isolation never reaches a child component's DOM and
   would have silently killed them (as it had done to every rule in Settings.razor.css). */

/* ══════════════════════════════════════════════════════════════════════════
   DRAFT-BOARD — BEWUSST DAUERHAFT DUNKLE, IMMERSIVE OBERFLÄCHE.
   Dieser Screen liegt als Overlay über dem Map-Hintergrundbild und ist in
   BEIDEN Themes dunkel (wie ein In-Game-Draft). Weiße Texte (--app-on-dark),
   schwarze Alpha-Overlays und die farbigen Zustands-Glows (aktiv/gebannt/
   gepickt) sind hier deliberate Effekte, KEIN Dark-Mode-Bug (STYLE.md §2.4).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Background Map Image ── */
.draft-bg[b-gy31qutmem] {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease;
}

.draft-bg-overlay[b-gy31qutmem] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--mud-palette-background) 88%, transparent);
}

.draft-container[b-gy31qutmem] {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.draft-header[b-gy31qutmem] {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ── Map Pool Strip ── */
.draft-map-strip[b-gy31qutmem] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.draft-map-thumb[b-gy31qutmem] {
    position: relative;
    width: 160px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    filter: grayscale(40%);
    transition: all 0.25s ease-in-out;
}

.draft-map-thumb.active[b-gy31qutmem] {
    opacity: 1;
    filter: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.draft-map-thumb.banned[b-gy31qutmem] {
    opacity: 0.3;
    filter: grayscale(100%);
    pointer-events: none;
    border-color: var(--mud-palette-error);
}

.map-ban-overlay[b-gy31qutmem] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-error) 60%, transparent);
    color: var(--app-on-dark);
    font-size: var(--text-body-xs);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.draft-map-thumb img[b-gy31qutmem] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay über Karten-Artwork: Schwarzverlauf, damit der Kartenname auf jedem Motiv
   lesbar bleibt (STYLE.md §2.5 — bewusster Overlay-Effekt, keine Flächenfarbe). */
.draft-map-thumb-label[b-gy31qutmem] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    font-size: var(--text-body-xs);
    font-weight: 600;
    color: var(--app-on-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overlay über Karten-Artwork — siehe .draft-map-thumb-label. */
.draft-map-thumb-num[b-gy31qutmem] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--app-on-dark);
    font-size: var(--text-body-xs);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

/* ── Team Panels ── */
.team-panels[b-gy31qutmem] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

/* Abdunkelung über dem Draft-Hintergrundbild, damit die Panels darauf lesbar sind
   (STYLE.md §2.5). Keine Palette-Fläche, weil darunter Artwork liegt. */
.team-panel[b-gy31qutmem] {
    border-radius: 8px;
    padding: 1rem;
    border: 2px solid;
    background: rgba(0, 0, 0, 0.3);
}

.team-panel.blue[b-gy31qutmem] {
    border-color: var(--mud-palette-primary);
}

.team-panel.red[b-gy31qutmem] {
    border-color: var(--mud-palette-error);
}

.team-header[b-gy31qutmem] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.picked-heroes[b-gy31qutmem] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 80px;
}

.picked-hero-card[b-gy31qutmem] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 60px;
    transition: transform 0.25s ease-in-out;
}

.picked-hero-card:hover[b-gy31qutmem] {
    transform: scale(1.05);
}

.picked-hero-card img[b-gy31qutmem] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary);
}

.picked-hero-card span[b-gy31qutmem] {
    font-size: var(--text-body-xs);
    text-align: center;
    line-height: 1.1;
}

.picked-hero-remove[b-gy31qutmem] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mud-palette-error);
    color: var(--app-on-dark);
    font-size: var(--text-body-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: var(--app-shadow-sm);
}

.picked-hero-card:hover .picked-hero-remove[b-gy31qutmem] {
    opacity: 1;
}

/* ── Hero Selection ── */
.hero-selection-title[b-gy31qutmem] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.section-title[b-gy31qutmem] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.hero-grid[b-gy31qutmem] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.hero-card[b-gy31qutmem] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(var(--mud-palette-surface-rgb, 30, 30, 30), 0.7);
    border: 2px solid transparent;
    transition: all 0.25s ease-in-out;
}

.hero-card.clickable[b-gy31qutmem] {
    cursor: pointer;
}

.hero-card.picked[b-gy31qutmem] {
    opacity: 0.4;
    pointer-events: none;
}

.hero-card.pending[b-gy31qutmem] {
    border-color: var(--mud-palette-warning);
    box-shadow: 0 0 12px color-mix(in srgb, var(--mud-palette-warning) 50%, transparent);
    transform: translateY(-3px);
}

.hero-portrait[b-gy31qutmem] {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-portrait img[b-gy31qutmem] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-picked-overlay[b-gy31qutmem] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--mud-palette-success) 80%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-name[b-gy31qutmem] {
    font-size: var(--text-body-xs);
    text-align: center;
    line-height: 1.1;
    font-weight: 500;
}

/* ── Enhanced Hover Animations ── */
.draft-map-thumb:hover[b-gy31qutmem] {
    opacity: 0.85;
    filter: none;
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--app-shadow-card);
    filter: brightness(1.1);
}

.hero-card.clickable:hover[b-gy31qutmem] {
    transform: translateY(-3px) scale(1.1);
    border-color: var(--mud-palette-primary);
    /* Farbiger Hover-Glow — laut STYLE.md §3.6 als Spezialeffekt zulässig, wenn kommentiert. */
    box-shadow: 0 0 16px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent), var(--app-shadow-sm);
}

.hero-card.clickable:hover .hero-portrait[b-gy31qutmem] {
    box-shadow: 0 0 12px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.picked-hero-card:hover[b-gy31qutmem] {
    transform: scale(1.1);
}

/* ── Tracking Mode Map Cards ── */
.tracking-map-strip .tracking-map-card[b-gy31qutmem] {
    width: 200px;
    height: 90px;
    transition: all 0.25s ease-in-out;
}

.tracking-map-card:hover[b-gy31qutmem] {
    transform: translateY(-3px) scale(1.05);
    filter: brightness(1.15);
    box-shadow: var(--app-shadow-hover);
}

.tracking-map-card.confirmed[b-gy31qutmem] {
    opacity: 1;
    filter: none;
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 16px color-mix(in srgb, var(--mud-palette-success) 50%, transparent);
}

.map-confirm-overlay[b-gy31qutmem] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-success) 50%, transparent);
    color: var(--app-on-dark);
}

/* ── Game Summary Tiles ── */
.game-summary-tile[b-gy31qutmem] {
    position: relative;
    width: 340px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-summary-tile:hover[b-gy31qutmem] {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-hover);
}

.game-summary-bg[b-gy31qutmem] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.35) blur(1px);
}

.game-summary-content[b-gy31qutmem] {
    position: relative;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.game-summary-header[b-gy31qutmem] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-body-sm);
    font-weight: 700;
}

.game-summary-num[b-gy31qutmem] {
    background: var(--app-hover-bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--text-body-xs);
    font-weight: 800;
}

.game-summary-map[b-gy31qutmem] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

.game-summary-teams[b-gy31qutmem] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
}

.game-summary-team[b-gy31qutmem] {
    display: flex;
    gap: 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.game-summary-team.winner[b-gy31qutmem] {
    opacity: 1;
}

.game-summary-vs[b-gy31qutmem] {
    font-size: var(--text-body-xs);
    font-weight: 700;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-summary-hero[b-gy31qutmem] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    object-fit: cover;
    transition: transform 0.15s ease;
}

.game-summary-hero:hover[b-gy31qutmem] {
    transform: scale(1.3);
    z-index: 2;
    border-color: var(--app-on-dark);
}

.game-summary-winner[b-gy31qutmem] {
    font-size: var(--text-body-xs);
    font-weight: 700;
    text-align: center;
}

/* ── Active Pick Indicator (Tracking Mode) ── */
.team-panel.active-pick[b-gy31qutmem] {
    box-shadow: 0 0 20px var(--app-hover-bg);
    transform: scale(1.02);
    transition: all 0.25s ease-in-out;
}

.team-panel.active-pick.blue[b-gy31qutmem] {
    box-shadow: 0 0 20px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.team-panel.active-pick.red[b-gy31qutmem] {
    box-shadow: 0 0 20px color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}

/* ── Hero-Only Tracking List ── */
/* Abdunkelung über dem Draft-Hintergrundbild — siehe .team-panel. */
.hero-only-list[b-gy31qutmem] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--app-border);
}

.game-summary-team.hero-only-summary[b-gy31qutmem] {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    opacity: 1;
}

@@media (max-width: 768px) {
    .team-panels[b-gy31qutmem] {
        grid-template-columns: 1fr;
    }

    .hero-grid[b-gy31qutmem] {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .draft-map-strip[b-gy31qutmem] {
        gap: 0.5rem;
    }

    .draft-map-thumb[b-gy31qutmem] {
        width: 120px;
        height: 55px;
    }

    .tracking-map-strip .tracking-map-card[b-gy31qutmem] {
        width: 140px;
        height: 65px;
    }

    .game-summary-tile[b-gy31qutmem] {
        width: 280px;
    }

    .game-summary-hero[b-gy31qutmem] {
        width: 24px;
        height: 24px;
    }
}
/* _content/Dashboard/Components/Pages/HeroicTicketConfig.razor.rz.scp.css */
/* HeroicTickets settings — the per-field editor row.
   Deliberately not a MudGrid: these rows live inside a MudItem already, and MudGrid's negative
   margins do not nest, which knocked the delete button out of alignment with its row. */

.field-row[b-684seni9o5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.field-row__label[b-684seni9o5] {
    flex: 1 1 12rem;
    min-width: 8rem;
}

.field-row__type[b-684seni9o5] {
    flex: 0 0 10rem;
}

.field-row__required[b-684seni9o5] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Channel picker in the publish bar — wide enough for a readable channel name, narrow enough
   that it stays on one line next to the buttons. */
.publish-target[b-684seni9o5] {
    width: 15rem;
    max-width: 100%;
}

/* Stack on narrow screens so nothing is squeezed to an unusable width. */
@media (max-width: 700px) {
    .field-row[b-684seni9o5] {
        flex-wrap: wrap;
        align-items: flex-start;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--app-border);
    }

    .field-row__label[b-684seni9o5],
    .field-row__type[b-684seni9o5] {
        flex: 1 1 100%;
    }
}
/* _content/Dashboard/Components/Pages/HeroicTicketDetail.razor.rz.scp.css */
/* HeroicTickets detail — moderator sidebar. The conversation itself is styled by
   TicketConversation.razor.css, which the shared component brings with it.
   All colours come from --mud-palette-* / --app-* tokens (STYLE.md §2). */

.ticket-facts[b-m7douhupa8] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.35rem 1rem;
    align-items: baseline;
}

.ticket-facts dt[b-m7douhupa8] {
    color: var(--app-text-muted);
    font-size: var(--text-body-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-facts dd[b-m7douhupa8] {
    margin: 0;
    word-break: break-word;
}

/* Paragraph answers keep their line breaks. */
.ticket-form-value[b-m7douhupa8] {
    white-space: pre-wrap;
}

/* ── Action log ─────────────────────────────────────────── */

.ticket-action[b-m7douhupa8] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--app-border);
    font-size: var(--text-body-sm);
}

.ticket-action:last-child[b-m7douhupa8] {
    border-bottom: none;
}

.ticket-action-kind[b-m7douhupa8] {
    font-weight: 600;
}

.ticket-action-time[b-m7douhupa8],
.ticket-action-actor[b-m7douhupa8] {
    color: var(--app-text-muted);
    font-size: var(--text-body-sm);
}
/* _content/Dashboard/Components/Pages/League.razor.rz.scp.css */
/* Public league landing — genuinely new styling only; the header/empty-state panels reuse the
   shared .app-card pattern (STYLE.md §4.1). */

/* Responsive division-card grid. Columns are wide enough to fit a standings table without a
   horizontal scrollbar; auto-fill lets every division sit side by side on wide screens (the page
   uses the full content width — see MainLayout's IsFullWidthPage) and wrap on narrow ones. */
.league-division-grid[b-jrhtselps5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* The division title is the link into the detailed view; the card itself is not clickable. */
.league-division-card[b-jrhtselps5] {
    min-width: 0;
}

/* Compact standings table inside each card: numeric columns stay tight, the team name is free to
   wrap onto a second line so nothing forces horizontal overflow. */
.league-standings-table[b-jrhtselps5] {
    table-layout: auto;
}

.league-standings-table td[b-jrhtselps5] {
    padding: 6px 8px;
    white-space: normal;
    word-break: break-word;
}

.league-standings-table td.replay-stats-num[b-jrhtselps5] {
    white-space: nowrap;
    width: 1%;
    font-variant-numeric: tabular-nums;
}
/* _content/Dashboard/Components/Pages/PlayerDetail.razor.rz.scp.css */
/* Public player profile — colours stay on palette/`--app-*` tokens (STYLE.md), except the single
   team-derived accent below, which is documented as a §1.3 exception. */

/* Team accent: --profile-accent is injected inline as a dynamic, logo-derived value
   (STYLE.md §1.3 exception); without it the palette primary keeps full theming. */
.profile-header[b-tvuvr5fhcu] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--profile-accent, var(--mud-palette-primary)) 18%, var(--app-surface-card)),
        var(--app-surface-card) 65%);
    border: 1px solid var(--app-border);
    border-top: 3px solid var(--profile-accent, var(--mud-palette-primary));
}

.profile-avatar[b-tvuvr5fhcu] {
    width: 72px;
    height: 72px;
    border-radius: var(--app-radius-md, 8px);
}

.profile-role-icon[b-tvuvr5fhcu] {
    width: 20px;
    height: 20px;
}

.profile-hero-icon[b-tvuvr5fhcu] {
    width: 24px;
    height: 24px;
    border-radius: var(--app-radius-sm, 6px);
}

.profile-hero-bar[b-tvuvr5fhcu] {
    width: 5.625rem; /* 90px on the 16px root */
}

/* Match-history hero icon (20 px per spec §5.4). */
.profile-hist-hero-icon[b-tvuvr5fhcu] {
    width: 20px;
    height: 20px;
    border-radius: var(--app-radius-sm, 6px);
}

/* Match-history result accents; text colours stay on surface for contrast (STYLE.md).
   The --app-fw-bold weight token is referenced app-wide without a definition, so a 700
   fallback keeps the W/L glyphs bold rather than silently rendering at normal weight. */
.profile-result-w[b-tvuvr5fhcu] { color: var(--mud-palette-success); font-weight: var(--app-fw-bold, 700); }
.profile-result-l[b-tvuvr5fhcu] { color: var(--mud-palette-error);   font-weight: var(--app-fw-bold, 700); }
.profile-row-w[b-tvuvr5fhcu]    { box-shadow: inset 3px 0 0 var(--mud-palette-success); }
.profile-row-l[b-tvuvr5fhcu]    { box-shadow: inset 3px 0 0 var(--mud-palette-error); }

/* Career section — three responsive columns that collapse to one on narrow viewports. */
.career-grid[b-tvuvr5fhcu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.career-season[b-tvuvr5fhcu] { font-weight: var(--app-fw-semibold, 600); }
.career-sep[b-tvuvr5fhcu]    { color: var(--mud-palette-text-secondary); }
/* _content/Dashboard/Components/Pages/PlayoffDetail.razor.rz.scp.css */
.bracket-outer[b-1eut68aoe4] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px;
    border-radius: 12px;
    background: var(--mud-palette-background);
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-primary) transparent;
}

.bracket-outer[b-1eut68aoe4]::-webkit-scrollbar {
    height: 8px;
}

.bracket-outer[b-1eut68aoe4]::-webkit-scrollbar-track {
    background: transparent;
}

.bracket-outer[b-1eut68aoe4]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-primary);
    border-radius: 4px;
}

.bracket-scale-wrapper[b-1eut68aoe4] {
    transform-origin: top left;
    will-change: transform;
}

.bracket-container[b-1eut68aoe4] {
    position: relative;
    user-select: none;
    background: transparent;
}

/* ─── SVG Lines ─── */
.bracket-links[b-1eut68aoe4] {
    overflow: visible;
}

.bracket-line[b-1eut68aoe4] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: drawLine-b-1eut68aoe4 1.2s ease-out forwards;
    opacity: 0.5;
}

.bracket-line.bracket-winners[b-1eut68aoe4] {
    stroke: var(--mud-palette-primary);
}

.bracket-line.bracket-losers[b-1eut68aoe4] {
    stroke: var(--mud-palette-warning);
}

.bracket-line.bracket-finals[b-1eut68aoe4] {
    stroke: var(--app-gold);
    opacity: 0.7;
}

@keyframes drawLine-b-1eut68aoe4 {
    to {
        stroke-dashoffset: 0;
    }
}

/* ─── Bracket Headers ─── */
.bracket-header[b-1eut68aoe4] {
    position: absolute;
    font-size: var(--text-body-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: fadeIn-b-1eut68aoe4 0.6s ease forwards;
    white-space: nowrap;
    pointer-events: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.bracket-header.bracket-winners[b-1eut68aoe4] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.bracket-header.bracket-losers[b-1eut68aoe4] {
    color: var(--mud-palette-warning);
    border-bottom-color: var(--mud-palette-warning);
}

.bracket-header.bracket-finals[b-1eut68aoe4] {
    color: var(--app-gold);
    border-bottom-color: var(--app-gold);
}

@keyframes fadeIn-b-1eut68aoe4 {
    to {
        opacity: 0.85;
    }
}

/* ─── Nodes ─── */
.bracket-node[b-1eut68aoe4] {
    z-index: 2;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    animation: nodeEnter-b-1eut68aoe4 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes nodeEnter-b-1eut68aoe4 {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─── Match Card ─── */
.match-card[b-1eut68aoe4] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: var(--text-body-sm);
    padding: 5px 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.match-card:hover[b-1eut68aoe4] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);
}

/* subtle shine sweep on hover */
.match-card[b-1eut68aoe4]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.match-card:hover[b-1eut68aoe4]::after {
    left: 150%;
}

.match-card.played[b-1eut68aoe4] {
    border-color: var(--mud-palette-lines-default);
}

.match-card.upcoming[b-1eut68aoe4] {
    border-style: dashed;
    border-color: var(--mud-palette-text-secondary);
    opacity: 0.85;
}

/* ─── Teams ─── */
.team-row[b-1eut68aoe4] {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.team-name[b-1eut68aoe4] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.team-name.winner[b-1eut68aoe4] {
    font-weight: 800;
    color: var(--mud-palette-success);
}

.team-name.loser[b-1eut68aoe4] {
    color: var(--mud-palette-text-secondary);
}

.score[b-1eut68aoe4] {
    font-weight: 800;
    min-width: 20px;
    text-align: right;
    font-size: var(--text-body-sm);
    color: var(--mud-palette-text-primary);
}

.match-time[b-1eut68aoe4] {
    font-size: var(--text-body-xs);
    color: var(--mud-palette-text-secondary);
    text-align: center;
    margin-top: 2px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* ─── Bracket-specific accent borders ─── */
.bracket-winners .match-card[b-1eut68aoe4] {
    border-left: 3px solid var(--mud-palette-primary);
}

.bracket-losers .match-card[b-1eut68aoe4] {
    border-left: 3px solid var(--mud-palette-warning);
}

.bracket-finals .match-card[b-1eut68aoe4] {
    border-color: var(--app-gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), 0 4px 10px rgba(0,0,0,0.1);
    animation: goldPulse-b-1eut68aoe4 3s ease-in-out infinite;
}

@keyframes goldPulse-b-1eut68aoe4 {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), 0 4px 10px rgba(0,0,0,0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.45), 0 4px 10px rgba(0,0,0,0.1);
    }
}
/* _content/Dashboard/Components/Pages/TeamDetail.razor.rz.scp.css */
/* Public team profile — colours stay on palette/`--app-*` tokens (STYLE.md), except the single
   team-derived accent below, documented as a §1.3 exception. */

/* Team accent: --profile-accent is injected inline as a dynamic, logo-derived value; without it the
   palette primary keeps full theming. Header owns its surface, so it does NOT carry .app-card. */
.profile-header[b-8xggjykkib] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--profile-accent, var(--mud-palette-primary)) 18%, var(--app-surface-card)),
        var(--app-surface-card) 65%);
    border: 1px solid var(--app-border);
    border-top: 3px solid var(--profile-accent, var(--mud-palette-primary));
}

.team-logo-lg[b-8xggjykkib] {
    border-radius: var(--app-radius-md, 8px);
}

.profile-hero-icon[b-8xggjykkib] {
    width: 24px;
    height: 24px;
    border-radius: var(--app-radius-sm, 6px);
}

.profile-hero-bar[b-8xggjykkib] {
    width: 5.625rem; /* 90px on the 16px root */
}

/* Match-history result accents; text colours stay on surface for contrast (STYLE.md). */
.profile-result-w[b-8xggjykkib] { color: var(--mud-palette-success); font-weight: var(--app-fw-bold, 700); }
.profile-result-l[b-8xggjykkib] { color: var(--mud-palette-error);   font-weight: var(--app-fw-bold, 700); }
.profile-row-w[b-8xggjykkib]    { box-shadow: inset 3px 0 0 var(--mud-palette-success); }
.profile-row-l[b-8xggjykkib]    { box-shadow: inset 3px 0 0 var(--mud-palette-error); }

/* History section — three responsive columns that collapse to one on narrow viewports. */
.career-grid[b-8xggjykkib] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.career-season[b-8xggjykkib] { font-weight: var(--app-fw-semibold, 600); }
.career-sep[b-8xggjykkib]    { color: var(--mud-palette-text-secondary); }

/* Narrow secondary tables (Top Heroes + Map Performance) sit side by side on wide screens and stack on
   narrow ones, instead of two half-empty full-width cards (whitespace audit). */
.detail-two-col[b-8xggjykkib] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    align-items: start;
}
/* _content/Dashboard/Components/Pages/TournamentDetail.razor.rz.scp.css */
/* ── Bracket Layout ── */
.bracket-scroll[b-dvcxjtj0wj] {
    overflow-x: auto;
    padding: 8px 0 16px;
}

.bracket[b-dvcxjtj0wj] {
    display: flex;
    align-items: stretch;
    min-width: max-content;
}

.bracket-round[b-dvcxjtj0wj] {
    display: flex;
    flex-direction: column;
    min-width: 230px;
    position: relative;
}

.bracket-round-header[b-dvcxjtj0wj] {
    text-align: center;
    font-size: var(--text-body-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.55;
    padding-bottom: 12px;
}

.bracket-seeds[b-dvcxjtj0wj] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    padding-right: 32px;
    position: relative;
}

/* ── Match Card ── */
.bracket-match[b-dvcxjtj0wj] {
    position: relative;
    padding: 6px 0;
}

.bracket-match-link[b-dvcxjtj0wj] {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    border-left: 3px solid var(--mud-palette-primary);
}

.bracket-match-link:hover[b-dvcxjtj0wj] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* ── Player Row ── */
.bracket-player[b-dvcxjtj0wj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: var(--text-body-sm);
    min-height: 32px;
    background: var(--mud-palette-background);
}

.bracket-player + .bracket-player[b-dvcxjtj0wj] {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.bracket-player-name[b-dvcxjtj0wj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    opacity: 0.75;
}

.bracket-player-score[b-dvcxjtj0wj] {
    font-weight: 700;
    min-width: 20px;
    text-align: right;
}

/* ── Winner Highlight ── */
.bracket-winner[b-dvcxjtj0wj] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-background));
}

.bracket-winner .bracket-player-name[b-dvcxjtj0wj] {
    font-weight: 700;
    opacity: 1;
    color: var(--mud-palette-primary);
}

.bracket-winner .bracket-player-score[b-dvcxjtj0wj] {
    color: var(--mud-palette-primary);
}

/* ── Connector Lines ── */
.bracket-match[b-dvcxjtj0wj]::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    width: 16px;
    height: 0;
    border-top: 2px solid var(--mud-palette-lines-default);
    opacity: 0.4;
}

.bracket-match[b-dvcxjtj0wj]::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    width: 16px;
    height: 0;
    border-top: 2px solid var(--mud-palette-lines-default);
    opacity: 0.4;
}

.bracket-round:first-child .bracket-match[b-dvcxjtj0wj]::before {
    display: none;
}

.bracket-round:last-child .bracket-match[b-dvcxjtj0wj]::after {
    display: none;
}
/* _content/Dashboard/Components/Shared/MatchCard/MatchCard.razor.rz.scp.css */
/* MatchCard isolated styles — variant-specific adjustments */

/* ── Compact (Tournament grid) ── */
.match-card--compact .match-card__header[b-9z5vdk1de0] {
    padding: 8px 14px;
}

.match-card--compact .match-card__body[b-9z5vdk1de0] {
    padding: 12px 14px;
    grid-template-columns: 1fr auto 1fr;
}

.match-card--compact .team__name[b-9z5vdk1de0] {
    font-size: 13px;
}

.match-card--compact .vs-divider__text[b-9z5vdk1de0] {
    font-size: 18px;
}

.match-card--compact .vs-divider__score[b-9z5vdk1de0] {
    font-size: 12px;
}

.match-card--compact .match-card__footer[b-9z5vdk1de0] {
    padding: 8px 14px;
}

/* ── Preview (Case sidebar / MatchChanges dialog) ── */
.match-card--preview .match-card__header[b-9z5vdk1de0] {
    padding: 8px 12px;
}

.match-card--preview .match-card__body[b-9z5vdk1de0] {
    padding: 10px 12px;
    grid-template-columns: 1fr auto 1fr;
}

.match-card--preview .team__name[b-9z5vdk1de0] {
    font-size: 13px;
}

.match-card--preview .vs-divider__text[b-9z5vdk1de0] {
    font-size: 16px;
}

.match-card--preview .match-card__footer[b-9z5vdk1de0] {
    padding: 6px 12px;
}

/* ── Bracket (horizontal tournament bracket) ── */
.match-card--bracket[b-9z5vdk1de0] {
    border-radius: 6px;
    box-shadow: none;
}

.match-card--bracket:hover[b-9z5vdk1de0] {
    box-shadow: none;
}

.match-card--bracket .match-card__body[b-9z5vdk1de0] {
    padding: 8px 10px;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
}

/* Deliberate exception: a bracket packs many names into narrow cells, so these stay mixed-case
   and untracked. They keep the DS display face — it is the condensed one, which is what makes
   them fit — only the uppercasing from .team__name is undone. */
.match-card--bracket .team__name[b-9z5vdk1de0] {
    font-size: 12px;
    font-weight: var(--app-fw-semibold);
    text-transform: none;
    letter-spacing: 0;
}

.match-card--bracket .vs-divider[b-9z5vdk1de0] {
    padding: 0 10px;
}

.match-card--bracket .vs-divider__text[b-9z5vdk1de0] {
    font-size: 14px;
}

.match-card--bracket .vs-divider__score[b-9z5vdk1de0] {
    font-size: 13px;
    font-weight: 800;
}
/* _content/Dashboard/Components/Shared/ProfileFilterBar.razor.rz.scp.css */
/* ProfileFilterBar.razor.css — context filter toolbar. Sticks just below the global MudAppBar
   (Dense ≈ 48px) so it stays reachable while scrolling; a low z-index keeps it under the app bar
   (Mud app bar is 1300) so it never reads as a second global nav. Surface + bottom border, no
   elevation, deliberately distinct from .app-appbar. */
.profile-filter-bar[b-3svhyqahre] {
    position: sticky;
    top: 48px; /* global Dense MudAppBar height — verify against the rendered app bar */
    z-index: 3;
    background: var(--app-surface-card);
    border-bottom: 1px solid var(--app-border);
    margin-bottom: 1rem;
}

.profile-filter-bar__inner[b-3svhyqahre] {
    padding: 0.5rem 0.25rem;
    min-height: 44px;
}

/* NOTE: .profile-filter-bar__popover lives in the GLOBAL app.css, not here. MudPopover portals its
   panel to MudPopoverProvider at the app root — outside this component's DOM subtree — so a scoped
   selector (or ::deep) can never reach it. The panel carries the plain class via MudPopover Class=. */
/* _content/Dashboard/Components/Shared/TicketConversation.razor.rz.scp.css */
/* Ticket conversation — Discord-like message layout on the dashboard's own surfaces.
   Shared by the moderator ticket page and the Personal area (see TicketConversation.razor).
   All colours come from --mud-palette-* / --app-* tokens so light and dark both work (STYLE.md §2). */

.ticket-facts[b-bcrmyedm7i] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.35rem 1rem;
    align-items: baseline;
}

.ticket-facts dt[b-bcrmyedm7i] {
    color: var(--app-text-muted);
    font-size: var(--text-body-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-facts dd[b-bcrmyedm7i] {
    margin: 0;
    word-break: break-word;
}

/* Paragraph answers keep their line breaks. */
.ticket-form-value[b-bcrmyedm7i] {
    white-space: pre-wrap;
}

/* ── History ────────────────────────────────────────────── */

.ticket-history[b-bcrmyedm7i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 70vh;
    overflow-y: auto;
}

.ticket-entry[b-bcrmyedm7i] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.ticket-entry.is-message[b-bcrmyedm7i] {
    background: var(--app-surface-inner);
}

/* System events are quieter than chat, but still part of the same timeline. */
.ticket-entry.is-system[b-bcrmyedm7i] {
    border-left: 2px solid var(--app-border);
    border-radius: 0;
    color: var(--app-text-muted);
    font-size: var(--text-body-sm);
}

.ticket-entry-head[b-bcrmyedm7i] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ticket-entry-author[b-bcrmyedm7i] {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.ticket-entry.is-system .ticket-entry-author[b-bcrmyedm7i] {
    color: var(--app-text-muted);
    font-weight: 500;
}

.ticket-entry-time[b-bcrmyedm7i] {
    color: var(--app-text-muted);
    font-size: var(--text-body-xs);
}

.ticket-entry-tag[b-bcrmyedm7i] {
    font-size: var(--text-body-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-muted);
    border: 1px solid var(--app-border);
    border-radius: 999px;
    padding: 0 0.45rem;
}

.ticket-entry-body[b-bcrmyedm7i] {
    margin-top: 0.15rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Attachments ────────────────────────────────────────── */

.ticket-attachments[b-bcrmyedm7i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.ticket-thumb img[b-bcrmyedm7i] {
    max-width: 260px;
    max-height: 200px;
    border-radius: 6px;
    display: block;
}

.ticket-file[b-bcrmyedm7i] {
    display: inline-block;
    background: var(--app-surface-raised);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: var(--text-body-sm);
}

.ticket-file:hover[b-bcrmyedm7i] {
    border-color: var(--mud-palette-primary);
}

.ticket-file em[b-bcrmyedm7i] {
    color: var(--app-text-muted);
    font-style: normal;
    font-size: var(--text-body-sm);
}

.ticket-file.is-missing[b-bcrmyedm7i] {
    opacity: 0.7;
    cursor: default;
}