/* * VA-32 #28 (2026-05-25) — Dark mode color overrides. * * Activated by adding `.va-dark-mode` to (done by dark-mode.js). * Targets the most visible surfaces: body, cards, panels, tables, forms, * Bootstrap alerts, and the project-management modules. * * Strategy: re-skin neutrals (whites/blacks/grays) — leave brand accent * colors alone so the navy/orange identity stays the same. */ body.va-dark-mode { background: #0f172a !important; color: #e2e8f0 !important; } body.va-dark-mode .admin-page-title, body.va-dark-mode .admin-page-subtitle, body.va-dark-mode .admin-content-header, body.va-dark-mode h1, body.va-dark-mode h2, body.va-dark-mode h3, body.va-dark-mode h4, body.va-dark-mode h5 { color: #f1f5f9 !important; } /* Generic cards / panels / sections */ body.va-dark-mode .admin-panel, body.va-dark-mode .admin-card, body.va-dark-mode .card, body.va-dark-mode .mt-card, body.va-dark-mode .mr-card, body.va-dark-mode .tv-card, body.va-dark-mode .cd-section, body.va-dark-mode .mt-kpi, body.va-dark-mode .kpi { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } body.va-dark-mode .admin-panel-header { background: #0f172a !important; color: #f4a261 !important; border-color: #334155 !important; } body.va-dark-mode .admin-panel-body { color: #cbd5e1 !important; } /* Tables */ body.va-dark-mode .table, body.va-dark-mode .admin-table { color: #e2e8f0 !important; --bs-table-bg: transparent; --bs-table-color: #e2e8f0; } body.va-dark-mode .table thead th, body.va-dark-mode .admin-table thead th, body.va-dark-mode .mt-table thead th, body.va-dark-mode .mr-table thead th { background: #0f172a !important; color: #f4a261 !important; border-color: #334155 !important; } body.va-dark-mode .table tbody td, body.va-dark-mode .admin-table tbody td { border-color: #334155 !important; background: transparent !important; } body.va-dark-mode .table-hover tbody tr:hover, body.va-dark-mode tr:hover { background: #25344a !important; } /* Forms */ body.va-dark-mode .form-control, body.va-dark-mode .form-select, body.va-dark-mode input, body.va-dark-mode select, body.va-dark-mode textarea { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } body.va-dark-mode .form-control:focus, body.va-dark-mode .form-select:focus { background: #1e293b !important; border-color: #427691 !important; color: #fff !important; box-shadow: 0 0 0 0.2rem rgba(66,118,145,.30) !important; } body.va-dark-mode .form-label, body.va-dark-mode label { color: #cbd5e1 !important; } body.va-dark-mode ::placeholder { color: #64748b !important; } /* Buttons — leave colored ones alone, only re-skin secondary/outline neutrals */ body.va-dark-mode .btn-light, body.va-dark-mode .btn-outline-secondary { background: #334155 !important; color: #f1f5f9 !important; border-color: #475569 !important; } body.va-dark-mode .btn-outline-primary { color: #93c5fd !important; border-color: #3b82f6 !important; } /* Bootstrap alerts (toned down for dark surfaces) */ body.va-dark-mode .alert-success { background: #064e3b !important; color: #d1fae5 !important; border-color: #065f46 !important; } body.va-dark-mode .alert-danger, body.va-dark-mode .alert-error { background: #7f1d1d !important; color: #fee2e2 !important; border-color: #991b1b !important; } body.va-dark-mode .alert-warning { background: #78350f !important; color: #fed7aa !important; border-color: #92400e !important; } body.va-dark-mode .alert-info { background: #1e3a8a !important; color: #dbeafe !important; border-color: #1e40af !important; } /* Sidebar */ body.va-dark-mode .admin-sidebar, body.va-dark-mode .admin-side-nav { background: #0b1220 !important; border-color: #1e293b !important; } body.va-dark-mode .admin-menu-item { color: #cbd5e1 !important; } body.va-dark-mode .admin-menu-item:hover, body.va-dark-mode .admin-menu-item.active { background: #1e293b !important; color: #f4a261 !important; } /* Modals + overlays the app uses */ body.va-dark-mode .va-pd-card, body.va-dark-mode .sf-menu, body.va-dark-mode #mention-modal-overlay .mention-modal-card { background: #1e293b !important; color: #e2e8f0 !important; } body.va-dark-mode .va-pd-item:hover { background: #25344a !important; color: #f4a261 !important; } body.va-dark-mode .va-pd-group-head { background: #0f172a !important; color: #cbd5e1 !important; } body.va-dark-mode .va-pd-foot { background: #0f172a !important; color: #94a3b8 !important; } /* Hero / banner cards keep their color identity, just darken the surface */ body.va-dark-mode .hero-card { color: #fff !important; } /* Borders + dividers */ body.va-dark-mode hr, body.va-dark-mode .border-top, body.va-dark-mode .border-bottom { border-color: #334155 !important; } /* Plain links inside body */ body.va-dark-mode a { color: #93c5fd; } body.va-dark-mode a:hover { color: #f4a261; } /* Subtle bits */ body.va-dark-mode .text-muted, body.va-dark-mode .text-secondary { color: #94a3b8 !important; } body.va-dark-mode .small { color: #cbd5e1; } /* Bootstrap badges keep their fill — just tighten outline ones */ body.va-dark-mode .badge.bg-light { background: #334155 !important; color: #f1f5f9 !important; } /* Scrollbar */ body.va-dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } body.va-dark-mode ::-webkit-scrollbar-track { background: #0f172a; } body.va-dark-mode ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; } body.va-dark-mode ::-webkit-scrollbar-thumb:hover { background: #475569; }