/* ===== LIGHT THEME - Comprehensive Override =====
   Applied when html has class "light-theme"
   Must be loaded LAST to override all dark theme CSS */

/* ===== CSS Variables Override ===== */
html.light-theme {
    --bs-body-bg: #f4f6f8;
    --bs-body-color: #1a1a2e;
    --bs-card-bg: #ffffff;
    --bs-card-border: #e2e8f0;
    --bs-card-header: #f8fafc;
    --bs-input-bg: #ffffff;
    --bs-border-color: #e2e8f0;
    --bs-secondary-bg: #f1f5f9;
    --bs-tertiary-bg: #ffffff;
    --bs-dark: #f8fafc;
    --bs-navbar-bg: #ffffff;
    --bs-nav-link-color: #64748b;
    --bs-nav-link-hover-color: #1a1a2e;
    --bs-light: #1a1a2e;
}

/* ===== Body Background ===== */
html.light-theme body::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: -1;
    background: 
        /* Main large radial blurs - exactly like dark mode but with light mode compatible opacities if needed, 
           but user said "as in dark mode", so we keep the rich colors */
        radial-gradient(ellipse 1400px 900px at 12% 78%, rgba(120, 119, 198, 0.15) 0%, rgba(120, 119, 198, 0.08) 30%, transparent 65%),
        radial-gradient(ellipse 1100px 700px at 88% 12%, rgba(74, 222, 128, 0.12) 0%, rgba(74, 222, 128, 0.06) 35%, transparent 70%),
        radial-gradient(ellipse 1000px 1000px at 32% 38%, rgba(147, 197, 253, 0.11) 0%, rgba(147, 197, 253, 0.05) 40%, transparent 75%),
        radial-gradient(ellipse 800px 1200px at 68% 92%, rgba(168, 85, 247, 0.09) 0%, rgba(168, 85, 247, 0.04) 45%, transparent 80%),
        radial-gradient(ellipse 700px 900px at 92% 58%, rgba(99, 102, 241, 0.07) 0%, rgba(99, 102, 241, 0.03) 50%, transparent 85%),
        radial-gradient(ellipse 600px 800px at 25% 15%, rgba(236, 72, 153, 0.08) 0%, rgba(236, 72, 153, 0.04) 45%, transparent 80%),
        radial-gradient(ellipse 700px 600px at 75% 25%, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.03) 50%, transparent 85%),
        radial-gradient(ellipse 500px 700px at 60% 60%, rgba(251, 146, 60, 0.05) 0%, rgba(251, 146, 60, 0.02) 55%, transparent 90%),
        radial-gradient(ellipse 400px 500px at 85% 85%, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0.03) 60%, transparent 95%),
        radial-gradient(ellipse 450px 400px at 18% 45%, rgba(14, 165, 233, 0.04) 0%, rgba(14, 165, 233, 0.02) 65%, transparent 95%),
        linear-gradient(135deg, 
            #0a0e1a 0%, 
            #0f172a 15%, 
            #1e293b 35%, 
            #334155 60%, 
            #475569 80%, 
            #64748b 100%) !important;
}

html.light-theme body {
    background: transparent !important;
    color: #1a1a2e !important;
}

/* ===== Cards & Containers (the main dark containers) ===== */
html.light-theme .card,
html.light-theme .card-body,
html.light-theme .card-header,
html.light-theme .card-footer,
html.light-theme .modal-content,
html.light-theme .modal-header,
html.light-theme .modal-body,
html.light-theme .modal-footer,
html.light-theme .list-group-item,
html.light-theme .table-container,
html.light-theme .dropdown-menu,
html.light-theme .popover,
html.light-theme .tooltip-inner,
html.light-theme .offcanvas {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1a1a2e !important;
    border-color: #e2e8f0 !important;
}

/* Competition cards, match items, player cards */
html.light-theme .competition-card:not(.folder-card-inner),
html.light-theme .match-item,
html.light-theme .player-card,
html.light-theme .create-competition-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Competition header */
html.light-theme .competition-header.card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .competition-header .card-body {
    background: transparent !important;
}

/* Join container header - keep teal accent */
html.light-theme .join-container-header.card {
    border: 1px solid rgba(73, 110, 120, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Match containers */
html.light-theme #upcoming-matches-container .card,
html.light-theme #completed-matches-container .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme #upcoming-matches-container .card-body > div:not(.alert),
html.light-theme #completed-matches-container .card-body > div:not(.alert) {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html.light-theme #upcoming-matches-container .card-header,
html.light-theme #completed-matches-container .card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Alert messages in light mode */
html.light-theme #upcoming-matches-container .alert,
html.light-theme #completed-matches-container .alert {
    background: rgba(73, 110, 120, 0.08) !important;
    border: 1px solid rgba(73, 110, 120, 0.2) !important;
    color: #1a1a2e !important;
}

/* ===== Inline style overrides ===== */
/* Override all elements with dark inline background styles */
html.light-theme [style*="background: #111827"],
html.light-theme [style*="background-color: #111827"],
html.light-theme [style*="background:#111827"],
html.light-theme [style*="background: #1D2332"],
html.light-theme [style*="background-color: #1D2332"],
html.light-theme [style*="background:#1D2332"],
html.light-theme [style*="background: #0a0e17"],
html.light-theme [style*="background: #030508"],
html.light-theme [style*="background: #0f172a"],
html.light-theme [style*="background: #1e293b"],
html.light-theme [style*="background: rgba(17, 24, 39"],
html.light-theme [style*="background-color: rgba(17, 24, 39"],
html.light-theme [style*="background: rgba(10, 14, 23"],
html.light-theme [style*="background: rgba(3, 5, 8"],
html.light-theme [style*="background: rgba(15, 23, 42"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Settings page containers with inline styles */
html.light-theme div[style*="background: #1D2332"],
html.light-theme div[style*="background: #111827"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ===== Text Colors ===== */
html.light-theme .text-white:not(.btn .text-white):not(.badge .text-white):not(.join-container-header .text-white),
html.light-theme .text-light:not(.btn .text-light):not(.badge .text-light):not(.join-container-header .text-light),
html.light-theme .competition-list-header h2,
html.light-theme .competition-list-header p {
    color: #1a1a2e !important;
}

html.light-theme .text-white,
html.light-theme .text-light {
    color: #1a1a2e !important;
}

html.light-theme .text-muted,
html.light-theme .form-text {
    color: #64748b !important;
}

html.light-theme h1, html.light-theme h2, html.light-theme h3,
html.light-theme h4, html.light-theme h5, html.light-theme h6 {
    color: #1a1a2e !important;
}

html.light-theme p {
    color: #334155 !important;
}

html.light-theme label,
html.light-theme .form-label,
html.light-theme .form-check-label {
    color: #334155 !important;
}

html.light-theme strong {
    color: #1a1a2e !important;
}

/* Match action labels */
html.light-theme .match-action-label {
    color: #64748b !important;
}

/* ===== Links ===== */
html.light-theme a,
html.light-theme a:link,
html.light-theme a:visited {
    color: #496E78 !important;
}

html.light-theme a:hover,
html.light-theme a:focus {
    color: #2A3C61 !important;
}

/* Player names in leaderboard */
html.light-theme .player-name a,
html.light-theme .venue-name a,
html.light-theme .player-username a {
    color: #496E78 !important;
}

html.light-theme .team-pair a.text-white {
    color: #1a1a2e !important;
}

/* ===== Navbar & Bottom Nav - Force White Background in Light Mode ===== */
html.light-theme .navbar,
html.light-theme .mobile-nav,
html.light-theme .bottom-nav,
html.light-theme .nav-bar-bottom,
html.light-theme nav.navbar,
html.light-theme div.navbar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .navbar .nav-link,
html.light-theme .navbar-brand,
html.light-theme .navbar-toggler i,
html.light-theme .navbar-toggler svg,
html.light-theme .hamburger-icon {
    color: #1a1a2e !important;
    stroke: #1a1a2e !important;
}

html.light-theme .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a1a2e' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

html.light-theme .navbar-toggler {
    border-color: rgba(26, 26, 46, 0.3) !important;
}

/* ===== Mobile Bottom Nav - Color Fixes ===== */
html.light-theme .mobile-nav,
html.light-theme .bottom-nav,
html.light-theme .nav-bar-bottom {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Inactive items: Dark gray for visibility */
html.light-theme .mobile-nav-item,
html.light-theme .bottom-nav-item,
html.light-theme .nav-item-bottom {
    color: #475569 !important; /* Dark slate gray */
}

html.light-theme .mobile-nav-item span,
html.light-theme .bottom-nav-item span,
html.light-theme .nav-item-bottom span,
html.light-theme .mobile-nav-item .nav-label,
html.light-theme .bottom-nav-item .nav-label {
    color: #475569 !important;
}

html.light-theme .mobile-nav-item i,
html.light-theme .mobile-nav-item svg,
html.light-theme .bottom-nav-item i,
html.light-theme .bottom-nav-item svg {
    color: #475569 !important;
    stroke: #475569 !important;
}

/* Active items: Teal accent color (Groen) */
html.light-theme .mobile-nav-item.active,
html.light-theme .bottom-nav-item.active,
html.light-theme .nav-item-bottom.active {
    color: #496E78 !important; /* Teal accent */
}

html.light-theme .mobile-nav-item.active span,
html.light-theme .bottom-nav-item.active span,
html.light-theme .nav-item-bottom.active span,
html.light-theme .mobile-nav-item.active .nav-label,
html.light-theme .bottom-nav-item.active .nav-label {
    color: #496E78 !important;
}

html.light-theme .mobile-nav-item.active i,
html.light-theme .mobile-nav-item.active svg,
html.light-theme .bottom-nav-item.active i,
html.light-theme .bottom-nav-item.active svg {
    color: #496E78 !important;
    stroke: #496E78 !important;
}

/* ===== Alert & Notice Text Colors ===== */
/* Lila containers (Upcoming matches/Pending items) */
html.light-theme #upcoming-matches-container .alert {
    background: #ffffff !important;
    border: 1px solid #978CC2 !important;
    color: #978CC2 !important; /* Lila color */
}

html.light-theme #upcoming-matches-container .alert p,
html.light-theme #upcoming-matches-container .alert div,
html.light-theme #upcoming-matches-container .alert span,
html.light-theme #upcoming-matches-container .alert strong {
    color: #978CC2 !important;
}

/* Green containers (Completed matches) */
html.light-theme #completed-matches-container .alert {
    background: #ffffff !important;
    border: 1px solid #496E78 !important;
    color: #496E78 !important; /* Teal/Green color */
}

html.light-theme #completed-matches-container .alert p,
html.light-theme #completed-matches-container .alert div,
html.light-theme #completed-matches-container .alert span,
html.light-theme #completed-matches-container .alert strong {
    color: #496E78 !important;
}

/* Restore Green styling for 'Openstaand' bar (pending-bar) */
html.light-theme .pending-bar {
    background: #496E78 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html.light-theme .pending-bar .pending-header,
html.light-theme .pending-bar .pending-label,
html.light-theme .pending-bar .pending-count {
    color: #ffffff !important;
}

/* Force backgrounds white for navbars with absolute priority */
html.light-theme .navbar,
html.light-theme .navbar.bg-dark,
html.light-theme .navbar.navbar-dark,
html.light-theme .mobile-nav,
html.light-theme .bottom-nav,
html.light-theme .nav-bar-bottom,
html.light-theme div.mobile-nav,
html.light-theme div.bottom-nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Active Icon in Bottom Nav (Teal Accent Color) */
html.light-theme .mobile-nav-item.active,
html.light-theme .bottom-nav-item.active,
html.light-theme .nav-item-bottom.active,
html.light-theme .mobile-nav-item.active i,
html.light-theme .mobile-nav-item.active svg,
html.light-theme .bottom-nav-item.active i,
html.light-theme .bottom-nav-item.active svg {
    color: #496E78 !important;
    stroke: #496E78 !important;
    fill: none !important; /* Ensure icons don't fill if they are outline icons */
}

/* ===== Header Logo visibility in light mode ===== */
html.light-theme .navbar-brand img,
html.light-theme .navbar .navbar-brand img {
    filter: invert(1) brightness(0.2) contrast(1.5) !important;
}

/* ===== Sort Icon Fix ===== */
html.light-theme .right-section i[data-feather="sliders"],
html.light-theme .right-section svg[data-feather="sliders"],
html.light-theme #competitions-header .right-section i,
html.light-theme #competitions-header .right-section svg,
html.light-theme [data-bs-target="#sortModal"],
html.light-theme [data-bs-target="#sortModal"] i,
html.light-theme [data-bs-target="#sortModal"] svg {
    color: #496E78 !important; /* Teal for header icons */
    stroke: #496E78 !important;
}

/* ===== Create Competition Card Force ===== */
html.light-theme .create-competition-card,
html.light-theme #competitions-row .create-competition-card,
html.light-theme .create-competition-card .card-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #D2A679 !important; /* Peach accent solid border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

html.light-theme .create-competition-card i,
html.light-theme .create-competition-card svg,
html.light-theme .create-competition-card .plus-icon,
html.light-theme .create-competition-card .card-body i,
html.light-theme .create-competition-card .card-body svg {
    color: #D2A679 !important;
    stroke: #D2A679 !important;
}

/* Force Google login button to match primary button style in light theme */
html.light-theme .login-card a.btn.btn-outline-light {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
}

html.light-theme .login-card a.btn.btn-outline-light:hover {
    background-color: #3d5e66 !important;
}

html.light-theme .login-card a.btn.btn-outline-light svg path {
    fill: #ffffff !important;
}

html.light-theme .login-card a.btn.btn-outline-light * {
    color: #ffffff !important;
}

html.light-theme .create-competition-card .card-title {
    color: #111827 !important;
}

/* ===== Modal Readability (Sort Modal) ===== */
html.light-theme .modal-content {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e2e8f0 !important;
}

html.light-theme .modal-header,
html.light-theme .modal-footer {
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
}

html.light-theme .modal-title {
    color: #111827 !important;
}

html.light-theme .modal-body {
    color: #111827 !important;
}

/* Specific text fix for sort modal labels */
html.light-theme .modal-body label,
html.light-theme .modal-body span,
html.light-theme .modal-body p,
html.light-theme .modal-body h1,
html.light-theme .modal-body h2,
html.light-theme .modal-body h3,
html.light-theme .modal-body h4,
html.light-theme .modal-body h5,
html.light-theme .modal-body h6,
html.light-theme .modal-body .form-check-label {
    color: #111827 !important;
    text-shadow: none !important;
}

/* Global shadow removal for light theme */
html.light-theme *:not(.btn-circle):not(.btn-icon) {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Preserve specific functional shadows if needed, but remove all aesthetic ones */
html.light-theme .card,
html.light-theme .modal-content,
html.light-theme .btn:not(.rounds-badge) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Ensure competition folder cards in light mode also have no shadows */
html.light-theme .folder-card,
html.light-theme .folder-card-inner {
    box-shadow: none !important;
    text-shadow: none !important;
}


/* ===== Create Competition Page Header (Green with Rounded Corners) ===== */
html.light-theme .create-header-card {
    background: #496E78 !important;
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 12px rgba(73, 110, 120, 0.25) !important;
}

html.light-theme .create-header-card .card-body {
    background: transparent !important;
}

html.light-theme .create-header-card h2,
html.light-theme .create-header-card p,
html.light-theme .create-header-card span,
html.light-theme .create-header-card div,
html.light-theme .create-header-card small,
html.light-theme .create-header-card .competition-title {
    color: #ffffff !important;
}

/* ===== Create Wizard Card (White background in light mode) ===== */
html.light-theme .create-wizard-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-radius: 0.75rem !important;
}

html.light-theme .create-wizard-card .card-body {
    background: transparent !important;
}

html.light-theme .create-wizard-card h6,
html.light-theme .create-wizard-card label {
    color: #111827 !important;
}

/* ===== Wizard Option Buttons (Choice Blocks) ===== */
html.light-theme .wizard-option-btn {
    background-color: #ffffff !important;
    border: 2px solid #2A3C61 !important;
    color: #111827 !important;
    border-radius: 8px !important;
}

html.light-theme .wizard-option-btn small {
    color: #475569 !important;
    opacity: 1 !important;
}

html.light-theme .wizard-option-btn:hover {
    background-color: #f8fafc !important;
    border-color: #496E78 !important;
}

html.light-theme .wizard-option-btn.selected {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
    color: #ffffff !important;
}

html.light-theme .wizard-option-btn.selected small {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ===== Wizard Input Fields in Light Mode ===== */
html.light-theme .wizard-input-pill {
    background: #f8fafc !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
}

html.light-theme .wizard-input-pill::placeholder {
    color: #9ca3af !important;
}

html.light-theme .wizard-input-pill:focus {
    background: #ffffff !important;
    border-color: #496E78 !important;
    box-shadow: 0 0 0 0.2rem rgba(73, 110, 120, 0.25) !important;
}

/* ===== Login Page Fixes ===== */
html.light-theme .login-card .btn-google {
    color: #111827 !important;
}

html.light-theme .login-card .btn-outline-light {
    background: #496E78 !important;
    border-color: #496E78 !important;
    color: #ffffff !important;
}

html.light-theme .login-card .btn-outline-light:hover {
    background: #3d5e66 !important;
}

html.light-theme .login-card .form-check-label {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #111827 !important;
}

/* Redefining text contrast on white containers */
html.light-theme .card:not(.competition-header):not(.join-container-header),
html.light-theme .competition-header .card-body {
    color: #111827 !important;
}

html.light-theme .competition-header h1, 
html.light-theme .competition-header h2, 
html.light-theme .competition-header h3,
html.light-theme .competition-header .competition-title {
    color: #111827 !important;
}

html.light-theme .competition-header .text-white-50,
html.light-theme .competition-header .text-light,
html.light-theme .competition-header p,
html.light-theme .competition-header span,
html.light-theme .competition-header small,
html.light-theme .competition-header .competition-subtitle,
html.light-theme .competition-header .text-white-50.small,
html.light-theme .competition-header .small {
    color: #475569 !important;
}

/* Availability counter visibility in light theme */
html.light-theme #selection-counter,
html.light-theme .selection-counter-wrapper,
html.light-theme #sticky-slot-counter,
html.light-theme .slot-counter-badge:not(.reached),
html.light-theme #selected-slots-count {
    color: #111827 !important;
}

html.light-theme #sticky-propose-container #sticky-slot-counter {
    color: #111827 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html.light-theme #sticky-propose-container #sticky-slot-counter.reached {
    color: #ffffff !important;
    background: #496E78 !important;
    border-color: #496E78 !important;
}

html.light-theme #sticky-propose-container {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Calendar Button in Settings Light Theme */
html.light-theme .btn-outline-light {
    color: #111827 !important;
    border-color: #111827 !important;
}

html.light-theme .btn-outline-light:hover {
    background-color: #111827 !important;
    color: #ffffff !important;
}

/* Propose button teal highlight when 10+ slots selected */
.btn-propose-highlight,
#submitBtn.btn-propose.ready,
.btn-propose.ready {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
    color: white !important;
}

html.light-theme .btn-propose-highlight,
html.light-theme #submitBtn.btn-propose.ready,
html.light-theme .btn-propose.ready {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
    color: white !important;
}

/* ===== MATCH CARD DIVIDER, ARROW, AND QUICK VIEW CLEANUP ===== */
html.light-theme .match-card hr,
html.light-theme .match-card .divider {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
    margin: 10px 0 !important;
}

html.light-theme .match-card .chevron-down,
html.light-theme .match-card .fa-chevron-down,
html.light-theme .match-card [data-feather="chevron-down"] {
    color: #111827 !important;
}

/* Quick View (Availability) in Match Cards */
html.light-theme .match-card .availability-summary,
html.light-theme .match-card .quick-view-container {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

html.light-theme .match-card .availability-item,
html.light-theme .match-card .quick-view-item {
    color: #475569 !important;
}

html.light-theme .match-card .availability-item.available,
html.light-theme .match-card .quick-view-item.available {
    color: #496E78 !important;
    font-weight: 600 !important;
}

/* Specific fix for the divider line in upcoming matches */
html.light-theme .match-card .border-top {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Ensure icons in match cards are visible */
html.light-theme .match-card i,
html.light-theme .match-card svg {
    color: #111827 !important;
}

/* Availability badges in quick view */
html.light-theme .match-card .availability-badge {
    background: rgba(73, 110, 120, 0.1) !important;
    color: #496E78 !important;
    border: 1px solid rgba(73, 110, 120, 0.2) !important;
}
html.light-theme #upcoming-matches-container,
html.light-theme #completed-matches-container,
html.light-theme #upcoming-matches-container *,
html.light-theme #completed-matches-container * {
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.light-theme #upcoming-matches-container .card-body > div:not(.alert),
html.light-theme #completed-matches-container .card-body > div:not(.alert) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.light-theme .upcoming-badge,
html.light-theme .rounds-badge,
html.light-theme .badge {
    text-shadow: none !important;
}

/* Force badge transparency and colored stroke */
html.light-theme .badge.bg-secondary.rounds-badge,
html.light-theme span.badge.bg-secondary.rounds-badge,
html.light-theme .rounds-badge {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.light-theme .badge.bg-secondary.rounds-badge[style*="border-color: #978CC2"],
html.light-theme .badge.bg-secondary.rounds-badge[style*="border-color:#978CC2"] {
    color: #978CC2 !important;
}

html.light-theme .badge.bg-secondary.rounds-badge[style*="border-color: #496E78"],
html.light-theme .badge.bg-secondary.rounds-badge[style*="border-color:#496E78"] {
    color: #496E78 !important;
}

/* Explicitly targeting the competition subtitle info */
html.light-theme .competition-header .left-section + .right-section div,
html.light-theme .competition-header .right-section h2 + div,
html.light-theme .competition-header .right-section span,
html.light-theme .competition-header .right-section .small {
    color: #475569 !important;
}

html.light-theme .text-muted {
    color: #64748b !important; /* Ensure readable slate gray for muted text */
}

html.light-theme .small,
html.light-theme small {
    color: #475569 !important;
}

/* Fix active icons in sort modal or lists */
html.light-theme .sort-check,
html.light-theme .sort-arrow-up,
html.light-theme .sort-arrow-down {
    color: #496E78 !important;
}
html.light-theme .form-select,
html.light-theme input[type="text"],
html.light-theme input[type="email"],
html.light-theme input[type="password"],
html.light-theme input[type="number"],
html.light-theme input[type="date"],
html.light-theme textarea,
html.light-theme select {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
    border-color: #d1d5db !important;
}

html.light-theme .form-control::placeholder {
    color: #9ca3af !important;
}

html.light-theme .form-control:focus,
html.light-theme .form-select:focus {
    background-color: #ffffff !important;
    border-color: #978CC2 !important;
    box-shadow: 0 0 0 0.2rem rgba(151, 140, 194, 0.25) !important;
}

/* Checkboxes */
html.light-theme .form-check-input {
    border: 2px solid #94a3b8 !important;
    background-color: #ffffff !important;
}

html.light-theme .form-check-input:checked {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
}

/* ===== Tables ===== */
html.light-theme .table {
    color: #1a1a2e !important;
}

html.light-theme .table th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

html.light-theme .table td {
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

html.light-theme .table tbody tr:hover {
    background-color: #f1f5f9 !important;
}

html.light-theme .table-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* Card headers in light mode */
html.light-theme .tab-pane .card-header,
html.light-theme .card-header {
    background-color: #f8fafc !important;
    color: #1a1a2e !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* ===== Accordion ===== */
html.light-theme .accordion {
    border: 1px solid #e2e8f0 !important;
}

html.light-theme .accordion-item {
    background-color: #ffffff !important;
}

html.light-theme .accordion-item + .accordion-item {
    border-top: 1px solid #e2e8f0 !important;
}

html.light-theme .accordion-button {
    background-color: #f8fafc !important;
    color: #1a1a2e !important;
}

html.light-theme .accordion-button:not(.collapsed) {
    background-color: #eef2f7 !important;
    color: #1a1a2e !important;
}

html.light-theme .accordion-button::after {
    filter: none !important;
}

html.light-theme .accordion-body {
    background-color: #ffffff !important;
    color: #334155 !important;
}

/* ===== Nav Tabs ===== */
html.light-theme .nav-tabs .nav-link {
    color: #64748b !important;
}

html.light-theme .nav-tabs .nav-link:hover {
    color: #1a1a2e !important;
}

html.light-theme .nav-tabs .nav-link.active {
    color: #1a1a2e !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 #e2e8f0 #ffffff !important;
}

/* ===== Badges - Keep brand colors but adjust for contrast ===== */
html.light-theme .badge.bg-secondary:not(.rounds-badge) {
    background: #e2e8f0 !important;
    color: #475569 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Notification badge stays purple */
html.light-theme .badge.bg-danger {
    background-color: #978CC2 !important;
    color: #ffffff !important;
}

/* ===== Buttons - Preserve accent colors ===== */
/* Keep gradient buttons unchanged */
html.light-theme .btn-gradient-peach,
html.light-theme .btn-gradient-teal,
html.light-theme .btn-gradient-purple {
    color: white !important;
}

/* Outline buttons in light mode */
html.light-theme .btn-outline-secondary {
    border-color: #94a3b8 !important;
    color: #475569 !important;
}

html.light-theme .btn-outline-primary {
    border-color: #496E78 !important;
    color: #496E78 !important;
}

/* Button hover - adjust for light background */
html.light-theme .btn:not(.btn-gradient-teal):not(.btn-gradient-peach):not(.btn-gradient-purple):not(.start-competition-btn):not(.pulse-glow):not(#invite-btn):hover {
    background-color: #f1f5f9 !important;
}

/* Add to homescreen button - keep dark for contrast */
html.light-theme .add-to-homescreen-btn {
    background: #2A3C61 !important;
    color: white !important;
}

/* ===== Chat ===== */
html.light-theme .chat-container {
    background: #ffffff !important;
}

html.light-theme .message-bubble {
    color: #1a1a2e !important;
}

/* Keep sender's message bubbles colored */
html.light-theme .message-bubble.sent {
    background: #496E78 !important;
    color: white !important;
}

html.light-theme .message-bubble.received {
    background: #f1f5f9 !important;
    color: #1a1a2e !important;
}

/* ===== Folder Cards ===== */
html.light-theme .folder-card-inner {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* ===== Select2 ===== */
html.light-theme .select2-container--default .select2-selection--single,
html.light-theme .select2-container--default .select2-selection--multiple {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1a1a2e !important;
}

html.light-theme .select2-dropdown {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

html.light-theme .select2-results__option {
    color: #1a1a2e !important;
}

html.light-theme .select2-results__option--highlighted {
    background-color: #f1f5f9 !important;
    color: #1a1a2e !important;
}

/* ===== Sidebar ===== */
html.light-theme .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
}

html.light-theme .sidebar .nav-link {
    color: #475569 !important;
}

html.light-theme .sidebar .nav-link:hover {
    color: #496E78 !important;
    background-color: #f1f5f9 !important;
}

html.light-theme .sidebar .nav-link.active {
    color: #496E78 !important;
    background-color: rgba(73, 110, 120, 0.08) !important;
}

/* ===== Scrollbar ===== */
html.light-theme ::-webkit-scrollbar {
    width: 8px;
}

html.light-theme ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

html.light-theme ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

html.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ===== Availability ===== */
html.light-theme .time-slot-bar,
html.light-theme .availability-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* ===== Profile Header ===== */
html.light-theme .profile-header .edit-profile,
html.light-theme .profile-header .logout-btn,
html.light-theme .nav-item .logout-btn {
    border: 1px solid #94a3b8 !important;
    color: #475569 !important;
}

html.light-theme .profile-header .edit-profile:hover,
html.light-theme .profile-header .logout-btn:hover {
    background-color: #f1f5f9 !important;
}

/* ===== Invite/Private link ===== */
html.light-theme .private-link,
html.light-theme .badge.bg-purple,
html.light-theme .badge.bg-info {
    background-color: rgba(73, 110, 120, 0.1) !important;
    color: #496E78 !important;
    border: 1px solid rgba(73, 110, 120, 0.3) !important;
}

html.light-theme .invite-code,
html.light-theme .private-link,
html.light-theme .invite-link,
html.light-theme .private-link-label {
    color: #496E78 !important;
}

/* ===== Login/Register button adjustments ===== */
html.light-theme .btn-login,
html.light-theme .navbar .login-btn,
html.light-theme a.login-btn {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
    color: #ffffff !important;
}

/* ===== Payment section ===== */
html.light-theme #payment .table th,
html.light-theme #payment .table td {
    color: #334155 !important;
}

/* ===== Competition list ===== */
html.light-theme .competition-list-header {
    color: #1a1a2e !important;
}

/* ===== Unread chat ===== */
html.light-theme .unread-chat .player-name {
    color: #1a1a2e !important;
    font-weight: 600 !important;
}

/* ===== Timer controls ===== */
html.light-theme .small.text-muted.mt-1,
html.light-theme .timer-button-label {
    color: #64748b !important;
}

/* ===== Wizard/Step forms ===== */
html.light-theme .wizard-step,
html.light-theme .step-content {
    background: #ffffff !important;
    color: #1a1a2e !important;
}

/* ===== Alert variants ===== */
html.light-theme .alert-info {
    background-color: rgba(73, 110, 120, 0.08) !important;
    border-color: rgba(73, 110, 120, 0.2) !important;
    color: #334155 !important;
}

html.light-theme .alert-warning {
    background-color: rgba(210, 166, 121, 0.1) !important;
    border-color: rgba(210, 166, 121, 0.3) !important;
    color: #334155 !important;
}

html.light-theme .alert-danger {
    background-color: rgba(220, 53, 69, 0.08) !important;
    border-color: rgba(220, 53, 69, 0.2) !important;
    color: #334155 !important;
}

html.light-theme .alert-success {
    background-color: rgba(73, 110, 120, 0.08) !important;
    border-color: rgba(73, 110, 120, 0.2) !important;
    color: #334155 !important;
}

/* ===== Availability Modal ===== */
html.light-theme #availabilityModal .form-check-input {
    border: 2.5px solid #94a3b8 !important;
    background-color: #ffffff !important;
}

html.light-theme #availabilityModal .form-check-input:checked {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
}

/* ===== hr dividers ===== */
html.light-theme hr {
    border-color: #e2e8f0 !important;
}

/* ===== PWA Status bar ===== */
@media (display-mode: standalone) {
    html.light-theme {
        background-color: #f4f6f8;
    }
}

/* ===== Icon colors ===== */
html.light-theme .feather,
html.light-theme [data-feather] {
    color: #64748b;
}

/* Create competition card icon stays peach */
html.light-theme .create-competition-card svg,
html.light-theme .create-competition-card [data-feather] {
    color: #D2A679 !important;
    stroke: #D2A679 !important;
}

/* ===== Notification bell ===== */
html.light-theme #navbar-notification-bell,
html.light-theme #mobile-notification-bell {
    color: #475569 !important;
}

/* ===== Granular options borders ===== */
html.light-theme #granular-email-options,
html.light-theme #granular-push-options {
    border-color: #e2e8f0 !important;
}

/* ===== Redesigned leaderboard ===== */
html.light-theme .redesigned-leaderboard {
    background: #ffffff !important;
}

html.light-theme .redesigned-leaderboard th {
    background: #f8fafc !important;
    color: #475569 !important;
}

html.light-theme .redesigned-leaderboard td {
    color: #334155 !important;
}

/* ===== Stats table ===== */
html.light-theme .stats-table {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
}

html.light-theme .stats-table thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
}

html.light-theme .stats-table-container {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===== Dropdown menu ===== */
html.light-theme .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

html.light-theme .dropdown-item {
    color: #334155 !important;
}

html.light-theme .dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: #1a1a2e !important;
}

html.light-theme .dropdown-divider {
    border-color: #e2e8f0 !important;
}

/* ===== Toast ===== */
html.light-theme .toast {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
    border: 1px solid #e2e8f0 !important;
}

/* ===== Welcome/Landing page sections ===== */
html.light-theme .hero-section,
html.light-theme .feature-card {
    background: #ffffff !important;
    color: #1a1a2e !important;
}

/* ===== Google Calendar button in light mode ===== */
html.light-theme #calendar-check-btn {
    background: rgba(73, 110, 120, 0.08) !important;
    color: #496E78 !important;
}

html.light-theme #calendar-status-msg small {
    color: #496E78 !important;
}

/* ===== Sticky Propose Container - keep dark in light mode ===== */
html.light-theme #sticky-propose-container {
    background: rgba(26, 26, 46, 0.92) !important;
    background-color: rgba(26, 26, 46, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

html.light-theme #sticky-propose-container #sticky-slot-counter {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.light-theme #sticky-propose-container #submitBtn {
    color: white !important;
}

/* ===== Modal close button (X) - dark in light mode ===== */
html.light-theme .btn-close,
html.light-theme .btn-close-white {
    filter: none !important;
    opacity: 0.7 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111827'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
}

html.light-theme .modal-header .btn-close,
html.light-theme .modal-header .btn-close-white {
    opacity: 0.8 !important;
}

/* ===== Text and Badge Enhancements - NO SHADOWS ===== */
html.light-theme .match-card,
html.light-theme .match-card *,
html.light-theme .badge,
html.light-theme .rounds-badge,
html.light-theme .player-name,
html.light-theme .match-teams,
html.light-theme .vs-text,
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4,
html.light-theme h5,
html.light-theme h6,
html.light-theme p,
html.light-theme span,
html.light-theme a {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Force round badge text color to match its stroke/border */
html.light-theme .rounds-badge,
html.light-theme .badge.rounds-badge,
html.light-theme .badge.rounds-badge--upcoming,
html.light-theme .badge.rounds-badge--completed,
html.light-theme .badge.rounds-badge--validating,
html.light-theme .match-card .badge.rounds-badge {
    background-color: transparent !important;
    font-weight: 700 !important;
    border-width: 1.5px !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Teal for completed rounds */
html.light-theme .rounds-badge--completed,
html.light-theme .badge.rounds-badge--completed,
html.light-theme .match-card .badge.rounds-badge--completed {
    color: #496E78 !important;
    border-color: #496E78 !important;
}

/* Purple for upcoming rounds */
html.light-theme .rounds-badge--upcoming,
html.light-theme .badge.rounds-badge--upcoming,
html.light-theme .match-card .badge.rounds-badge--upcoming {
    color: #978CC2 !important;
    border-color: #978CC2 !important;
}

/* Gray for validating/other rounds */
html.light-theme .rounds-badge--validating,
html.light-theme .badge.rounds-badge--validating,
html.light-theme .match-card .badge.rounds-badge--validating {
    color: #64748b !important;
    border-color: #64748b !important;
}

/* Remove all text shadows and fix vs text color */
html.light-theme .match-card,
html.light-theme .match-card *,
html.light-theme .player-name,
html.light-theme .match-teams,
html.light-theme .vs-text {
    text-shadow: none !important;
}

html.light-theme .vs-text {
    color: #64748b !important;
}

/* Competition subtitle text */
html.light-theme .competition-header .text-white-50,
html.light-theme .competition-header .text-light,
html.light-theme .competition-header p.small {
    color: #64748b !important;
}

/* Tab styling for light theme */
html.light-theme .nav-pills .nav-link {
    color: #64748b !important;
}

html.light-theme .nav-pills .nav-link.active {
    background-color: #496E78 !important;
    color: #ffffff !important;
}

html.light-theme .compact-nav-pills .nav-link {
    color: #64748b !important;
    background: transparent !important;
}

html.light-theme .compact-nav-pills .nav-link.active {
    background: #496E78 !important;
    color: #ffffff !important;
}

/* FAQ page specific tab fixes */
html.light-theme #nav-tab .nav-link {
    color: #64748b !important;
}

html.light-theme #nav-tab .nav-link.active {
    background-color: #496E78 !important;
    color: #ffffff !important;
}

/* Extra specificity for round indicators in cards */
html.light-theme .match-card .rounds-badge {
    color: inherit !important; /* Let the specific classes above handle it */
}

/* Remove any remaining shadows from card elements */
html.light-theme .match-card {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
}

/* Specific fix for "Gepland" badge if it's using the same class but has a background */
html.light-theme .badge.bg-primary,
html.light-theme .badge.bg-secondary,
html.light-theme .badge.bg-success,
html.light-theme .badge.bg-info,
html.light-theme .badge.bg-warning,
html.light-theme .badge.bg-danger {
    box-shadow: none !important;
}

/* Force round badges to have NO background and visible text */
html.light-theme .match-card .badge[class*="rounds-badge"] {
    background-color: transparent !important;
    text-shadow: none !important;
}

/* ===== Match Cards - remove ALL shadows and fix borders ===== */
html.light-theme .match-card,
html.light-theme .card,
html.light-theme .competition-card,
html.light-theme .boxscore-container,
html.light-theme .competition-overview-card {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

html.light-theme .match-card {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

html.light-theme .match-card.border {
    border: 1px solid #e2e8f0 !important;
}

/* Remove potential shadows from pseudo-elements or specific inner containers */
html.light-theme .match-card::before,
html.light-theme .match-card::after,
html.light-theme .card::before,
html.light-theme .card::after {
    display: none !important;
}

/* Fix "Gepland" (Planned) badge color - using brand purple */
html.light-theme .match-card .badge.bg-primary,
html.light-theme .match-card .badge[style*="background-color: #978CC2"] {
    background-color: #978CC2 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ===== Match Action Buttons - all perzik in light mode ===== */
html.light-theme a.button-match-action[href*="availability"],
html.light-theme .button-match-action.btn-planner,
html.light-theme a.button-match-action[href*="chat"],
html.light-theme .button-match-action.btn-chat,
html.light-theme .button-match-action.reschedule-btn,
html.light-theme .button-match-action.btn-venue {
    color: #D2A679 !important;
    border-color: #D2A679 !important;
    background-color: transparent !important;
}

html.light-theme a.button-match-action[href*="availability"] svg,
html.light-theme a.button-match-action[href*="chat"] svg,
html.light-theme .button-match-action.reschedule-btn svg {
    stroke: #D2A679 !important;
    color: #D2A679 !important;
}

html.light-theme a.button-match-action[href*="availability"]:hover,
html.light-theme a.button-match-action[href*="chat"]:hover,
html.light-theme .button-match-action.reschedule-btn:hover {
    background-color: #D2A679 !important;
    color: #111827 !important;
    border-color: #D2A679 !important;
}

html.light-theme a.button-match-action[href*="availability"]:hover svg,
html.light-theme a.button-match-action[href*="chat"]:hover svg,
html.light-theme .button-match-action.reschedule-btn:hover svg {
    stroke: #111827 !important;
    color: #111827 !important;
}

/* ===== BOC/BOCR Stats Container - white background ===== */
html.light-theme .boxscore-container {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
}

html.light-theme .boxscore-header {
    color: #64748b !important;
}

html.light-theme .boxscore-player-name {
    color: #1a1a2e !important;
}

html.light-theme .boxscore-stat-header {
    color: #64748b !important;
}

/* ===== Overview Page - Light Theme ===== */
html.light-theme .competition-overview-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .card-header-clean {
    background: transparent !important;
}

html.light-theme .card-header-clean h5,
html.light-theme .card-header-clean h6 {
    color: #1a1a2e !important;
}

html.light-theme .rules-help-icon {
    color: #64748b !important;
}

html.light-theme .rule-button {
    background: rgba(73, 110, 120, 0.06) !important;
    border-color: #496E78 !important;
}

html.light-theme .rule-button-label {
    color: #64748b !important;
}

html.light-theme .rule-button-value {
    color: #1a1a2e !important;
}

html.light-theme .overview-stat-item {
    background: rgba(73, 110, 120, 0.06) !important;
    border-color: #496E78 !important;
}

html.light-theme .overview-stat-item .stat-label,
html.light-theme .stat-label {
    color: #64748b !important;
}

html.light-theme .overview-stat-item .stat-number,
html.light-theme .stat-number {
    color: #1a1a2e !important;
}

html.light-theme .overview-stat-item .progress-item .progress {
    background-color: #e2e8f0 !important;
}

/* Overview table */
html.light-theme .competition-overview-card .table {
    color: #1a1a2e !important;
}

html.light-theme .competition-overview-card .table th {
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}

html.light-theme .competition-overview-card .table td {
    color: #1a1a2e !important;
    border-color: #e2e8f0 !important;
}

/* Overview text elements */
html.light-theme .competition-overview-card .text-muted {
    color: #64748b !important;
}

html.light-theme .competition-overview-card span,
html.light-theme .competition-overview-card p {
    color: #334155 !important;
}

html.light-theme .competition-overview-card h6 {
    color: #1a1a2e !important;
}

/* Keep colored text intact */
html.light-theme .competition-overview-card .text-success {
    color: #28a745 !important;
}

html.light-theme .competition-overview-card .text-danger {
    color: #dc3545 !important;
}

html.light-theme .competition-overview-card .text-warning {
    color: #D2A679 !important;
}

/* GP badge readability */
html.light-theme .gp-badge-on {
    color: #ffffff !important;
}

html.light-theme .gp-badge-off {
    color: #64748b !important;
    background: #e2e8f0 !important;
}

/* ===== Login Page Buttons - Teal Branding ===== */
html.light-theme .login-card .btn-primary {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
    color: #ffffff !important;
}

html.light-theme .login-card .btn-primary:hover {
    background-color: #3d5c64 !important;
    border-color: #3d5c64 !important;
}

html.light-theme .login-card .btn-outline-light {
    border-color: #496E78 !important;
    color: #496E78 !important;
    background-color: transparent !important;
}

html.light-theme .login-card .btn-outline-light:hover {
    background-color: rgba(73, 110, 120, 0.05) !important;
    color: #496E78 !important;
    border-color: #496E78 !important;
}

/* Dark theme overrides for login buttons */
.login-card .btn-primary {
    background-color: #496E78 !important;
    border-color: #496E78 !important;
}

.login-card .btn-outline-light {
    border-color: #496E78 !important;
    color: #496E78 !important;
}

.login-card .btn-outline-light:hover {
    background-color: rgba(73, 110, 120, 0.1) !important;
    color: #496E78 !important;
}

/* ===== Restore Bootstrap utility classes for light mode =====
   These are overridden to dark values in new-dark.css for dark mode users.
   Restore them to their proper light values here. */
html.light-theme .bg-light {
    background-color: #f8f9fa !important;
    color: #1a1a2e !important;
}

html.light-theme .bg-white {
    background-color: #ffffff !important;
    color: #1a1a2e !important;
}

html.light-theme .bg-body-secondary,
html.light-theme .bg-body-tertiary {
    background-color: #f1f5f9 !important;
}

html.light-theme .text-dark {
    color: #1a1a2e !important;
}

html.light-theme ::placeholder {
    color: rgba(26, 26, 46, 0.45) !important;
}

html.light-theme input:-webkit-autofill,
html.light-theme input:-webkit-autofill:hover,
html.light-theme input:-webkit-autofill:focus,
html.light-theme textarea:-webkit-autofill,
html.light-theme select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1a1a2e !important;
    caret-color: #1a1a2e !important;
}