/* ==========================================================================
   BB10 Theme — Universal Light & Dark Mode Engine (theme-mode.css)
   Strictly Enforces 2-Color Architecture Across the Entire Site:
   - Dark Mode: Obsidian Canvas (#060913 / #0B1120) + Pure White Text + Amber Gold (#F59E0B)
   - Light Mode: Clean White/Slate Canvas (#F8FAFC / #FFFFFF) + Slate-900 Text + Amber Gold (#D97706)
   - Zero Gradients, Zero Mixed Rainbow Colors.
   ========================================================================== */

:root,
html.dark {
    --bb-obsidian: #060913;
    --bb-card-bg: #0b1120;
    --bb-card-hover: #0f172a;
    --bb-surface-header: rgba(7, 9, 14, 0.95);
    --bb-surface-header-scrolled: rgba(7, 9, 14, 0.98);
    --bb-drawer-bg: #07090e;
    --bb-drawer-header: #090d18;
    --bb-dropdown-bg: #090d18;
    --bb-search-bg: #0d121f;
    --bb-border: rgba(255, 255, 255, 0.1);
    --bb-border-subtle: rgba(255, 255, 255, 0.08);
    --bb-text-main: #ffffff;
    --bb-text-muted: #94a3b8;
    --bb-gold: #f59e0b;
    --bb-gold-hover: #d97706;
}

html.light {
    --bb-obsidian: #f8fafc;
    --bb-card-bg: #ffffff;
    --bb-card-hover: #f1f5f9;
    --bb-surface-header: rgba(255, 255, 255, 0.96);
    --bb-surface-header-scrolled: rgba(255, 255, 255, 0.98);
    --bb-drawer-bg: #ffffff;
    --bb-drawer-header: #f8fafc;
    --bb-dropdown-bg: #ffffff;
    --bb-search-bg: #ffffff;
    --bb-border: rgba(0, 0, 0, 0.08);
    --bb-border-subtle: rgba(0, 0, 0, 0.06);
    --bb-text-main: #0f172a;
    --bb-text-muted: #64748b;
    --bb-gold: #d97706;
    --bb-gold-hover: #b45309;
}

/* ==========================================================================
   Comprehensive Light Mode Rules (html.light)
   ========================================================================== */

/* 1. Body Canvas & Typography */
html.light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
html.light .cinzel {
    color: #0f172a !important;
}

/* 2. Master Header & Navigation */
html.light .bb-site-header,
html.light .bb-site-header > div,
html.light .bb-site-header [class*="bg-[#07090e]"],
html.light .bb-site-header [class*="bg-[#05070c]"] {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

html.light .bb-site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06) !important;
}

/* Desktop Dropdowns & Mega Menus */
html.light .bb-site-header [data-menu] > div,
html.light #bb-user-dropdown,
html.light #bb-user-dropdown > div,
html.light .bb-site-header [class*="bg-[#090d18]"],
html.light .bb-dropdown {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
}

/* 3. Mobile Slide Drawer */
html.light #bb-mobile-drawer,
html.light #bb-mobile-drawer [class*="bg-[#07090e]"] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

html.light #bb-mobile-drawer [class*="bg-[#090d18]"] {
    background-color: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light #bb-drawer-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* 4. Mobile Bottom Navigation Bar */
html.light #bb-bottom-nav {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.06) !important;
}

html.light .bb-bottom-tab {
    color: #64748b !important;
}

html.light .bb-bottom-tab:hover,
html.light .bb-bottom-tab.active {
    color: #d97706 !important;
}

html.light #bb-bottom-nav a[href*="/voting/"] {
    border-color: #ffffff !important;
}

/* 5. Hero Banner & Ambient Glows */
html.light section > div[class*="from-[#10172a]"],
html.light [class*="from-[#10172a]"] {
    background: #ffffff !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important;
}

html.light section div[class*="blur-3xl"][class*="rounded-full"] {
    opacity: 0.12 !important;
}

/* 6. All Component Surface Cards (Contestants, Schedules, FAQs, News, Polls) */
html.light [class*="bg-[#0d1120]"],
html.light [class*="bg-[#0b1120]"],
html.light [class*="bg-[#0d121f]"],
html.light [class*="bg-[#10172a]"],
html.light [class*="bg-[#090d18]"],
html.light [class*="bg-[#07090e]"],
html.light [class*="bg-slate-900"],
html.light [class*="bg-slate-950"],
html.light .bb-card,
html.light .bb-glass-panel,
html.light .bb-widget,
html.light .bb-contestant-card,
html.light .bb-c-card,
html.light .bb-vote-card,
html.light .bb-schedule-card,
html.light .bb-article-card,
html.light .hotstar-voting-card {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

/* Card Hover States */
html.light .bb-contestant-card:hover,
html.light .bb-c-card:hover,
html.light .bb-vote-card:hover {
    border-color: rgba(217, 119, 6, 0.4) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08), 0 0 15px rgba(217, 119, 6, 0.15) !important;
}

html.light .bb-widget-title {
    color: #0f172a !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Hotstar Mobile Voting Arena in Light Mode */
html.light .hotstar-voting-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
}

html.light .hotstar-avatar-circle {
    background-color: #f1f5f9 !important;
    border: 2.5px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

html.light .hotstar-item.is-selected .hotstar-avatar-circle {
    border: 3.5px solid #d97706 !important;
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.5), 0 0 35px rgba(217, 119, 6, 0.2) !important;
}

html.light .hotstar-name-label {
    color: #0f172a !important;
}

html.light .hotstar-item.is-selected .hotstar-name-label {
    color: #d97706 !important;
}

html.light .hotstar-done-btn {
    background: #f59e0b !important;
    color: #000000 !important;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3) !important;
}

html.light .hotstar-done-btn:hover:not(:disabled) {
    background: #d97706 !important;
}

/* 7. Gradients on Containers (Excluding photo scrim overlays and buttons) */
html.light div[class*="bg-gradient-to-b"]:not(.btn-vote-submit):not([class*="aspect-"]),
html.light div[class*="bg-gradient-to-r"]:not(.btn-vote-submit):not([class*="aspect-"]),
html.light div[class*="bg-gradient-to-tr"]:not(.btn-vote-submit):not([class*="aspect-"]) {
    background-image: none !important;
    background-color: #ffffff !important;
}

/* Photo Scrim Gradients MUST remain dark transparent scrims for text legibility */
html.light [class*="aspect-"] [class*="bg-gradient-to-t"],
html.light a.group [class*="bg-gradient-to-t"],
html.light .hotstar-avatar-circle [class*="bg-gradient-to-t"],
html.light [class*="absolute"][class*="inset-0"][class*="bg-gradient-to-t"] {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%) !important;
    background-color: transparent !important;
}

/* 8. Translucent Surfaces, Pills & Chips */
html.light [class*="bg-white/5"],
html.light [class*="bg-white/10"],
html.light [class*="bg-white/[0.02]"],
html.light [class*="bg-white/[0.03]"],
html.light [class*="bg-white/[0.04]"],
html.light [class*="bg-white/[0.05]"],
html.light [class*="bg-white/[0.06]"],
html.light [class*="bg-white/[0.08]"],
html.light [class*="bg-black/60"],
html.light [class*="bg-black/40"] {
    background-color: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e293b !important;
}

html.light [class*="hover:bg-white/"]:hover {
    background-color: #e2e8f0 !important;
}

/* 9. Borders */
html.light [class*="border-white/"],
html.light [class*="border-white\\["] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 10. Text Colors & Typography */
html.light [class*="text-white"]:not(.text-black):not(.btn-vote-submit):not([class*="bg-amber"]):not([class*="bg-red"]):not(.badge-live) {
    color: #0f172a !important;
}
html.light [class*="text-slate-100"] { color: #0f172a !important; }
html.light [class*="text-slate-200"] { color: #1e293b !important; }
html.light [class*="text-slate-300"] { color: #334155 !important; }
html.light [class*="text-slate-400"] { color: #64748b !important; }
html.light [class*="text-slate-500"] { color: #64748b !important; }

/* Keep Solid Buttons Black / White Contrast */
html.light .text-black,
html.light .text-slate-950,
html.light a[href*="/voting/"] .text-black {
    color: #000000 !important;
}

/* Accent Colors */
html.light .text-amber-300,
html.light .text-amber-400 {
    color: #b45309 !important;
}
html.light .text-amber-500 {
    color: #d97706 !important;
}

html.light .fire-gradient-text,
html.light .gold-gradient-text,
html.light .water-gradient-text,
html.light .fire-water-gradient-text,
html.light [class*="gold-gradient-text"] {
    color: #d97706 !important;
}

html.light .fire-gradient-bg,
html.light .gold-gradient-bg,
html.light .water-gradient-bg {
    background: #d97706 !important;
    color: #ffffff !important;
}

/* 11. Status Badges */
html.light .badge-safe,
html.light .badge-warning,
html.light .badge-danger {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #b45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
}

html.light .badge-neutral {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* 12. Modals & Overlays */
html.light #bb-search-overlay,
html.light #bb-auth-modal {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

html.light #bb-search-overlay > div,
html.light #bb-auth-modal-card,
html.light #bb-receipt-modal > div {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}

html.light #bb-search-input,
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="search"],
html.light select,
html.light textarea {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

/* 13. Site Footer */
html.light .bb-site-footer,
html.light [class*="bg-[#06080e]"] {
    background-color: #f1f5f9 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
}

html.light .bb-site-footer a {
    color: #475569 !important;
}
html.light .bb-site-footer a:hover {
    color: #d97706 !important;
}

/* 14. Tables */
html.light table th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light table td {
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #334155 !important;
}

html.light table tr:hover td {
    background-color: #f8fafc !important;
}