/* ============================================================================
   TOURNAMENT PAGES V2 — shared chrome for the Phase F4 admin/public pages (overview, groups,
   standings, bracket, schedule, results, matches, teams, players). Page-specific containers
   only; actual list/table/card content reuses .sc-table/.sc-card/.sc-badge and the
   buildXxxHtml() JS renderers from earlier phases.
   ============================================================================ */

.tour-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}
.tour-toolbar h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
}
.tour-toolbar-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tour-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.tour-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    text-align: center;
}
.tour-stat-card .tour-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    display: block;
}
.tour-stat-card .tour-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tour-stat-card--live .tour-stat-value { color: var(--color-live); }

.tour-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    margin-bottom: var(--spacing-lg);
}

.tour-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

/* Group card heading (standings-table.js's buildGroupCardHtml). Was `.fmt-section-title`
   (format-builder-v2.css) - a no-op here, since that stylesheet is only loaded on
   TournamentFormatV2/Format.cshtml, not the Standings/Groups pages that actually call
   buildGroupCardHtml. This is the real, loaded equivalent. */
.tour-group-title {
    font-weight: 700;
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-primary);
}

/* Team cell in a standings row (buildStandingsTableHtml's Team column, via teamCellHtml()) - logo
   stacked above the name, not side by side. */
.tour-team-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tour-team-cell__name {
    font-weight: 600;
    text-align: center;
}

.tour-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: fill;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
}

.tour-team-logo--empty { color: var(--color-text-muted); font-size: 16px; }

/* Rank cell (buildStandingsTableHtml's first, focus column, via rankBadgeHtml()) - a circular
   medal badge, gold/silver/bronze for the top 3. Mirrors the .rank-badge/.rank-gold/-silver/
   -bronze convention already established in levelpoint-v2.css's ranking pages, including its
   fixed (never-tokenized - see theme-v2.css's "INTENTIONALLY FIXED" list) medal hex colours -
   prefixed .tour- and re-declared here rather than reusing that class name directly, since
   levelpoint-v2.css itself isn't loaded on this page. */
.tour-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
}

.tour-rank-badge--gold {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #18181b;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.tour-rank-badge--silver {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #18181b;
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
}

.tour-rank-badge--bronze {
    background: linear-gradient(135deg, #cd7f32, #e89b5a);
    color: #18181b;
    box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
}

/* Standings' own group grid: a fixed 4-per-row (not the shared .tour-groups-grid class' auto-fit
   above, which Groups.cshtml still uses unchanged) across the full 1800px shell width -
   #tourStandingsGrid carries full-width-layout in _StandingsPanel.cshtml for that. */
#tourStandingsGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Equal card height across a row: CSS Grid already stretches each #tourStandingsGrid > div (the
   $mount wrapper standings-panel.js appends per group) to the row's tallest item by default
   (align-items: stretch) - but the visible white card, .sc-card--tile, is a normal block INSIDE
   that wrapper, so its own height still only ever matched its own content (fewer teams in a
   group = a visibly shorter card) unless it's told to fill its now-taller parent too. Scoped to
   #tourStandingsGrid, not .sc-card generally, since that class is shared well beyond this page. */
#tourStandingsGrid > div { height: 100%; }
#tourStandingsGrid > div > .sc-card {
    height: 100%;
    box-sizing: border-box;
}

@media (max-width: 1400px) {
    #tourStandingsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    #tourStandingsGrid { grid-template-columns: 1fr; }
}

.tour-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}
.tour-filter-bar select,
.tour-filter-bar input { max-width: 220px; }

.tour-bracket-tabs { margin-bottom: var(--spacing-lg); }

.tour-empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
}

.tour-encounter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-md);
}