/* ============================================================================ theme-dark.css — Phase 6 dark mode (ADDITIVE, OPT-IN) ---------------------------------------------------------------------------- EVERY rule is scoped under [data-theme="dark"]. With no data-theme attribute (the default), NONE of this applies — the existing light design is unchanged. The signed-in user's saved preference sets data-theme on before paint. Palette (slate), tenant --primary-color accent preserved: page #0f172a surface #1e293b elevated #243044 border #334155 text #e2e8f0 muted #94a3b8 !important is used deliberately to override the inline light styles in layouts/header.blade.php (which are themselves !important). ============================================================================ */ [data-theme="dark"] { --d-page: #0f172a; --d-surface: #1e293b; --d-elev: #243044; --d-border: #334155; --d-text: #e2e8f0; --d-muted: #94a3b8; } /* ── Base ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] body, [data-theme="dark"] #main { background: var(--d-page) !important; color: var(--d-text) !important; } [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"] .pagetitle h1, [data-theme="dark"] label, [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] li { color: var(--d-text); } [data-theme="dark"] a { color: #93c5fd; } [data-theme="dark"] .breadcrumb, [data-theme="dark"] .breadcrumb a, [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--d-muted) !important; } [data-theme="dark"] hr { border-color: var(--d-border); } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ [data-theme="dark"] .sidebar { background: var(--d-surface) !important; border-right: 1px solid var(--d-border) !important; box-shadow: 2px 0 18px rgba(0,0,0,.45) !important; } [data-theme="dark"] .sidebar-nav .nav-link { color: #b6c2d9; } [data-theme="dark"] .sidebar-nav .nav-link.collapsed { color: #b6c2d9; } [data-theme="dark"] .sidebar-nav .nav-link i:not(.bi-chevron-down) { color: #8a97b0; } [data-theme="dark"] .sidebar-nav .nav-content a { color: #9fb0cc; } [data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background: var(--d-border); } /* ── Header / navbar ──────────────────────────────────────────────────────── */ [data-theme="dark"] .header { background: var(--d-surface) !important; border-bottom: 1px solid var(--d-border) !important; box-shadow: 0 2px 12px rgba(0,0,0,.5) !important; } [data-theme="dark"] .header .nav-icon, [data-theme="dark"] .header-nav .nav-icon { color: #b6c2d9; } [data-theme="dark"] .filter-nav-tab, [data-theme="dark"] .filter-nav-tab.lead, [data-theme="dark"] .filter-nav-tab.enquiry, [data-theme="dark"] .filter-nav-tab.lead-followup, [data-theme="dark"] .filter-nav-tab.enquiry-followup, [data-theme="dark"] .filter-nav-tab.address-list, [data-theme="dark"] .filter-nav-tab.ivr-nav, [data-theme="dark"] .filter-nav-tab.meta-nav, [data-theme="dark"] .filter-nav-tab.whatsapp-nav { background: var(--d-elev) !important; color: #cbd5e1 !important; border-color: var(--d-border) !important; box-shadow: 0 1px 5px rgba(0,0,0,.4) !important; } /* ── Cards / panels / toolbars ────────────────────────────────────────────── */ [data-theme="dark"] .card, [data-theme="dark"] .tablelapView, [data-theme="dark"] .tile, [data-theme="dark"] .widget, [data-theme="dark"] .box { background: var(--d-surface) !important; border-color: var(--d-border) !important; box-shadow: 0 1px 8px rgba(0,0,0,.45) !important; color: var(--d-text); } [data-theme="dark"] .subheading, [data-theme="dark"] .main_heading.subheading { background: var(--d-surface) !important; border-bottom: 1px solid var(--d-border) !important; } /* ── DataTables ───────────────────────────────────────────────────────────── */ /* Header first row keeps the tenant --primary-color (already strong on dark). */ /* Filter/search row → dark panel */ [data-theme="dark"] table.MasterTable thead tr.filters th, [data-theme="dark"] table.MasterTable thead tr:not(:first-child) th, [data-theme="dark"] table.MasterTable thead tr.filters th.dtfc-fixed-left, [data-theme="dark"] table.MasterTable thead tr.filters th.dtfc-fixed-right, [data-theme="dark"] table.MasterTable thead tr:not(:first-child) th.dtfc-fixed-left, [data-theme="dark"] table.MasterTable thead tr:not(:first-child) th.dtfc-fixed-right { background-color: #172033 !important; color: #94a3b8 !important; border-right-color: var(--d-border) !important; } /* Body cells */ [data-theme="dark"] table.MasterTable tbody tr td { background: var(--d-surface) !important; color: #cbd5e1 !important; } [data-theme="dark"] table.MasterTable tbody tr:nth-child(even) td { background: #202c3e !important; } [data-theme="dark"] table.MasterTable tbody tr:nth-child(odd) td.dtfc-fixed-left, [data-theme="dark"] table.MasterTable tbody tr:nth-child(odd) td.dtfc-fixed-right { background: var(--d-surface) !important; } [data-theme="dark"] table.MasterTable tbody tr:nth-child(even) td.dtfc-fixed-left, [data-theme="dark"] table.MasterTable tbody tr:nth-child(even) td.dtfc-fixed-right { background: #202c3e !important; } [data-theme="dark"] table.MasterTable tbody tr:hover td, [data-theme="dark"] table.MasterTable tbody tr:hover td.dtfc-fixed-left, [data-theme="dark"] table.MasterTable tbody tr:hover td.dtfc-fixed-right { background: #273449 !important; } [data-theme="dark"] table.MasterTable tbody tr { border-bottom: 1px solid rgba(255,255,255,.05) !important; } /* Search inputs inside the filter row */ [data-theme="dark"] table.MasterTable thead tr.filters th input, [data-theme="dark"] table.MasterTable thead tr:not(:first-child) th input { background: #0f172a !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } /* Info / length / pagination */ [data-theme="dark"] .dataTables_info { color: var(--d-muted) !important; } [data-theme="dark"] .dataTables_length select, [data-theme="dark"] #pageLengthSelect, [data-theme="dark"] .dt-button, [data-theme="dark"] .datatable-settings-btn { background: var(--d-elev) !important; border-color: var(--d-border) !important; color: #cbd5e1 !important; } [data-theme="dark"] .dataTables_paginate .paginate_button { color: #cbd5e1 !important; } /* ── Forms / inputs ───────────────────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] #SearchBar, [data-theme="dark"] .dataTables_filter input, [data-theme="dark"] textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="password"] { background: #0f172a !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] #SearchBar::placeholder { color: #64748b !important; } /* Select2 widgets */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple, [data-theme="dark"] .select2-dropdown, [data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: #0f172a !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-theme="dark"] .select2-results__option { color: var(--d-text) !important; } [data-theme="dark"] .select2-results__option[aria-selected=true] { background-color: #1e2a4a !important; } /* ── Dropdowns / modals ───────────────────────────────────────────────────── */ [data-theme="dark"] .dropdown-menu { background: var(--d-elev) !important; border-color: var(--d-border) !important; } [data-theme="dark"] .dropdown-item { color: var(--d-text) !important; } [data-theme="dark"] .dropdown-item:hover { background: #2d3b52 !important; } [data-theme="dark"] .modal-content { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--d-border) !important; } /* ── Misc surfaces ────────────────────────────────────────────────────────── */ [data-theme="dark"] .list-group-item, [data-theme="dark"] .nav-tabs, [data-theme="dark"] .accordion-item, [data-theme="dark"] .accordion-button { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } [data-theme="dark"] .table { color: var(--d-text); } [data-theme="dark"] .bg-white { background: var(--d-surface) !important; } [data-theme="dark"] .border { border-color: var(--d-border) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }