/* StadiumConnect global theme — matches directory.html palette */
html {
    color-scheme: dark light;
}

html[data-theme="dark"],
:root {
    --sc-bg: #0B0F1A;
    --sc-bg-elevated: #141B2D;
    --sc-bg-soft: #1A2235;
    --sc-card: #141B2D;
    --sc-card-hover: #1A2235;
    --sc-border: rgba(168, 85, 247, 0.22);
    --sc-border-soft: rgba(255, 255, 255, 0.10);
    --sc-text: #F8FAFC;
    --sc-muted: #94A3B8;
    --sc-muted2: #64748B;
    --sc-purple: #A855F7;
    --sc-purple2: #7C3AED;
    --sc-blue: #3B82F6;
    --sc-green: #22C55E;
    --sc-orange: #F59E0B;
    --sc-red: #EF4444;
    --sc-input-bg: rgba(255, 255, 255, 0.06);
    --sc-input-border: rgba(255, 255, 255, 0.12);
    --sc-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --sc-glass: rgba(255, 255, 255, 0.06);
    --sc-overlay: rgba(0, 0, 0, 0.55);
    --sc-accent: #FF8C42;
    --sc-grad: linear-gradient(135deg, #A855F7, #3B82F6);
}

html[data-theme="light"] {
    --sc-bg: #F1F5F9;
    --sc-bg-elevated: #FFFFFF;
    --sc-bg-soft: #F8FAFC;
    --sc-card: #FFFFFF;
    --sc-card-hover: #F8FAFC;
    --sc-border: rgba(168, 85, 247, 0.28);
    --sc-border-soft: rgba(15, 23, 42, 0.10);
    --sc-text: #0F172A;
    --sc-muted: #64748B;
    --sc-muted2: #94A3B8;
    --sc-purple: #7C3AED;
    --sc-purple2: #6D28D9;
    --sc-blue: #2563EB;
    --sc-green: #16A34A;
    --sc-orange: #D97706;
    --sc-red: #DC2626;
    --sc-input-bg: #FFFFFF;
    --sc-input-border: #E2E8F0;
    --sc-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    --sc-glass: rgba(255, 255, 255, 0.92);
    --sc-overlay: rgba(15, 23, 42, 0.45);
    --sc-accent: #EA580C;
    --sc-grad: linear-gradient(135deg, #7C3AED, #2563EB);
}

/* Base page — page-specific CSS can override background */
html {
    background: var(--sc-bg);
}
body {
    color: var(--sc-text);
    transition: background 0.25s ease, color 0.2s ease;
}
body:not([class*="dash"]) {
    background: var(--sc-bg);
}

/* Theme toggle button */
.sc-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--sc-border-soft);
    background: var(--sc-card);
    color: var(--sc-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
}
.sc-theme-toggle:hover {
    border-color: var(--sc-purple);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
}
html[data-theme="light"] .sc-theme-toggle i.fa-sun { display: none; }
html[data-theme="dark"] .sc-theme-toggle i.fa-moon { display: none; }

/* Legacy body.dark / light class support */
html[data-theme="dark"] body.dark,
html[data-theme="light"] body.light {
    background: var(--sc-bg) !important;
    color: var(--sc-text) !important;
}

/* Common surfaces */
.card, .panel, .stat-card, .info-card, .booking-card,
.v-card, .vendor-card, .saved-card, .service-item,
.modal-content, .loc-sheet, .filter-sheet, .company-note,
.policy-section, .mv-card, .booking-card-dash {
    background: var(--sc-card) !important;
    border-color: var(--sc-border-soft) !important;
    color: var(--sc-text);
    box-shadow: var(--sc-shadow);
}

/* Inputs */
input, textarea, select {
    background: var(--sc-input-bg);
    border: 1px solid var(--sc-input-border);
    color: var(--sc-text);
}
input::placeholder, textarea::placeholder {
    color: var(--sc-muted);
}

/* Headers / topbars */
.header, .topbar {
    background: var(--sc-bg-elevated);
    border-color: var(--sc-border-soft);
    color: var(--sc-text);
}

/* Bookings dashboard */
html[data-theme="dark"] .sidebar,
html[data-theme="light"] .sidebar {
    background: var(--sc-glass);
    border-color: var(--sc-border-soft);
}
html[data-theme="dark"] .panel,
html[data-theme="light"] .panel {
    background: var(--sc-glass);
    border-color: var(--sc-border-soft);
}
html[data-theme="dark"] .stat-card,
html[data-theme="light"] .stat-card {
    background: var(--sc-glass);
    border-color: var(--sc-border-soft);
}

/* Directory-specific (map existing vars when present) */
html[data-theme="light"] {
    --bg: var(--sc-bg);
    --card: var(--sc-card);
    --card2: var(--sc-bg-soft);
    --text: var(--sc-text);
    --muted: var(--sc-muted);
    --border: var(--sc-border);
    --purple: var(--sc-purple);
    --blue: var(--sc-blue);
    --green: var(--sc-green);
}

/* Profile / legacy theme variables */
html[data-theme="light"] {
    --bg-primary: var(--sc-bg);
    --bg-secondary: var(--sc-bg-elevated);
    --bg-card: var(--sc-bg-soft);
    --text-primary: var(--sc-text);
    --text-secondary: var(--sc-muted);
    --text-muted: var(--sc-muted2);
    --border-color: var(--sc-border-soft);
    --accent: var(--sc-accent);
    --accent-light: rgba(234, 88, 12, 0.12);
}

html[data-theme="dark"] {
    --bg: #0B0F1A;
    --card: #141B2D;
    --card2: #1A2235;
    --text: #F8FAFC;
    --muted: #94A3B8;
    --purple: #A855F7;
    --blue: #3B82F6;
    --border: rgba(168, 85, 247, 0.35);
    --bg-primary: var(--sc-bg);
    --bg-secondary: var(--sc-bg-elevated);
    --bg-card: var(--sc-card);
    --text-primary: var(--sc-text);
    --text-secondary: var(--sc-muted);
    --text-muted: var(--sc-muted2);
    --border-color: var(--sc-border-soft);
    --accent: var(--sc-purple);
    --accent-light: rgba(168, 85, 247, 0.15);
    --primary: var(--sc-purple);
}

/* Bottom nav */
.bottom-nav {
    background: var(--sc-bg-elevated) !important;
    border-color: var(--sc-border-soft) !important;
}
.bottom-nav .nav-item { color: var(--sc-muted); }
.bottom-nav .nav-item.active { color: var(--sc-purple); }

/* Links in content */
a.sc-link { color: var(--sc-purple); font-weight: 600; }

/* Empty / muted text */
.empty, .empty-state, .loading, .stat-hint, .stat-label,
.v-type, .v-loc, .booking-meta, .loc-hint {
    color: var(--sc-muted);
}

/* Muted headings still readable */
h1, h2, h3, h4, .section-title, .vendor-name, .booking-title,
.panel-head h2, .welcome h1 {
    color: var(--sc-text);
}

/* Light mode: fix hardcoded white text in dark-only blocks */
html[data-theme="light"] .hero-card,
html[data-theme="light"] .connect-card,
html[data-theme="light"] .promo-inner {
    color: var(--sc-text);
}
html[data-theme="light"] .hero-card {
    background: var(--sc-grad);
    color: #fff !important;
}
html[data-theme="light"] .connect-card {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    color: #fff !important;
}

/* ui-overhaul override neutralizer when linked */
html[data-theme="light"] body:not(:has(.dash)) {
    background: var(--sc-bg) !important;
    color: var(--sc-text) !important;
}

/* Floating toggle when page has no header button */
.sc-theme-toggle-float {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 9998;
    box-shadow: var(--sc-shadow);
}
body:not(:has(.bottom-nav)) .sc-theme-toggle-float {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Content pages (about, blog, privacy) — map local CSS vars */
html[data-theme="dark"] {
    --bg: var(--sc-bg);
    --card: var(--sc-card);
    --card2: var(--sc-bg-soft);
    --text: var(--sc-text);
    --muted: var(--sc-muted);
    --border: var(--sc-border-soft);
    --purple: var(--sc-purple);
    --purple-dark: var(--sc-purple2);
    --orange: var(--sc-accent);
}
html[data-theme="light"] {
    --bg: var(--sc-bg);
    --card: var(--sc-card);
    --text: var(--sc-text);
    --muted: var(--sc-muted);
    --border: var(--sc-border-soft);
}

html[data-theme="dark"] .topbar {
    background: rgba(20, 27, 45, 0.95) !important;
    border-bottom-color: var(--sc-border-soft) !important;
}
html[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* Bookings dashboard — light mode readability */
html[data-theme="light"] body:has(.dash) {
    background:
        radial-gradient(900px 380px at 70% 8%, rgba(168, 85, 247, 0.12) 0%, transparent 55%),
        radial-gradient(760px 360px at 18% 0%, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    color: var(--sc-text) !important;
}
html[data-theme="light"] .search input,
html[data-theme="light"] .panel-filter,
html[data-theme="light"] .icon-btn {
    color: var(--sc-text) !important;
}
html[data-theme="light"] .search,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .sb-link:hover,
html[data-theme="light"] .sb-foot,
html[data-theme="light"] .sb-user {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: var(--sc-border-soft) !important;
}
html[data-theme="light"] .booking-card {
    background: #fff !important;
    border-color: var(--sc-border-soft) !important;
}
html[data-theme="light"] .sb-link.active {
    color: #fff !important;
}
html[data-theme="light"] .modal-content,
html[data-theme="light"] .toast {
    background: #fff !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border-soft) !important;
}

/* Vendor detail — colors only; spacing on page */
body.vendor-detail-page .profile-card,
body.vendor-detail-page .review-card,
body.vendor-detail-page .service-item {
    background: var(--sc-card) !important;
    border-color: var(--sc-border-soft) !important;
}
html[data-theme="dark"] body:not(.vendor-detail-page) .profile-card,
html[data-theme="light"] body:not(.vendor-detail-page) .profile-card {
    background: var(--sc-card) !important;
    border-color: var(--sc-border-soft) !important;
}
html[data-theme="light"] .section-card,
html[data-theme="light"] .pkg-card,
html[data-theme="light"] body:not(.vendor-detail-page) .review-card {
    background: var(--sc-card) !important;
    border-color: var(--sc-border-soft) !important;
}
html[data-theme="light"] .search-box,
html[data-theme="light"] .cat-pill {
    border-color: var(--sc-border-soft) !important;
}
html[data-theme="light"] .v-card {
    box-shadow: var(--sc-shadow) !important;
}