/* --- REFINED SAAS DESIGN LANGUAGE --- */

:root {
    --pearl-primary: #012552;
    --pearl-secondary: #32C0E6;
    --pearl-accent: #8AB840;
    
    /* Semantic surface tokens */
    --pearl-surface: rgba(255, 255, 255, 0.95);
    --pearl-surface-opaque: #ffffff;
    --pearl-surface-hover: #ffffff;
    --pearl-border: rgba(0, 0, 0, 0.06);
    --pearl-border-hover: rgba(1, 37, 82, 0.2);
    --pearl-text-muted: #64748b;
    --pearl-shadow: rgba(1, 37, 82, 0.12);
    --pearl-shadow-hover: rgba(1, 37, 82, 0.18);

    /* Logo "coin" — the plate behind circular school logos. Logos are authored
       for light backgrounds, so the coin stays light in both themes. */
    --pearl-logo-coin: #ffffff;
    --pearl-logo-coin-ring: rgba(0, 0, 0, 0.06);
    --pearl-logo-coin-shadow: rgba(1, 37, 82, 0.12);

    --pearl-floating-border: rgba(255, 255, 255, 1);
    --pearl-navy-glow-border: rgba(1, 36, 82, 0.12);
    --pearl-navy-glow-border-hover: rgba(1, 36, 82, 0.2);
    --pearl-input-bg: #ffffff;
    --pearl-header-color: #012552;
    --pearl-text-primary: #0f172a;
    
    /* Glass pills */
    --pearl-glass-primary-bg: #01255225;
    --pearl-glass-primary-text: #012552;
    --pearl-glass-primary-border: #01255245;

    --pearl-glass-success-bg: #00803725;
    --pearl-glass-success-text: #008037;
    --pearl-glass-success-border: #00803745;

    --pearl-glass-warning-bg: #E4B12325;
    --pearl-glass-warning-text: #b45309;
    --pearl-glass-warning-border: #E4B12345;

    --pearl-glass-error-bg: rgba(205, 28, 24, 0.15);
    --pearl-glass-error-text: #CD1C18;
    --pearl-glass-error-border: rgba(205, 28, 24, 0.4);

    --pearl-glass-info-bg: #32C0E625;
    --pearl-glass-info-text: #1e6275;
    --pearl-glass-info-border: #32C0E645;

    --pearl-glass-neutral-bg: #f1f5f9;
    --pearl-glass-neutral-text: #64748b;
    --pearl-glass-neutral-border: #e2e8f0;

    /* Season chips */
    --pearl-season-fall-bg: #fef3c7;
    --pearl-season-fall-text: #92400e;
    --pearl-season-winter-bg: #dbeafe;
    --pearl-season-winter-text: #1e40af;
    --pearl-season-spring-bg: #dcfce7;
    --pearl-season-spring-text: #166534;
    --pearl-season-purple-bg: #f3e8ff;
    --pearl-season-purple-text: #7c3aed;
    --pearl-season-default-bg: #f1f5f9;
    --pearl-season-default-text: #64748b;
}

.sleek-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--pearl-border);
    background: var(--pearl-surface);
    backdrop-filter: blur(10px);
}

.sleek-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -12px var(--pearl-shadow);
    border-color: var(--pearl-border-hover);
}

/* Normalizing the list items as well */
.list-item-hover {
    transition: all 0.1s ease;
}

.list-item-hover:hover {
    background-color: var(--pearl-surface-hover) !important;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05);
    border-color: var(--pearl-border);
}

/* Typography Utilities */
.text-slate {
    color: var(--pearl-text-muted) !important;
}




/* Disable hover lift/bounce while preserving existing shadow */
.no-hover:hover {
    transform: none !important;
    cursor: default !important;
}

/* --- NOTIFICATION PULSE ANIMATION --- */
.badge-pulse .mud-badge {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* --- SYSTEM-WIDE SOFT GLASS BADGES --- */
.glass-pill-sm {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: fit-content;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-pill-sm:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
}

/* HSL-Based Expert Color System */
.glass-primary { background: var(--pearl-glass-primary-bg) !important; color: var(--pearl-glass-primary-text) !important; border: 1px solid var(--pearl-glass-primary-border) !important; }
.glass-success { background: var(--pearl-glass-success-bg) !important; color: var(--pearl-glass-success-text) !important; border: 1px solid var(--pearl-glass-success-border) !important; }
.glass-warning { background: var(--pearl-glass-warning-bg) !important; color: var(--pearl-glass-warning-text) !important; border: 1px solid var(--pearl-glass-warning-border) !important; }
.glass-error   { background: var(--pearl-glass-error-bg) !important; color: var(--pearl-glass-error-text) !important; border: 1px solid var(--pearl-glass-error-border) !important; }
.glass-info    { background: var(--pearl-glass-info-bg) !important; color: var(--pearl-glass-info-text) !important; border: 1px solid var(--pearl-glass-info-border) !important; }
.glass-neutral { background: var(--pearl-glass-neutral-bg) !important; color: var(--pearl-glass-neutral-text) !important; border: 1px solid var(--pearl-glass-neutral-border) !important; }

/* New Brand Soft Glass Variants */
.glass-dk-green {
    background: rgba(0, 128, 55, 0.18);
    color: #008037;
    border: 1px solid rgba(0, 128, 55, 0.35);
}

.glass-lt-yellow {
    background: rgba(255, 209, 69, 0.2);
    color: #713f12;
    border: 1px solid rgba(255, 209, 69, 0.45);
}

.glass-orange {
    background: rgba(245, 130, 32, 0.18);
    color: #c2610b;
    border: 1px solid rgba(245, 130, 32, 0.35);
}

.glass-dk-orange {
    background: rgba(225, 81, 0, 0.18);
    color: #e15100;
    border: 1px solid rgba(225, 81, 0, 0.35);
}

/* Vibrant Glass (For High-Contrast Dark Backgrounds) */
.glass-vibrant-primary { background: rgba(1, 37, 82, 0.4); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); }
.glass-vibrant-success { background: rgba(0, 200, 83, 0.4); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); }
.glass-vibrant-warning { background: rgba(255, 171, 0, 0.4); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); }
.glass-vibrant-error   { background: rgba(255, 82, 82, 0.4); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); }
.glass-vibrant-info    { background: rgba(50, 192, 230, 0.4); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); }
.glass-vibrant-neutral { background: rgba(255, 255, 255, 0.15); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); }

/* --- EXPERT ELEVATION LAYERS --- */

/* THE FLOATING PEARL: High-depth layered shadow system */
.floating-pearl {
    box-shadow: 0 20px 40px -12px var(--pearl-shadow),
        0 0 12px -3px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--pearl-floating-border);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: var(--pearl-surface-opaque);
}

.floating-pearl:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -15px var(--pearl-shadow-hover),
        0 8px 15px -5px rgba(0, 0, 0, 0.06);
}

/* NAVY GLOW: Branded depth with PCS Navy tint */
.navy-glow {
    box-shadow: 0 20px 40px -12px var(--pearl-shadow),
        0 0 12px -3px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--pearl-navy-glow-border);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navy-glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -15px var(--pearl-shadow-hover),
        0 8px 15px -5px rgba(0, 0, 0, 0.06);
    border-color: var(--pearl-navy-glow-border-hover);
}

/* SOFT DEPTH: Recessed / Neumorphic Dark style */
.soft-depth {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.05);
    background: #222831;
    border: 1px solid rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}

.soft-depth:hover {
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transform: translateY(1px);
}
.soft-depth .mud-typography, .soft-depth .text-slate { color: rgba(255,255,255,0.7) !important; }
.soft-depth .team-name { color: #f8fafc !important; }
.soft-depth:hover .team-name { color: #ffffff !important; }

/* --- DESIGN SHEET UTILITIES --- */
.design-sheet {
    border-radius: 24px !important;
    background-color: white !important;
    border-color: #e2e8f0 !important;
    padding: 2rem !important;
}

/* --- SEASON CHIP TOKENS --- */
.season-fall {
    background-color: var(--pearl-season-fall-bg) !important;
    color: var(--pearl-season-fall-text) !important;
}

.season-winter {
    background-color: var(--pearl-season-winter-bg) !important;
    color: var(--pearl-season-winter-text) !important;
}

.season-spring {
    background-color: var(--pearl-season-spring-bg) !important;
    color: var(--pearl-season-spring-text) !important;
}

.season-year-round {
    background-color: var(--pearl-season-purple-bg) !important;
    color: var(--pearl-season-purple-text) !important;
}

.season-default {
    background-color: var(--pearl-season-default-bg) !important;
    color: var(--pearl-season-default-text) !important;
}

.section-accent-line {
    height: 4px;
    width: 40px;
    background: #32C0E6;
    margin-bottom: 8px;
    border-radius: 2px;
}

/* --- USER PROFILE MENU --- */
.user-profile-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- EXPERT NAVIGATION: THE RADIANT PEARL --- */
.expert-button-group-pearl-radiant {
    background: white !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.02), 0 10px 10px -5px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 6px !important;
    display: flex !important;
    width: fit-content !important;
}

.expert-button-group-pearl-radiant .mud-button-root {
    border-radius: 18px !important;
    margin: 0 4px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    height: 40px !important;
    border: none !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 120px !important;
}

/* Tablet & Mobile: relax button sizing and switch to icon-only mode to prevent overlap */
@media (max-width: 959px) {
    .expert-button-group-pearl-radiant {
        padding: 4px !important;
    }
    .expert-button-group-pearl-radiant .mud-button-root {
        min-width: 44px !important; /* Narrower for icon-only */
        font-size: 0.65rem !important;
        padding: 0 6px !important;
        margin: 0 2px !important;
        height: 36px !important;
    }
    .expert-button-group-pearl-radiant .mud-button-root .mud-button-label {
        font-size: 0 !important;  /* hide text, keep icon */
    }
    .expert-button-group-pearl-radiant .mud-button-root .mud-icon-root {
        margin-right: 0 !important;
    }
}

.expert-button-group-pearl-radiant .mud-button-root.active {
    color: #012552 !important;
    background: rgba(50, 192, 230, 0.05) !important;
}

.expert-button-group-pearl-radiant .mud-button-root.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 15%;
    width: 70%;
    height: 4px;
    background: linear-gradient(90deg, #8AB840 0%, #32C0E6 100%);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(50, 192, 230, 0.4);
}

/* --- EXPERT SELECTOR REFINEMENT --- */
.expert-selector-refined {
    border-radius: 12px !important;
    background: white !important;
    transition: all 0.3s ease !important;
}

.expert-selector-refined .mud-input-slot {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding-left: 8px !important;
    font-weight: 700 !important;
    color: #012552 !important;
}

.expert-selector-refined.mud-input-outlined {
    border: 1px solid rgba(1, 37, 82, 0.1) !important;
}

.expert-selector-refined.mud-input-outlined:focus-within {
    border-color: #32C0E6 !important;
    box-shadow: 0 0 0 3px rgba(50, 192, 230, 0.15) !important;
}

/* --- ACTION HUB: UNIFIED TOOLBAR --- */
.expert-action-hub {
    display: flex;
    align-items: center;
    background: #f8fafc; /* Slate 50 */
    padding: 3px;
    border-radius: 13px;
    gap: 4px;
    border: 1px solid rgba(1, 37, 82, 0.08);
}

.expert-action-hub .mud-button-root {
    height: 38px !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    transition: all 0.25s ease !important;
}

.hub-divider {
    width: 1px;
    height: 20px;
    background: rgba(1, 37, 82, 0.1);
    margin: 0 4px;
}

/* Harmonized Buttons: Soft Glass Approach */
.btn-sunset-glow {
    background: rgba(225, 81, 0, 0.08) !important;
    color: #E15100 !important;
    border: 1px solid rgba(225, 81, 0, 0.1) !important;
}

.btn-sunset-glow:hover {
    background: rgba(225, 81, 0, 0.12) !important;
    box-shadow: 0 4px 12px rgba(225, 81, 0, 0.08) !important;
}

.btn-navy-sync {
    background: rgba(1, 37, 82, 0.08) !important;
    color: #012552 !important;
    border: 1px solid rgba(1, 37, 82, 0.1) !important;
}

.btn-navy-sync:hover {
    background: rgba(1, 37, 82, 0.12) !important;
    box-shadow: 0 4px 12px rgba(1, 37, 82, 0.08) !important;
}

.btn-icon-copy {
    background: rgba(71, 85, 105, 0.05) !important;
    color: #475569 !important;
    border: 1px solid rgba(71, 85, 105, 0.1) !important;
    padding: 0 12px !important;
}

.btn-icon-copy:hover {
    background: rgba(71, 85, 105, 0.1) !important;
    color: #012552 !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.08) !important;
}

/* --- SCHEDULE EXPORT TOOLBAR (AdminSchedule) ---
   Four 140px export buttons fit fine on desktop/iPad, but on a phone they wrap
   into a tall stack that dominates the screen above the schedule. Below 600px,
   collapse them to compact icon-only chips (label hidden, tooltip retained).
   The buttons carry an inline min-width:140px, so these need !important. */
@media (max-width: 600px) {
    .schedule-export-toolbar {
        justify-content: center;
    }
    .schedule-export-toolbar .mud-button-root {
        min-width: 44px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .schedule-export-toolbar .mud-button-root .mud-button-label {
        font-size: 0 !important; /* hide text, keep the StartIcon */
    }
    .schedule-export-toolbar .mud-button-root .mud-icon-root {
        margin-right: 0 !important;
    }
}

/* --- RESPONSIVE UTILITIES --- */
.hide-on-mobile {
    display: inline-block;
}

@media (max-width: 600px) {
    .hide-on-mobile {
        display: none !important;
    }

    .expert-action-hub {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 6px;
    }

    .expert-action-hub .mud-button-root {
        font-size: 0.65rem !important;
        height: 34px !important;
        flex: 1 1 auto;
        min-width: fit-content;
    }

    .hub-divider {
        display: none; /* Hide vertical lines to allow wrapping */
    }
}

/* --- LAYOUT & NAVIGATION --- */

/* Horizontal Navigation Pills (Branded) */
.top-nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.top-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.top-nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Admin Context Bar System */
.admin-context-bar {
    position: fixed;
    /* top is now handled by inline style for dynamic syncing */
    left: 24px;
    right: 24px;
    height: 48px;
    z-index: 1200;
    display: flex;
    align-items: center;
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.admin-context-standard {
    background: linear-gradient(135deg, rgba(1, 53, 110, 0.95) 0%, rgba(1, 37, 82, 0.98) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px -8px rgba(1, 37, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.admin-context-impersonating {
    /* --impersonate-bg / --impersonate-glow are set inline by AdminContextBar when the
       impersonated school is branded; otherwise these defaults keep the original orange. */
    background: var(--impersonate-bg, linear-gradient(135deg, rgba(245, 130, 32, 0.95) 0%, rgba(225, 81, 0, 0.95) 100%));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 30px -10px var(--impersonate-glow, rgba(225, 81, 0, 0.35)), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.context-school-chip {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 4px 16px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    min-width: 0; /* allow the chip to shrink so its school name can ellipsis */
}

/* The school name (second span inside the chip) truncates instead of pushing
   the Exit View button off the bar on narrow phones. */
.context-school-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Phones: pull the fixed bar's side insets in, let the left context cluster
   shrink (so the chip truncates), and tighten the chip padding so the
   "Exit View" / settings affordances always stay on the bar. */
@media (max-width: 600px) {
    .admin-context-bar {
        left: 12px;
        right: 12px;
    }
    .admin-context-bar .context-school-chip {
        padding: 4px 10px;
        max-width: 48vw;
    }
}

/* Header Select Overrides (Within Context Bar) */
.header-school-select {
    --mud-palette-text-primary: #ffffff !important;
    --mud-palette-text-secondary: rgba(255,255,255,0.7) !important;
    --mud-palette-lines-inputs: rgba(255,255,255,0.2) !important;
}

.header-school-select .mud-input.mud-input-outlined {
    padding: 0 12px !important;
    height: 34px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

.header-school-select .mud-input-outlined-border {
    border-color: rgba(255,255,255,0.2) !important;
}

.header-school-select:hover .mud-input-outlined-border {
    border-color: rgba(255,255,255,0.4) !important;
}

.header-school-select .mud-input-label {
    display: none !important;
}

.header-school-select .mud-select-input {
    padding-left: 8px !important;
    color: white !important;
    font-size: 0.85rem !important;
}

.header-school-select .mud-input-adornment-start {
    margin-right: 0px !important;
    color: rgba(255,255,255,0.7) !important;
}

.header-school-select .mud-input-adornment-end {
    color: rgba(255,255,255,0.5) !important;
}

/* --- COMPONENT STYLES (PAGEHERO & MATCHUPCARD) --- */

/* PageHero System */
@media (max-width: 960px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
    .hero-subtext {
        font-size: 1rem !important;
    }
}

.hero-notch-container {
    position: absolute;
    right: -120px;
    top: 50%;
    width: 240px;
    height: 240px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -10px 0 30px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 10;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(-50%) translateX(20px);
    opacity: 0;
    animation: notch-entrance 0.8s 0.2s forwards;
}

@keyframes notch-entrance {
    to { transform: translateY(-50%) translateX(0); opacity: 1; }
}

.hero-notch-inner {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-clipped {
    overflow: visible !important;
}

.hero-background-masked {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    mask-image: radial-gradient(circle at 100% 50%, transparent 120px, black 121px);
    -webkit-mask-image: radial-gradient(circle at 100% 50%, transparent 120px, black 121px);
}

.hero-notch-layout {
    margin-right: 60px !important;
}

.hero-background-split {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30%;
    min-width: 280px;
    z-index: 1;
    overflow: hidden;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

.split-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: split-shimmer 6s infinite linear;
}

@keyframes split-shimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 100% 0; }
}

.split-logo-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hero-sidehub-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* keep logo + title on one row; stacking is handled by the
                          column-direction media query below, not by wrapping
                          (wrapping pushed the fixed-width logo onto its own
                          centered line on wide screens). */
}

.hero-side-logo-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-right: 24px;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* Stack the logo above the title on small screens (matches the old grid). */
@media (max-width: 959px) {
    .hero-sidehub-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-side-logo-wrapper {
        margin-right: 0;
        margin-bottom: 12px;
    }
}

.hero-radiant-pearl {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    padding: 3px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(50, 192, 230, 0.25);
    transition: box-shadow 0.4s ease;
}

.hero-radiant-pearl:hover {
    box-shadow: 0 8px 32px rgba(50, 192, 230, 0.4);
}

.hero-pearl-inner {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-backdrop-icon {
    position: absolute;
    right: -20px;
    bottom: -40px;
    font-size: 280px !important;
    color: rgba(255,255,255,0.08);
    transform: rotate(-10deg);
    z-index: 1;
    pointer-events: none;
}

.hero-ghost-text {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 6rem;
    font-weight: 900;
    color: white;
    opacity: 0.08;
    white-space: nowrap;
    transform: rotate(0deg);
    pointer-events: none;
    z-index: 1;
    font-family: 'Prompt', sans-serif;
    line-height: 1;
}

@media (max-width: 600px) {
    .hero-ghost-text { font-size: 5rem; right: -20px; bottom: -10px; }
}

/* MatchupCard Hover Effects */
.matchup-vs-container {
    position: relative;
    padding: 0 10px;
}
.matchup-vs-container::before, .matchup-vs-container::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 1px;
    background: #e2e8f0;
}
.matchup-vs-container::before { left: -15px; }
.matchup-vs-container::after { right: -15px; }

.logo-container {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sleek-card:hover .logo-container {
    transform: scale(1.1) rotate(5deg);
}
.team-name {
    transition: color 0.2s ease;
}
.sleek-card:hover .team-name {
    color: var(--mud-palette-primary) !important;
}

/* --- ADDITIONAL CARD VARIANTS --- */

/* SOPHISTICATED NAVY: High-contrast branded utility */
.sleek-card.navy-card { 
    background: #012552 !important; 
    color: white !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 
    box-shadow: 0 15px 30px -10px rgba(1, 37, 82, 0.45) !important;
}
.sleek-card.navy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -15px rgba(1, 37, 82, 0.6) !important;
    border-color: rgba(138, 184, 64, 0.5) !important; /* PCS Lime accent glow */
}
.sleek-card.navy-card .mud-typography, .sleek-card.navy-card .text-slate { color: rgba(255,255,255,0.85) !important; }
.sleek-card.navy-card .team-name { color: #f8fafc !important; }
.sleek-card.navy-card:hover .team-name { color: #ffffff !important; }

.glass-card .sleek-card { 
    background: rgba(255,255,255,0.7) !important; 
    backdrop-filter: blur(8px); 
    border: 1px solid white !important; 
}
.minimal-card .sleek-card { 
    box-shadow: none !important; 
    background: #f8fafc !important; 
    border-left: 4px solid #32C0E6 !important; 
}

/* Custom Scrollbar Utility */
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

/* --- ADDITIONAL BUTTON GROUP VARIANTS --- */

/* COMMON BUTTON GROUP BASE (Shared by variants) */
.expert-button-group-pearl, 
.expert-button-group-pearl-gradient, 
.expert-button-group-pearl-inset, 
.expert-button-group-pearl-navy { 
    background: white !important; 
    border-radius: 24px !important; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 6px !important;
    width: 100% !important;
    display: flex !important;
}

.expert-button-group-pearl .mud-button-root, 
.expert-button-group-pearl-gradient .mud-button-root, 
.expert-button-group-pearl-inset .mud-button-root,
.expert-button-group-pearl-navy .mud-button-root { 
    flex: 1 !important;
    border-radius: 18px !important; 
    margin: 0 4px !important; 
    font-weight: 800 !important; 
    color: #475569 !important; 
    text-transform: uppercase !important; 
    font-size: 0.75rem !important; 
    letter-spacing: 0.5px !important; 
    height: 48px !important;
    border: none !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Original Pearl active state */
.expert-button-group-pearl .mud-button-root.active { 
    color: #012552 !important; 
    background: rgba(138, 184, 64, 0.1) !important;
}
.expert-button-group-pearl .mud-button-root.active::after {
    content: ''; position: absolute; bottom: 6px; left: 20%; width: 60%; height: 4px; background: #8AB840; border-radius: 4px;
}

/* Gradient Glow active state */
.expert-button-group-pearl-gradient .mud-button-root.active { 
    color: #012552 !important; 
}
.expert-button-group-pearl-gradient .mud-button-root.active::after {
    content: ''; position: absolute; bottom: 6px; left: 15%; width: 70%; height: 5px; 
    background: linear-gradient(90deg, #8AB840 0%, #32C0E6 100%); 
    border-radius: 5px; box-shadow: 0 2px 8px rgba(50, 192, 230, 0.4);
}

/* Branded Navy Pearl (Dark) */
.expert-button-group-pearl-navy { 
    background: #012552 !important; 
    border: 2px solid #012552 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2) !important;
}
.expert-button-group-pearl-navy .mud-button-root { color: rgba(255,255,255,0.7) !important; }
.expert-button-group-pearl-navy .mud-button-root.active { 
    color: #ffffff !important; 
    background: rgba(255,255,255,0.15) !important; 
}
.expert-button-group-pearl-navy .mud-button-root.active::after {
    content: ''; position: absolute; bottom: 6px; left: 20%; width: 60%; height: 4px; background: #8AB840; border-radius: 4px;
}

/* --- FIXED MUDBLAZOR POPOVER SNAP/JUMP --- */
.mud-popover.mud-popover-open {
    animation: mudPopoverFadeIn 0s 0.05s forwards;
    visibility: hidden;
}
@keyframes mudPopoverFadeIn {
    to { visibility: visible; }
}

/* --- THEME OVERRIDES --- */
.theme-dark {
    --pearl-primary: #8AB840;
    --pearl-secondary: #32C0E6;
    --pearl-accent: #E4B123;

    /* Semantic surface tokens */
    --pearl-surface: rgba(17, 17, 17, 0.95);
    --pearl-surface-opaque: #111111;
    --pearl-surface-hover: #18181b;
    /* Translucent "mesh" surface — lets the page radiant glow show through cards/tables
       (mirrors Modern TERMS .frost-card). Use with --pearl-mesh-blur backdrop-filter. */
    --pearl-mesh-surface: rgba(50, 192, 230, 0.03);
    --pearl-mesh-surface-strong: rgba(50, 192, 230, 0.05);
    --pearl-mesh-blur: blur(30px) saturate(150%);
    --pearl-border: rgba(255, 255, 255, 0.06);
    --pearl-border-hover: rgba(138, 184, 64, 0.35);
    --pearl-text-muted: #94a3b8;
    --pearl-shadow: rgba(0, 0, 0, 0.5);
    --pearl-shadow-hover: rgba(0, 0, 0, 0.65);

    /* Logo coin stays a light plate in dark mode so school logos (authored for
       white backgrounds) keep their contrast. Off-white, not pure white, to
       avoid a harsh glare; a faint inner ring + real dark shadow lift it off
       the radiant mesh. */
    --pearl-logo-coin: #f4f5f7;
    --pearl-logo-coin-ring: rgba(255, 255, 255, 0.12);
    --pearl-logo-coin-shadow: rgba(0, 0, 0, 0.55);

    --pearl-floating-border: rgba(255, 255, 255, 0.08);
    --pearl-navy-glow-border: rgba(255, 255, 255, 0.08);
    --pearl-navy-glow-border-hover: rgba(138, 184, 64, 0.2);
    --pearl-input-bg: #111111;
    --pearl-header-color: rgba(255, 255, 255, 0.95);
    --pearl-text-primary: rgba(255, 255, 255, 0.95);

    /* Glass pills in dark mode */
    --pearl-glass-primary-bg: rgba(138, 184, 64, 0.12);
    --pearl-glass-primary-text: #8AB840;
    --pearl-glass-primary-border: rgba(138, 184, 64, 0.25);

    --pearl-glass-success-bg: rgba(76, 175, 80, 0.12);
    --pearl-glass-success-text: #4CAF50;
    --pearl-glass-success-border: rgba(76, 175, 80, 0.25);

    --pearl-glass-warning-bg: rgba(228, 177, 35, 0.12);
    --pearl-glass-warning-text: #E4B123;
    --pearl-glass-warning-border: rgba(228, 177, 35, 0.25);

    --pearl-glass-error-bg: rgba(255, 110, 64, 0.12);
    --pearl-glass-error-text: #FF6E40;
    --pearl-glass-error-border: rgba(255, 110, 64, 0.25);

    --pearl-glass-info-bg: rgba(50, 192, 230, 0.12);
    --pearl-glass-info-text: #32C0E6;
    --pearl-glass-info-border: rgba(50, 192, 230, 0.25);

    --pearl-glass-neutral-bg: rgba(255, 255, 255, 0.05);
    --pearl-glass-neutral-text: #94a3b8;
    --pearl-glass-neutral-border: rgba(255, 255, 255, 0.08);

    /* Season chips in dark mode */
    --pearl-season-fall-bg: rgba(245, 158, 11, 0.15);
    --pearl-season-fall-text: #fbbf24;
    --pearl-season-winter-bg: rgba(59, 130, 246, 0.15);
    --pearl-season-winter-text: #60a5fa;
    --pearl-season-spring-bg: rgba(16, 185, 129, 0.15);
    --pearl-season-spring-text: #34d399;
    --pearl-season-purple-bg: rgba(139, 92, 246, 0.15);
    --pearl-season-purple-text: #a78bfa;
    --pearl-season-default-bg: rgba(255, 255, 255, 0.05);
    --pearl-season-default-text: #94a3b8;
}

/* --- RADIANT MESH (dark only — ported from Modern TERMS "Midnight Pearl") --- */
/* Anti-flash: paint the page dark before the Blazor circuit connects. */
html.theme-dark body {
    background-color: #0b0f17;
}

.theme-dark .pearl-root {
    background-color: #0b0f17;
    background-image:
        radial-gradient(circle at 80% 0%, rgba(30, 100, 140, 0.2) 0px, transparent 60%),
        radial-gradient(circle at 20% 100%, rgba(30, 100, 140, 0.2) 0px, transparent 60%),
        radial-gradient(circle at 0% 0%, rgba(150, 110, 30, 0.08) 0px, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(80, 110, 40, 0.08) 0px, transparent 50%);
    background-attachment: fixed;
}

/* Keep MudBlazor layout surfaces transparent so the mesh shows through. */
.theme-dark .mud-layout,
.theme-dark .mud-main-content {
    background-color: transparent;
}

/* Dark mode specific component overrides */
.theme-dark .admin-context-standard {
    background: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Impersonating bar in dark mode — drop the bright orange fill; use the mesh
   surface with a lime→sky-blue GRADIENT BORDER to signal the active state.
   Double background (padding-box surface + border-box gradient) so the gradient
   border respects the 12px radius. */
.theme-dark .admin-context-impersonating {
    /* In dark mode the bar stays a dark surface with a colored gradient *border*.
       --impersonate-border (set inline when branded) swaps that to the school colors. */
    background:
        linear-gradient(var(--pearl-surface-opaque), var(--pearl-surface-opaque)) padding-box,
        var(--impersonate-border, linear-gradient(135deg, #8AB840 0%, #32C0E6 100%)) border-box !important;
    border: 2px solid transparent !important;
    box-shadow: 0 8px 30px -10px var(--impersonate-glow, rgba(50, 192, 230, 0.35)), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.theme-dark .glass-dk-green { background: rgba(76, 175, 80, 0.18) !important; color: #4CAF50 !important; border-color: rgba(76, 175, 80, 0.35) !important; }
.theme-dark .glass-lt-yellow { background: rgba(228, 177, 35, 0.18) !important; color: #E4B123 !important; border-color: rgba(228, 177, 35, 0.35) !important; }
.theme-dark .glass-orange { background: rgba(255, 110, 64, 0.18) !important; color: #FF6E40 !important; border-color: rgba(255, 110, 64, 0.35) !important; }
.theme-dark .glass-dk-orange { background: rgba(255, 110, 64, 0.18) !important; color: #FF6E40 !important; border-color: rgba(255, 110, 64, 0.35) !important; }

.theme-dark .glass-vibrant-primary { background: rgba(138, 184, 64, 0.4) !important; }

/* --- RADIANT MESH SURFACES (dark only) ---
   Translucent, blurred card/table surfaces so the page's radiant mesh glows
   through — the depth effect from Modern TERMS. Light mode is untouched.
   .navy-card / .glass-card / .minimal-card keep their intentional solid fills below. */
.theme-dark .sleek-card:not(.navy-card),
.theme-dark .floating-pearl,
.theme-dark .navy-glow {
    background: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.theme-dark .sleek-card:not(.navy-card):hover,
.theme-dark .floating-pearl:hover,
.theme-dark .navy-glow:hover {
    box-shadow: 0 14px 40px rgba(50, 192, 230, 0.15) !important;
    border-color: rgba(138, 184, 64, 0.2) !important;
}

/* MudTable / MudDataGrid pick up the same translucent mesh surface */
.theme-dark .mud-table:not([style*="background"]),
.theme-dark .mud-table-container:not([style*="background"]) {
    background-color: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
}

.theme-dark .sleek-card.navy-card {
    background: #0b0f17 !important;
    border-color: rgba(138, 184, 64, 0.25) !important;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6) !important;
}
.theme-dark .sleek-card.navy-card:hover {
    border-color: #8AB840 !important;
    box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.8) !important;
}

.theme-dark .glass-card .sleek-card {
    background: rgba(17, 17, 17, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .minimal-card .sleek-card {
    background: #111111 !important;
}

.theme-dark .design-sheet {
    background-color: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- LIGHT/DARK DISPLAY UTILITIES --- */
.theme-light .dark-only { display: none !important; }
.theme-dark .light-only { display: none !important; }

/* --- LOGIN DISPLAY UTILITIES --- */
.login-chip-sysadmin { font-weight: 600; letter-spacing: 0.3px; }
.mud-appbar .login-chip-sysadmin { color: var(--header-secondary, #94a3b8) !important; border-color: var(--header-secondary, rgba(255, 255, 255, 0.2)) !important; }
.theme-light .mud-drawer .login-chip-sysadmin { color: #64748b !important; border-color: var(--mud-palette-divider) !important; }
.theme-dark .mud-drawer .login-chip-sysadmin { color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.08) !important; }

.login-chip-director { font-weight: 700; letter-spacing: 0.3px; }
.mud-appbar .login-chip-director { color: #78350f !important; background-color: #fcd34d !important; }
.theme-light .mud-drawer .login-chip-director { color: #78350f !important; background-color: #fcd34d !important; }
.theme-dark .mud-drawer .login-chip-director { color: #09090B !important; background-color: var(--mud-palette-warning) !important; }

.mud-appbar .user-profile-btn { color: rgba(255, 255, 255, 0.9) !important; }
.mud-appbar .user-profile-text { color: rgba(255, 255, 255, 0.9) !important; }

/* Keep the right-side identity cluster from overflowing the fixed-height app
   bar. macOS renders the system font wider than Segoe UI, so without a shrink
   budget the username (the rightmost item) runs off the edge and gets clipped.
   Let the whole cluster shrink and the name ellipsis instead of overflowing. */
.mud-appbar .user-profile-text {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mud-appbar .user-profile-btn { min-width: 0 !important; }
.mud-appbar .login-chip-muted { color: var(--header-secondary, rgba(255, 255, 255, 0.7)) !important; border-color: var(--header-secondary, rgba(255, 255, 255, 0.15)) !important; }
.mud-appbar .login-chip-white { background-color: rgba(255, 255, 255, 0.15) !important; color: white !important; }

.theme-light .mud-drawer .user-profile-btn { color: var(--mud-palette-text-primary) !important; }
.theme-light .mud-drawer .user-profile-text { color: var(--mud-palette-text-primary) !important; }
.theme-light .mud-drawer .login-chip-muted { color: var(--mud-palette-text-secondary) !important; border-color: var(--mud-palette-divider) !important; }
.theme-light .mud-drawer .login-chip-white { background-color: rgba(1, 37, 82, 0.08) !important; color: var(--mud-palette-primary) !important; }

.theme-dark .mud-drawer .user-profile-btn { color: rgba(255, 255, 255, 0.9) !important; }
.theme-dark .mud-drawer .user-profile-text { color: rgba(255, 255, 255, 0.9) !important; }
.theme-dark .mud-drawer .login-chip-muted { color: rgba(255, 255, 255, 0.5) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.theme-dark .mud-drawer .login-chip-white { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--mud-palette-primary) !important; }

.login-avatar { background: linear-gradient(135deg, #8AB840 0%, #6d9e2e 100%) !important; color: white !important; font-weight: 700 !important; font-size: 0.75rem !important; width: 32px !important; height: 32px !important; }
.mud-appbar .login-avatar { border: 2px solid rgba(255,255,255,0.25) !important; }
.theme-light .mud-drawer .login-avatar { border: 2px solid rgba(1, 37, 82, 0.15) !important; }
.theme-dark .mud-drawer .login-avatar { border: 2px solid rgba(255,255,255,0.15) !important; }

.user-profile-icon { transition: transform 0.2s ease; }
.mud-appbar .user-profile-icon { color: rgba(255, 255, 255, 0.5) !important; }
.theme-light .mud-drawer .user-profile-icon { color: var(--mud-palette-text-secondary) !important; }
.theme-dark .mud-drawer .user-profile-icon { color: rgba(255, 255, 255, 0.5) !important; }

.login-btn-notauth { text-transform: none !important; font-weight: 600 !important; border-radius: 8px !important; }
.mud-appbar .login-btn-notauth { color: white !important; border-color: rgba(255,255,255,0.25) !important; }
.theme-light .mud-drawer .login-btn-notauth { color: var(--mud-palette-primary) !important; border-color: var(--mud-palette-primary) !important; }
.theme-dark .mud-drawer .login-btn-notauth { color: white !important; border-color: rgba(255,255,255,0.25) !important; }

/* --- PREMIUM THEME-SCOPED TOP NAV LINKS --- */
.theme-dark .top-nav-link {
    color: rgba(255, 255, 255, 0.6);
}
.theme-dark .top-nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}
.theme-dark .top-nav-link.active {
    color: var(--mud-palette-primary) !important; /* PCS Lime green */
    background-color: rgba(138, 184, 64, 0.1) !important;
    border-color: rgba(138, 184, 64, 0.25) !important;
}

/* --- EXPERT BUTTON GROUP DARK THEME OVERRIDES --- */
.theme-dark .expert-button-group-pearl-navy {
    background: #111111 !important;
    border-color: #111111 !important;
}
.theme-dark .expert-button-group-pearl,
.theme-dark .expert-button-group-pearl-gradient,
.theme-dark .expert-button-group-pearl-inset {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .expert-button-group-pearl-radiant {
    background: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .expert-button-group-pearl-radiant .mud-button-root {
    color: #94a3b8 !important;
}
.theme-dark .expert-button-group-pearl-radiant .mud-button-root.active {
    color: #32C0E6 !important;
    background: rgba(50, 192, 230, 0.1) !important;
}
.theme-dark .expert-action-hub {
    background: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .expert-selector-refined {
    background: #111111 !important;
}
.theme-dark .expert-selector-refined .mud-input-slot {
    color: rgba(255, 255, 255, 0.95) !important;
}
.theme-dark .expert-button-group-pearl .mud-button-root,
.theme-dark .expert-button-group-pearl-gradient .mud-button-root,
.theme-dark .expert-button-group-pearl-inset .mud-button-root {
    color: #94a3b8 !important;
}
.theme-dark .expert-button-group-pearl .mud-button-root.active {
    color: #8AB840 !important;
    background: rgba(138, 184, 64, 0.1) !important;
}
.theme-dark .expert-button-group-pearl-gradient .mud-button-root.active {
    color: #32C0E6 !important;
}

/* --- DEVELOPMENT BANNER --- */
.development-banner {
    background-color: var(--mud-palette-warning) !important;
    text-align: center;
    padding: 4px;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2000;
}
.theme-light .development-banner {
    color: #012552 !important;
}
.theme-dark .development-banner {
    color: #09090B !important;
}

/* =================================================================
   GLOBAL DARK-MODE INLINE STYLE OVERRIDES
   ================================================================= 
   Many Razor components use inline style="color: #012552" or 
   style="color: #0f172a" for headings and text. Attribute selectors 
   catch these globally so we don't need to edit every .razor file. 
   ================================================================= */

/* --- INLINE TEXT COLOR OVERRIDES --- */
/* Navy headers (#012552) → white in dark mode */
.theme-dark [style*="color: #012552"] {
    color: rgba(255, 255, 255, 0.95) !important;
}
/* Dark slate text (#0f172a) → white in dark mode */
.theme-dark [style*="color: #0f172a"] {
    color: rgba(255, 255, 255, 0.92) !important;
}
/* Medium slate text (#475569) → light slate in dark mode */
.theme-dark [style*="color: #475569"] {
    color: #94a3b8 !important;
}
/* Slate text (#334155) → lighter in dark mode */
.theme-dark [style*="color: #334155"] {
    color: #cbd5e1 !important;
}
/* Dark indigo text (#1e1b4b) → lighter in dark mode */
.theme-dark [style*="color: #1e1b4b"] {
    color: rgba(255, 255, 255, 0.9) !important;
}
/* Indigo text (#4338ca) → lighter in dark mode */
.theme-dark [style*="color: #4338ca"] {
    color: #818cf8 !important;
}

/* --- INLINE BACKGROUND COLOR OVERRIDES --- */
/* White backgrounds → dark surface */
.theme-dark [style*="background-color: white"] {
    background-color: var(--pearl-surface-opaque) !important;
}
.theme-dark [style*="background: white"] {
    background: var(--pearl-surface-opaque) !important;
}
/* Light gray backgrounds → dark surface */
.theme-dark [style*="background: #f1f5f9"],
.theme-dark [style*="background-color: #f1f5f9"] {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.theme-dark [style*="background: #f8fafc"],
.theme-dark [style*="background-color: #f8fafc"] {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}
/* Navy background stays fine (it's already dark) */

/* --- INLINE BORDER COLOR OVERRIDES --- */
.theme-dark [style*="border-color: #e2e8f0"],
.theme-dark [style*="border: 1px solid #e2e8f0"],
.theme-dark [style*="border: 2px solid #e2e8f0"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- MUDBLAZOR COMPONENT DARK OVERRIDES --- */
/* MudPaper - catch generic white papers; give them the translucent mesh surface
   so they read with depth over the radiant background (matches the card rule above). */
.theme-dark .mud-paper:not([style*="background"]):not(.mud-appbar):not(.mud-drawer) {
    background-color: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
}

/* MudDialog — opaque (sits on a scrim, so no mesh bleed-through) but teal-tinted
   dark instead of flat #111111, with a soft brand-tinted elevation glow. */
.theme-dark .mud-dialog {
    background-color: #101820 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 40px -8px rgba(50, 192, 230, 0.08) !important;
}
.theme-dark .mud-dialog .mud-dialog-title,
.theme-dark .mud-dialog .mud-dialog-content,
.theme-dark .mud-dialog .mud-dialog-actions {
    background-color: transparent !important;
}

/* MudTabs header area */
.theme-dark .mud-tabs-header {
    background-color: transparent !important;
}

/* Tab labels default to a light-mode text color, so inactive tabs render
   dark-on-dark. Force them to the theme text color; the active tab stays
   bright (primary) for contrast. */
.theme-dark .mud-tabs .mud-tab {
    color: rgba(255, 255, 255, 0.6) !important;
}
.theme-dark .mud-tabs .mud-tab:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}
.theme-dark .mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
}

/* MudSimpleTable renders a raw <table> and is NOT covered by the .mud-table
   rules, so its cells keep a light-mode text color → dark-on-dark. */
.theme-dark .mud-simple-table table,
.theme-dark .mud-simple-table th,
.theme-dark .mud-simple-table td {
    color: var(--pearl-text-primary) !important;
}
.theme-dark .mud-simple-table thead th {
    color: var(--pearl-text-muted) !important;
}

/* Stepper labels/titles default to a light-mode color. */
.theme-dark .mud-stepper .mud-stepper-nav-step-label-content,
.theme-dark .mud-stepper .mud-step-label-content,
.theme-dark .mud-stepper .mud-stepper-nav-step-label {
    color: var(--pearl-text-primary) !important;
}

/* Toggle group/items: unselected item text goes dark-on-dark. */
.theme-dark .mud-toggle-group .mud-toggle-item {
    color: var(--pearl-text-muted) !important;
}
.theme-dark .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
    color: var(--mud-palette-primary) !important;
}

/* Filled alerts (Severity + Variant.Filled) are intentionally loud — a solid
   bright fill is too harsh on dark. Tone them down to translucent tinted glass
   with a bright icon/text, per severity. */
.theme-dark .mud-alert-filled-warning {
    background-color: rgba(228, 177, 35, 0.14) !important;
    color: #E4B123 !important;
    border: 1px solid rgba(228, 177, 35, 0.3) !important;
}
.theme-dark .mud-alert-filled-error {
    background-color: rgba(255, 110, 64, 0.14) !important;
    color: #FF6E40 !important;
    border: 1px solid rgba(255, 110, 64, 0.3) !important;
}
.theme-dark .mud-alert-filled-success {
    background-color: rgba(76, 175, 80, 0.14) !important;
    color: #4CAF50 !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
}
.theme-dark .mud-alert-filled-info {
    background-color: rgba(50, 192, 230, 0.14) !important;
    color: #32C0E6 !important;
    border: 1px solid rgba(50, 192, 230, 0.3) !important;
}
/* Inherit the tinted text for icon + message instead of the filled-mode white */
.theme-dark [class*="mud-alert-filled-"] .mud-alert-icon .mud-icon-root,
.theme-dark [class*="mud-alert-filled-"] .mud-alert-message {
    color: inherit !important;
}

/* App bar (MainLayout header) — frosted glass over the radiant mesh instead of
   flat charcoal-navy (#0b0f17 from the palette). Semi-opaque + blur so scrolling
   content reads softly behind it but text stays legible. */
.theme-dark .mud-appbar {
    background-color: rgba(11, 15, 23, 0.72) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(50, 192, 230, 0.1) !important;
}
/* Drawer header matches the app bar tone */
.theme-dark .mud-drawer .mud-drawer-header {
    background-color: rgba(11, 15, 23, 0.72) !important;
}

/* Dashboard scope-switcher bar — light gray strip in light, transparent (mesh
   shows through) in dark. Was inline #f8fafc which stayed a light bar on dark. */
.scope-switcher-bar {
    background-color: #f8fafc;
}
.theme-dark .scope-switcher-bar {
    background-color: transparent;
}

/* Schedule GRID-mode sticky date header — opaque (rows scroll under it), tinted
   dark not flat black. Was inline white #f8fafc + navy text. */
.schedule-date-header {
    background-color: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.theme-dark .schedule-date-header {
    background-color: #101820;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

/* MudSelect / MudInput backgrounds within pages */
.theme-dark .mud-input-outlined .mud-input-slot {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Outlined inputs/selects sitting directly on the page read as flat black
   (transparent fill over the obsidian bg). Give them a faint glass fill +
   visible border so each field is distinct. Inputs inside a tinted dialog/card
   inherit the subtle lift the same way. */
.theme-dark .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.theme-dark .mud-input-control .mud-input.mud-input-outlined {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px;
}
.theme-dark .mud-input-control .mud-input.mud-input-outlined.mud-input-focused {
    background-color: rgba(50, 192, 230, 0.05) !important;
}

/* --- INNER SURFACES: keep them off flat black ---
   These MudBlazor parts default to the opaque Surface (#111111) and read as
   flat black slabs over the radiant mesh. Lift them onto a subtle tint so they
   separate from the card behind them without re-flattening it. */

/* Table header row — OPAQUE (not translucent): some tables freeze/stick the
   header, so scrolling rows must not show through it. Solid teal-tinted dark,
   not flat #111111, and no backdrop-filter (which would also let content bleed). */
.theme-dark .mud-table-head,
.theme-dark .mud-table-head .mud-table-row,
.theme-dark .mud-table-head .mud-table-cell,
.theme-dark .mud-table-toolbar,
.theme-dark .mud-table-pagination,
.theme-dark .mud-datagrid-header-cell,
.theme-dark .mud-table-sticky-header .mud-table-head .mud-table-cell {
    background-color: #101820 !important;
}
.theme-dark .mud-table-head .mud-table-cell,
.theme-dark .mud-datagrid-header-cell {
    color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Color.Dark icons/avatars (e.g. "Total District Games" KPI) render as near-black
   var(--mud-palette-dark) — invisible on dark surfaces. Remap to a legible light tone. */
.theme-dark .mud-icon-root.mud-dark-text,
.theme-dark .mud-avatar.mud-avatar-dark .mud-icon-root,
.theme-dark .mud-avatar.mud-avatar-outlined.mud-dark {
    color: rgba(255, 255, 255, 0.85) !important;
}
.theme-dark .mud-avatar.mud-avatar-outlined.mud-dark {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Toggles / switches — track and base read as light glass, thumb stays bright */
.theme-dark .mud-switch .mud-switch-track {
    background: rgba(255, 255, 255, 0.15) !important;
}
.theme-dark .mud-switch-base.mud-disabled .mud-switch-track {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Calendars + date/time pickers — mesh surface, not flat black */
.theme-dark .mud-picker-paper,
.theme-dark .mud-picker-content,
.theme-dark .mud-picker-calendar-container,
.theme-dark .mud-picker-toolbar,
.theme-dark .mud-cal,
.theme-dark .mud-cal-month-cell,
.theme-dark .mud-calendar,
.theme-dark .mud-calendar-header {
    background-color: var(--pearl-mesh-surface-strong) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
}
/* Calendar day/week grid lines visible on dark */
.theme-dark .mud-cal-month-cell,
.theme-dark .mud-calendar-week-day,
.theme-dark .mud-cal-week-layout {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Expansion panels, list surfaces, toolbars, card headers, menus, popovers */
.theme-dark .mud-expand-panel:not([style*="background"]),
.theme-dark .mud-expansion-panels .mud-expand-panel,
.theme-dark .mud-card-header,
.theme-dark .mud-card-actions,
.theme-dark .mud-toolbar:not(.mud-appbar):not([style*="background"]),
.theme-dark .mud-list:not([style*="background"]),
.theme-dark .mud-menu-list,
.theme-dark .mud-popover:not([style*="background"]) {
    background-color: var(--pearl-mesh-surface) !important;
}
/* Expansion panel header gets a touch more tint so it reads as a header */
.theme-dark .mud-expand-panel-header {
    background-color: rgba(50, 192, 230, 0.05) !important;
}

/* --- HERO SECTION DARK OVERRIDES --- */
/* Keep the SideHub logo coin white in dark mode too — it's a white plate the
   school logo sits on, not a glass surface, so it matches the light-mode look. */
.theme-dark .hero-pearl-inner {
    background: white !important;
}
.theme-dark .hero-notch-container {
    background: var(--pearl-mesh-surface-strong) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
    box-shadow: -10px 0 30px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

/* FHSAA game-cap progress track (Dashboard). Light keeps the slate-200 track;
   dark uses a translucent light track so the unfilled bar reads on a dark card. */
.cap-allowance-track {
    background-color: #cbd5e1 !important;
}
.theme-dark .cap-allowance-track {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- UTILITY CLASS DARK OVERRIDES --- */
/* bg-white class used throughout — translucent mesh so it doesn't flatten
   cards it's combined with (e.g. floating-pearl bg-white). */
.theme-dark .bg-white {
    background-color: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
}
/* bg-slate-50 class */
.theme-dark .bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.03) !important;
}
/* bg-indigo-50 used in coverage invite sections */
.theme-dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1) !important;
}
.theme-dark .border-indigo-100 {
    border-color: rgba(99, 102, 241, 0.2) !important;
}
/* bg-green-50, bg-yellow-50, bg-orange-50 used for KPI backgrounds */
.theme-dark .bg-green-50 {
    background-color: rgba(76, 175, 80, 0.08) !important;
}
.theme-dark .bg-yellow-50 {
    background-color: rgba(228, 177, 35, 0.08) !important;
}
.theme-dark .bg-orange-50 {
    background-color: rgba(255, 152, 0, 0.08) !important;
}
/* Generic border utility */
.theme-dark .border {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- ACTION HUB / SELECTOR DARK OVERRIDES --- */
.theme-dark .expert-action-hub {
    background: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .expert-action-hub .mud-button-root {
    color: #94a3b8 !important;
}
.theme-dark .expert-selector-refined {
    background: var(--pearl-mesh-surface) !important;
    backdrop-filter: var(--pearl-mesh-blur);
    -webkit-backdrop-filter: var(--pearl-mesh-blur);
}
.theme-dark .expert-selector-refined .mud-input-slot {
    color: rgba(255, 255, 255, 0.95) !important;
}
.theme-dark .expert-selector-refined.mud-input-outlined {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .expert-selector-refined.mud-input-outlined:focus-within {
    border-color: #32C0E6 !important;
    box-shadow: 0 0 0 3px rgba(50, 192, 230, 0.15) !important;
}

/* --- BUTTON STYLE DARK OVERRIDES --- */
.theme-dark .btn-sunset-glow {
    background: rgba(255, 110, 64, 0.12) !important;
    color: #FF6E40 !important;
    border-color: rgba(255, 110, 64, 0.2) !important;
}
.theme-dark .btn-navy-sync {
    background: rgba(138, 184, 64, 0.08) !important;
    color: #8AB840 !important;
    border-color: rgba(138, 184, 64, 0.15) !important;
}
.theme-dark .btn-icon-copy {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Inline navy banner (CreateGame "Schedule Event" etc.) — navy in light, obsidian
   + radiant glow in dark, matching the PageHero treatment. */
.hero-navy-banner {
    background: linear-gradient(135deg, #012552 0%, #004B8D 100%);
}
.theme-dark .hero-navy-banner {
    background:
        radial-gradient(circle at 85% 15%, rgba(50, 192, 230, 0.18) 0px, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(138, 184, 64, 0.12) 0px, transparent 50%),
        linear-gradient(135deg, #0d1520 0%, #0b0f17 100%) !important;
}

/* --- HERO COMPONENTS DARK MODE --- */
/* The hero background layer is set inline to a navy gradient (#012552→#004B8D).
   In dark mode override it to an obsidian base with a radiant brand glow so the
   hero isn't a bright navy slab. !important beats the inline (non-important) bg. */
.theme-dark .hero-bg-layer {
    background:
        radial-gradient(circle at 85% 15%, rgba(50, 192, 230, 0.18) 0px, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(138, 184, 64, 0.12) 0px, transparent 50%),
        linear-gradient(135deg, #0d1520 0%, #0b0f17 100%) !important;
}

.theme-dark .hero-ghost-text {
    color: white;
    opacity: 0.04;
}
.theme-dark .hero-radiant-pearl {
    box-shadow: 0 8px 24px rgba(50, 192, 230, 0.15);
}

/* --- MATCHUP/VS DARK OVERRIDES --- */
.theme-dark .matchup-vs-container::before,
.theme-dark .matchup-vs-container::after {
    background: rgba(255, 255, 255, 0.1);
}

/* --- CUSTOM SCROLLBAR DARK --- */
.theme-dark .custom-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
.theme-dark .custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }