/* ================================================================
   standings-overrides.css  —  wwwroot/css/standings-overrides.css

   Load AFTER EventStandingsTab.css. This file removes visual noise
   without modifying any razor or original CSS.

   What it overrides:
     • Heavy left vertical band on group cards (REMOVED)
     • Gradient backgrounds on group headers (calmer)
     • Saturated green badge on group letter (tinted version)
     • Glowing status dot box-shadow (removed)
     • Top bar 2px green border (thin neutral)
     • Status text → unified chip style (matches other tabs)

   Nothing destructive — original styles remain, just overridden.
================================================================ */


/* ================================================================
   1. SHELL — wrap content in a card to match other tabs
   ================================================================ */

.est-root {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    padding: 0 !important;
}


/* ================================================================
   2. TOP BAR — calmer header
   ================================================================ */

.est-topbar {
    padding: 14px 18px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-background-grey);
}

/* Hide glowing dot, keep simple */
.est-stage-dot {
    box-shadow: none !important;
}

.est-stage-title {
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
}


/* ================================================================
   3. GROUP CARDS WRAPPER — add padding around the grid
   ================================================================ */

.est-root > .mud-grid {
    padding: 14px 16px !important;
}


/* ================================================================
   4. GROUP CARD — remove vertical band, simplify header
   ================================================================ */

/*.est-group-card {
    box-shadow: none !important;
    border-radius: 10px !important;
}*/

/* Hide the heavy left band — it competed with the gradient header */
/*.est-group-band {
    display: none !important;
}*/

/* Calmer header — subtle tint instead of bold gradient */
/*.est-group-header {*/
   /* background: rgba(52,211,153,0.06) !important;*/
    /*border-bottom: 1px solid var(--mud-palette-lines-default) !important;*/
    /*padding: 10px 14px !important;*/
    /*min-height: unset !important;*/
}

/* Group letter — tinted background like other type badges */
.est-group-badge {
    background: rgba(52,211,153,0.18) !important;
    color: #0F6E56 !important;
    border: 1px solid rgba(52,211,153,0.35) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
}

/* Dark mode — lighter letter color */
[data-mud-theme="dark"] .est-group-badge,
.mud-theme-dark .est-group-badge {
    color: #6EE7B7 !important;
}

/* Group name and meta */
.est-group-name {
    font-size: 0.80rem !important;
    font-weight: 700 !important;
}

.est-group-sub {
    font-size: 0.68rem !important;
}


/* ================================================================
   5. STATUS — unified chip style
   ================================================================ */

/* Make group status look like a proper chip */
.est-group-status {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    flex-shrink: 0;
}

/* Status dot — no glow */
.est-status-dot {
    box-shadow: none !important;
    width: 5px !important;
    height: 5px !important;
}

.est-status-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
}

/* Match colors of the chips with DrawStages overrides */
.est-group-status:has(.est-dot-running) {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.30);
}

    .est-group-status:has(.est-dot-running) .est-status-label {
        color: #0F6E56;
    }

.est-group-status:has(.est-dot-planned) {
    background: var(--mud-palette-background-grey);
    border-color: var(--mud-palette-lines-default);
}

    .est-group-status:has(.est-dot-planned) .est-status-label {
        color: var(--mud-palette-text-secondary);
    }

.est-group-status:has(.est-dot-completed) {
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.30);
}

    .est-group-status:has(.est-dot-completed) .est-status-label {
        color: var(--mud-palette-primary);
    }

/* Dark mode adjustments */
[data-mud-theme="dark"] .est-group-status:has(.est-dot-running) .est-status-label,
.mud-theme-dark .est-group-status:has(.est-dot-running) .est-status-label {
    color: #6EE7B7;
}

[data-mud-theme="dark"] .est-group-status:has(.est-dot-completed) .est-status-label,
.mud-theme-dark .est-group-status:has(.est-dot-completed) .est-status-label {
    color: #A5B4FC;
}


/* ================================================================
   6. MATCH PROGRESS — tighten
   ================================================================ */

.est-match-progress {
    font-size: 0.65rem !important;
}

.est-match-frac {
    font-family: 'DM Mono', monospace !important;
}


/* ================================================================
   7. TABLE — tighter rows for compactness
   ================================================================ */

.est-table .est-row td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Qualified row — subtle full-row tint */
.est-row-qualified td {
    background: rgba(52,211,153,0.04);
}

/* Rank badges — slightly smaller */
.est-rank-badge {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.62rem !important;
}


/* ================================================================
   8. H2H MATRIX — calmer
   ================================================================ */

.est-h2h-section {
    background: var(--mud-palette-background-grey);
    padding: 10px 14px !important;
}

.est-h2h-label {
    font-family: 'Sora', sans-serif;
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    color: var(--mud-palette-text-secondary) !important;
}