/* ============================================================================= WOMBAT — Dark Mode: Deep Operations Theme Inverts the Precision Command Center into a low-light ops environment. Activated via [data-theme="dark"] on . ============================================================================= */ /* ============================================= DESIGN TOKEN OVERRIDES ============================================= */ :root[data-theme="dark"] { /* Core surfaces — deep charcoal foundation */ --navy: #c8d6e5; /* was dark — now light for text on dark bg */ --navy-light: #a4b4c7; --slate: #cbd5e1; /* body text — bright enough for WCAG AA */ --steel: #94a3b8; /* secondary text */ --silver: #64748b; /* tertiary / muted */ --mist: #293548; /* borders — subtle on dark surfaces */ --cloud: #0c1422; /* page background — near-black */ --white: #152033; /* card/component surfaces — dark navy */ /* Accents — slightly boosted saturation for dark-bg contrast */ --blue: #3b82f6; --blue-light: #60a5fa; --blue-glow: rgba(59, 130, 246, 0.18); --blue-pale: rgba(59, 130, 246, 0.14); --emerald: #34d399; --emerald-light: rgba(52, 211, 153, 0.14); --amber: #fbbf24; --amber-light: rgba(251, 191, 36, 0.14); --red: #f87171; --red-light: rgba(248, 113, 113, 0.14); /* Shadows — deeper, more pronounced in dark mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 0 3px var(--blue-glow); } /* ============================================= GLOBAL OVERRIDES ============================================= */ [data-theme="dark"], [data-theme="dark"] body { color-scheme: dark; background-color: var(--cloud) !important; color: var(--slate); min-height: 100vh; } /* Ensure all containers inherit dark background */ [data-theme="dark"] .container, [data-theme="dark"] .container-fluid { background-color: transparent; } /* Bootstrap card overrides */ [data-theme="dark"] .card { background-color: var(--white); border-color: var(--mist); color: var(--slate); } /* Tables — force dark on every layer to prevent Bootstrap white bleed */ [data-theme="dark"] .table-wrapper { background-color: #152033 !important; } [data-theme="dark"] .table { color: var(--slate); background-color: #152033 !important; } [data-theme="dark"] .table tbody { background-color: #152033 !important; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { background-color: inherit; } [data-theme="dark"] .table-responsive { background-color: #152033 !important; } [data-theme="dark"] .data-table tbody tr:nth-child(even) { background-color: #0c1422 !important; } [data-theme="dark"] a:hover { color: var(--blue-light); } /* Headings: use a crisp off-white instead of the repurposed --navy */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: #e2e8f0; } /* ============================================= NAVBAR ============================================= */ [data-theme="dark"] .navbar { background-color: #111b2e !important; border-bottom-color: var(--mist); } [data-theme="dark"] .navbar-brand span { color: #e2e8f0; } [data-theme="dark"] .dropdown-menu { background: #1a2744; border-color: var(--mist); } [data-theme="dark"] .dropdown-item { color: var(--slate); } [data-theme="dark"] .dropdown-item:hover { background-color: #243352; color: #e2e8f0; } [data-theme="dark"] .dropdown-item.active, [data-theme="dark"] .dropdown-item:active { background-color: var(--blue); color: #fff; } [data-theme="dark"] .dropdown-divider { border-top-color: var(--mist); } [data-theme="dark"] .navbar-toggler { border-color: var(--mist); } [data-theme="dark"] .navbar-toggler-icon { filter: invert(0.8); } /* ============================================= CARDS ============================================= */ [data-theme="dark"] .card-header { background-color: #111b2e; color: #e2e8f0; } [data-theme="dark"] .card-footer { background-color: #111b2e; } /* ============================================= KPI CARDS ============================================= */ [data-theme="dark"] .kpi-value { color: #e2e8f0; } [data-theme="dark"] .kpi-card--navy .kpi-icon { background: rgba(200, 214, 229, 0.1); color: #94a3b8; } /* ============================================= TABLES ============================================= */ [data-theme="dark"] .table thead th { background: #111b2e; border-bottom-color: var(--mist); color: var(--steel); } [data-theme="dark"] .table tbody td { border-top-color: #1a2540; } [data-theme="dark"] .table tbody tr:hover, [data-theme="dark"] .table-hover tbody tr:hover { background: rgba(59, 130, 246, 0.07); } [data-theme="dark"] .table-card { background: var(--white); } [data-theme="dark"] .table-card-header { background: #111b2e; } [data-theme="dark"] .table-card-header h5 { color: #e2e8f0; } [data-theme="dark"] .table-wrapper { background: var(--white); } /* ============================================= FORMS ============================================= */ [data-theme="dark"] .form-control { background: #111b2e; border-color: var(--mist); color: #e2e8f0; } [data-theme="dark"] .form-control:focus { background: #0f172a; color: #f1f5f9; } [data-theme="dark"] .form-control::placeholder { color: #4a5568; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background: #0c1422; color: var(--steel); } [data-theme="dark"] select.form-control, [data-theme="dark"] select.form-control option { background: #111b2e; color: #e2e8f0; } [data-theme="dark"] .custom-file-label { background: #111b2e; border-color: var(--mist); color: var(--slate); } [data-theme="dark"] .custom-file-label::after { background: #1a2744; color: #e2e8f0; border-left-color: var(--mist); } [data-theme="dark"] .input-group-text { background: #1a2744; border-color: var(--mist); color: var(--steel); } /* ============================================= BUTTONS ============================================= */ [data-theme="dark"] .btn-secondary { background: #1a2744; border-color: var(--mist); color: #cbd5e1; } [data-theme="dark"] .btn-secondary:hover { background: #243352; border-color: #3a4f6e; color: #e2e8f0; } [data-theme="dark"] .btn-outline-secondary { color: var(--steel); border-color: var(--mist); } [data-theme="dark"] .btn-outline-secondary:hover { background: #1a2744; border-color: #3a4f6e; color: #e2e8f0; } [data-theme="dark"] .btn-outline-primary { color: var(--blue-light); border-color: var(--blue); } [data-theme="dark"] .btn-outline-primary:hover { background: var(--blue); color: #fff; } [data-theme="dark"] .btn-light { background: #1a2744; border-color: var(--mist); color: #cbd5e1; } [data-theme="dark"] .btn-light:hover { background: #243352; color: #e2e8f0; } /* Action buttons in tables */ [data-theme="dark"] .action-btn { background: #111b2e; border-color: var(--mist); color: var(--steel); } [data-theme="dark"] .action-btn:hover { background: #1a2744; } [data-theme="dark"] .action-btn--disabled { background: #0c1422; border-color: #1a2540; } /* Control bar buttons */ [data-theme="dark"] .btn-control { background: #111b2e; border-color: var(--mist); color: var(--slate); } [data-theme="dark"] .btn-control:hover { background: #1a2744; color: #e2e8f0; } [data-theme="dark"] .btn-control.active { background: var(--blue); color: #fff; border-color: var(--blue); } /* ============================================= STATUS PILLS — adjusted for dark backgrounds ============================================= */ [data-theme="dark"] .status-pill--open { background: rgba(59, 130, 246, 0.18); color: #93bbfd; } [data-theme="dark"] .status-pill--complete, [data-theme="dark"] .status-pill--completed { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; } [data-theme="dark"] .status-pill--closed { background: rgba(248, 113, 113, 0.16); color: #fca5a5; } [data-theme="dark"] .status-pill--planning { background: rgba(251, 191, 36, 0.16); color: #fde68a; } [data-theme="dark"] .status-pill--inprogress, [data-theme="dark"] .status-pill--in-progress { background: rgba(59, 130, 246, 0.18); color: #93bbfd; } [data-theme="dark"] .status-pill--onhold, [data-theme="dark"] .status-pill--on-hold { background: rgba(100, 116, 139, 0.2); color: #94a3b8; } /* Priority tags */ [data-theme="dark"] .priority-tag--high { background: rgba(248, 113, 113, 0.16); color: #fca5a5; } [data-theme="dark"] .priority-tag--medium { background: rgba(251, 191, 36, 0.16); color: #fde68a; } [data-theme="dark"] .priority-tag--low { background: rgba(59, 130, 246, 0.18); color: #93bbfd; } /* ============================================= ALERTS ============================================= */ [data-theme="dark"] .alert-success { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; } [data-theme="dark"] .alert-danger { background: rgba(248, 113, 113, 0.14); color: #fca5a5; } [data-theme="dark"] .alert-warning { background: rgba(251, 191, 36, 0.14); color: #fde68a; } [data-theme="dark"] .alert-info { background: rgba(59, 130, 246, 0.14); color: #93bbfd; } /* ============================================= MODALS ============================================= */ [data-theme="dark"] .modal-content { background: #1a2744; } [data-theme="dark"] .modal-header { background: #0f1a2e; } [data-theme="dark"] .modal-body { background: #1a2744; color: var(--slate); } [data-theme="dark"] .modal-footer { background: #111b2e; border-top-color: var(--mist); } [data-theme="dark"] .modal-title { color: #e2e8f0; } [data-theme="dark"] .modal-backdrop.show { opacity: 0.65; } /* ============================================= ADMIN HERO BANNER ============================================= */ [data-theme="dark"] .admin-hero { background: #0a1120; border: 1px solid var(--mist); } /* ============================================= CONTROL BAR & FILTERS ============================================= */ [data-theme="dark"] .control-bar .search-box input { background: #111b2e; border-color: var(--mist); color: #e2e8f0; } [data-theme="dark"] .control-bar .search-box input:focus { background: #0f172a; } [data-theme="dark"] .filter-panel { background: var(--white); } [data-theme="dark"] .filter-chip { background: #111b2e; border-color: var(--mist); color: var(--slate); } [data-theme="dark"] .filter-chip:hover { border-color: var(--blue); color: var(--blue-light); } [data-theme="dark"] .advanced-filters { background-color: #111b2e; } /* ============================================= LOGIN PAGE ============================================= */ [data-theme="dark"] .login-page { background: #0c1422; } [data-theme="dark"] .login-card { background: #152033; border-color: var(--mist); } [data-theme="dark"] .login-card h2 { color: #e2e8f0; } /* ============================================= CELL HELPERS ============================================= */ [data-theme="dark"] .cell-id { color: #e2e8f0; } /* ============================================= BADGES (Bootstrap) ============================================= */ [data-theme="dark"] .badge-light { background: #1a2744; color: var(--steel); } [data-theme="dark"] .badge-warning { background: rgba(251, 191, 36, 0.18); color: #fde68a; } /* ============================================= HORIZONTAL RULES & MISC BORDERS ============================================= */ [data-theme="dark"] hr { border-top-color: var(--mist); } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-left, [data-theme="dark"] .border-right { border-color: var(--mist) !important; } /* ============================================= BOOTSTRAP UTILITIES ============================================= */ [data-theme="dark"] .bg-white { background-color: var(--white) !important; } [data-theme="dark"] .bg-light { background-color: #111b2e !important; } [data-theme="dark"] .text-dark { color: #e2e8f0 !important; } [data-theme="dark"] .text-muted { color: var(--steel) !important; } [data-theme="dark"] .text-body { color: var(--slate) !important; } /* Bootstrap list-group */ [data-theme="dark"] .list-group-item { background-color: var(--white); border-color: var(--mist); color: var(--slate); } [data-theme="dark"] .list-group-item:hover { background-color: #1a2744; } /* Bootstrap pagination */ [data-theme="dark"] .page-link { background-color: #111b2e; border-color: var(--mist); color: var(--blue-light); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); } [data-theme="dark"] .page-item.disabled .page-link { background-color: #0c1422; color: var(--silver); } /* ============================================= TEXT SELECTION ============================================= */ [data-theme="dark"] ::selection { background: rgba(59, 130, 246, 0.35); color: #f1f5f9; } [data-theme="dark"] ::-moz-selection { background: rgba(59, 130, 246, 0.35); color: #f1f5f9; } /* ============================================= SCROLLBAR (Webkit) ============================================= */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0c1422; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #293548; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4f6e; } /* Firefox scrollbar */ [data-theme="dark"] * { scrollbar-color: #293548 #0c1422; scrollbar-width: thin; } /* ============================================= CHART CONTAINER ============================================= */ [data-theme="dark"] .chart-container { background: var(--white); } /* ============================================= APPROVAL / REPORT INDICATORS ============================================= */ [data-theme="dark"] .approval-dot--yes { background: rgba(52, 211, 153, 0.18); color: var(--emerald); } [data-theme="dark"] .approval-dot--no { background: rgba(251, 191, 36, 0.18); color: var(--amber); } [data-theme="dark"] .report-indicator--no { color: var(--silver); } /* ============================================= SCROLL HINT ============================================= */ [data-theme="dark"] .scroll-hint { background: linear-gradient(90deg, transparent, var(--blue-glow), transparent); color: var(--steel); } /* ============================================= SETTINGS / TENANT ADMIN CARDS ============================================= */ [data-theme="dark"] .settings-card { background: var(--white); box-shadow: var(--shadow-sm); } [data-theme="dark"] .settings-card h5 { color: #e2e8f0; } [data-theme="dark"] .status-badge.status-set { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; } [data-theme="dark"] .status-badge.status-unset { background: rgba(248, 113, 113, 0.14); color: #fca5a5; } /* ============================================= DARK MODE TOGGLE STYLING ============================================= */ #darkModeToggle { cursor: pointer; transition: color 0.2s; } #darkModeToggle:hover { color: var(--blue-light) !important; } [data-theme="dark"] #darkModeToggle { color: #fbbf24 !important; } [data-theme="dark"] #darkModeToggle:hover { color: #fde68a !important; } /* ============================================= DHTMLX GANTT CHART — dark theme Uses extremely specific selectors to override CDN styles. ============================================= */ [data-theme="dark"] .gantt_container { background-color: #152033 !important; border-color: #293548 !important; } [data-theme="dark"] .gantt_container * { border-color: #1a2540 !important; } [data-theme="dark"] .gantt_grid, [data-theme="dark"] .gantt_grid_data, [data-theme="dark"] .gantt_task_bg, [data-theme="dark"] .gantt_task_area { background-color: #152033 !important; } /* Header / scale rows */ [data-theme="dark"] .gantt_grid_head_cell, [data-theme="dark"] .gantt_scale_cell, [data-theme="dark"] .gantt_scale_line { background-color: #111b2e !important; color: #94a3b8 !important; } /* Data rows — even */ [data-theme="dark"] .gantt_row, [data-theme="dark"] .gantt_task_row { background-color: #152033 !important; color: #cbd5e1 !important; } /* Data rows — odd */ [data-theme="dark"] .gantt_row.odd, [data-theme="dark"] .gantt_task_row.odd { background-color: #0f172a !important; } /* Cells */ [data-theme="dark"] .gantt_cell { background-color: inherit !important; color: #cbd5e1 !important; } /* Task cell backgrounds (the timeline area behind bars) */ [data-theme="dark"] .gantt_task_cell { border-right-color: #1a2540 !important; } /* Task bars */ [data-theme="dark"] .gantt_task_line { border-radius: 4px; } [data-theme="dark"] .gantt_task_content { color: #fff !important; } /* Layout cells and borders */ [data-theme="dark"] .gantt_layout_cell { border-color: #293548 !important; } [data-theme="dark"] .gantt_layout_cell.gantt_ver_scroll, [data-theme="dark"] .gantt_hor_scroll, [data-theme="dark"] .gantt_ver_scroll { background-color: #0c1422 !important; } /* Hover */ [data-theme="dark"] .gantt_row:hover, [data-theme="dark"] .gantt_task_row:hover { background-color: rgba(59, 130, 246, 0.07) !important; } /* Links / dependency lines */ [data-theme="dark"] .gantt_link_line_right, [data-theme="dark"] .gantt_link_line_left, [data-theme="dark"] .gantt_link_line_up, [data-theme="dark"] .gantt_link_line_down { background-color: #64748b !important; } /* Gantt toolbar and wrapper */ [data-theme="dark"] .gantt-wrap { border-color: #293548 !important; } [data-theme="dark"] .gantt-toolbar { background-color: #152033 !important; border-color: #293548 !important; } /* ============================================= PRINT: always light mode ============================================= */ @media print { :root[data-theme="dark"] { --navy: #0f1a2e; --slate: #374151; --steel: #64748b; --silver: #94a3b8; --mist: #e2e8f0; --cloud: #f1f5f9; --white: #ffffff; } }