/* =========================================
   Jetpedia — Shared Dark Mode Overrides
   ========================================= */

/* Body */
html.dark body {
    background-color: #0c1220;
    color: #d0d5dd;
}

/* Navigation */
html.dark nav {
    background: rgba(12, 18, 32, 0.85) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

html.dark nav .bg-primary-container {
    background: #1a2b48 !important;
    color: #fff !important;
}
html.dark #mobile-menu,
html.dark #mobile-menu-cat,
html.dark #mobile-menu-comp,
html.dark #mobile-menu-det {
    background: rgba(12, 18, 32, 0.95) !important;
}

/* Stats section (index) */
html.dark #stats-section {
    background: #111827 !important;
    border-color: rgba(255,255,255,0.06) !important;
}
html.dark #stats-section .stat-label { color: #8896ab !important; }
html.dark #stats-section .stat-number { color: #e2e8f0 !important; }

/* Surface backgrounds */
html.dark .bg-surface {
    background: #0c1220 !important;
}
html.dark .bg-surface-container-low {
    background: #111827 !important;
}

/* Cards */
html.dark .bg-surface-container-lowest {
    background: #1a2233 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .bg-surface-container-lowest h3,
html.dark .bg-surface-container-lowest .font-headline {
    color: #e2e8f0 !important;
}
html.dark .bg-surface-container-lowest .text-primary { color: #b6c7eb !important; }
html.dark .bg-surface-container-lowest .text-secondary { color: #8896ab !important; }
html.dark .bg-surface-container-lowest .text-on-surface { color: #d0d5dd !important; }

/* Surface containers */
html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest {
    background: #1e2a3d !important;
    color: #d0d5dd !important;
}

/* Text color overrides */
html.dark .text-primary { color: #b6c7eb; }
html.dark .text-secondary { color: #8896ab !important; }
html.dark .text-on-surface { color: #d0d5dd !important; }
html.dark .text-on-surface-variant { color: #8896ab !important; }

/* Glass panel (newsletter) */
html.dark .glass-panel,
html.dark .glass-card {
    background: rgba(26, 34, 51, 0.8) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark .glass-panel h2,
html.dark .glass-card h2 { color: #e2e8f0 !important; }
html.dark .glass-panel p,
html.dark .glass-card p { color: #8896ab !important; }
html.dark .glass-panel input,
html.dark .glass-card input {
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* Forms and inputs */
html.dark input,
html.dark select,
html.dark textarea {
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #5a6578 !important;
}

/* Buttons */
html.dark .bg-primary {
    background: #1a2b48 !important;
}
html.dark .bg-primary-container {
    background: #0f1d2e !important;
}

/* Borders */
html.dark .border-outline-variant\/10,
html.dark .border-outline-variant\/20 {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Footer (already dark, no changes needed) */

/* Dark mode toggle button */
.dark-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}
.dark-toggle:hover { background: rgba(128,128,128,0.15); }
.dark-toggle .material-symbols-outlined { font-size: 20px; }

/* Data strips (detail page) */
html.dark .data-strip {
    background: #1a2233 !important;
}

/* Comparison page spec rows */
html.dark .spec-winner {
    background: rgba(182, 199, 235, 0.1) !important;
}

/* White backgrounds in detail page */
html.dark .bg-white,
html.dark .bg-white\/80,
html.dark .bg-white\/30 {
    background: #1a2233 !important;
}
html.dark .bg-white\/80 {
    background: rgba(26, 34, 51, 0.9) !important;
}

/* Comparison table header area */
html.dark #comparison-table {
    background: #1a2233 !important;
    border-color: rgba(255,255,255,0.08) !important;
}