/* Global light/dark theme using CSS variables. * Applied via data-theme attribute on . */ :root { --bg-body: #f8f9fa; --bg-surface: #ffffff; --bg-surface-alt: #f1f3f5; --bg-input: #f0f2f5; --bg-input-focus: #ffffff; --border-input: #c8ccd1; --text-main: #212529; --text-muted: #6c757d; /* Light mode borders: keep very subtle (almost invisible) */ --border-subtle: #ffffff; --link-color: #0d6efd; --link-hover: #0b5ed7; --nav-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --nav-text: #ffffff; --table-row-hover: #e3f2fd; /* Status colors */ --status-active-bg: #d4edda; --status-active-text: #155724; --status-inactive-bg: #f8d7da; --status-inactive-text: #721c24; --status-processing-bg: #fff3cd; --status-processing-text: #856404; --status-not-processing-bg: #d1ecf1; --status-not-processing-text: #0c5460; } [data-theme="dark"] { --bg-body: #0b1120; --bg-surface: #020617; --bg-surface-alt: #111827; --bg-input: #0f172a; --bg-input-focus: #1e293b; --border-input: #334155; --text-main: #e5e7eb; --text-muted: #9ca3af; --border-subtle: #1f2933; --link-color: #60a5fa; --link-hover: #93c5fd; --nav-bg: linear-gradient(135deg, #0f172a 0%, #1f2937 100%); --nav-text: #e5e7eb; --table-row-hover: #1f2937; /* Status colors (dark variants) */ --status-active-bg: #064e3b; --status-active-text: #bbf7d0; --status-inactive-bg: #7f1d1d; --status-inactive-text: #fecaca; --status-processing-bg: #78350f; --status-processing-text: #fde68a; --status-not-processing-bg: #0f172a; --status-not-processing-text: #e0f2fe; } body { background-color: var(--bg-body) !important; color: var(--text-main); } body a { color: var(--link-color); } body a:hover { color: var(--link-hover); } /* Navbar */ .navbar { background: var(--nav-bg) !important; } .navbar, .navbar .navbar-brand, .navbar .nav-link { color: var(--nav-text) !important; } /* Generic cards / panels */ .card, .form-section, .page-header { background-color: var(--bg-surface) !important; color: var(--text-main) !important; border-color: var(--border-subtle) !important; } /* Tables */ table, .table { color: var(--text-main) !important; background-color: var(--bg-surface) !important; border-color: var(--border-subtle) !important; } .table thead { background-color: #2563eb !important; color: #ffffff !important; } .table thead th { color: #ffffff !important; background-color: #2563eb !important; border-color: var(--border-subtle) !important; } .table tbody tr { background-color: var(--bg-surface) !important; border-color: var(--border-subtle) !important; } .table tbody tr:hover { background-color: var(--table-row-hover) !important; } .table tbody td, .table tbody th { color: var(--text-main) !important; background-color: transparent !important; border-color: var(--border-subtle) !important; } /* Forms */ input.form-control, select.form-select, textarea.form-control { background-color: var(--bg-input, var(--bg-surface-alt)) !important; color: var(--text-main) !important; border-color: var(--border-input, var(--border-subtle)) !important; } input.form-control:focus, select.form-select:focus, textarea.form-control:focus { background-color: var(--bg-input-focus, var(--bg-surface)) !important; box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.35); } input.form-control::placeholder, textarea.form-control::placeholder { color: var(--text-muted) !important; } /* Input group addons */ .input-group-text { background-color: var(--bg-surface-alt) !important; color: var(--text-muted) !important; border-color: var(--border-input, var(--border-subtle)) !important; } /* Form labels */ .form-label { color: var(--text-main) !important; } .help-text, .form-text { color: var(--text-muted) !important; } /* Boolean toggle groups */ .boolean-group { background-color: var(--bg-surface-alt) !important; border-color: var(--border-subtle) !important; } .boolean-group label { color: var(--text-main) !important; } .form-check-label { color: var(--text-main) !important; } /* Section titles */ .section-title { color: var(--text-main) !important; } /* Min days ahead component */ .min-days-section { background-color: var(--bg-surface-alt) !important; border-color: var(--border-subtle) !important; } .min-days-btn { background-color: var(--bg-surface) !important; color: var(--text-main) !important; border-color: var(--border-subtle) !important; } .min-days-btn:hover { border-color: #3498db !important; background-color: var(--bg-surface-alt) !important; } .min-days-btn.active { background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important; color: #fff !important; border-color: #3498db !important; } .min-days-preview { background-color: var(--bg-surface-alt) !important; border-color: var(--border-subtle) !important; color: var(--link-color) !important; } /* Bootstrap datepicker dark mode */ [data-theme="dark"] .datepicker { background-color: var(--bg-surface) !important; border-color: var(--border-subtle) !important; color: var(--text-main) !important; } [data-theme="dark"] .datepicker table tr td, [data-theme="dark"] .datepicker table tr th { color: var(--text-main) !important; background-color: transparent !important; } [data-theme="dark"] .datepicker table tr td.day:hover, [data-theme="dark"] .datepicker table tr td.focused { background-color: var(--bg-surface-alt) !important; } [data-theme="dark"] .datepicker table tr td.active, [data-theme="dark"] .datepicker table tr td.active.focused, [data-theme="dark"] .datepicker table tr td.active:hover { background-color: #2563eb !important; color: #fff !important; } [data-theme="dark"] .datepicker table tr td.today { background-color: #1e3a5f !important; color: #60a5fa !important; } [data-theme="dark"] .datepicker table tr td.old, [data-theme="dark"] .datepicker table tr td.new { color: var(--text-muted) !important; } [data-theme="dark"] .datepicker .datepicker-switch, [data-theme="dark"] .datepicker .prev, [data-theme="dark"] .datepicker .next { color: var(--text-main) !important; } [data-theme="dark"] .datepicker .datepicker-switch:hover, [data-theme="dark"] .datepicker .prev:hover, [data-theme="dark"] .datepicker .next:hover { background-color: var(--bg-surface-alt) !important; } [data-theme="dark"] .datepicker .dow { color: var(--text-muted) !important; } /* Select2 dark mode */ [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-main) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered { color: var(--text-main) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--bg-surface) !important; border-color: var(--border-subtle) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option { color: var(--text-main) !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #2563eb !important; color: #fff !important; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field { background-color: var(--bg-input) !important; color: var(--text-main) !important; border-color: var(--border-input) !important; } /* Alerts */ .alert { border-color: var(--border-subtle); } [data-theme="dark"] .alert-success { background-color: #064e3b !important; color: #bbf7d0 !important; } [data-theme="dark"] .alert-danger { background-color: #7f1d1d !important; color: #fecaca !important; } [data-theme="dark"] .alert-warning { background-color: #78350f !important; color: #fde68a !important; }