/* 
 * AstroPan Night Mode (Dark Mode) Overrides
 * All rules MUST be scoped to html.night-mode
 * Accent colors (indigo, purple, amber, green, red, sky, emerald, rose, orange) are untouched.
 * Only white/light backgrounds and black/dark text are inverted.
 */

/* Phase 1: Base & Navigation */

html.night-mode {
    background-color: #000000; /* true black */
    color: #f1f5f9; /* slate-100 */
    color-scheme: dark;
}

html.night-mode body {
    background-color: #000000;
}

html.night-mode nav,
html.night-mode nav.bg-white {
    background-color: #000000 !important; /* true black */
    color: #cbd5e1 !important; /* slate-300 */
    border-color: #334155 !important; /* slate-700 */
}

html.night-mode nav a,
html.night-mode nav button,
html.night-mode #mobile-menu a,
html.night-mode #mobile-menu button {
    color: #cbd5e1 !important; /* slate-300 */
}

html.night-mode nav a:hover,
html.night-mode nav button:hover,
html.night-mode #mobile-menu a:hover,
html.night-mode #mobile-menu button:hover {
    color: #818cf8 !important; /* indigo-400 */
}

html.night-mode .text-slate-900 {
    color: #f8fafc !important; /* slate-50 */
}

/* Sub-nav active state */
html.night-mode #sub-nav a.text-black {
    color: #f8fafc !important; /* slate-50 */
}

/* The checkerboard border */
html.night-mode .checkerboard-border {
    background-color: #0f172a;
    background-image: repeating-linear-gradient(to right, #f8fafc 0, #f8fafc 10px, #0f172a 10px, #0f172a 20px);
    border-top: 1px solid #f8fafc;
    border-bottom: 1px solid #f8fafc;
}

/* Global Footer */
html.night-mode #navbar {
    background-color: #000000 !important; /* true black */
}
html.night-mode footer {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important; /* slate-700 */
}

html.night-mode footer .text-slate-900 {
    color: #f8fafc !important; /* slate-50 */
}

html.night-mode footer .text-slate-400,
html.night-mode footer .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}

html.night-mode footer a:hover {
    color: #818cf8 !important; /* indigo-400 */
}

/* Scrollbar (modals & main) */
html.night-mode .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
}
html.night-mode .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

/* Phase 2: Landing Page & Dashboard */

/* General Cards, Active Tabs, & Containers */
html.night-mode .bg-white {
    background-color: #000000 !important; /* true black */
}

/* Explicit Borders for Cards that lost them in true black */
html.night-mode .info-card,
html.night-mode .bg-white.shadow-md {
    border: 1px solid #334155 !important;
}

/* Page Backgrounds that are light in Day Mode */
html.night-mode .bg-slate-50,
html.night-mode .bg-slate-100 {
    background-color: #000000 !important; /* true black */
}

/* Specific elements that need to blend with headers */
html.night-mode .bg-slate-50\/30 {
    background-color: #1e1b4b !important; /* indigo-950 */
    border-color: #312e81 !important; /* indigo-900 */
}

/* Inactive Tabs and Cards that need separation */
html.night-mode .bg-gray-50,
html.night-mode .bg-gray-100 {
    background-color: #0f172a !important; /* slate-900 */
}

html.night-mode .modal-content .bg-gray-50 {
    background-color: #0f172a !important; /* slate-900 */
}
html.night-mode .bg-slate-200 {
    background-color: #334155 !important; /* slate-700 (used for off-toggles) */
}

/* Landing Page Registration Funnel */
html.night-mode form[onsubmit="handleQuickTrial(event)"] {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important; /* slate-700 */
}
html.night-mode form[onsubmit="handleQuickTrial(event)"] input.bg-slate-800 {
    background-color: #0f172a !important; /* slate-900 */
    color: #e2e8f0 !important; /* slate-200 */
}

/* Side Navigation Active Tabs (Bubble) */
html.night-mode .bg-indigo-50 {
    background-color: #312e81 !important; /* indigo-900 */
}
html.night-mode .bg-indigo-100 {
    background-color: #1e1b4b !important; /* indigo-950 - high contrast for transit badges and nav indicators */
}
html.night-mode .text-indigo-700 {
    color: #818cf8 !important; /* indigo-400 */
}
html.night-mode .text-indigo-800 {
    color: #a5b4fc !important; /* indigo-300 */
}
html.night-mode .border-indigo-200 {
    border-color: #4338ca !important; /* indigo-700 */
}

html.night-mode .bg-blue-50 {
    background-color: #172554 !important; /* blue-950 */
}
html.night-mode .text-blue-800 {
    color: #93c5fd !important; /* blue-300 */
}
html.night-mode .border-blue-200 {
    border-color: #1e3a8a !important; /* blue-900 */
}

/* Accent backgrounds */
html.night-mode .bg-indigo-50\/30 {
    background-color: rgba(49, 46, 129, 0.3) !important; /* indigo-900/30 */
}

/* Semi-transparent backgrounds */
html.night-mode .bg-slate-50\/50 {
    background-color: rgba(15, 23, 42, 0.5) !important;
}
html.night-mode .bg-white\/90 {
    background-color: rgba(30, 41, 59, 0.9) !important;
}

/* Text overrides */
html.night-mode .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 */
}
html.night-mode .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}
html.night-mode .text-slate-800,
html.night-mode .text-gray-900,
html.night-mode .text-gray-800,
html.night-mode .text-gray-700,
html.night-mode .text-gray-600,
html.night-mode .text-black {
    color: #e2e8f0 !important; /* slate-200 */
}
html.night-mode .text-slate-400 {
    color: #64748b !important; /* slate-500 */
}

/* Force inline black text (like house numbers) to be light inside cards */
html.night-mode .info-card span[style*="color: black"],
html.night-mode .info-card span[style*="color:black"] {
    color: #f8fafc !important;
}

/* Ensure headings inside dark cards are light */
html.night-mode .bg-white h2,
html.night-mode .bg-white h3 {
    color: #f8fafc !important; /* slate-50 */
}

/* Accent Text */
html.night-mode .text-indigo-600 {
    color: #818cf8 !important; /* indigo-400 */
}
html.night-mode .text-indigo-700 {
    color: #a5b4fc !important; /* indigo-300 */
}

/* Borders */
html.night-mode .border-slate-100,
html.night-mode .border-slate-200,
html.night-mode .border-slate-50 {
    border-color: #334155 !important; /* slate-700 */
}



/* Phase 4 preview: Typography (Prose) Fixes for Terms, Privacy, etc. */
html.night-mode .prose {
    color: #cbd5e1 !important; /* slate-300 */
}
html.night-mode .prose h1,
html.night-mode .prose h2,
html.night-mode .prose h3,
html.night-mode .prose h4,
html.night-mode .prose strong,
html.night-mode .prose a {
    color: #f8fafc !important; /* slate-50 */
}
html.night-mode .prose code,
html.night-mode .prose blockquote {
    color: #e2e8f0 !important; /* slate-200 */
}
html.night-mode .prose ul > li::marker,
html.night-mode .prose ol > li::marker {
    color: #64748b !important; /* slate-500 */
}

/* Phase 3: Chart Pages & Partials */

/* Tabs */
html.night-mode nav#desktop-tabs {
    background-color: transparent !important;
    border-color: transparent !important;
}
html.night-mode .view-tab.bg-white {
    background-color: #1e293b !important; /* slate-800 - matches card */
    color: #f8fafc !important; /* slate-50 */
    border-color: #334155 !important; /* slate-700 */
}
html.night-mode .view-tab.bg-gray-100 {
    background-color: transparent !important; /* matches the slate-900 negative space */
    color: #94a3b8 !important; /* slate-400 */
    border-color: #334155 !important; /* slate-700 */
}
html.night-mode .view-tab:hover {
    color: #ffffff !important;
}

/* Figure Toggle Buttons */
html.night-mode button.bg-slate-800 {
    background-color: #f8fafc !important; /* slate-50 */
    color: #0f172a !important; /* slate-900 */
    border-color: #f8fafc !important;
}
html.night-mode button.bg-slate-800:hover {
    background-color: #e2e8f0 !important;
}
html.night-mode button.bg-gray-100 {
    background-color: #1e293b !important; /* slate-800 */
    color: #94a3b8 !important; /* slate-400 */
    border-color: #334155 !important;
}

/* Chat Interface */
html.night-mode #chat-history,
html.night-mode #transit-chat-history,
html.night-mode #synastry-chat-history,
html.night-mode #zr-chat-history {
    background-color: #0f172a !important; /* slate-900 */
    border-color: #334155 !important;
}
html.night-mode #chat-history .bg-indigo-100,
html.night-mode #transit-chat-history .bg-indigo-100,
html.night-mode #synastry-chat-history .bg-indigo-100,
html.night-mode #zr-chat-history .bg-indigo-100 {
    background-color: #4f46e5 !important; /* indigo-600 - swapping Agent to look like User in Day Mode */
    color: #c7d2fe !important; /* indigo-200 for body text to contrast with white headings */
}

/* Ensure markdown headings/strong tags inside the Agent bubble are also white */
html.night-mode #chat-history .bg-indigo-100 h1,
html.night-mode #chat-history .bg-indigo-100 h2,
html.night-mode #chat-history .bg-indigo-100 h3,
html.night-mode #chat-history .bg-indigo-100 h4,
html.night-mode #chat-history .bg-indigo-100 h5,
html.night-mode #chat-history .bg-indigo-100 h6,
html.night-mode #chat-history .bg-indigo-100 strong,
html.night-mode #transit-chat-history .bg-indigo-100 h1,
html.night-mode #transit-chat-history .bg-indigo-100 h2,
html.night-mode #transit-chat-history .bg-indigo-100 h3,
html.night-mode #transit-chat-history .bg-indigo-100 h4,
html.night-mode #transit-chat-history .bg-indigo-100 h5,
html.night-mode #transit-chat-history .bg-indigo-100 h6,
html.night-mode #transit-chat-history .bg-indigo-100 strong,
html.night-mode #synastry-chat-history .bg-indigo-100 h1,
html.night-mode #synastry-chat-history .bg-indigo-100 h2,
html.night-mode #synastry-chat-history .bg-indigo-100 h3,
html.night-mode #synastry-chat-history .bg-indigo-100 h4,
html.night-mode #synastry-chat-history .bg-indigo-100 h5,
html.night-mode #synastry-chat-history .bg-indigo-100 h6,
html.night-mode #synastry-chat-history .bg-indigo-100 strong,
html.night-mode #zr-chat-history .bg-indigo-100 h1,
html.night-mode #zr-chat-history .bg-indigo-100 h2,
html.night-mode #zr-chat-history .bg-indigo-100 h3,
html.night-mode #zr-chat-history .bg-indigo-100 h4,
html.night-mode #zr-chat-history .bg-indigo-100 h5,
html.night-mode #zr-chat-history .bg-indigo-100 h6,
html.night-mode #zr-chat-history .bg-indigo-100 strong {
    color: #ffffff !important;
}

html.night-mode #chat-history .bg-indigo-600,
html.night-mode #transit-chat-history .bg-indigo-600,
html.night-mode #synastry-chat-history .bg-indigo-600,
html.night-mode #zr-chat-history .bg-indigo-600 {
    background-color: #e0e7ff !important; /* indigo-100 - swapping User to look like Agent in Day Mode */
    color: #3730a3 !important; /* indigo-800 text */
}
html.night-mode #chat-history .bg-white,
html.night-mode #transit-chat-history .bg-white,
html.night-mode #synastry-chat-history .bg-white,
html.night-mode #zr-chat-history .bg-white {
    background-color: #1e293b !important; /* slate-800 */
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}
html.night-mode #user-input,
html.night-mode #transit-user-input,
html.night-mode #synastry-user-input,
html.night-mode #zr-user-input,
html.night-mode select:not(.select-rainbow-exalted):not(.select-rainbow-exalted-expired):not(.bg-indigo-400):not(.bg-red-100):not(.bg-red-50):not(.bg-black):not(.bg-white) {
    background-color: #334155 !important; /* slate-700 */
    border-color: #475569 !important; /* slate-600 */
    color: #f8fafc !important;
}
html.night-mode #user-input::placeholder,
html.night-mode #transit-user-input::placeholder,
html.night-mode #synastry-user-input::placeholder,
html.night-mode #zr-user-input::placeholder {
    color: #cbd5e1 !important; /* slate-300 for high visibility */
    opacity: 1 !important; /* prevent browser from muting placeholders */
}
html.night-mode select:not(.select-rainbow-exalted):not(.select-rainbow-exalted-expired):not(.bg-indigo-400):not(.bg-red-100):not(.bg-red-50):not(.bg-black):not(.bg-white) option {
    background-color: #0f172a;
    color: #f8fafc;
}

/* Phase 4 Admin Level Badges */
html.night-mode select.bg-indigo-400 {
    background-color: #4f46e5 !important; /* indigo-600 */
    color: #ffffff !important;
}
html.night-mode select.bg-red-100 {
    background-color: #0f172a !important; /* slate-900 */
    color: #fca5a5 !important; /* red-300 */
    border-color: #7f1d1d !important; /* red-900 */
}
html.night-mode select.bg-red-50 {
    background-color: #450a0a !important; /* red-950 */
    color: #fca5a5 !important; /* red-300 */
    border-color: #fca5a5 !important;
}


/* ----------------------------------------------------- */
/* Primary Buttons Inversion (Black/Dark -> Light)       */
/* ----------------------------------------------------- */

/* Normal dark buttons */
html.night-mode button.bg-black,
html.night-mode button.bg-slate-900,
html.night-mode a.bg-black,
html.night-mode a.bg-slate-900,
html.night-mode span.bg-black {
    background-color: #f8fafc !important; /* slate-50 */
    color: #0f172a !important; /* slate-900 */
}

/* Red action buttons (e.g. Delete) and alerts */
html.night-mode button.bg-red-50,
html.night-mode div.bg-red-50 {
    background-color: #450a0a !important; /* red-950 */
    border-color: #7f1d1d !important; /* red-900 */
    color: #fca5a5 !important; /* red-300 */
}
html.night-mode button.hover\:bg-red-100:hover {
    background-color: #7f1d1d !important; /* red-900 */
}

/* Success Alerts */
html.night-mode div.bg-emerald-50 {
    background-color: #022c22 !important; /* emerald-950 */
    border-color: #064e3b !important; /* emerald-900 */
    color: #6ee7b7 !important; /* emerald-300 */
}
html.night-mode .text-emerald-600,
html.night-mode .text-emerald-700 {
    color: #6ee7b7 !important; /* emerald-300 */
}

/* Warning/Error Icons */
html.night-mode .bg-amber-100 {
    background-color: #451a03 !important; /* amber-950 */
}
html.night-mode .text-amber-600 {
    color: #fcd34d !important; /* amber-300 */
}

/* Rainbow border buttons (use ::before for background) */
html.night-mode .btn-rainbow-border {
    color: #0f172a !important;
}
html.night-mode .btn-rainbow-border::before {
    background-color: #f8fafc !important;
}
html.night-mode .btn-rainbow-border:hover::before {
    background-color: #e2e8f0 !important;
}

/* Force white SVGs/text to invert inside these buttons */
html.night-mode button.bg-black .text-white,
html.night-mode button.bg-slate-900 .text-white,
html.night-mode a.bg-black .text-white,
html.night-mode a.bg-slate-900 .text-white,
html.night-mode .btn-rainbow-border .text-white {
    color: #0f172a !important;
}

/* Hover states for normal dark buttons */
html.night-mode button.hover\:bg-gray-900:hover,
html.night-mode button.hover\:bg-gray-800:hover,
html.night-mode button.hover\:bg-slate-800:hover,
html.night-mode button.hover\:bg-black:hover,
html.night-mode a.hover\:bg-gray-900:hover,
html.night-mode a.hover\:bg-gray-800:hover,
html.night-mode a.hover\:bg-slate-800:hover,
html.night-mode a.hover\:bg-black:hover {
    background-color: #e2e8f0 !important; /* slate-200 */
    color: #0f172a !important;
}

/* Other borders */
html.night-mode .border-gray-200,
html.night-mode .border-gray-300,
html.night-mode .border-slate-100,
html.night-mode .border-slate-200,
html.night-mode .border-slate-300 {
    border-color: #334155 !important; /* slate-700 */
}

/* Row and Nav Item Hovers */
html.night-mode .hover\:bg-slate-50:hover,
html.night-mode .hover\:bg-gray-50:hover,
html.night-mode .hover\:bg-slate-100:hover,
html.night-mode .hover\:bg-gray-100:hover {
    background-color: #334155 !important; /* slate-700 - distinctive from slate-800 containers */
}
html.night-mode .hover\:bg-slate-200:hover {
    background-color: #475569 !important; /* slate-600 (used for +/- stepper buttons) */
}
html.night-mode .text-gray-500,
html.night-mode .text-slate-500 {
    color: #94a3b8 !important; /* slate-400 */
}
html.night-mode .text-gray-400,
html.night-mode .text-slate-400 {
    color: #64748b !important; /* slate-500 */
}
html.night-mode .text-gray-600,
html.night-mode .text-slate-600 {
    color: #cbd5e1 !important; /* slate-300 */
}
html.night-mode .hover\:text-gray-600:hover,
html.night-mode .hover\:text-slate-600:hover {
    color: #f8fafc !important; /* slate-50 - bright white on hover */
}
html.night-mode .group:hover .group-hover\:text-indigo-600,
html.night-mode .hover\:text-indigo-600:hover,
html.night-mode .focus\:text-indigo-600:focus {
    color: #818cf8 !important; /* indigo-400 */
}
html.night-mode .text-gray-700,
html.night-mode .text-slate-700,
html.night-mode .text-gray-800,
html.night-mode .text-slate-800 {
    color: #e2e8f0 !important; /* slate-200 */
}


/* My Account - Membership Offer Cards */
html.night-mode .bg-sky-50\/50 {
    background-color: rgba(14, 165, 233, 0.15) !important; /* sky-500 @ 15% */
    border-color: #0369a1 !important; /* sky-700 */
}
html.night-mode .border-sky-200 {
    border-color: #0369a1 !important; /* sky-700 */
}
html.night-mode .text-sky-600 {
    color: #38bdf8 !important; /* sky-400 */
}

html.night-mode .bg-indigo-50\/50,
html.night-mode .bg-indigo-50\/60 {
    background-color: rgba(99, 102, 241, 0.15) !important; /* indigo-500 @ 15% */
    border-color: #4338ca !important; /* indigo-700 */
}
html.night-mode .border-indigo-400 {
    border-color: #4338ca !important; /* indigo-700 */
}

/* Dashboard Chart Anti-aliasing Fix (Removes inline drop-shadows on glyphs) */
html.night-mode #zodiacal-chart .trace-text,
html.night-mode #dashboard-chart .trace-text {
    text-shadow: none !important;
}

/* True Black Shadows / Glows (Fixes invisible shadows on black background) */
html.night-mode .shadow-sm { box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.05) !important; }
html.night-mode .shadow { box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06) !important; }
html.night-mode .shadow-md { box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06) !important; }
html.night-mode .shadow-lg { box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05) !important; }
html.night-mode .shadow-xl { box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04) !important; }
html.night-mode .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.25) !important; }

/* Upgrade Pro Modal Polish */
html.night-mode #upgrade-modal-message {
    color: #c7d2fe !important; /* indigo-200 */
}
html.night-mode #upgrade-modal .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.2) !important; color: #818cf8 !important; } /* indigo-400 */
html.night-mode #upgrade-modal .bg-rose-50 { background-color: rgba(244, 63, 94, 0.2) !important; color: #fb7185 !important; } /* rose-400 */
html.night-mode #upgrade-modal .bg-purple-50 { background-color: rgba(168, 85, 247, 0.2) !important; color: #c084fc !important; } /* purple-400 */
html.night-mode #upgrade-modal .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; } /* emerald-400 */


/* Restore removed rule */
html.night-mode #sky-today-chart text { filter: none !important; }

/* Forms & Checkboxes Fix */
html.night-mode input[type="checkbox"] { background-color: #0f172a !important; border-color: #334155 !important; color: #6366f1 !important; }

/* Keep ZR Legend text dark since the background image is not inverted */
html.night-mode .aspect-\[682\/491\] > div { color: #374151 !important; }

/* Sun/Moon Toggle Button SVG Swap */
.icon-sun { display: block; }
.icon-moon { display: none; }

html.night-mode .icon-sun { display: none; }
html.night-mode .icon-moon { display: block; }

@media (hover: hover) {
    .dark-mode-btn:hover .icon-sun { display: none; }
    .dark-mode-btn:hover .icon-moon { display: block; }

    html.night-mode .dark-mode-btn:hover .icon-sun { display: block !important; }
    html.night-mode .dark-mode-btn:hover .icon-moon { display: none !important; }

    /* Toggle Button Container Hover */
    .dark-mode-btn:hover {
        background-color: #eef2ff !important; /* indigo-50 */
    }
    html.night-mode .dark-mode-btn:hover {
        background-color: #1e293b !important; /* slate-800 */
    }
}
html.night-mode .dark-mode-btn {
    background-color: transparent !important;
}

/* Day Mode Amber Nav Highlights to Night Mode Indigo (Moon) */
html.night-mode #nav-links a:hover,
html.night-mode #nav-links button:hover,
html.night-mode #mobile-menu a:hover,
html.night-mode #mobile-menu button:hover,
html.night-mode #sub-nav a:hover,
html.night-mode .group:hover .group-hover\:text-amber-500 {
    color: #818cf8 !important; /* indigo-400 */
}

/* Active state */
html.night-mode #nav-links a.text-amber-600,
html.night-mode #mobile-menu a.text-amber-600 {
    color: #a5b4fc !important; /* indigo-300 */
}