/* _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). */

/* Standings + the withdrawn list: hold the numeric columns to the width of their figures so they
   cluster at the right, and let the team column take all the slack. Without this the browser shares
   the leftover width out over six columns, and in a division with a couple of rows each number ends
   up marooned in the middle of a column far from anything else in its row.

   ::deep because ThSortable renders the <th> elements: they carry its scope attribute, not this
   page's, so a plain `.league-standings th` would be rewritten to a selector no head ever matches.
   The same goes for the cells once TeamLink or anything else renders one, so both go through it. */
.league-standings[b-t7ddqtenxu]  th.replay-stats-num,
.league-standings[b-t7ddqtenxu]  td.replay-stats-num {
    width: 1%;
    white-space: nowrap;
}

/* 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%;
}

/* Emoji field: the input, then a preview of what it resolves to and the picker button.
   Aligned to the top rather than centred — the input carries helper text below it, and centring on the
   whole block put the button lower than the input it belongs to. The fixed height matches a dense
   outlined input, so the button lines up with its middle. */
.emoji-field[b-684seni9o5] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.emoji-field__actions[b-684seni9o5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.5rem;
    flex: 0 0 auto;
}

/* Server emoji picker. A grid rather than a list: these are pictures, and a few dozen of them are
   recognisable at a glance in a way their names are not. */
.emoji-picker[b-684seni9o5] {
    width: 16rem;
    padding: 0.25rem;
}

.emoji-picker__grid[b-684seni9o5] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.125rem;
    max-height: 13rem;
    overflow-y: auto;
}

.emoji-picker__item[b-684seni9o5] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: none;
    border: none;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
}

.emoji-picker__item:hover[b-684seni9o5] {
    background: var(--mud-palette-action-default-hover);
}

.emoji-picker__item img[b-684seni9o5] {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/* 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;
}
/* _content/Dashboard/Components/Pages/Logs.razor.rz.scp.css */
/* The log table reads like a terminal on purpose: fixed pitch, tight rows, and a level colour that
   can be picked out down a long column without reading a word of it. */

.log-table-wrap[b-3l5vx6dap5] {
    max-height: 70vh;
    overflow: auto;
}

.log-table[b-3l5vx6dap5] {
    width: 100%;
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace);
    font-size: 0.8125rem;
}

/* The header has to stay put while a few hundred lines scroll under it. */
.log-table thead th[b-3l5vx6dap5] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--app-surface-card);
}

.log-table td[b-3l5vx6dap5] {
    vertical-align: top;
    padding-top: 4px;
    padding-bottom: 4px;
}

.log-time[b-3l5vx6dap5],
.log-source[b-3l5vx6dap5] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.log-app[b-3l5vx6dap5] {
    white-space: nowrap;
}

.log-level[b-3l5vx6dap5] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-caps, 0.04em);
}

.log-level-info[b-3l5vx6dap5] { color: var(--mud-palette-text-secondary); }
.log-level-warning[b-3l5vx6dap5] { color: var(--mud-palette-warning); }
.log-level-error[b-3l5vx6dap5] { color: var(--mud-palette-error); }

/* Long messages wrap rather than stretching the table sideways — the message column is the one that
   is allowed to be tall. */
.log-message[b-3l5vx6dap5] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.log-row-selected[b-3l5vx6dap5] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.log-detail-row > td[b-3l5vx6dap5] {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
    padding: 12px 16px;
}

.log-detail-label[b-3l5vx6dap5] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps, 0.04em);
    color: var(--mud-palette-text-secondary);
    margin-top: 8px;
}

.log-detail-label:first-child[b-3l5vx6dap5] {
    margin-top: 0;
}

.log-detail-value[b-3l5vx6dap5] {
    overflow-wrap: anywhere;
    margin-bottom: 4px;
}

.log-property[b-3l5vx6dap5] {
    padding: 2px 8px;
    border-radius: var(--app-radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    font-size: 0.75rem;
}

/* A stack trace is the one thing here that may scroll on its own rather than making the page do it. */
.log-exception[b-3l5vx6dap5] {
    margin: 4px 0 0;
    padding: 8px 12px;
    max-height: 320px;
    overflow: auto;
    border-radius: 6px;
    background: var(--app-surface-sunken, rgba(0, 0, 0, 0.25));
    font-size: 0.75rem;
    white-space: pre;
}
/* _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-bar[b-tvuvr5fhcu] {
    width: 5.625rem; /* 90px on the 16px root */
}

/* 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); }

/* ── The rosters in the header ──────────────────────────────────────────────────
   A player can be on several teams at once — seasons overlap — so this is a list, and it has to stay
   readable at one and at four. Each team keeps its season beside it: without one, two team names in a
   row look like a transfer rather than like two things that are both true. */
.profile-rosters[b-tvuvr5fhcu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.profile-roster[b-tvuvr5fhcu] {
    display: inline-flex;
    /* Centred, not baseline: the team link carries a logo, and aligning an image's baseline with text
       drops the season label below the line it belongs on. */
    align-items: center;
    gap: 6px;
}

.profile-roster__season[b-tvuvr5fhcu] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
/* _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/PlayoffPotentialTeams.razor.rz.scp.css */
/* The message box is a whole Discord post — eight lines is a starting point, not a verdict, and how
   much of it somebody wants to see at once depends on what they are writing. A textarea resizes for
   free; MudBlazor only turns it off. Vertical only, because a horizontal drag would push the division
   card's grid out of shape.

   ::deep sits after the class, not before it: the scope attribute lands on the wrapping div, which is
   the nearest element this page renders itself, and the textarea is inside a component below it. */
.playoff-message[b-injobmxx9r]  textarea {
    resize: vertical;
    min-height: 8rem;
}
/* _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-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/UserStatistics.razor.rz.scp.css */
/* Charts drawn in the app's own tokens rather than a charting library's, same as GameXpChart: what
   these need is a bar and a tooltip, and a component suite would bring a second theming system to
   fight over both. */

.usage-chart[b-rg3y5i8tqp] {
    width: 100%;
    overflow: hidden;
}

.usage-chart--trend[b-rg3y5i8tqp] {
    height: 140px;
}

.usage-chart svg[b-rg3y5i8tqp] {
    width: 100%;
    height: 100%;
    display: block;
}

/* preserveAspectRatio="none" stretches the bars horizontally, which is what makes a fixed 0-100
   viewBox work at any width. It would stretch a stroke too, so the bars are fills only. */
.usage-bar[b-rg3y5i8tqp] {
    fill: var(--mud-palette-primary);
    opacity: .85;
}

.usage-bar:hover[b-rg3y5i8tqp] {
    opacity: 1;
}

/* The two cyclical charts. Flex rather than SVG: the buckets are few and each carries a label, and
   laying text out in SVG to save one element is a trade in the wrong direction. */
.usage-buckets[b-rg3y5i8tqp] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 130px;
    margin-top: .5rem;
}

.usage-bucket[b-rg3y5i8tqp] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.usage-bucket__bar[b-rg3y5i8tqp] {
    background: var(--mud-palette-tertiary);
    border-radius: 2px 2px 0 0;
    /* An empty hour still gets a hairline, so a gap reads as measured rather than as missing. */
    min-height: 2px;
    opacity: .85;
    transition: opacity .12s ease;
}

.usage-bucket:hover .usage-bucket__bar[b-rg3y5i8tqp] {
    opacity: 1;
}

.usage-bucket__label[b-rg3y5i8tqp] {
    margin-top: .25rem;
    font-size: .7rem;
    line-height: 1;
    text-align: center;
    color: var(--app-text-muted);
    white-space: nowrap;
}

/* The proportion bar in a table cell. Narrow on purpose — it is there to be scanned down a column,
   not read as a value; the number it comes from is in the cell beside it. */
.usage-split[b-rg3y5i8tqp] {
    width: 84px;
    height: 6px;
    border-radius: 999px;
    background: var(--app-hover-bg);
    overflow: hidden;
}

.usage-split__fill[b-rg3y5i8tqp] {
    height: 100%;
    background: var(--mud-palette-tertiary);
}

.usage-route[b-rg3y5i8tqp] {
    font-family: var(--mud-typography-body1-family, monospace);
    font-size: .8rem;
    color: var(--app-text-muted);
    word-break: break-all;
}
/* _content/Dashboard/Components/Shared/LeagueStandingsTable.razor.rz.scp.css */
/* Compact standings table inside a division card: numeric columns stay tight, the team name wraps.

   These rules used to live in League.razor.css, where they never applied to anything. CSS isolation
   stamps the scope attribute onto the elements written in that file, and the table below is written
   here — so `.league-standings-table td` was rewritten to a selector no element ever matched, and the
   table quietly fell back to the .detail-stats-table defaults. */
.league-standings-table[b-ieg0ssddr9] {
    table-layout: auto;
}

/* The team cell has to be able to give.

   The old rule said `word-break: break-word`, which reads like it does that, and for a line already
   being laid out it does — but it leaves the cell's *min-content* width at the longest unbreakable
   token. A name such as "WhoNeedsAHeropool" therefore set a floor for the column that a 320px card
   could not meet, and the table drew its row rules straight through the card's border.
   `overflow-wrap: anywhere` is the one that lowers the floor as well as wrapping the line.

   The min-width goes with it: TeamLink puts the logo and the name in an inline flex row, and a flex
   item defaults to min-width:auto — the same min-content floor, reinstated one level further in.
   ::deep for the descendants, since TeamLink renders them and they carry its scope, not this one —
   the same trap the rules in League.razor.css fell into, one level further down. The logo is left
   out on purpose: it is the one thing in the row that should not give, and its reserved box is what
   keeps the table from reflowing as the images land. */
.league-standings-table td[b-ieg0ssddr9],
.league-standings-table td[b-ieg0ssddr9]  span,
.league-standings-table td[b-ieg0ssddr9]  a {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

/* Head and cell have to agree on the width, or auto table layout sizes the column to whichever of
   the two is wider and the tight `width: 1%` on the cell alone does nothing.

   ::deep on the head for the reason this file already documents one rule up: ThSortable renders the
   <th>, so it carries ThSortable's scope and a bare `.league-standings-table th` would match no
   element at all. */
.league-standings-table[b-ieg0ssddr9]  th.replay-stats-num {
    white-space: nowrap;
    width: 1%;
}

.league-standings-table td.replay-stats-num[b-ieg0ssddr9] {
    white-space: nowrap;
    width: 1%;
    font-variant-numeric: tabular-nums;
}
/* _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;
}