/**
 * World Cup 2026 Planner - Stylesheet
 *
 * This stylesheet uses CSS variables for easy theming. Key sections:
 *
 * 1. CSS VARIABLES - All colors and dimensions (change here for global effect)
 * 2. BASE STYLES - Reset and body styling
 * 3. HEADER - Page title
 * 4. PHASE LEGEND - Tournament phase color key
 * 5. TIME FORMAT TOGGLE - 12h/24h switcher
 * 6. SCHEDULE TABLE - Main grid layout
 * 7. MATCH CARDS - Individual match styling
 * 8. GROUPS PANEL - Group standings section
 * 9. MODAL - Match detail popup
 * 10. UTILITY CLASSES - Helpers
 *
 * Color Variables:
 * - --color-group-a through --color-group-l: Match FIFA PDF group colors
 * - --color-western/central/eastern: Region indicator colors
 * - --color-r32/r16/qf/sf/third/final: Knockout round colors
 *
 * Z-INDEX HIERARCHY (from lowest to highest):
 * ┌─────────────────────────────────────────────────────────────────────────┐
 * │ LAYER 1: Card decorations (z-index 1-2, local to match-card context)   │
 * │   - .match-card.selected.sel-style-3::before (z:1, corner outer)       │
 * │   - .match-card.selected.sel-style-3::after (z:2, corner inner gold)   │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ LAYER 2: Hover states (z-index 10)                                      │
 * │   - .match-card:hover (scaled card on hover)                           │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ LAYER 3: Sticky elements (z-index 11-14) - MUST cover scrolling content│
 * │   - .region-label-cell (z-index: 11)                                   │
 * │     └─ ::before (z:1), ::after (z:2), .region-label-text (z:3) - local │
 * │   - .city-cell (z-index: 12)                                           │
 * │   - .corner-cell (z-index: 13)                                         │
 * │   - .stage-corner (z-index: 14)                                        │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ LAYER 4: Bracket highlighting (z-index 20)                              │
 * │   - .match-card.bracket-current (hovered knockout match)               │
 * ├─────────────────────────────────────────────────────────────────────────┤
 * │ LAYER 5: Overlays (z-index 100)                                         │
 * │   - .modal-overlay (match detail modal)                                │
 * │   - .tooltip-content (info tooltips)                                   │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * @see CLAUDE.md for architecture documentation
 */

/* =============================================================================
   1. CSS VARIABLES
   ============================================================================= */

:root {
    /* Dim opacity for filtered/unfocused matches */
    --dim-opacity: 0.35;

    /* Colors - pure black/greyscale theme */
    --color-bg: #0a0a0a;
    --color-bg-light: #1a1a1a;
    --color-text: #ffffff;
    --color-text-muted: #888888;
    --color-border: #333333;

    /* Region colors from PDF */
    --color-western: #14b8a6;   /* Teal */
    --color-central: #84cc16;   /* Green */
    --color-eastern: #f472b6;   /* Pink */

    /* Group colors - matching FIFA World Cup 2026 PDF */
    --color-group-a: #22c55e;   /* Green */
    --color-group-b: #dc2626;   /* Red */
    --color-group-c: #eab308;   /* Yellow */
    --color-group-d: #2563eb;   /* Blue */
    --color-group-e: #f97316;   /* Orange */
    --color-group-f: #166534;   /* Dark Green */
    --color-group-g: #a78bfa;   /* Lavender */
    --color-group-h: #14b8a6;   /* Teal */
    --color-group-i: #7c3aed;   /* Purple */
    --color-group-j: #f87171;   /* Salmon */
    --color-group-k: #ec4899;   /* Pink */
    --color-group-l: #881337;   /* Burgundy */

    /* Phase colors - unique for each round */
    --color-group: #1f1f1f;     /* Dark Grey */
    --color-r32: #2a2a2a;       /* Charcoal Black */
    --color-r16: #5d4037;       /* Chocolate Brown */
    --color-qf: #757575;        /* Stone Gray */
    --color-sf: #9a8b7a;        /* Sandy Cream */
    --color-third: #78716c;     /* Bronze/Stone */
    --color-final: #fbbf24;     /* Gold */

    /* Card sizing - dynamic via sliders
     * --card-scale: 0.5 to 1.5 (50% to 150%)
     * --card-aspect: 0.5 to 1.5 (tall to wide)
     * Base size is 60px, aspect 1.0 gives 60x60 square
     */
    --card-scale: 1;
    --card-aspect: 1;
    --card-base-size: 60px;

    /* Computed card dimensions */
    --card-width: calc(var(--card-base-size) * var(--card-scale) * var(--card-aspect));
    --card-height: calc(var(--card-base-size) * var(--card-scale) / var(--card-aspect));

    /* Cell sizing (includes padding around card) */
    --cell-width: calc(var(--card-width) + 4px);
    --cell-height: calc(var(--card-height) + 6px);
    --city-width: 92px;
    --region-label-width: 28px;

    /* Panel z-index hierarchy */
    --z-panel-buttons: 50;
    --z-backdrop: 90;
    --z-panel: 100;
    --z-modal: 110;
}

/* =============================================================================
   2. BASE STYLES - VIEWPORT LOCKED
   ============================================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.4;
}

/* Schedule wrapper fills entire viewport */
.schedule-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* =============================================================================
   2.5 PANEL TOGGLE BUTTONS
   ============================================================================= */

.panel-buttons {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: var(--z-panel-buttons);
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.panel-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-btn:hover {
    background: rgba(40, 40, 40, 0.95);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.panel-btn.active {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-color: #f59e0b;
}

.panel-btn.active .panel-btn-icon {
    filter: brightness(0);
}

.panel-btn-icon {
    font-size: 20px;
    line-height: 1;
}

.panel-btn-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
}

.panel-btn:hover .panel-btn-tooltip {
    opacity: 1;
    visibility: visible;
}

/* =============================================================================
   2.6 BACKDROP OVERLAY
   ============================================================================= */

.panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.panel-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* =============================================================================
   2.7 SLIDE-OUT PANELS
   ============================================================================= */

.slide-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--color-bg-light);
    z-index: var(--z-panel);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}

.slide-panel.open {
    transform: translateX(0);
}

.panel-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}

.panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
}

.panel-badge {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin-right: 12px;
}

.panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 24px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* Panel sections */
.panel-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.panel-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.panel-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.panel-section-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Control rows within panels */
.control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.control-label {
    font-size: 12px;
    color: var(--color-text-muted);
    min-width: 80px;
}

.control-value {
    font-size: 11px;
    color: var(--color-text);
    min-width: 40px;
    text-align: right;
}

/* Button groups */
.button-group {
    display: flex;
    gap: 4px;
}

/* Day filter buttons in panel */
.day-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Card size sliders */
.card-slider {
    flex: 1;
    min-width: 100px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-border);
    border-radius: 3px;
    cursor: pointer;
}

.card-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Generic toggle button style for panel controls */
.toggle-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.toggle-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.toggle-btn.active {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-color: #f59e0b;
    color: #1e293b;
}

/* Share button in panel */
.share-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border: none;
    border-radius: 6px;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.share-icon {
    font-size: 16px;
}

/* Groups panel specific styles */
#panel-groups .groups-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
}

#panel-groups .group-card {
    min-width: 0;
}

/* My matches panel - table adjustments */
#panel-matches .my-matches-table {
    font-size: 12px;
}

#panel-matches .my-matches-table table {
    width: 100%;
    border-collapse: collapse;
}

#panel-matches .my-matches-table th,
#panel-matches .my-matches-table td {
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

#panel-matches .my-matches-table th {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

#panel-matches .my-matches-empty {
    padding: 30px 16px;
}

/* =============================================================================
   4. STAGE HEADER LABELS
   ============================================================================= */

/* Stage header row */
.stage-header-row {
    height: 28px;
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 20;
}

.stage-header-row th {
    position: sticky;
    top: 0;
    background: var(--color-bg);
}

/* Date header row - sticky below stage header */
.date-header-row {
    position: sticky;
    top: 28px;
    z-index: 19;
    background: var(--color-bg);
}

.date-header-row th {
    position: sticky;
    top: 28px;
    background: var(--color-bg);
}

.date-header-row .date-cell {
    background: #0d0d0d;
}

/* Stage label cells spanning multiple date columns */
.stage-label-cell {
    position: sticky;
    top: 0;
    padding: 0 4px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    background: var(--color-bg);
}

/* Black background layer */
.stage-label-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
}

/* Colored rounded background layer */
.stage-label-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px 20px 0 0;
    z-index: 2;
    pointer-events: none;
}

/* Stage label text */
.stage-label-text {
    position: relative;
    z-index: 3;
    display: inline-block;
    line-height: 28px;
}

/* Stage-specific colors on ::after */
.stage-label-cell.stage-group::after { background: var(--color-group); }
.stage-label-cell.stage-r32::after { background: var(--color-r32); }
.stage-label-cell.stage-r16::after { background: var(--color-r16); }
.stage-label-cell.stage-qf::after { background: var(--color-qf); }
.stage-label-cell.stage-sf::after { background: var(--color-sf); }
.stage-label-cell.stage-third::after { background: var(--color-third); }
.stage-label-cell.stage-final::after { background: var(--color-final); }
.stage-label-cell.stage-rest::after { background: rgba(100, 50, 50, 0.35); }

/* Alternating stage backgrounds - lighter/darker */
.stage-odd {
    background-color: rgba(255, 255, 255, 0.03);
}

.stage-even {
    background-color: rgba(0, 0, 0, 0.15);
}

/* Override for date cells */
.date-cell.stage-odd {
    background: #111111;
}

.date-cell.stage-even {
    background: #0a0a0a;
}

/* Override for match cells */
.match-cell.stage-odd {
    background-color: rgba(255, 255, 255, 0.02);
}

.match-cell.stage-even {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Stage corner cell - sticky positioning like main corner cell */
.stage-corner {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 25;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    will-change: transform;
    transform: translateZ(0);
}

/* =============================================================================
   4.5 SWAPPED AXIS MODE (dates as rows, cities as columns)
   ============================================================================= */

/* Swapped mode variables */
.schedule-table.axis-swapped {
    --stage-label-width: 28px;
    --date-cell-row-width: 50px;
    --city-header-height: 70px;
    --region-header-height: 28px;
}

/* Region header row - horizontal at top (swapped mode) */
.region-header-row {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-bg);
}

.region-header-row th {
    position: sticky;
    top: 0;
    background: var(--color-bg);
}

/* Horizontal region labels (swapped mode) */
.region-label-cell-horizontal {
    padding: 4px 8px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: var(--region-header-height);
    /* Prevent text selection to enable drag on mobile */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
}

.region-label-cell-horizontal.region-western {
    background: var(--color-western);
    color: #1a1a1a;
}

.region-label-cell-horizontal.region-central {
    background: var(--color-central);
    color: #1a1a1a;
}

.region-label-cell-horizontal.region-eastern {
    background: var(--color-eastern);
    color: #1a1a1a;
}

.region-label-text-horizontal {
    white-space: nowrap;
}

/* City header row - sticky below region (swapped mode) */
.city-header-row {
    position: sticky;
    top: var(--region-header-height);
    z-index: 19;
    background: var(--color-bg);
}

.city-header-row th {
    position: sticky;
    top: var(--region-header-height);
    background: var(--color-bg);
}

/* City header cells (swapped mode) */
.city-cell-header {
    min-width: var(--cell-width);
    max-width: var(--cell-width);
    height: var(--city-header-height);
    padding: 4px 2px;
    text-align: center;
    vertical-align: bottom;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--color-bg-light);
}

/* Region colors for city headers (swapped mode) */
.city-cell-header.region-western {
    background: var(--color-western);
    border-bottom-color: var(--color-western);
}
.city-cell-header.region-central {
    background: var(--color-central);
    border-bottom-color: var(--color-central);
}
.city-cell-header.region-eastern {
    background: var(--color-eastern);
    border-bottom-color: var(--color-eastern);
}

/* City header interactivity (swapped mode) */
.city-cell-header[data-city] {
    cursor: grab;
    transition: filter 0.15s ease, opacity 0.15s ease;
    /* Prevent text selection to enable drag on mobile */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.city-cell-header[data-city]:active {
    cursor: grabbing;
}

.city-cell-header[data-city]:hover {
    filter: brightness(1.2);
}

/* City focus states for swapped mode headers */
.city-cell-header.city-focused {
    filter: brightness(1.4);
}

.city-cell-header.city-defocused {
    filter: brightness(0.6);
    opacity: 0.7;
}

.city-name-header {
    font-size: 9px;
    font-weight: 700;
    color: #1a1a1a; /* Dark text for contrast on colored backgrounds */
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Date rows (swapped mode) */
.date-row {
    background: var(--color-bg-light);
}

.date-row.rest-day {
    background-color: rgba(100, 50, 50, 0.2);
}

/* Vertical stage labels - left side (swapped mode) */
.stage-label-cell-vertical {
    position: sticky;
    left: 0;
    z-index: 11;
    width: var(--stage-label-width);
    min-width: var(--stage-label-width);
    max-width: var(--stage-label-width);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
}

.stage-label-cell-vertical::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    z-index: 1;
}

.stage-label-cell-vertical::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 20px 20px 0;
    z-index: 2;
}

/* Stage colors for vertical labels (swapped mode) */
.stage-label-cell-vertical.stage-group::after { background: var(--color-group); }
.stage-label-cell-vertical.stage-r32::after { background: var(--color-r32); }
.stage-label-cell-vertical.stage-r16::after { background: var(--color-r16); }
.stage-label-cell-vertical.stage-qf::after { background: var(--color-qf); }
.stage-label-cell-vertical.stage-sf::after { background: var(--color-sf); }
.stage-label-cell-vertical.stage-third::after { background: var(--color-third); }
.stage-label-cell-vertical.stage-final::after { background: var(--color-final); }
.stage-label-cell-vertical.stage-rest::after { background: rgba(100, 50, 50, 0.35); }

.stage-label-text-vertical {
    position: relative;
    z-index: 3;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Date info cell - sticky next to stage (swapped mode) */
.date-cell-row {
    position: sticky;
    left: var(--stage-label-width);
    z-index: 12;
    width: var(--date-cell-row-width);
    min-width: var(--date-cell-row-width);
    max-width: var(--date-cell-row-width);
    padding: 4px;
    text-align: center;
    background: var(--color-bg-light);
    border-right: 1px solid var(--color-border);
}

.date-cell-row.rest-day {
    background-color: rgba(100, 50, 50, 0.35);
}

/* Corner cells for swapped mode */
.schedule-table.axis-swapped .corner-cell {
    min-width: calc(var(--stage-label-width) + var(--date-cell-row-width));
    background: var(--color-bg);
}

.schedule-table.axis-swapped .corner-cell.stage-corner {
    top: 0;
    left: 0;
    z-index: 25;
}

.schedule-table.axis-swapped .city-header-row .corner-cell {
    top: var(--region-header-height);
    left: 0;
    z-index: 24;
}

/* =============================================================================
   5. TIMEZONE NOTE
   ============================================================================= */

.timezone-note {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

/* =============================================================================
   5.5 TOOLBAR - Two Column Layout
   ============================================================================= */

.toolbar-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 15px 20px;
    background: var(--color-bg-light);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.toolbar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    padding: 12px 24px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.toolbar-column-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.styling-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.toggle-label {
    font-size: 11px;
    color: var(--color-text-muted);
    min-width: 85px;
    text-align: right;
}

/* =============================================================================
   5.6 BUTTON STYLES - Time, Style, Team buttons
   ============================================================================= */

.time-btn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.time-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.time-btn.active {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-color: #f59e0b;
    color: #1e293b;
}

.style-btn {
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 600;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.style-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.style-btn.active {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-color: #f59e0b;
    color: #1e293b;
}

.team-btn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.team-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.team-btn.active {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-color: #f59e0b;
    color: #1e293b;
}

/* =============================================================================
   6. SCHEDULE TABLE
   ============================================================================= */

.schedule-wrapper {
    overflow-x: auto;
    margin-bottom: 30px;
}

.schedule-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 10px;
    background: var(--color-bg-light);
    border-radius: 8px;
}

/* Corner cell - spans region + city columns */
.corner-cell {
    position: sticky;
    left: 0;
    top: 28px;
    z-index: 24;
    background: var(--color-bg);
    min-width: calc(var(--region-label-width) + var(--city-width));
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    will-change: transform;
    transform: translateZ(0);
}

/* Date header cells */
.date-cell {
    min-width: var(--cell-width);
    max-width: var(--cell-width);
    padding: 2px 1px;
    text-align: center;
    background: #0d0d0d;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    line-height: 1.1;
}

.date-day {
    font-size: 6px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.date-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}

.date-month {
    font-size: 6px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Vertical region label cell (spans multiple rows) */
.region-label-cell {
    position: sticky;
    left: 0;
    z-index: 11;
    width: var(--region-label-width);
    min-width: var(--region-label-width);
    max-width: var(--region-label-width);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border: none;
    background: transparent;
    will-change: transform;
    transform: translateZ(0);
}

/* Black rectangular blocker (behind) */
.region-label-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
}

/* Colored rounded background (on top of blocker) */
.region-label-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px 0 0 20px;
    z-index: 2;
    pointer-events: none;
}

.region-label-cell.region-western::after {
    background: var(--color-western);
}

.region-label-cell.region-central::after {
    background: var(--color-central);
}

.region-label-cell.region-eastern::after {
    background: var(--color-eastern);
}

.region-label-text {
    position: relative;
    z-index: 3;
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1a1a1a;
    text-shadow: none;
    white-space: nowrap;
    line-height: var(--region-label-width);
}

/* City rows */
.city-row {
    border: none;
    background: #1a1a1a;
}

/* Drag and drop reordering */
.city-row[draggable="true"] {
    cursor: grab;
}

.city-row[draggable="true"]:active {
    cursor: grabbing;
}

.city-row.dragging {
    opacity: 0.5;
}

/* Row insertion indicators */
.city-row.drag-insert-before {
    box-shadow: inset 0 2px 0 #fbbf24;
}

.city-row.drag-insert-after {
    box-shadow: inset 0 -2px 0 #fbbf24;
}

/* Region drag and drop */
.region-label-cell[draggable="true"] {
    cursor: grab;
}

.region-label-cell[draggable="true"]:active {
    cursor: grabbing;
}

.region-label-cell.dragging {
    opacity: 0.5;
}

/* Region insertion indicators - highlight entire region boundary */
.city-row.region-insert-before {
    box-shadow: inset 0 3px 0 #fbbf24;
}

.city-row.region-insert-after {
    box-shadow: inset 0 -3px 0 #fbbf24;
}

/* =============================================================================
   COLUMN DRAG AND DROP (Swapped Mode)
   Uses HTML5 Drag API (same as row drag)
   ============================================================================= */

/* Column being dragged */
.city-cell-header.dragging {
    opacity: 0.5;
    z-index: 30;
}

/* Column insertion indicators (vertical lines) */
.city-cell-header.col-drag-insert-before {
    box-shadow: inset 3px 0 0 #fbbf24;
}

.city-cell-header.col-drag-insert-after {
    box-shadow: inset -3px 0 0 #fbbf24;
}

/* Region column header drag */
.region-label-cell-horizontal.dragging {
    opacity: 0.5;
    z-index: 30;
}

/* Region column insertion indicators */
.city-cell-header.region-col-drag-insert-before {
    box-shadow: inset 4px 0 0 #fbbf24;
}

.city-cell-header.region-col-drag-insert-after {
    box-shadow: inset -4px 0 0 #fbbf24;
}

.city-cell {
    position: sticky;
    left: var(--region-label-width);
    z-index: 12;
    background: #1f1f1f;
    min-width: var(--city-width);
    padding: 3px 5px;
    border: none;
    vertical-align: middle;
    will-change: transform;
    transform: translateZ(0);
}

.city-cell.region-western {
    background: var(--color-western);
}

.city-cell.region-central {
    background: var(--color-central);
}

.city-cell.region-eastern {
    background: var(--color-eastern);
}

.city-info {
    position: relative;
    text-align: right;
    width: 100%;
    height: 100%;
}

.city-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.city-capacity {
    position: absolute;
    bottom: -22px;
    right: 0px;
    font-size: 8px;
    color: #1a1a1a;
    font-weight: 600;
}

/* Match cells */
.match-cell {
    min-width: var(--cell-width);
    min-height: var(--cell-height);
    padding: 1px;
    vertical-align: top;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}

/* =============================================================================
   6.5 REST DAY STYLING
   ============================================================================= */

.rest-day {
    background-color: rgba(100, 50, 50, 0.2) !important;
}

.date-cell.rest-day {
    background-color: rgba(100, 50, 50, 0.35) !important;
}

/* =============================================================================
   7. MATCH CARDS
   ============================================================================= */

.match-card {
    position: relative;
    padding: 0.3em 0.4em 0.4em;
    border-radius: 0.3em;
    margin-bottom: 0.2em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    /* Dynamic dimensions via CSS variables */
    width: var(--card-width);
    min-width: var(--card-width);
    max-width: var(--card-width);
    height: var(--card-height);
    min-height: var(--card-height);
    max-height: var(--card-height);
    box-sizing: border-box;
    /* Flexbox for consistent internal layout */
    display: flex;
    flex-direction: column;
    /* Prevent content from changing size */
    overflow: hidden;
    /* Base border and shadow for depth - will be enhanced per phase */
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* Scale internal content proportionally */
    font-size: calc(10px * var(--card-scale));
}

.match-card:hover {
    transform: scale(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0,0,0,0.3);
    z-index: 10;
}

.match-card:last-child {
    margin-bottom: 0;
}

/* Group-specific colors (A-L) */
.match-card.phase-group-a { background: var(--color-group-a); }
.match-card.phase-group-b { background: var(--color-group-b); }
.match-card.phase-group-c { background: var(--color-group-c); }
.match-card.phase-group-d { background: var(--color-group-d); }
.match-card.phase-group-e { background: var(--color-group-e); }
.match-card.phase-group-f { background: var(--color-group-f); }
.match-card.phase-group-g { background: var(--color-group-g); }
.match-card.phase-group-h { background: var(--color-group-h); }
.match-card.phase-group-i { background: var(--color-group-i); }
.match-card.phase-group-j { background: var(--color-group-j); }
.match-card.phase-group-k { background: var(--color-group-k); }
.match-card.phase-group-l { background: var(--color-group-l); }

/* Knockout round colors - varied neutrals: black, brown, gray, cream */
.match-card.phase-r32 { background: var(--color-r32); }
.match-card.phase-r16 { background: var(--color-r16); }
.match-card.phase-qf { background: var(--color-qf); }
.match-card.phase-sf { background: var(--color-sf); }
.match-card.phase-third { background: var(--color-third); }
.match-card.phase-final { background: var(--color-final); }

/* =============================================================================
   7.1 STYLING MODE 2 - Group badge colored only, neutral card background
   ============================================================================= */

.match-card.style-mode-2 {
    background: #2d2d2d !important;
}

.match-card.style-mode-2.phase-group-a .card-group { background: var(--color-group-a); }
.match-card.style-mode-2.phase-group-b .card-group { background: var(--color-group-b); }
.match-card.style-mode-2.phase-group-c .card-group { background: var(--color-group-c); }
.match-card.style-mode-2.phase-group-d .card-group { background: var(--color-group-d); }
.match-card.style-mode-2.phase-group-e .card-group { background: var(--color-group-e); }
.match-card.style-mode-2.phase-group-f .card-group { background: var(--color-group-f); }
.match-card.style-mode-2.phase-group-g .card-group { background: var(--color-group-g); }
.match-card.style-mode-2.phase-group-h .card-group { background: var(--color-group-h); }
.match-card.style-mode-2.phase-group-i .card-group { background: var(--color-group-i); }
.match-card.style-mode-2.phase-group-j .card-group { background: var(--color-group-j); }
.match-card.style-mode-2.phase-group-k .card-group { background: var(--color-group-k); }
.match-card.style-mode-2.phase-group-l .card-group { background: var(--color-group-l); }

/* Knockout rounds in mode 2 stay their colors */
.match-card.style-mode-2.phase-r32 { background: #2a2a2a !important; }
.match-card.style-mode-2.phase-r16 { background: #5d4037 !important; }
.match-card.style-mode-2.phase-qf { background: #757575 !important; }
.match-card.style-mode-2.phase-sf { background: #9a8b7a !important; }
.match-card.style-mode-2.phase-third { background: #78716c !important; }
.match-card.style-mode-2.phase-final { background: #f59e0b !important; }

/* =============================================================================
   7.2 STYLING MODE 3 - Neutral background, colored border only
   ============================================================================= */

.match-card.style-mode-3 {
    background: rgba(30, 30, 30, 0.8) !important;
    border-width: 2px;
    border-style: solid;
}

.match-card.style-mode-3.phase-group-a { border-color: var(--color-group-a); }
.match-card.style-mode-3.phase-group-b { border-color: var(--color-group-b); }
.match-card.style-mode-3.phase-group-c { border-color: var(--color-group-c); }
.match-card.style-mode-3.phase-group-d { border-color: var(--color-group-d); }
.match-card.style-mode-3.phase-group-e { border-color: var(--color-group-e); }
.match-card.style-mode-3.phase-group-f { border-color: var(--color-group-f); }
.match-card.style-mode-3.phase-group-g { border-color: var(--color-group-g); }
.match-card.style-mode-3.phase-group-h { border-color: var(--color-group-h); }
.match-card.style-mode-3.phase-group-i { border-color: var(--color-group-i); }
.match-card.style-mode-3.phase-group-j { border-color: var(--color-group-j); }
.match-card.style-mode-3.phase-group-k { border-color: var(--color-group-k); }
.match-card.style-mode-3.phase-group-l { border-color: var(--color-group-l); }

/* Knockout rounds in mode 3 */
.match-card.style-mode-3.phase-r32 { border-color: #555; }
.match-card.style-mode-3.phase-r16 { border-color: #8d6e63; }
.match-card.style-mode-3.phase-qf { border-color: #9e9e9e; }
.match-card.style-mode-3.phase-sf { border-color: #bcaaa4; }
.match-card.style-mode-3.phase-third { border-color: #a1887f; }
.match-card.style-mode-3.phase-final { border-color: #fbbf24; }

/* =============================================================================
   7.3 STYLING MODE 4 - Radial gradient glow from edges (clear center, colored edges)
   ============================================================================= */

.match-card.style-mode-4.phase-group-a { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-a) 100%) !important; }
.match-card.style-mode-4.phase-group-b { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-b) 100%) !important; }
.match-card.style-mode-4.phase-group-c { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-c) 100%) !important; }
.match-card.style-mode-4.phase-group-d { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-d) 100%) !important; }
.match-card.style-mode-4.phase-group-e { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-e) 100%) !important; }
.match-card.style-mode-4.phase-group-f { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-f) 100%) !important; }
.match-card.style-mode-4.phase-group-g { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-g) 100%) !important; }
.match-card.style-mode-4.phase-group-h { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-h) 100%) !important; }
.match-card.style-mode-4.phase-group-i { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-i) 100%) !important; }
.match-card.style-mode-4.phase-group-j { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-j) 100%) !important; }
.match-card.style-mode-4.phase-group-k { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-k) 100%) !important; }
.match-card.style-mode-4.phase-group-l { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, var(--color-group-l) 100%) !important; }

/* Knockout rounds in mode 4 */
.match-card.style-mode-4.phase-r32 { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, #555 100%) !important; }
.match-card.style-mode-4.phase-r16 { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, #8d6e63 100%) !important; }
.match-card.style-mode-4.phase-qf { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, #9e9e9e 100%) !important; }
.match-card.style-mode-4.phase-sf { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, #bcaaa4 100%) !important; }
.match-card.style-mode-4.phase-third { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, #a1887f 100%) !important; }
.match-card.style-mode-4.phase-final { background: radial-gradient(ellipse 80px 80px at center, transparent 0%, #fbbf24 100%) !important; }

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    height: 1.1em;
    min-height: 1.1em;
    max-height: 1.1em;
    margin-bottom: 0.2em;
    overflow: hidden;
}

.card-num {
    font-size: 0.7em;
    font-weight: 700;
    opacity: 0.95;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.card-time {
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.card-teams {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
    max-height: 4.6em;
    gap: 0.1em;
    overflow: hidden;
}

/* Team row - clean flag display (uses em for proportional scaling) */
.team-row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.1em;
    min-height: 2.1em;
    max-height: 2.1em;
    padding: 0.1em;
    flex-shrink: 0;
    overflow: hidden;
}

/* Flag emoji styling (scales with card) */
.team-flag-emoji {
    font-size: 2.2em;
    line-height: 1;
    flex-shrink: 0;
}

/* Team code display (3-letter codes like MEX, USA, etc.) */
.team-code-display {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--color-text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 2.1em;
    letter-spacing: 0.05em;
    text-align: center;
    flex-shrink: 0;
}

/* Team name/code (for knockout placeholders only) */
.card-teams .team-name {
    font-size: 1em;
    font-weight: 700;
    color: var(--color-text);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    letter-spacing: 0.03em;
}

/* Group colors for 1st/2nd place R32 placeholders */
.card-teams .team-name.group-color-a { color: var(--color-group-a); }
.card-teams .team-name.group-color-b { color: var(--color-group-b); }
.card-teams .team-name.group-color-c { color: var(--color-group-c); }
.card-teams .team-name.group-color-d { color: var(--color-group-d); }
.card-teams .team-name.group-color-e { color: var(--color-group-e); }
.card-teams .team-name.group-color-f { color: var(--color-group-f); }
.card-teams .team-name.group-color-g { color: var(--color-group-g); }
.card-teams .team-name.group-color-h { color: var(--color-group-h); }
.card-teams .team-name.group-color-i { color: var(--color-group-i); }
.card-teams .team-name.group-color-j { color: var(--color-group-j); }
.card-teams .team-name.group-color-k { color: var(--color-group-k); }
.card-teams .team-name.group-color-l { color: var(--color-group-l); }

/* Playoff options row - 2x2 grid for 4 flags */
.team-row.playoff-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 2.1em;
    min-height: 2.1em;
    max-height: 2.1em;
    gap: 0.1em;
    padding: 0.1em;
}

.team-row.playoff-options .team-flag-emoji {
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* IC Playoff options - 3 flags in a row */
.team-row.playoff-options-3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 2.1em;
    min-height: 2.1em;
    max-height: 2.1em;
    gap: 0.3em;
    padding: 1px;
}

.team-row.playoff-options-3 .team-flag-emoji {
    font-size: 1.1em;
}

/* Small team codes for playoff options (codes mode) */
.team-code-small {
    font-size: 0.5em;
    font-weight: 700;
    color: var(--color-text);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    line-height: 1;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4-team grid codes (UEFA paths) */
.team-row.playoff-options .team-code-small {
    font-size: 0.5em;
}

/* 3-team row codes (IC paths) */
.team-row.playoff-options-3 .team-code-small {
    font-size: 0.6em;
}

/* Legacy support for old .card-team structure */
.card-team {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    max-width: 100%;
    line-height: 1.3;
    font-size: 14px;
    font-weight: 700;
}

/* Smaller font for playoff teams with multiple options (e.g., ITA/NIR/WAL/BIH) */
.card-team.playoff-options {
    font-size: 7px;
    letter-spacing: -0.3px;
    line-height: 1.1;
    word-spacing: -1px;
}

.card-vs {
    font-size: 7px;
    opacity: 0.8;
    margin: 0 1px;
}

.card-group {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 6px;
    font-weight: 700;
    background: rgba(0,0,0,0.25);
    padding: 1px 3px;
    border-radius: 2px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* =============================================================================
   7.5 SELECTED MATCH CARDS
   ============================================================================= */

.match-card.selected {
    position: relative;
}

/* Style 2: Glow - subtle gold border glow */
.match-card.selected.sel-style-2 {
    box-shadow:
        0 0 0 1.5px rgba(255, 215, 0, 0.8),
        0 0 8px 2px rgba(255, 215, 0, 0.4) !important;
}

/* Style 3: Corner - triangle accent in bottom-left corner
   z-index values kept low (1-2) so they don't bleed through sticky headers */
.match-card.selected.sel-style-3::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 0 12px;
    border-color: transparent transparent transparent white;
    z-index: 1;
}

.match-card.selected.sel-style-3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 0 10px;
    border-color: transparent transparent transparent #ffd700;
    z-index: 2;
}

/* =============================================================================
   8. GROUPS PANEL
   ============================================================================= */

.groups-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: 8px;
    margin-bottom: 30px;
}

.groups-hint-card {
    display: flex;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.focus-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.focus-status {
    font-size: 11px;
    color: var(--color-text-muted);
}

.focus-count {
    font-weight: 700;
    color: #fff;
}

.focus-buttons {
    display: flex;
    gap: 6px;
}

.focus-btn {
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.focus-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.focus-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.focus-btn.active {
    background: var(--color-western);
    border-color: var(--color-western);
    color: #000;
}

.focus-btn.active:hover {
    background: var(--color-western);
    filter: brightness(1.1);
}

/* Dim level slider (in styling toolbar) */
.dim-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-border);
    border-radius: 2px;
    cursor: pointer;
}

.dim-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.dim-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.dim-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    min-width: 30px;
    font-family: 'SF Mono', Monaco, monospace;
}

.group-card {
    background: var(--color-bg);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    min-width: 145px;
}

.group-header {
    background: var(--color-group);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.group-header-a { background: var(--color-group-a); }
.group-header-b { background: var(--color-group-b); }
.group-header-c { background: var(--color-group-c); }
.group-header-d { background: var(--color-group-d); }
.group-header-e { background: var(--color-group-e); }
.group-header-f { background: var(--color-group-f); }
.group-header-g { background: var(--color-group-g); }
.group-header-h { background: var(--color-group-h); }
.group-header-i { background: var(--color-group-i); }
.group-header-j { background: var(--color-group-j); }
.group-header-k { background: var(--color-group-k); }
.group-header-l { background: var(--color-group-l); }

.group-teams {
    padding: 8px;
}

.group-team {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 11px;
    gap: 6px;
}

.group-team:hover {
    background: rgba(255,255,255,0.05);
}

.group-team-flag {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.group-team .team-name {
    color: var(--color-text);
    flex: 1;
}

.group-team .team-code {
    color: var(--color-text-muted);
    font-size: 10px;
    flex-shrink: 0;
}

/* Playoff entry styling in groups panel */
.group-team.playoff-entry {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    margin: 2px 0;
}

/* Selected playoff team row - no extra margin, same as other teams */
.group-team.playoff-selected-team {
    margin-top: 0;
}

/* Invisible spacer - same height as a team row */
.group-team.playoff-spacer {
    visibility: hidden;
    height: 20px;
}

/* Space before playoff entry dropdown */
.group-team.playoff-entry {
    margin-top: 6px;
}

/* When selected team exists, reduce gap to entry */
.group-team.playoff-selected-team + .group-team.playoff-entry {
    margin-top: 2px;
}

.playoff-path-name {
    font-size: 9px;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.playoff-team-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.playoff-team-option {
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--color-text);
}

.playoff-team-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.playoff-team-option.selected {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-color: #f59e0b;
    color: #1e293b;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* =============================================================================
   9. MODAL
   ============================================================================= */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: var(--color-bg-light);
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--color-text-muted);
}

.modal-body {
    padding: 20px;
}

.modal-match {
    text-align: center;
}

.modal-teams {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.modal-team {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

/* R32 specific modal styles */
.modal-team-r32 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.modal-r32-slot {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}

.modal-group-flags {
    font-size: 20px;
    letter-spacing: 2px;
}

/* R32 .modal-teams uses same vertical layout as other matches now */

.modal-r32 .modal-vs {
    margin: 0;
}

.modal-vs {
    font-size: 14px;
    color: var(--color-text-muted);
}

.modal-info {
    font-size: 14px;
    color: var(--color-text-muted);
}

.modal-info p {
    margin-bottom: 8px;
}

.modal-info strong {
    color: var(--color-text);
}

.modal-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.modal-select-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #3a7bd5, #00d2ff);
    color: white;
}

.modal-select-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(58, 123, 213, 0.4);
}

.modal-select-btn.selected {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.modal-select-btn.selected:hover {
    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
}

/* =============================================================================
   MY MATCHES TABLE
   ============================================================================= */

.my-matches-section {
    margin: 20px auto;
    max-width: 900px;
    padding: 0 20px;
}

.my-matches-section.hidden {
    display: none;
}

.my-matches-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-border);
}

.my-matches-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.my-matches-count {
    font-size: 14px;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
}

.my-matches-table {
    background: var(--color-bg-light);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.my-matches-table table {
    width: 100%;
    border-collapse: collapse;
}

.my-matches-table th {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.my-matches-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.my-matches-table tr:last-child td {
    border-bottom: none;
}

.my-matches-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.my-matches-table .match-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.my-matches-table .match-vs {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 400;
}

.my-matches-table .match-stage {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.my-matches-table .match-stage.group {
    background: rgba(58, 123, 213, 0.2);
    color: #5aabff;
}

.my-matches-table .match-stage.knockout {
    background: rgba(255, 193, 7, 0.2);
    color: #ffca28;
}

.my-matches-table .remove-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.my-matches-table .remove-btn:hover {
    background: rgba(239, 83, 80, 0.2);
    border-color: #ef5350;
    color: #ef5350;
}

.my-matches-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted);
}

.my-matches-empty p {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.my-matches-empty .hint {
    font-size: 12px;
    opacity: 0.7;
}

/* =============================================================================
   10. FOOTER
   ============================================================================= */

.footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}

/* =============================================================================
   11. UTILITY CLASSES
   ============================================================================= */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.error {
    text-align: center;
    padding: 40px;
    color: #ef4444;
}

/* =============================================================================
   11.5 BRACKET HOVER HIGHLIGHTING

   Visual feedback when hovering over knockout match cards (matches 73-104).
   Shows the complete bracket path leading to and from the hovered match.

   HOW IT WORKS:
   1. User hovers over a knockout match card
   2. JavaScript adds .bracket-highlighting to the table
   3. Classes are added to related matches based on bracket.json paths

   HIGHLIGHT CLASSES:
   - .bracket-current: The match being hovered (white glow, highest z-index)
   - .bracket-past: Matches that FEED INTO this match (blue glow)
   - .bracket-future: Matches this match LEADS TO (green glow)

   DIMMING EFFECT:
   - When .bracket-highlighting is on the table, all other match cards
     (not current/past/future) drop to 30% opacity
   - This creates strong visual focus on the bracket path

   EXAMPLE: Hover on Semi-Final → See Quarter-Finals highlighted blue,
   Final highlighted green, all group stage matches dimmed.
   ============================================================================= */

/* Current match being hovered - bright white/yellow glow */
.match-card.bracket-current {
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.8) !important;
    z-index: 20;
}

/* Past matches - blue highlight for matches leading UP to current */
.match-card.bracket-past {
    box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.8) !important;
    border: 2px solid #3b82f6 !important;
}

/* Future matches - green highlight for matches current leads TO */
.match-card.bracket-future {
    box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.8) !important;
    border: 2px solid #22c55e !important;
}

/* Dim non-highlighted knockout matches when hovering */
.bracket-highlighting .match-card:not(.bracket-current):not(.bracket-past):not(.bracket-future) {
    opacity: var(--dim-opacity);
}

/* =============================================================================
   11.5.1 FILTER MODE DIMMING

   When filters are active (time range, day of week, or selection filter),
   non-matching matches are DIMMED instead of hidden.

   WHY DIMMING INSTEAD OF HIDING:
   - Keeps the full schedule visible for context
   - Users can still see what matches they're filtering out
   - Works consistently with bracket hover highlighting
   - Prevents jarring layout shifts when toggling filters

   HOW IT WORKS:
   1. buildScheduleGrid() adds .filter-active class to table when any filter is on
   2. createMatchCard() adds .filter-match class to matches passing all filters
   3. CSS dims cards without .filter-match to 30% opacity with grayscale
   ============================================================================= */

/* Dim non-matching matches when filter is active */
.schedule-table.filter-active .match-card:not(.filter-match) {
    opacity: var(--dim-opacity);
    filter: grayscale(50%);
}

/* Ensure matching matches stay fully visible */
.schedule-table.filter-active .match-card.filter-match {
    opacity: 1;
    filter: none;
}

/* Matching matches get a subtle highlight when filter is active */
.schedule-table.filter-active .match-card.filter-match:not(.selected):not(.team-focused) {
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   11.6 SELECTION CONTROLS

   UI for toggling match selection features:
   - "Highlights" button: Shows/hides white dot indicator on selected matches
   - "Focus Mode" button: When active, dims non-selected matches (30% opacity)

   BUTTON STATES:
   - Default: Dark background, muted text (inactive feature)
   - Hover: Slightly lighter, shows interactivity
   - Active (.active class): Gold gradient background (feature is ON)

   These buttons toggle APP.showSelectionHighlights and APP.filterToSelections
   in the JavaScript, then trigger a grid rebuild.
   ============================================================================= */

.selection-btn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.selection-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.selection-btn.active {
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border-color: #f59e0b;
    color: #1e293b;
}

/* Selection style toggle buttons */
.selection-style-toggle {
    display: flex;
    gap: 2px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px;
}

.sel-style-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sel-style-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.sel-style-btn.active {
    background: var(--color-text-muted);
    color: var(--color-bg);
}

/* =============================================================================
   11.7 TOOLBAR SECTION LABELS

   Labels for the Filters and Styling columns
   ============================================================================= */

.section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text);
    padding: 4px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

/* =============================================================================
   11.8 FILTER CONTROLS

   Time-based filtering for the match grid:

   TIME RANGE ROW:
   - Start/End time inputs filter by LOCAL VENUE TIME
   - Clear button resets both inputs
   - Matches must fall within specified range

   DAY OF WEEK ROW:
   - Sun through Sat buttons filter by match date
   - Multiple can be active (checkbox behavior)
   - Common use: Select Sat+Sun for "weekends only"

   VISUAL DESIGN:
   - Time inputs styled to match dark theme
   - Blue gradient when day buttons are active
   - Grouped in rows with flexbox, centered alignment

   When filters are active, buildScheduleGrid() uses getVisibleDates() and
   getVisibleCities() to hide empty rows/columns from the grid.
   ============================================================================= */

.filter-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}

/* Time Range Slider */
.time-slider-row {
    flex-wrap: nowrap;
}

.time-range-slider {
    flex: 1;
}

.time-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    font-family: 'SF Mono', Monaco, monospace;
}

.slider-track {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.slider-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--color-bg);
    border-radius: 3px;
    border: 1px solid var(--color-border);
}

.slider-range {
    position: absolute;
    height: 6px;
    background: linear-gradient(to right, #3b82f6, #60a5fa);
    border-radius: 3px;
    pointer-events: none;
}

.slider-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}

.slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.slider-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


.time-separator {
    font-size: 11px;
    color: var(--color-text-muted);
    padding: 0 4px;
}

.clear-time-btn {
    padding: 2px 8px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.clear-time-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

.day-filter-btn {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.day-filter-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.day-filter-btn.active {
    background: linear-gradient(to bottom, #60a5fa, #3b82f6);
    border-color: #3b82f6;
    color: white;
}

/* Night filter button */
.night-filter-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.night-filter-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.night-filter-btn.active {
    background: linear-gradient(to bottom, #8b5cf6, #6d28d9);
    border-color: #6d28d9;
    color: white;
}

/* Info tooltip */
.info-tooltip-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 4px;
}

.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: help;
}

.info-tooltip:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.tooltip-content {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 12px;
    background: #1a1a1a;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 100;
    width: 320px;
    font-size: 11px;
    line-height: 1.4;
}

.info-tooltip-wrapper:hover .tooltip-content {
    display: block;
}

.tooltip-content strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--color-text);
}

.tooltip-content p {
    margin: 0 0 10px 0;
    color: var(--color-text-muted);
}

.sunset-times {
    display: flex;
    gap: 16px;
}

.sunset-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sunset-col span {
    color: var(--color-text);
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
}

/* Night match highlighting */
/* No special styling for night matches - just let dimming handle it */

/* Dim non-night matches when night filter is active */
.schedule-table.night-filter-active .match-card:not(.night-match) {
    opacity: var(--dim-opacity);
    filter: grayscale(30%);
}

/* =============================================================================
   11.8 SHARE CONTROLS
   ============================================================================= */

.share-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    background: transparent;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn:hover {
    background: #3b82f6;
    color: white;
}

.share-btn.copied {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.share-icon {
    font-size: 14px;
}

/* =============================================================================
   11.9 TEAM FOCUS STYLING

   Visual feedback when users focus on specific teams.

   HOW TEAM FOCUS WORKS:
   1. User clicks a team in the groups panel
   2. Team gets added to APP.focusedTeams Set
   3. isMatchFocused() checks each match for focused teams
   4. CSS classes are applied accordingly

   GROUPS PANEL (.group-team.focused):
   - Blue left border shows which teams are focused
   - Darker background distinguishes from unfocused teams
   - Cursor: pointer indicates clickability

   MATCH CARDS (.match-card.team-focused):
   - Blue glow effect (similar to selected but different color)
   - Makes focused team's matches stand out

   DIMMING NON-FOCUSED (.schedule-table.has-focused-teams):
   - When ANY team is focused, the table gets .has-focused-teams class
   - Non-focused match cards drop to 35% opacity
   - Creates strong visual contrast for focused teams' path
   - Great for "following" a specific country through the tournament
   ============================================================================= */

/* Focused team in groups panel - subtle highlight without blue */
.group-team.focused {
    background: rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.6);
    padding-left: 3px;
}

.group-team[data-team-code] {
    cursor: pointer;
}

.group-team[data-team-code]:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* No special styling for focused match cards - just let dimming handle it */

/* Dim non-focused matches when there are focused teams */
.schedule-table.has-focused-teams .match-card:not(.team-focused) {
    opacity: var(--dim-opacity);
}


/* =============================================================================
   11.10 CITY FOCUS SYSTEM

   3-state focus for cities (click to cycle):
   - normal: follows other filter rules
   - focused: never dimmed, slightly brighter
   - defocused: always dimmed

   CITY ROW STYLING:
   - .city-focused: subtle brightness increase
   - .city-defocused: subtle dimming

   MATCH CARD STYLING:
   - .city-focused: never dimmed regardless of other filters (immunity)
   - .city-defocused: always dimmed (like failing a filter)
   - Normal (no class): follows standard filter rules, NOT affected by city focus

   TABLE-LEVEL:
   - .has-city-focus: semantic indicator only (no CSS rules use it)
   ============================================================================= */

/* City row in focused state - brighten the existing region color */
.city-row.city-focused .city-cell {
    filter: brightness(1.4);
}

/* City row in defocused state - dim the existing region color */
.city-row.city-defocused .city-cell {
    filter: brightness(0.6);
}

/* City cell cursor to indicate clickable */
.city-cell[data-city] {
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.city-cell[data-city]:hover {
    filter: brightness(1.2);
}

/* Focused city matches are never dimmed - override ALL other dimming filters */
.schedule-table .match-card.city-focused {
    opacity: 1 !important;
}

/* Defocused city matches are always dimmed - regardless of other filters */
.schedule-table .match-card.city-defocused {
    opacity: var(--dim-opacity) !important;
}

/* Note: Normal cities (no .city-focused or .city-defocused class) follow
   standard filter rules - they are NOT affected by city focus state */


/* =============================================================================
   12. RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .title {
        font-size: 18px;
    }

    :root {
        --cell-width: 55px;
        --cell-height: 40px;
        --city-width: 100px;
        --region-label-width: 18px;
    }

    .city-name {
        font-size: 12px;
    }

    .city-capacity {
        font-size: 9px;
    }

    .region-label-text {
        font-size: 9px;
        letter-spacing: 1px;
    }

    /* Stage header responsive */
    .stage-header-row {
        height: 22px;
    }

    .stage-label-cell {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .stage-label-text {
        line-height: 22px;
    }

    /* Update sticky top positions for smaller header */
    .date-header-row,
    .date-header-row th,
    .corner-cell {
        top: 22px;
    }

    .groups-panel {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        padding: 10px;
    }

    /* Toolbar responsive - stack columns on mobile */
    .toolbar-container {
        flex-direction: column;
        gap: 20px;
        padding: 12px;
    }

    .toolbar-column {
        min-width: 100%;
    }

    .toggle-label {
        min-width: 70px;
        font-size: 10px;
    }
}

/* ================================================
   FOOTER
   ================================================ */
.site-footer {
    background: #111;
    border-top: 1px solid #333;
    padding: 20px;
    text-align: center;
    margin-top: 40px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.footer-links a {
    color: #4ecdc4;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #7ee8e1;
    text-decoration: underline;
}

.footer-copyright {
    color: #666;
    font-size: 12px;
}