:root {
    /* =========================
     BRAND
    ========================= */
    --brand-primary-500: #27D7E8;
    --brand-primary-600: #149CA7;
    --brand-secondary-500: #15D995;
    --brand-accent-500: #C93C93;
    --brand-reward-500: #D6A545;

    /* =========================
     SURFACES
    ========================= */
    --surface-base: #0D1630;
    --surface-deep: #121E36;
    --surface-card: #1C2746;
    --surface-card-hover: #243157;
    --surface-input: #13203A;
    --surface-overlay: rgba(10, 17, 28, 0.82);

    /* =========================
     BORDERS
    ========================= */
    --border-subtle: #3A4668;
    --border-default: #4C5A87;
    --border-active: #27D7E8;
    --border-success: #15D995;
    --border-warning: #D6A545;
    --border-error: #C24B5A;

    /* =========================
     TEXT
    ========================= */
    --text-primary: #E9EEF5;
    --text-secondary: #C8D0DC;
    --text-muted: #8A93A3;
    --text-disabled: #6D7687;
    --text-on-accent: #121E36;
    --text-on-dark: #FFFFFF;

    /* =========================
     ACTIONS
    ========================= */
    --action-primary-bg: #15D995;
    --action-primary-text: #121E36;
    --action-primary-hover: #11C587;
    --action-primary-pressed: #0FA976;

    --action-secondary-bg: #1C2746;
    --action-secondary-border: #27D7E8;
    --action-secondary-text: #E9EEF5;
    --action-secondary-hover: #243157;

    --action-tertiary-text: #27D7E8;
    --action-tertiary-hover-bg: rgba(39, 215, 232, 0.10);

    --action-destructive-bg: #C24B5A;
    --action-destructive-text: #FFFFFF;
    --action-destructive-hover: #A73C4A;

    /* =========================
     STATES
    ========================= */
    --state-success: #15D995;
    --state-success-bg: rgba(21, 217, 149, 0.12);

    --state-info: #27D7E8;
    --state-info-bg: rgba(39, 215, 232, 0.12);

    --state-warning: #D6A545;
    --state-warning-bg: rgba(214, 165, 69, 0.14);

    --state-error: #C24B5A;
    --state-error-bg: rgba(194, 75, 90, 0.14);

    /* =========================
     RANKING
    ========================= */
    --ranking-first: #D6A545;
    --ranking-first-bg: rgba(214, 165, 69, 0.16);

    --ranking-second: #C8D0DC;
    --ranking-second-bg: rgba(200, 208, 220, 0.12);

    --ranking-third: #B67A4D;
    --ranking-third-bg: rgba(182, 122, 77, 0.14);

    --ranking-default: #E9EEF5;
    --ranking-default-bg: #2B3553;

    --ranking-up: #15D995;
    --ranking-down: #C24B5A;
    --ranking-stable: #8A93A3;

    /* =========================
     SCORES / MATCHES
    ========================= */
    --score-highlight: #27D7E8;
    --score-correct: #15D995;
    --score-live: #D6A545;
    --score-pending: #8A93A3;

    --score-card-bg: #1C2746;
    --score-card-border: #2B3553;
    --score-text: #E9EEF5;

    /* =========================
     FOCUS / EFFECTS
    ========================= */
    --focus-ring: #27D7E8;
    --focus-ring-soft: rgba(39, 215, 232, 0.20);

    --effect-glow-primary: 0 0 0 1px rgba(39, 215, 232, 0.25);
    --effect-glow-success: 0 0 0 1px rgba(21, 217, 149, 0.22);
    --effect-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28);

    /* =========================
     GRADIENTS
    ========================= */
    --gradient-brand: linear-gradient(135deg, #149CA7 0%, #27D7E8 100%);
    --gradient-dark: linear-gradient(180deg, var(--surface-deep) 0%, var(--surface-base) 100%);
    --gradient-accent: linear-gradient(135deg, #27D7E8 0%, #C93C93 100%);
    --gradient-reward: linear-gradient(135deg, #D6A545 0%, #F0C86A 100%);

    /* =========================
     SEMANTIC
    ========================= */
    --semantic-bg-app: #0D1630;
    --semantic-bg-panel: #1C2746;
    --semantic-bg-input: #13203A;

    --semantic-text-heading: #E9EEF5;
    --semantic-text-body: #C8D0DC;
    --semantic-text-meta: #8A93A3;

    --semantic-link: #27D7E8;
    --semantic-cta: #15D995;
    --semantic-highlight: #C93C93;
    --semantic-reward: #D6A545;

    /* =========================
     OVERRIDE THEME RAMP VARIABLES
    ========================= */
    --theme-primary-50: rgba(39, 215, 232, 0.07);
    --theme-primary-100: rgba(39, 215, 232, 0.12);
    --theme-primary-200: rgba(39, 215, 232, 0.3);
    --theme-primary-300: #27D7E8;
    --theme-primary-400: #27D7E8;
    --theme-primary-500: #27D7E8;
    --theme-primary-600: #149CA7;
    --theme-primary-700: #0D8A94;
    --theme-primary-800: #0A6B74;
    --theme-primary-900: var(--surface-deep);
    --theme-primary-950: var(--surface-deep);
}

/* ============================================
   Force Dark Theme Globally on Prod
   ============================================ */

body, .bg-gray-50, .dark .dark\:bg-gray-900 {
    background-color: var(--surface-base) !important;
    color: var(--text-primary) !important;
}

/* === Production Nav: Solid Deep Navy background (mirrors Staging) === */
html body nav,
html body nav.bg-blue-600,
html body nav.bg-teal-600,
html body nav.bg-orange-600 {
    background-color: var(--surface-deep) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(39, 215, 232, 0.15) !important;
}

/* Active nav pill: keep translucent white feel (nav is text-white from template) */
html body nav .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Hover state for non-active nav pills */
html body nav .hover\:bg-white\/10:hover,
html body nav .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Login button border — keep the cyan touch as a subtle accent */
html body nav a[href="/user/login"] {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

html body nav a[href="/user/login"]:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Menu Drawer Background & Hover Polish */
html body nav div[x-show="mobileMenuOpen"] {
    background-color: rgba(18, 30, 54, 0.96) !important; /* var(--surface-deep) with 96% opacity */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(39, 215, 232, 0.15) !important;
    border-bottom: 1px solid rgba(39, 215, 232, 0.15) !important;
}

html body nav div[x-show="mobileMenuOpen"] a:hover {
    color: var(--theme-primary-400) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html body nav div[x-show="mobileMenuOpen"] a:hover svg {
    color: var(--theme-primary-400) !important;
}


/* === Footer: Same Deep Navy === */
html body footer,
html body footer.bg-blue-600,
html body footer.bg-teal-600,
html body footer.bg-orange-600 {
    background-color: var(--surface-deep) !important;
    border-top: 1px solid rgba(39, 215, 232, 0.15) !important;
}

footer a:hover {
    color: var(--theme-primary-400) !important;
}


/* Logo highlight/glow in the header navigation */
nav img[alt*="logo"] {
    filter: drop-shadow(0 0 10px rgba(39, 215, 232, 0.35)) drop-shadow(0 2px 4px rgba(39, 215, 232, 0.2));
    transition: filter 0.3s ease;
}

nav img[alt*="logo"]:hover {
    filter: drop-shadow(0 0 16px rgba(39, 215, 232, 0.55)) drop-shadow(0 4px 8px rgba(39, 215, 232, 0.3));
}

/* Overriding light-mode classes with opacity variants */
.bg-white,
.bg-white\/95,
.bg-white\/90,
.bg-white\/80,
.bg-white\/70,
.bg-white\/60,
.bg-white\/50,
.bg-white\/40,
.bg-white\/30,
.bg-white\/20,
.bg-white\/10,
.dark\:bg-gray-800\/60,
.dark\:bg-gray-800\/20,
.dark\:bg-gray-800\/40,
.dark\:bg-gray-800\/90,
.dark\:bg-gray-800\/80,
.dark\:bg-gray-800,
.bg-gray-800\/40,
.bg-gray-800 {
    background-color: var(--surface-card) !important;
}

/* Gray containers / backgrounds */
.bg-gray-100,
.bg-gray-100\/50,
.bg-gray-200,
.bg-gray-200\/60,
.bg-gray-200\/50,
.bg-gray-50\/50,
.bg-gray-50\/30,
.bg-gray-50\/20,
.bg-gray-50\/10,
.bg-gray-300\/80 {
    background-color: var(--surface-input) !important;
}

/* Hover overrides for gray utilities */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-gray-200\/70:hover {
    background-color: var(--surface-card-hover) !important;
}

/* Team flag wrapper background overrides (unifies with card color) */
.group\/team .bg-gray-50,
.group\/team .dark\:bg-gray-900\/50,
.group\/team.bg-gray-50,
.group\/team.dark\:bg-gray-900\/50 {
    background-color: var(--surface-card) !important;
}

/* Card footer background overrides to match the card base background */
.group\/card .bg-gray-50,
.group\/card .dark\:bg-gray-900\/50,
.group\/card.bg-gray-50,
.group\/card.dark\:bg-gray-900\/50 {
    background-color: var(--surface-card) !important;
}

.group\/card .hover\:bg-gray-100:hover,
.group\/card .dark\:hover\:bg-gray-800:hover {
    background-color: var(--surface-card-hover) !important;
}

/* Custom Segmented Control Tab Navigation (Horizontally Compact) */
div:has(> nav[aria-label="Tabs"]) {
    border-bottom: none !important;
}

nav[aria-label="Tabs"] {
    background-color: rgba(15, 25, 40, 0.4) !important;
    padding: 4px 5px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-subtle) !important;
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    overflow-x: auto !important;
}

nav[aria-label="Tabs"] button {
    border-bottom: none !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    color: var(--text-muted) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    margin-left: 0 !important; /* Override Tailwind space-x margins */
    margin-right: 0 !important;
    font-size: 13px !important;
}

/* Active tab style */
nav[aria-label="Tabs"] button.border-blue-500,
nav[aria-label="Tabs"] button[class*="text-blue"] {
    background-color: rgba(39, 215, 232, 0.12) !important;
    border: 1px solid rgba(39, 215, 232, 0.3) !important;
    color: var(--theme-primary-400) !important;
    font-weight: 700 !important;
}

/* Inactive hover style */
nav[aria-label="Tabs"] button:not(.border-blue-500):not([class*="text-blue"]):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

/* Specific count badges styling (targets rounded-full elements only) */
nav[aria-label="Tabs"] button span.rounded-full {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    padding: 1px 5px !important;
    border-radius: 9999px !important;
    margin-left: 4px !important;
}

/* Active count badge styling */
nav[aria-label="Tabs"] button.border-blue-500 span.rounded-full,
nav[aria-label="Tabs"] button[class*="text-blue"] span.rounded-full {
    background-color: var(--theme-primary-500) !important;
    color: #0D1630 !important;
    font-weight: 800 !important;
}

/* Ensure phase date subtitle spans stay un-styled and clean */
nav[aria-label="Tabs"] button span:not(.rounded-full) {
    background-color: transparent !important;
    color: inherit !important;
    font-weight: inherit !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

nav[aria-label="Tabs"] button span.text-\[9px\] {
    color: var(--text-muted) !important;
    font-size: 9px !important;
    margin-top: 2px !important;
    opacity: 0.8 !important;
    letter-spacing: normal !important;
}

nav[aria-label="Tabs"] button.border-blue-500 span.text-\[9px\],
nav[aria-label="Tabs"] button[class*="text-blue"] span.text-\[9px\] {
    color: var(--theme-primary-300) !important;
}

/* Borders & Dividers */
.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.divide-white\/5 > :not([hidden]) ~ :not([hidden]),
.border-gray-200\/50 {
    border-color: var(--border-subtle) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-white\/5,
.border-white\/10,
.border-white\/20,
.dark\:border-white\/5,
.dark\:border-white\/10 {
    border-color: var(--border-default) !important;
}

.border-b, .border-t, .border-r, .border-l {
    border-color: var(--border-subtle) !important;
}

/* Text elements styling */
.text-gray-900, .text-gray-800, .text-gray-700, .dark\:text-white, .dark\:text-gray-200 {
    color: var(--text-primary) !important;
}

.text-gray-600, .dark\:text-gray-300, .dark\:text-gray-400 {
    color: var(--text-secondary) !important;
}

.text-gray-500, .text-gray-400, .dark\:text-gray-500 {
    color: var(--text-muted) !important;
}

/* News / Section Header: deep navy + cyan left accent (staging style) */
.bg-gradient-to-r.from-blue-600.to-indigo-600 {
    background-image: none !important;
    background-color: var(--surface-deep) !important;
    border-left: 3px solid var(--theme-primary-500) !important;
    border-bottom: 1px solid rgba(39, 215, 232, 0.15) !important;
}

.bg-gradient-to-r.from-blue-600.to-indigo-600 h3,
.bg-gradient-to-r.from-blue-600.to-indigo-600 h2 {
    color: #fff !important;
}

.bg-gradient-to-r.from-blue-600.to-indigo-600 svg {
    color: var(--theme-primary-400) !important;
}

/* ============================================
   Indigo Overrides (Fold to brand colors)
   ============================================ */

.bg-indigo-50 { background-color: var(--theme-primary-50) !important; }
.bg-indigo-100 { background-color: var(--theme-primary-100) !important; }
.bg-indigo-200 { background-color: var(--theme-primary-200) !important; }
.bg-indigo-300 { background-color: var(--theme-primary-300) !important; }
.bg-indigo-400 { background-color: var(--theme-primary-400) !important; }
.bg-indigo-500 { background-color: var(--theme-primary-500) !important; }
.bg-indigo-600 { background-color: var(--theme-primary-600) !important; }
.bg-indigo-700 { background-color: var(--theme-primary-700) !important; }
.bg-indigo-800 { background-color: var(--theme-primary-800) !important; }
.bg-indigo-900 { background-color: var(--theme-primary-900) !important; }
.bg-indigo-950 { background-color: var(--theme-primary-950) !important; }

.text-indigo-50 { color: var(--theme-primary-50) !important; }
.text-indigo-100 { color: var(--theme-primary-100) !important; }
.text-indigo-200 { color: var(--theme-primary-200) !important; }
.text-indigo-300 { color: var(--theme-primary-300) !important; }
.text-indigo-400 { color: var(--theme-primary-400) !important; }
.text-indigo-500 { color: var(--theme-primary-500) !important; }
.text-indigo-600 { color: var(--theme-primary-600) !important; }
.text-indigo-700 { color: var(--theme-primary-700) !important; }
.text-indigo-800 { color: var(--theme-primary-800) !important; }
.text-indigo-900 { color: var(--theme-primary-900) !important; }
.text-indigo-950 { color: var(--theme-primary-950) !important; }

.border-indigo-50 { border-color: var(--theme-primary-50) !important; }
.border-indigo-100 { border-color: var(--theme-primary-100) !important; }
.border-indigo-200 { border-color: var(--theme-primary-200) !important; }
.border-indigo-300 { border-color: var(--theme-primary-300) !important; }
.border-indigo-400 { border-color: var(--theme-primary-400) !important; }
.border-indigo-500 { border-color: var(--theme-primary-500) !important; }
.border-indigo-600 { border-color: var(--theme-primary-600) !important; }
.border-indigo-700 { border-color: var(--theme-primary-700) !important; }
.border-indigo-800 { border-color: var(--theme-primary-800) !important; }
.border-indigo-900 { border-color: var(--theme-primary-900) !important; }
.border-indigo-950 { border-color: var(--theme-primary-950) !important; }

.hover\:bg-indigo-50:hover { background-color: var(--theme-primary-50) !important; }
.hover\:bg-indigo-100:hover { background-color: var(--theme-primary-100) !important; }
.hover\:bg-indigo-200:hover { background-color: var(--theme-primary-200) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--theme-primary-600) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--theme-primary-700) !important; }

.hover\:text-indigo-200:hover { color: var(--theme-primary-200) !important; }
.hover\:text-indigo-300:hover { color: var(--theme-primary-300) !important; }
.hover\:text-indigo-400:hover { color: var(--theme-primary-400) !important; }
.hover\:text-indigo-600:hover { color: var(--theme-primary-600) !important; }
.hover\:text-indigo-700:hover { color: var(--theme-primary-700) !important; }

.hover\:border-indigo-500:hover { border-color: var(--theme-primary-500) !important; }

/* ============================================
   Status Badges (Archived, In Progress, Open, Upcoming)
   ============================================ */

/* In Progress Status (Indigo/Cyan) */
span.bg-indigo-100.uppercase,
span.dark\:bg-indigo-900\/40.uppercase,
span.bg-indigo-100\/40.uppercase {
    background-color: rgba(39, 215, 232, 0.15) !important;
    color: #27D7E8 !important;
}

/* Open Status (Green/Emerald) */
span.bg-green-100.uppercase,
span.dark\:bg-green-900\/40.uppercase,
span.bg-green-100\/40.uppercase {
    background-color: rgba(21, 217, 149, 0.15) !important;
    color: #15D995 !important;
}

/* Upcoming Status (Red/Coral) */
span.bg-red-100.uppercase,
span.dark\:bg-red-900\/40.uppercase,
span.bg-red-100\/40.uppercase {
    background-color: rgba(194, 75, 90, 0.15) !important;
    color: #FF6B7A !important;
}

/* Archived Status (Gray) */
span.bg-gray-100.uppercase,
span.dark\:bg-gray-700\/50.uppercase,
span.bg-gray-100\/40.uppercase {
    background-color: rgba(138, 147, 163, 0.15) !important;
    color: #A0AEC0 !important;
}

/* ============================================
   Invite Section (Pool Details)
   ============================================ */

#invite-section {
    background-color: var(--surface-input) !important;
    border-color: var(--border-subtle) !important;
}

#invite-section span.font-mono {
    color: var(--theme-primary-300) !important;
}

#invite-section button[hx-post*="regenerate-code"] {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--theme-primary-300) !important;
}

#invite-section button[hx-post*="regenerate-code"]:hover {
    background-color: var(--surface-card-hover) !important;
    color: var(--theme-primary-400) !important;
}

/* ============================================
   Layout Adjustments (Sidebar/Grid)
   ============================================ */

/* Prevent desktop sidebar from stretching to the full height of the main content column */
.lg\:col-span-1.lg\:sticky {
    height: fit-content !important;
}

/* Styling for dashed callout and empty-state boxes */
.border-dashed {
    background-color: rgba(19, 32, 58, 0.3) !important;
}

/* ============================================
   Corner Match/Prediction Status Badges
   ============================================ */

.absolute.top-0.right-0.z-10 > div {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    padding: 0.25rem 0.6rem !important;
}

/* Open/editable predictions (Cyan theme) */
.absolute.top-0.right-0.z-10 > div.bg-green-500 {
    background-color: rgba(39, 215, 232, 0.15) !important;
    color: #27D7E8 !important;
    border-left: 1px solid rgba(39, 215, 232, 0.35) !important;
    border-bottom: 1px solid rgba(39, 215, 232, 0.35) !important;
}

/* Closed predictions (Gray/muted theme) */
.absolute.top-0.right-0.z-10 > div.bg-gray-400,
.absolute.top-0.right-0.z-10 > div.dark\:bg-gray-600 {
    background-color: rgba(156, 163, 175, 0.15) !important;
    color: #D1D5DB !important;
    border-left: 1px solid rgba(156, 163, 175, 0.3) !important;
    border-bottom: 1px solid rgba(156, 163, 175, 0.3) !important;
}

/* ============================================
   Toggle Switch Styling (Visibility Fix)
   ============================================ */

/* Inactive/off state */
input[type="checkbox"].peer + div {
    border: 1px solid var(--border-default) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Active/checked state */
input[type="checkbox"].peer:checked + div {
    background-color: var(--brand-primary-500) !important;
    border-color: var(--brand-primary-500) !important;
}

/* ============================================
   User Menu Logout Link Contrast Fix
   ============================================ */

form[action="/user/logout"] button:hover {
    color: #FECACA !important;
    background-color: rgba(239, 68, 68, 0.2) !important;
}

/* ============================================
   Standings & Table Header Legibility Overrides
   ============================================ */

table thead th {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ============================================
   Blue Color Utility Overrides (Teal Primary Mapping)
   ============================================ */

.bg-blue-50 { background-color: var(--theme-primary-50) !important; }
.bg-blue-100 { background-color: var(--theme-primary-100) !important; }
.bg-blue-200 { background-color: var(--theme-primary-200) !important; }
.bg-blue-300 { background-color: var(--theme-primary-300) !important; }
.bg-blue-400 { background-color: var(--theme-primary-400) !important; }
.bg-blue-500 { background-color: var(--theme-primary-500) !important; }
.bg-blue-600 { background-color: var(--theme-primary-600) !important; }
.bg-blue-700 { background-color: var(--theme-primary-700) !important; }
.bg-blue-800 { background-color: var(--theme-primary-800) !important; }
.bg-blue-900 { background-color: var(--theme-primary-900) !important; }
.bg-blue-950 { background-color: var(--theme-primary-950) !important; }

/* Translucent blue/opacity backgrounds mapping */
.bg-blue-50\/50,
.bg-blue-50\/30,
.bg-blue-50\/20,
.bg-blue-50\/10 {
    background-color: var(--theme-primary-50) !important;
}
.bg-blue-900\/30,
.bg-blue-900\/40,
.bg-blue-900\/50 {
    background-color: var(--theme-primary-100) !important;
}

.text-blue-50 { color: var(--theme-primary-50) !important; }
.text-blue-100 { color: color-mix(in srgb, var(--theme-primary-300) 80%, white) !important; }
.text-blue-200 { color: var(--theme-primary-200) !important; }
.text-blue-300 { color: var(--theme-primary-300) !important; }
.text-blue-400 { color: var(--theme-primary-400) !important; }
.text-blue-500 { color: var(--theme-primary-500) !important; }
.text-blue-600 { color: var(--theme-primary-500) !important; }
.text-blue-700 { color: var(--theme-primary-500) !important; }
.text-blue-800 { color: var(--theme-primary-600) !important; }
.text-blue-850 { color: var(--theme-primary-600) !important; }
.text-blue-900 { color: var(--text-primary) !important; }
.text-blue-950 { color: var(--text-muted) !important; }

.border-blue-50 { border-color: var(--theme-primary-50) !important; }
.border-blue-100 { border-color: var(--theme-primary-100) !important; }
.border-blue-200 { border-color: var(--theme-primary-200) !important; }
.border-blue-300 { border-color: var(--theme-primary-300) !important; }
.border-blue-400 { border-color: var(--theme-primary-400) !important; }
.border-blue-500 { border-color: var(--theme-primary-500) !important; }
.border-blue-600 { border-color: var(--theme-primary-600) !important; }
.border-blue-700 { border-color: var(--theme-primary-700) !important; }
.border-blue-800 { border-color: var(--theme-primary-800) !important; }
.border-blue-900 { border-color: var(--theme-primary-900) !important; }
.border-blue-950 { border-color: var(--theme-primary-950) !important; }

.hover\:bg-blue-50:hover { background-color: var(--theme-primary-50) !important; }
.hover\:bg-blue-100:hover { background-color: var(--theme-primary-100) !important; }
.hover\:bg-blue-200:hover { background-color: var(--theme-primary-200) !important; }
.hover\:bg-blue-600:hover { background-color: var(--theme-primary-600) !important; }
.hover\:bg-blue-700:hover { background-color: var(--theme-primary-700) !important; }

.hover\:text-blue-200:hover { color: var(--theme-primary-200) !important; }
.hover\:text-blue-300:hover { color: var(--theme-primary-300) !important; }
.hover\:text-blue-400:hover { color: var(--theme-primary-400) !important; }
.hover\:text-blue-600:hover { color: var(--theme-primary-500) !important; }
.hover\:text-blue-700:hover { color: var(--theme-primary-600) !important; }

/* Force readable primary color on blue-900/indigo-900 scoreboard text */
.text-blue-900,
.text-indigo-900 {
    color: var(--text-primary) !important;
}

/* ============================================
   Green Color Utility Overrides (Emerald Brand Mapping)
   ============================================ */

.bg-green-50 { background-color: var(--state-success-bg) !important; }
.bg-green-100 { background-color: rgba(21, 217, 149, 0.15) !important; }
.text-green-600 { color: var(--state-success) !important; }
.text-green-400 { color: var(--state-success) !important; }
.hover\:bg-green-700:hover { background-color: var(--action-primary-hover) !important; }


/* ============================================
   Text Inputs & Form Controls Global Dark Theme
   ============================================ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    background-color: var(--surface-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--border-active) !important;
    background-color: var(--surface-input) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 1px var(--border-active) !important;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6 !important;
    background-color: var(--surface-deep) !important;
    color: var(--text-disabled) !important;
    cursor: not-allowed !important;
}

/* ============================================
   Live Match Scoreboard Highlights (Red/Coral Override)
   ============================================ */

.bg-red-50,
.dark\:bg-red-900\/20 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.border-red-100,
.dark\:border-red-900\/30 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.text-red-500,
.dark\:text-red-500 {
    color: #FCA5A5 !important;
}

/* ============================================
   Standings Table & Group Card Headers Polish
   ============================================ */

/* Standings card group header gradient override */
.bg-gradient-to-r.from-gray-50.to-white,
.bg-gradient-to-r.dark\:from-gray-900\/50.dark\:to-gray-800\/50 {
    background-image: none !important;
    background-color: var(--surface-deep) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Style the text inside the group header to stand out */
.bg-gradient-to-r.from-gray-50.to-white h3,
.bg-gradient-to-r.dark\:from-gray-900\/50.dark\:to-gray-800\/50 h3 {
    color: var(--text-primary) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
}

/* Standings table thead background override for premium integrated appearance */
table thead {
    background-color: var(--surface-deep) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Premium Winner highlighting in tournament brackets */
.bracket-match-container .bg-green-50\/50,
.bracket-match-container .dark\:bg-green-900\/10 {
    background-color: rgba(39, 215, 232, 0.12) !important;
    border-left: 2.5px solid var(--theme-primary-500) !important;
    padding-left: 0.25rem !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

/* Make header timezone/clock text and icon more prominent */
body > nav div[x-data*="updateTime"] {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

body > nav div[x-data*="updateTime"] svg {
    opacity: 0.85 !important;
}

/* ============================================
   Pool Detail Ranking Badges Overrides
   ============================================ */

/* 1st Place - Gold */
tr td .bg-yellow-100,
tr td .dark\:bg-yellow-900\/40 {
    background-color: rgba(234, 179, 8, 0.2) !important;
    border: 1px solid rgba(234, 179, 8, 0.4) !important;
    color: #FDE047 !important;
    font-weight: 800 !important;
}

/* 2nd Place - Silver */
tr td .bg-gray-100,
tr td .dark\:bg-gray-700\/60 {
    background-color: rgba(156, 163, 175, 0.2) !important;
    border: 1px solid rgba(156, 163, 175, 0.4) !important;
    color: #E5E7EB !important;
    font-weight: 800 !important;
}

/* 3rd Place - Bronze */
tr td .bg-orange-100,
tr td .dark\:bg-orange-900\/40 {
    background-color: rgba(249, 115, 22, 0.2) !important;
    border: 1px solid rgba(249, 115, 22, 0.4) !important;
    color: #FFEDD5 !important;
    font-weight: 800 !important;
}

/* 4th+ Places - Standard */
tr td .bg-indigo-50\/50,
tr td .dark\:bg-indigo-900\/30 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

/* Clearer Leave Pool button border & hover effects */
button[hx-post*="/leave"] {
    border-color: rgba(252, 165, 165, 0.45) !important;
}

button[hx-post*="/leave"]:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(252, 165, 165, 0.75) !important;
}

/* ============================================
   Profile & Avatar Selection Dark Theme Polish
   ============================================ */

/* Eliminate white background from Google Sync panel */
.bg-purple-50 {
    background-color: var(--surface-card) !important;
    border-color: var(--border-subtle) !important;
}

/* Style active theme tabs (e.g. ANIMALS) with brand-teal outline */
.bg-purple-100 {
    background-color: rgba(39, 215, 232, 0.12) !important;
    border-color: var(--theme-primary-500) !important;
    color: var(--theme-primary-400) !important;
}

/* Override borders and text for purple components */
.border-purple-100,
.border-purple-200 {
    border-color: var(--border-subtle) !important;
}

.text-purple-900,
.text-purple-700 {
    color: var(--text-primary) !important;
}

.text-purple-600 {
    color: var(--text-secondary) !important;
}

/* Eliminate white/light blue backgrounds from sync buttons */
.bg-blue-50 {
    background-color: var(--surface-input) !important;
    color: var(--theme-primary-400) !important;
    border: 1px solid var(--border-subtle) !important;
}

.hover:bg-blue-100:hover {
    background-color: var(--surface-card-hover) !important;
    color: var(--theme-primary-300) !important;
}

/* Avatar card wrapper: give a neutral subtle dark background so white-backed PNGs look intentional */
div[x-show*="currentTheme"] .rounded-3xl {
    background-color: rgba(15, 25, 40, 0.6) !important;
}

/* ============================================
   Premium Action Buttons (Emerald to Teal Gradient)
   ============================================ */
button.bg-blue-600,
a.bg-blue-600,
button.bg-green-600,
a.bg-green-600,
button.bg-green-500,
a.bg-green-500 {
    background-image: linear-gradient(135deg, #15D995 0%, #149CA7 100%) !important;
    background-color: transparent !important;
    color: #0D1630 !important;
    font-weight: 700 !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

button.bg-blue-600:hover,
a.bg-blue-600:hover,
button.bg-green-600:hover,
a.bg-green-600:hover,
button.bg-green-500:hover,
a.bg-green-500:hover {
    background-image: linear-gradient(135deg, #18ecaa 0%, #17b3c0 100%) !important;
    box-shadow: 0 0 15px rgba(21, 217, 149, 0.4) !important;
    color: #070D19 !important;
}

button.bg-blue-600:disabled,
button.bg-green-600:disabled,
button.bg-green-500:disabled {
    background-image: none !important;
    background-color: var(--surface-deep) !important;
    color: var(--text-disabled) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ============================================
   Delete Account / Danger Zone Button Polish
   ============================================ */
button[hx-post="/user/unregister"] {
    border-color: rgba(239, 68, 68, 0.5) !important;
    border-width: 1px !important;
    color: #FCA5A5 !important;
    transition: all 0.2s ease !important;
}

button[hx-post="/user/unregister"]:hover {
    border-color: #EF4444 !important;
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

/* ============================================
   Environment Specific Styles & Accents (Option 1)
   ============================================ */

/* Top bar indicators for non-prod environments on the nav element */
body[data-env="dev"] nav::before {
    content: "";
    display: block;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #F59E0B, #D6A545);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(214, 165, 69, 0.5);
}

body[data-env="staging"] nav::before {
    content: "";
    display: block;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #10B981, #15D995);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(21, 217, 149, 0.5);
}

/* Adjust padding top on the nav element to compensate for the top bar indicator */
body[data-env="dev"] nav {
    padding-top: 10px !important;
}
body[data-env="staging"] nav {
    padding-top: 10px !important;
}

/* Navbar bottom border colored by environment */
html body[data-env="dev"] nav {
    border-bottom: 1px solid rgba(214, 165, 69, 0.4) !important;
}
html body[data-env="staging"] nav {
    border-bottom: 1px solid rgba(21, 217, 149, 0.4) !important;
}
html body[data-env="prod"] nav {
    border-bottom: 1px solid rgba(39, 215, 232, 0.25) !important;
}

/* Footer top border colored by environment */
html body[data-env="dev"] footer {
    border-top: 1px solid rgba(214, 165, 69, 0.4) !important;
}
html body[data-env="staging"] footer {
    border-top: 1px solid rgba(21, 217, 149, 0.4) !important;
}
html body[data-env="prod"] footer {
    border-top: 1px solid rgba(39, 215, 232, 0.25) !important;
}

/* Environment badge glow & custom colors */
.env-badge {
    transition: all 0.3s ease;
}
body[data-env="dev"] .env-badge {
    background-color: #D6A545 !important;
    color: #0D1630 !important;
    box-shadow: 0 0 8px rgba(214, 165, 69, 0.4);
}
body[data-env="staging"] .env-badge {
    background-color: #15D995 !important;
    color: #0D1630 !important;
    box-shadow: 0 0 8px rgba(21, 217, 149, 0.4);
}