/*-------------------------------------------------------------- # Dark mode # Activated by adding the `dark` class to (see useDarkMode.js). # Loaded last so these overrides win over style.css/clients.css/style-direction.css. --------------------------------------------------------------*/ body.dark { --bg-body: #10151c; --bg-surface: #1a212b; --bg-surface-alt: #232b37; --bg-surface-hover: #2a3340; --border-color: #2e3846; --text-color: #e4e8ee; --text-muted: #9aa6b5; } /* Base */ body.dark { background: var(--bg-body); color: var(--text-color); } body.dark a { color: #4da3e0; } body.dark a:hover { color: #6fb8ea; } body.dark #main > main { background-image: none; background-color: #0f141a; } /* Bootstrap overrides that beat data-bs-theme due to !important in style.css */ body.dark .form-control, body.dark .form-select, body.dark input.form-control, body.dark select.form-control, body.dark textarea.form-control { background-color: var(--bg-surface-alt) !important; border-color: var(--border-color) !important; color: var(--text-color) !important; } body.dark .form-control:disabled { background-color: var(--bg-surface) !important; color: var(--text-muted); } body.dark .form-control::placeholder { color: var(--text-muted); } /* Dropdown menus (NiceAdmin's own hardcoded chrome) */ body.dark .dropdown-menu { background-color: var(--bg-surface); color: var(--text-color); box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.4); } body.dark .dropdown-menu .dropdown-item { color: var(--text-color); } body.dark .dropdown-menu .dropdown-item:hover, body.dark .header-nav .notifications .notification-item:hover, body.dark .header-nav .messages .message-item:hover, body.dark .header-nav .profile .dropdown-item:hover { background-color: var(--bg-surface-hover); } body.dark .dropdown-menu .dropdown-footer a { color: var(--text-muted); } body.dark .dropdown-menu .dropdown-divider, body.dark .dropdown-divider { border-color: var(--border-color); opacity: 1; } body.dark .header-nav .messages .message-item h4, body.dark .header-nav .profile .dropdown-header h6 { color: var(--text-color); } /* Cards */ body.dark .card { background-color: var(--bg-surface); box-shadow: 0 0 30px rgba(0, 0, 0, 0.35); } body.dark .card-header, body.dark .card-footer { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-muted); } body.dark .card-title { color: var(--text-color); } body.dark .card-title span { color: var(--text-muted); } /* Dashboard chart/stat containers (.white-box-dashboard, see style.css) */ body.dark .white-box-dashboard { background-color: var(--bg-surface); border-color: var(--border-color); scrollbar-color: var(--bg-surface-hover) var(--bg-surface); color: var(--text-color); } body.dark .white-box-dashboard:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } body.dark .white-box-dashboard .title-bold { color: var(--text-color); border-bottom-color: var(--border-color); } body.dark .white-box-dashboard h2 { color: var(--text-color); } body.dark .white-box-dashboard .noData { color: var(--text-muted); } /* Header */ body.dark .header { background: url(../img/pattern_background.png) #640b0f !important; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.4); } body.dark .header .toggle-sidebar-btn, body.dark .header-nav .nav-icon, body.dark .header-nav .nav-profile, body.dark .logo span { color: var(--text-color); } body.dark .header .search-form input { background-color: var(--bg-surface-alt); color: var(--text-color); border-color: var(--border-color); } /* Sidebar */ body.dark .sidebar { background-color: var(--bg-surface); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); } body.dark .sidebar-nav .nav-heading { color: var(--text-muted); } body.dark .sidebar-nav .nav-link.collapsed { background: var(--bg-surface); color: var(--text-color); } body.dark .sidebar-nav .nav-link.collapsed i { color: var(--text-muted); } body.dark .sidebar-nav .nav-link, body.dark .sidebar-nav .nav-link:hover { background: var(--bg-surface-alt); color: #fff; } body.dark .sidebar-nav .nav-link i, body.dark .sidebar-nav .nav-link:hover i { color: #fff; } body.dark .sidebar-nav .nav-content a { color: var(--text-color); } /* Page title */ body.dark .pagetitle h1 { color: #fff; } body.dark .breadcrumb, body.dark .breadcrumb a, body.dark .breadcrumb .breadcrumb-item::before { color: var(--text-muted); } body.dark .breadcrumb .active { color: var(--text-color); } /* Dashboard info cards */ body.dark .dashboard .info-card h6 { color: var(--text-color); } body.dark .dashboard .filter .icon { color: var(--text-muted); } body.dark .dashboard .recent-sales .table thead, body.dark .dashboard .top-selling .table thead { color: var(--text-color); } body.dark .table { --bs-table-bg: transparent; color: var(--text-color); } /*-------------------------------------------------------------- # Clients page --------------------------------------------------------------*/ body.dark .img_bck { background: url(../img/pattern_background.png) #020d1c; } body.dark .toolbar-actions, body.dark .toolbar-filters .radioBtnDiv { background: var(--bg-surface-alt); border-color: var(--border-color); } body.dark .toolbar-icon-btn { color: var(--text-muted) !important; } body.dark .toolbar-icon-btn:hover { background: var(--bg-surface-hover) !important; } body.dark .btn-gray { background: var(--bg-surface-alt); color: var(--text-color); border-color: var(--border-color); } body.dark .btn-gray:hover { background: var(--bg-surface-hover); color: var(--text-color); } body.dark .toolbar-filters .radioBtnDiv label { color: var(--text-muted); } body.dark .toolbar-filters .radioBtnDiv label:not(:has(input:checked)):hover { background: var(--bg-surface-hover); color: var(--text-color); } body.dark .my-clients-toggle { background: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-muted); } body.dark .client-dashboard { background: var(--bg-surface); border-color: var(--border-color); } body.dark .dash-head { background: var(--bg-surface-alt); border-color: var(--border-color); } body.dark .wb-ele-dashboard { background: var(--bg-surface-alt) !important; border-color: var(--border-color) !important; color: var(--text-color) !important; } body.dark .dash-content .columns-titles { background-color: var(--bg-surface-alt); border-color: var(--border-color); } body.dark .dash-content .columns-titles .title, body.dark .client-num { color: #fff; } body.dark .client { border-color: var(--border-color); } body.dark .client:nth-child(odd) .client-row { background: url(../img/pattern_background.png) #020d1c !important; } body.dark .client-row:hover { background: var(--bg-surface-hover); } body.dark .dash-content .client-row .info { border-color: var(--border-color); } body.dark .info .title { color: var(--text-muted); } body.dark .dash-content .client-row .title { color: var(--text-color); } body.dark .dash-content .client-row p { color: var(--text-muted) !important; } body.dark .dash-content .client-row p a { color: var(--text-muted); } body.dark .wb-ele { background-color: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-color); } body.dark .wb-ele.allocated { background: rgba(48, 178, 96, 0.12); } body.dark .wb-ele-readonly { background-color: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-muted); } body.dark .wb-ele.allocated option { background-color: var(--bg-surface-alt); color: #fff; } body.dark .btn.btn-primary { color: #fff !important; } body.dark .btn_primary { color: #fff !important; } body.dark .wb-ele-note { background: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-color); } body.dark .wb-ele-note:hover { background: var(--bg-surface-hover); border-color: var(--border-color); } body.dark .sm-txt { color: var(--text-muted); } body.dark .noData { color: #ff6b64; border-color: rgba(255, 107, 100, 0.4); background: rgba(255, 107, 100, 0.06); } body.dark .inside-shadow { background: var(--bg-surface-alt); border-color: var(--border-color); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3); } body.dark .note.index-note { background: var(--bg-surface); border-color: var(--border-color); } body.dark .note_div_a { border-color: var(--border-color); } body.dark .note_div_a small { color: var(--text-muted); } body.dark .note_div_b, body.dark .note_div_b div p { color: var(--text-color); } body.dark .tag-chip { background: var(--bg-surface-alt); color: var(--text-color); } body.dark .client-checkbox { background-color: var(--bg-surface-alt); border-color: var(--border-color); } body.dark .action-toggle { background: var(--bg-surface-alt); border-color: var(--border-color); color: var(--text-muted); } body.dark .action-toggle.is-done { color: #fff; } body.dark .badgeInfo { background: var(--bg-surface-alt); color: var(--text-muted); } body.dark .field-unset { background-color: rgba(220, 53, 69, 0.12) !important; border-color: rgba(220, 53, 69, 0.4) !important; } body.dark .copyable:hover { text-decoration-color: var(--text-muted); } /* Flatpickr (next call date/time picker) */ body.dark .flatpickr-calendar { background: var(--bg-surface); border-color: var(--border-color); box-shadow: 0 0 30px rgba(0, 0, 0, 0.35); } body.dark .flatpickr-calendar.arrowTop:before, body.dark .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bg-surface); } body.dark .flatpickr-months .flatpickr-month, body.dark .flatpickr-current-month .flatpickr-monthDropdown-months, body.dark .flatpickr-weekdays { background: var(--bg-surface); color: var(--text-color); fill: var(--text-color); } body.dark .flatpickr-current-month input.cur-year { color: var(--text-color); } body.dark .flatpickr-weekday { color: var(--text-muted); } body.dark .flatpickr-day { color: var(--text-color); } body.dark .flatpickr-day.flatpickr-disabled, body.dark .flatpickr-day.prevMonthDay, body.dark .flatpickr-day.nextMonthDay { color: var(--text-muted); } body.dark .flatpickr-day:hover { background: var(--bg-surface-hover); border-color: var(--bg-surface-hover); } body.dark .flatpickr-day.today { border-color: var(--text-muted); } body.dark .flatpickr-day.selected { background: #4154f1; border-color: #4154f1; color: #fff; } body.dark .flatpickr-time { background: var(--bg-surface); border-color: var(--border-color); } body.dark .flatpickr-time input, body.dark .flatpickr-time .flatpickr-time-separator, body.dark .flatpickr-time .flatpickr-am-pm { color: var(--text-color); background: var(--bg-surface); } body.dark .flatpickr-time input:hover, body.dark .flatpickr-time .flatpickr-am-pm:hover { background: var(--bg-surface-hover); } body.dark .numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-muted); } body.dark .numInputWrapper span.arrowDown:after { border-top-color: var(--text-muted); } body.dark .info-note-block { background: var(--bg-surface); border-color: var(--border-color); color: var(--text-muted); } /*-------------------------------------------------------------- # Modal header banner stays branded/colored — no change needed # ('Meta whatsapp'-style gradient headers already read fine on dark) --------------------------------------------------------------*/