/*
* Dark mode overrides (opt-in via `html.dark-theme`)
*
* Enabled site-wide: every page extending base.html / admin_base.html,
* the standalone auth pages, and admin/users.html. The theme class is
* applied by an inline script in each base template's (before
* first paint, no FOUC) and toggled by static/js/theme_toggle.js.
* Palette matches node_common.css
* (slate: #0f172a / #1e293b / #334155 / #94a3b8 / #e2e8f0).
*/
html.dark-theme {
color-scheme: dark;
}
html.dark-theme body {
background-color: #0b1120;
color: #e2e8f0;
}
/* ------------------------------------------------------------------
* Navbar dropdowns (header bar itself is already dark)
* ------------------------------------------------------------------ */
html.dark-theme .nav-dropdown-menu {
background-color: #1e293b;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
html.dark-theme .nav-dropdown-item {
color: #d1d5db;
}
html.dark-theme .nav-dropdown-item:hover {
background-color: #334155;
}
html.dark-theme .user-dropdown {
background-color: #1e293b;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
html.dark-theme .user-dropdown-header {
border-bottom-color: #334155;
}
html.dark-theme .user-dropdown-name {
color: #e2e8f0;
}
html.dark-theme .user-dropdown-email {
color: #94a3b8;
}
html.dark-theme .dropdown-item {
color: #d1d5db;
}
html.dark-theme .dropdown-item:hover {
background-color: #334155;
}
html.dark-theme .dropdown-divider {
background-color: #334155;
}
html.dark-theme .logout-btn:hover {
background-color: #450a0a;
}
/* ------------------------------------------------------------------
* Main content shell
* ------------------------------------------------------------------ */
html.dark-theme .main-content {
background-color: #0f172a;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
html.dark-theme .main-content h2,
html.dark-theme .main-content h3 {
color: #e2e8f0;
}
html.dark-theme .main-content hr {
border-top-color: #334155;
}
/* ------------------------------------------------------------------
* Filters (main.css .filters markup used by node-summary)
* ------------------------------------------------------------------ */
html.dark-theme .filter-col label {
color: #94a3b8;
}
html.dark-theme .filter-col input,
html.dark-theme .filter-col select {
background-color: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
html.dark-theme .filter-col input:focus,
html.dark-theme .filter-col select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
/* Inline-styled hint text (node-summary "Consolidate" note) */
html.dark-theme .filter-col small {
color: #94a3b8 !important;
}
html.dark-theme .advanced-filters {
background-color: #1e293b;
}
html.dark-theme .advanced-filters summary {
color: #e2e8f0;
}
/* Native select dropdown list (Firefox needs this explicitly) */
html.dark-theme select option,
html.dark-theme select optgroup {
background-color: #1e293b;
color: #e2e8f0;
}
/* ------------------------------------------------------------------
* Metric cards (node-summary)
* ------------------------------------------------------------------ */
html.dark-theme .metric-card {
background-color: #1e293b;
}
html.dark-theme .metric-card h4 {
color: #94a3b8;
}
html.dark-theme .metric-value {
color: #e2e8f0;
}
/* ------------------------------------------------------------------
* Help section (main.css light variant; node_common.css pages are
* already dark — these values match, so no visual change there)
* ------------------------------------------------------------------ */
html.dark-theme .help-section {
background-color: #1e293b;
border-left-color: #3b82f6;
}
html.dark-theme .help-section summary {
color: #3b82f6;
}
html.dark-theme .help-content {
color: #94a3b8;
}
html.dark-theme .help-content h4 {
color: #e2e8f0;
}
/* ------------------------------------------------------------------
* DataTables (jquery.dataTables.min.css overrides; the paginate
* button color rules ship with !important, so we must match that)
* ------------------------------------------------------------------ */
html.dark-theme table.dataTable {
color: #e2e8f0;
}
html.dark-theme table.dataTable thead th,
html.dark-theme table.dataTable thead td {
background-color: #1e293b;
color: #94a3b8;
border-bottom-color: #475569;
}
html.dark-theme table.dataTable tfoot th,
html.dark-theme table.dataTable tfoot td {
border-top-color: #475569;
}
html.dark-theme table.dataTable.row-border tbody th,
html.dark-theme table.dataTable.row-border tbody td,
html.dark-theme table.dataTable.display tbody th,
html.dark-theme table.dataTable.display tbody td {
border-top-color: #334155;
}
html.dark-theme table.dataTable.stripe tbody tr.odd,
html.dark-theme table.dataTable.display tbody tr.odd {
background-color: #1e293b;
}
/* Sorted-column shading (default theme uses light grays) */
html.dark-theme table.dataTable.display tbody tr > .sorting_1,
html.dark-theme table.dataTable.order-column tbody tr > .sorting_1 {
background-color: rgba(59, 130, 246, 0.06);
}
html.dark-theme table.dataTable.display tbody tr.odd > .sorting_1,
html.dark-theme table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: rgba(59, 130, 246, 0.10);
}
html.dark-theme table.dataTable.hover tbody tr:hover,
html.dark-theme table.dataTable.display tbody tr:hover,
html.dark-theme table.display tbody tr:hover {
background-color: rgba(59, 130, 246, 0.15);
}
/* Sort direction arrows are black PNG data-URIs — invert for dark bg */
html.dark-theme table.dataTable thead .sorting:before,
html.dark-theme table.dataTable thead .sorting:after,
html.dark-theme table.dataTable thead .sorting_asc:before,
html.dark-theme table.dataTable thead .sorting_asc:after,
html.dark-theme table.dataTable thead .sorting_desc:before,
html.dark-theme table.dataTable thead .sorting_desc:after,
html.dark-theme table.dataTable thead .sorting_asc_disabled:before,
html.dark-theme table.dataTable thead .sorting_asc_disabled:after,
html.dark-theme table.dataTable thead .sorting_desc_disabled:before,
html.dark-theme table.dataTable thead .sorting_desc_disabled:after {
filter: invert(1);
}
html.dark-theme .dataTables_wrapper .dataTables_length,
html.dark-theme .dataTables_wrapper .dataTables_filter,
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_processing,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
color: #94a3b8;
}
html.dark-theme .dataTables_wrapper .dataTables_length select,
html.dark-theme .dataTables_wrapper .dataTables_filter input {
background-color: #1e293b;
border: 1px solid #334155;
color: #e2e8f0;
}
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
color: #d1d5db !important;
}
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #ffffff !important;
border: 1px solid #3b82f6;
background: #3b82f6;
}
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #e2e8f0 !important;
border: 1px solid #475569;
background: #334155;
}
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: #64748b !important;
border: 1px solid transparent;
background: transparent;
}
/* ------------------------------------------------------------------
* Select2 multi-selects (node-summary zone/type/region filters)
* ------------------------------------------------------------------ */
html.dark-theme .select2-container--default .select2-selection--multiple {
background-color: #1e293b;
border: 1px solid #334155;
}
html.dark-theme .select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #3b82f6;
}
html.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #334155;
border-color: #475569;
color: #e2e8f0;
}
html.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #94a3b8;
border-right-color: #475569;
}
html.dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
background-color: transparent;
color: #e2e8f0;
}
html.dark-theme .select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
color: #e2e8f0;
}
html.dark-theme .select2-dropdown {
background-color: #1e293b;
border-color: #334155;
}
html.dark-theme .select2-container--default .select2-results__option {
color: #d1d5db;
}
html.dark-theme .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #3b82f6;
color: #ffffff;
}
html.dark-theme .select2-container--default .select2-results__option--selected {
background-color: #334155;
}
html.dark-theme .select2-container--default .select2-search--dropdown .select2-search__field {
background-color: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
/* ------------------------------------------------------------------
* Misc shell pieces
* ------------------------------------------------------------------ */
html.dark-theme footer {
color: #94a3b8;
}
html.dark-theme .spinner {
border-color: #334155;
border-top-color: #3b82f6;
}
/* ------------------------------------------------------------------
* Theme toggle button (injected into the navbar by theme_toggle.js)
* ------------------------------------------------------------------ */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.6rem;
margin-right: 0.75rem;
background: transparent;
border: 1px solid #374151;
border-radius: 6px;
color: #ffffff;
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
.theme-toggle:hover {
background-color: #374151;
border-color: #4b5563;
}
@media (max-width: 768px) {
.theme-toggle {
margin-right: 0;
width: 100%;
}
}
/* ==================================================================
* v2 — site-wide rollout (base.html / admin_base.html / auth pages)
* ================================================================== */
/* ------------------------------------------------------------------
* main.css leftovers
* ------------------------------------------------------------------ */
html.dark-theme .sidebar {
background-color: #1e293b;
}
html.dark-theme .sidebar h3 {
color: #e2e8f0;
}
html.dark-theme .nav-card {
background-color: #1e293b;
border-color: #334155;
}
html.dark-theme .nav-card h4 {
color: #e2e8f0;
}
html.dark-theme .nav-card p {
color: #94a3b8;
}
html.dark-theme .chart-container {
background-color: #1e293b;
}
html.dark-theme .info-warning {
background-color: rgba(245, 158, 11, 0.13);
color: #fbbf24;
}
html.dark-theme .info-info {
background-color: rgba(59, 130, 246, 0.13);
color: #93c5fd;
}
html.dark-theme .badge-danger {
background-color: rgba(239, 68, 68, 0.15);
color: #f87171;
}
html.dark-theme .badge-info {
background-color: rgba(59, 130, 246, 0.15);
color: #93c5fd;
}
html.dark-theme .badge-secondary {
background-color: #334155;
color: #cbd5e1;
}
html.dark-theme .empty-state {
background-color: #1e293b;
border-color: #475569;
color: #94a3b8;
}
html.dark-theme .error-state {
background-color: rgba(239, 68, 68, 0.10);
border-color: rgba(239, 68, 68, 0.4);
color: #f87171;
}
/* Risk-category metric cards: light gradient -> translucent dark */
html.dark-theme .metric-card.metric-extreme {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.20) 0%, #1e293b 100%);
}
html.dark-theme .metric-card.metric-high {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.20) 0%, #1e293b 100%);
}
html.dark-theme .metric-card.metric-medium {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, #1e293b 100%);
}
html.dark-theme .metric-card.metric-low {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, #1e293b 100%);
}
/* Checkbox dropdown (analytics-type filters) */
html.dark-theme .checkbox-dropdown .dropdown-toggle {
background-color: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
html.dark-theme .checkbox-dropdown .dropdown-menu {
background-color: #1e293b;
border-color: #334155;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
html.dark-theme .checkbox-dropdown .dropdown-header {
background-color: #16202f;
border-bottom-color: #334155;
}
html.dark-theme .checkbox-dropdown .dropdown-header button {
background-color: #1e293b;
border-color: #334155;
color: #d1d5db;
}
html.dark-theme .checkbox-dropdown .dropdown-header button:hover {
background-color: #334155;
}
html.dark-theme .checkbox-dropdown .dropdown-search {
border-bottom-color: #334155;
}
html.dark-theme .checkbox-dropdown .search-input {
background-color: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
html.dark-theme .checkbox-dropdown .dropdown-option:hover {
background-color: #24304a;
}
html.dark-theme .checkbox-dropdown .dropdown-arrow {
color: #94a3b8;
}
html.dark-theme .checkbox-dropdown .loading,
html.dark-theme .checkbox-dropdown .no-results {
color: #94a3b8;
}
/* ------------------------------------------------------------------
* Select2 single-select variant (only --multiple was covered in v1)
* ------------------------------------------------------------------ */
html.dark-theme .select2-container--default .select2-selection--single {
background-color: #1e293b;
border-color: #334155;
}
html.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #e2e8f0;
}
html.dark-theme .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #64748b;
}
html.dark-theme .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #94a3b8 transparent transparent transparent;
}
/* ------------------------------------------------------------------
* simulation_shared.css (si-*) — remap the palette variables, then
* patch the rules that hardcode hex values
* ------------------------------------------------------------------ */
html.dark-theme {
--si-gray-50: #16202f;
--si-gray-100: #1f2b45;
--si-gray-150: #26334e;
--si-gray-200: #334155;
--si-gray-300: #475569;
--si-gray-400: #64748b;
--si-gray-500: #94a3b8;
--si-gray-600: #a8b6c8;
--si-gray-700: #cbd5e1;
--si-gray-800: #dde5ef;
--si-gray-900: #f1f5f9;
--si-emerald: #34d399;
--si-emerald-bg: rgba(16, 185, 129, 0.15);
--si-red: #f87171;
--si-red-bg: rgba(239, 68, 68, 0.13);
--si-amber: #fbbf24;
--si-amber-bg: rgba(245, 158, 11, 0.13);
--si-blue: #93c5fd;
--si-blue-bg: rgba(59, 130, 246, 0.18);
/* --si-card-bg is never defined by simulation_shared.css; templates that
use var(--si-card-bg, #fff) would otherwise stay white in dark mode */
--si-card-bg: #1e293b;
}
html.dark-theme .si-kpi,
html.dark-theme .si-table-card,
html.dark-theme .si-chart-card {
background: #1e293b;
border-color: var(--si-gray-200);
}
html.dark-theme .si-search {
background: #0f172a;
border-color: var(--si-gray-300);
color: var(--si-gray-900);
}
html.dark-theme .si-chip {
background: #1e293b;
border-color: var(--si-gray-300);
color: var(--si-gray-700);
}
html.dark-theme .si-chip.active {
background: #3b82f6;
color: #ffffff;
border-color: #3b82f6;
}
html.dark-theme .si-btn {
background: #1e293b;
border-color: var(--si-gray-300);
color: var(--si-gray-700);
}
html.dark-theme .si-btn-primary {
background: #3b82f6;
color: #ffffff;
border-color: #3b82f6;
}
html.dark-theme .si-btn-primary:hover {
background: #2563eb;
border-color: #2563eb;
}
html.dark-theme .si-pnl-neg,
html.dark-theme .si-neg {
color: #f87171;
}
/* Row tints */
html.dark-theme table.si-table tbody tr.row-neg { background: rgba(239, 68, 68, 0.07); }
html.dark-theme table.si-table tbody tr.row-neg:nth-child(even) { background: rgba(239, 68, 68, 0.10); }
html.dark-theme table.si-table tbody tr.row-neg:hover { background: rgba(239, 68, 68, 0.16); }
html.dark-theme table.si-table tbody tr.row-pass td {
background: rgba(250, 204, 21, 0.16) !important;
box-shadow: inset 0 -1px 0 rgba(250, 204, 21, 0.45);
}
html.dark-theme table.si-table tbody tr.row-pass:hover td { background: rgba(250, 204, 21, 0.24) !important; }
html.dark-theme .si-cell-pass {
background: rgba(250, 204, 21, 0.22) !important;
color: #fde047;
}
html.dark-theme table.si-table tbody tr.row-skipped {
color: #64748b;
background: rgba(148, 163, 184, 0.05);
}
html.dark-theme table.si-table tbody tr.row-skipped:hover { background: rgba(148, 163, 184, 0.09); }
html.dark-theme table.si-table tbody tr.row-skipped td:first-child::after {
color: #94a3b8;
background: #334155;
}
html.dark-theme table.si-table tbody tr.row-danger {
color: #fbbf24;
background: rgba(245, 158, 11, 0.07);
}
html.dark-theme table.si-table tbody tr.row-danger:hover { background: rgba(245, 158, 11, 0.12); }
html.dark-theme table.si-table tbody tr.row-danger td:first-child::after {
color: #fbbf24;
background: rgba(245, 158, 11, 0.18);
border-color: #f59e0b;
}
/* ------------------------------------------------------------------
* cleared_actual.css (ca-*) — vars remap covers most; patch the rest
* ------------------------------------------------------------------ */
html.dark-theme .ca-section {
background: #1e293b;
}
html.dark-theme .pos { color: #34d399; }
html.dark-theme .neg { color: #f87171; }
html.dark-theme .ca-banner.warn { background: rgba(245, 158, 11, 0.13); color: #fbbf24; }
html.dark-theme .ca-banner.alert { background: rgba(239, 68, 68, 0.13); color: #f87171; }
html.dark-theme .ca-banner.ok { background: rgba(16, 185, 129, 0.13); color: #34d399; }
html.dark-theme .pill-inc { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
html.dark-theme .pill-dec { background: rgba(192, 38, 211, 0.18); color: #f0abfc; }
html.dark-theme .pill-y { background: rgba(16, 185, 129, 0.15); color: #34d399; }
html.dark-theme .pill-n { background: rgba(239, 68, 68, 0.15); color: #f87171; }
html.dark-theme .pill-partial { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
/* ------------------------------------------------------------------
* auth.css (login/register/forgot/reset + admin pages using auth.css)
* ------------------------------------------------------------------ */
html.dark-theme body {
background: #0b1120; /* shorthand: also kills the auth purple gradient */
}
html.dark-theme .auth-container {
background: #1e293b;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
html.dark-theme .auth-header h1 {
color: #60a5fa;
}
html.dark-theme .auth-header p {
color: #94a3b8;
}
html.dark-theme .auth-form label {
color: #cbd5e1;
}
html.dark-theme .auth-form input[type="email"],
html.dark-theme .auth-form input[type="password"],
html.dark-theme .auth-form input[type="text"] {
background-color: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
html.dark-theme .alert-error { background-color: rgba(239, 68, 68, 0.12); color: #f87171; }
html.dark-theme .alert-success { background-color: rgba(16, 185, 129, 0.12); color: #34d399; }
html.dark-theme .alert-info { background-color: rgba(59, 130, 246, 0.12); color: #93c5fd; }
html.dark-theme .alert-warning { background-color: rgba(245, 158, 11, 0.12); color: #fbbf24; }
html.dark-theme .password-strength {
background: #334155;
}
html.dark-theme .password-hint,
html.dark-theme .auth-footer p {
color: #94a3b8;
}
html.dark-theme .forgot-password a,
html.dark-theme .text-link {
color: #60a5fa;
}
html.dark-theme .divider::before {
background: #334155;
}
html.dark-theme .divider span {
background: #1e293b;
color: #94a3b8;
}
/* auth.css ships its own white toast (separate from main.css toasts) */
html.dark-theme .toast {
background: #1e293b;
}
html.dark-theme .toast-title {
color: #e2e8f0;
}
html.dark-theme .toast-message {
color: #94a3b8;
}
html.dark-theme .toast-close {
color: #64748b;
}
html.dark-theme .toast-close:hover {
color: #94a3b8;
}
/* ------------------------------------------------------------------
* admin_base.html
* ------------------------------------------------------------------ */
html.dark-theme .admin-page-container {
background-color: transparent;
}
/* ------------------------------------------------------------------
* v3: auth-gated tool pages whose templates hardcode light colors in
* their own