/* ============================================================================= DARK MODE - CSS custom properties override Activated by adding class 'dark-mode' to ============================================================================= */ body.dark-mode { --bg-primary: #0B0F14; --bg-secondary: #1a1a2e; --bg-card: #1E2330; --bg-input: #252B3B; --border-color: #2D3548; --border-light: #374151; --text-primary: #E5E7EB; --text-secondary: #D1D5DB; --text-muted: #9CA3AF; --accent: #F59E0B; --accent-hover: #D97706; --shadow-color: rgba(0,0,0,0.4); background-color: var(--bg-primary); color: var(--text-primary); } /* Base overrides */ body.dark-mode .container { color: var(--text-primary); } /* Cards */ body.dark-mode .feature-card, body.dark-mode .stat-card, body.dark-mode .metric-card, body.dark-mode .model-card, body.dark-mode .wizard, body.dark-mode .main-content > .container > div[style*="background: white"], body.dark-mode .card, body.dark-mode .result-card { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } body.dark-mode .feature-card h3, body.dark-mode .stat-card .stat-value, body.dark-mode .metric-value, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: var(--text-primary); } body.dark-mode .feature-card p, body.dark-mode .stat-card .stat-label, body.dark-mode .metric-label, body.dark-mode p { color: var(--text-secondary); } /* Navbar */ body.dark-mode .navbar { background: #0a0d12; border-bottom-color: var(--border-color); } /* Form elements */ body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { border-color: var(--accent); } /* Table */ body.dark-mode table { color: var(--text-primary); } body.dark-mode th { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } body.dark-mode td { border-color: var(--border-color); } body.dark-mode tr:hover { background: var(--bg-input); } /* Wizard steps */ body.dark-mode .steps .step { background: var(--bg-input); color: var(--text-secondary); } body.dark-mode .steps .step.active { background: var(--accent); color: #0B0F14; } body.dark-mode .steps .step.completed { background: #92400E; color: #FDE68A; } /* Tabs */ body.dark-mode .tabs { background: var(--bg-secondary); border-bottom-color: var(--border-color); } body.dark-mode .tab { color: var(--text-secondary); } body.dark-mode .tab:hover { background: var(--bg-input); color: var(--text-primary); } body.dark-mode .tab.active { background: var(--bg-card); color: var(--accent); } /* Info panels */ body.dark-mode .info-panel { background: var(--bg-secondary); border-color: var(--border-color); } /* Alerts */ body.dark-mode .alert-info { background: #1E293B; border-color: #1E40AF; color: #93C5FD; } body.dark-mode .alert-success { background: #14291A; border-color: #166534; color: #86EFAC; } body.dark-mode .alert-warning { background: #271E0A; border-color: #92400E; color: #FDE68A; } body.dark-mode .alert-error, body.dark-mode .alert-danger { background: #2A1215; border-color: #991B1B; color: #FCA5A5; } /* Page header (dark-on-dark keeps as-is since already dark) */ body.dark-mode .page-header, body.dark-mode header { background: #0a0d12; border-color: var(--border-color); } /* Wizard body / tab content */ body.dark-mode .wizard-body, body.dark-mode .wizard-header, body.dark-mode .tab-content { background: var(--bg-card); } body.dark-mode .wizard-header { border-bottom-color: var(--border-color); } /* Footer */ body.dark-mode .site-footer { background: #0a0d12; border-top-color: var(--border-color); } body.dark-mode .site-footer a { color: var(--text-secondary); } body.dark-mode .site-footer a:hover { color: var(--accent); } /* Breadcrumbs */ body.dark-mode .breadcrumbs { background: var(--bg-secondary); border-bottom-color: var(--border-color); } body.dark-mode .breadcrumbs a { color: var(--text-secondary); } /* Buttons - keep primary as-is, adjust secondary */ body.dark-mode .btn-secondary, body.dark-mode button[style*="background: transparent"] { border-color: var(--border-light); color: var(--text-primary); } /* Notification toast */ body.dark-mode .notification-toast { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } /* Scrollbar */ body.dark-mode ::-webkit-scrollbar { width: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: var(--bg-primary); } body.dark-mode ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #4B5563; } /* Resource links on homepage */ body.dark-mode .resource-link { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } body.dark-mode .resource-link:hover { border-color: var(--accent); background: var(--bg-input); } /* Section headers */ body.dark-mode .section-group-header { border-bottom-color: var(--border-color); } /* Recent activity */ body.dark-mode .recent-activity { background: var(--bg-secondary); border-color: var(--border-color); } body.dark-mode .recent-activity li { background: var(--bg-card); color: var(--text-primary); } /* Code elements */ body.dark-mode code { background: var(--bg-input); color: #FDE68A; } /* Dropdown */ body.dark-mode .navbar-dropdown { background: var(--bg-card); border-color: var(--border-color); } body.dark-mode .navbar-link:hover { background: var(--bg-input); } /* ============================================================================= PAGE-SPECIFIC DARK MODE OVERRIDES ============================================================================= */ /* ---- Generic page-level backgrounds ---- */ body.dark-mode { background-color: var(--bg-primary) !important; } body.dark-mode .main-content, body.dark-mode .solar-wrapper, body.dark-mode .page-wrapper { background: var(--bg-primary); } /* ---- Cards, panels, containers (global) ---- */ body.dark-mode .card, body.dark-mode .wizard-container, body.dark-mode .wizard, body.dark-mode .upload-area, body.dark-mode .result-card, body.dark-mode .info-panel, body.dark-mode .filters-bar, body.dark-mode .chart-card, body.dark-mode .plot-container, body.dark-mode .insight-box { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary); } /* ---- Tabs ---- */ body.dark-mode .tabs-nav, body.dark-mode .period-tab, body.dark-mode .tab-btn { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-color); } body.dark-mode .tab-btn.active, body.dark-mode .period-tab.active { background: var(--bg-card); color: var(--accent); } /* ---- My Data page ---- */ body.dark-mode .file-card { background: var(--bg-card) !important; border-color: var(--border-color) !important; } body.dark-mode .file-card:hover { border-color: var(--accent) !important; } body.dark-mode .file-card.selected { background: #2A2215 !important; border-color: var(--accent) !important; } body.dark-mode .file-name { color: var(--text-primary) !important; } body.dark-mode .file-meta { color: var(--text-secondary) !important; } body.dark-mode .toolbar { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; } body.dark-mode .tag { background: var(--bg-input) !important; color: var(--text-secondary) !important; } body.dark-mode .empty-state { color: var(--text-secondary) !important; } body.dark-mode .breadcrumb { background: var(--bg-secondary); color: var(--text-secondary); } /* ---- Modals ---- */ body.dark-mode .modal-content, body.dark-mode .modal-dialog, body.dark-mode [class*="modal"] > div[style*="background: white"], body.dark-mode [class*="modal"] > div[style*="background:#fff"] { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode .modal-header { border-bottom-color: var(--border-color) !important; } body.dark-mode .modal-footer { border-top-color: var(--border-color) !important; } /* ---- Prediction page ---- */ body.dark-mode .model-card { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode .model-card:hover { border-color: var(--accent) !important; } body.dark-mode .model-card.selected { background: #2A2215 !important; border-color: var(--accent) !important; } body.dark-mode .stats-grid .stat-card { background: var(--bg-secondary) !important; } body.dark-mode .upload-area.dragover { background: #2A2215 !important; border-color: var(--accent) !important; } /* ---- Training page ---- */ body.dark-mode .tag.sklearn, body.dark-mode .tag.pytorch, body.dark-mode .tag.tensorflow { background: var(--bg-input) !important; color: var(--accent) !important; } body.dark-mode .checkbox-item { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode .metric { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* ---- Data Exploration page ---- */ body.dark-mode .stat-box { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode .type-badge { background: var(--bg-input) !important; color: var(--text-secondary) !important; } body.dark-mode .issue-item { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; } body.dark-mode .progress-bar { background: var(--bg-input) !important; } /* ---- Dashboard page ---- */ body.dark-mode .activity-icon { opacity: 0.85; } body.dark-mode .activity-icon.training, body.dark-mode .activity-icon.prediction, body.dark-mode .activity-icon.simulation { background: var(--bg-input) !important; } body.dark-mode .status-badge { opacity: 0.85; } /* ---- Model Comparison page ---- */ body.dark-mode .model-item { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode .model-item.selected { background: #2A2215 !important; border-color: var(--accent) !important; } body.dark-mode .metric-cell.best { background: #14291A !important; color: #86EFAC !important; } body.dark-mode .metric-cell.worst { background: #2A1215 !important; color: #FCA5A5 !important; } body.dark-mode .comparison-table th { background: var(--bg-secondary) !important; } /* ---- Solar Analysis page ---- */ body.dark-mode .map-controls, body.dark-mode .map-sidebar { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } body.dark-mode .wizard-step.completed { background: #14291A !important; color: #86EFAC !important; } /* ---- Activity page ---- */ body.dark-mode .activity-timeline::before { background-color: var(--border-color) !important; } body.dark-mode .date-header::before { background-color: var(--border-color) !important; } body.dark-mode .activity-icon.upload { background: #14291A !important; color: #86EFAC !important; } body.dark-mode .activity-icon.train { background: #2A2215 !important; color: #FDE68A !important; } body.dark-mode .activity-icon.predict { background: #1E293B !important; color: #93C5FD !important; } body.dark-mode .activity-icon.simulate { background: #1E1B2E !important; color: #C4B5FD !important; } body.dark-mode .activity-icon.delete { background: #2A1215 !important; color: #FCA5A5 !important; } body.dark-mode .activity-icon.export { background: #2A1225 !important; color: #F9A8D4 !important; } /* ---- Inline style overrides (for templates with heavy inline backgrounds) ---- */ body.dark-mode [style*="background: white"], body.dark-mode [style*="background:white"], body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background: #FFF"], body.dark-mode [style*="background: #ffffff"] { background: var(--bg-card) !important; color: var(--text-primary) !important; } body.dark-mode [style*="background: #f7fafc"], body.dark-mode [style*="background:#f7fafc"], body.dark-mode [style*="background: #f8f9fa"], body.dark-mode [style*="background: #F8FAFC"], body.dark-mode [style*="background: #f5f7fa"], body.dark-mode [style*="background: #f5f5f5"] { background: var(--bg-secondary) !important; } body.dark-mode [style*="border: 1px solid #e2e8f0"], body.dark-mode [style*="border-color: #e2e8f0"], body.dark-mode [style*="border: 2px solid #e2e8f0"] { border-color: var(--border-color) !important; } body.dark-mode [style*="color: #718096"] { color: var(--text-secondary) !important; } body.dark-mode [style*="color: #4a5568"], body.dark-mode [style*="color: #2d3748"] { color: var(--text-primary) !important; } /* ---- Summary details ---- */ body.dark-mode summary { color: var(--text-secondary) !important; } body.dark-mode details { border-color: var(--border-color) !important; } /* ---- Select/option dark mode ---- */ body.dark-mode option { background: var(--bg-card); color: var(--text-primary); }