/* * ═══════════════════════════════════════════════════════ * DARK MODE — Global Override Stylesheet * Applied when * Toggle controlled via topbar button + localStorage * ═══════════════════════════════════════════════════════ */ /* ── CSS variable palette ──────────────────────────────── */ [data-theme="dark"] { /* Layout */ --dm-bg: #0f1117; --dm-surface: #161b22; --dm-surface2: #1e2533; --dm-surface3: #252d3d; /* Borders */ --dm-border: rgba(255,255,255,0.07); --dm-border2: rgba(255,255,255,0.13); /* Text */ --dm-text: #e6edf3; --dm-text2: #8b949e; --dm-text3: #484f58; /* Sidebar CSS variables (sidebar.php uses :root vars) */ --sb-bg: #0f1117; --sb-glass: rgba(22,27,34,0.92); --sb-glass2: rgba(22,27,34,0.78); --sb-border: rgba(255,255,255,0.07); --sb-shadow: 0 8px 32px rgba(0,0,0,0.5); --sb-text: #e6edf3; --sb-muted: #8b949e; --sb-hover-bg: rgba(79,110,247,0.13); --sb-active-bg: rgba(79,110,247,0.20); --sb-divider: rgba(255,255,255,0.06); --sb-section: rgba(255,255,255,0.28); color-scheme: dark; } /* ── Body & layout ─────────────────────────────────────── */ [data-theme="dark"] body { background: var(--dm-bg) !important; color: var(--dm-text) !important; } [data-theme="dark"] .main-content { background: var(--dm-bg) !important; color: var(--dm-text) !important; } /* ── Topbar ────────────────────────────────────────────── */ [data-theme="dark"] .top-bar { background: rgba(22,27,34,0.92) !important; border-bottom-color: var(--dm-border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important; } [data-theme="dark"] #pageTitle { color: var(--dm-text) !important; } [data-theme="dark"] #pageBreadcrumb { color: var(--dm-text2) !important; } [data-theme="dark"] .logout-btn { background: rgba(255,255,255,0.05) !important; border-color: var(--dm-border2) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .logout-btn:hover { background: rgba(239,68,68,0.15) !important; color: #f85149 !important; } [data-theme="dark"] .notif-btn { background: rgba(255,255,255,0.05) !important; border-color: var(--dm-border2) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .notif-btn:hover { background: rgba(79,110,247,0.15) !important; color: #7c9ef8 !important; } [data-theme="dark"] .user-menu { background: rgba(255,255,255,0.05) !important; border-color: var(--dm-border2) !important; } [data-theme="dark"] .user-menu span { color: var(--dm-text) !important; } [data-theme="dark"] .user-menu:hover { background: rgba(255,255,255,0.09) !important; } /* ── Sidebar ───────────────────────────────────────────── */ [data-theme="dark"] .sidebar-header { background: linear-gradient(145deg, rgba(22,27,34,0.97) 0%, rgba(15,17,23,0.95) 100%) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .desktop-collapse-btn { background: rgba(22,27,34,0.9) !important; border-color: var(--dm-border2) !important; } [data-theme="dark"] .sidebar-footer { background: transparent !important; border-top-color: var(--dm-border) !important; } [data-theme="dark"] .nav-section { border-bottom-color: var(--dm-border) !important; } /* ── Page Headers ──────────────────────────────────────── */ [data-theme="dark"] .slds-page-header, [data-theme="dark"] .page-header { background: var(--dm-surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .slds-page-header-title h1, [data-theme="dark"] .page-header h1 { color: var(--dm-text) !important; } [data-theme="dark"] .slds-page-header-meta, [data-theme="dark"] .page-header-meta { color: var(--dm-text2) !important; } /* ── Stat Cards ────────────────────────────────────────── */ [data-theme="dark"] .stat-card, [data-theme="dark"] .sum-card { background: var(--dm-surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .stat-label, [data-theme="dark"] .sum-label { color: var(--dm-text2) !important; } [data-theme="dark"] .stat-value, [data-theme="dark"] .sum-value { color: var(--dm-text) !important; } [data-theme="dark"] .stat-subtitle, [data-theme="dark"] .sum-sub { color: var(--dm-text2) !important; } /* ── Generic cards / panels ────────────────────────────── */ [data-theme="dark"] .analytics-panel, [data-theme="dark"] .filter-bar, [data-theme="dark"] .table-card, [data-theme="dark"] .collections-table-card, [data-theme="dark"] .voip-log-section, [data-theme="dark"] .card { background: var(--dm-surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .card-body { background: var(--dm-surface) !important; } [data-theme="dark"] .table-header { border-bottom-color: var(--dm-border) !important; } /* ── Headings ──────────────────────────────────────────── */ [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: var(--dm-text) !important; } [data-theme="dark"] .text-muted { color: var(--dm-text2) !important; } [data-theme="dark"] .text-dark { color: var(--dm-text) !important; } /* ── Tables ────────────────────────────────────────────── */ [data-theme="dark"] .table, [data-theme="dark"] .tbl { color: var(--dm-text) !important; } [data-theme="dark"] .table thead th, [data-theme="dark"] .tbl thead th, [data-theme="dark"] .daily-table th, [data-theme="dark"] .voip-log-table thead th { background: var(--dm-surface2) !important; color: var(--dm-text2) !important; border-bottom-color: var(--dm-border2) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .table tbody td, [data-theme="dark"] .tbl tbody td, [data-theme="dark"] .daily-table td { color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .table tbody tr:hover, [data-theme="dark"] .tbl tbody tr:hover { background: var(--dm-surface2) !important; } [data-theme="dark"] .table-responsive { background: var(--dm-surface) !important; } [data-theme="dark"] .voip-log-table tbody tr:hover { background: var(--dm-surface2) !important; } /* ── Forms ─────────────────────────────────────────────── */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .dept-select, [data-theme="dark"] .filter-custom input[type="date"] { background: var(--dm-surface2) !important; border-color: var(--dm-border2) !important; color: var(--dm-text) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--dm-surface3) !important; border-color: #4f6ef7 !important; box-shadow: 0 0 0 3px rgba(79,110,247,0.2) !important; color: var(--dm-text) !important; outline: none !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--dm-text3) !important; opacity: 1; } [data-theme="dark"] .form-label, [data-theme="dark"] label { color: var(--dm-text) !important; } [data-theme="dark"] small, [data-theme="dark"] .form-text { color: var(--dm-text2) !important; } /* ── Modals ────────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .modal-body { background: var(--dm-surface) !important; color: var(--dm-text) !important; } [data-theme="dark"] .modal-footer { background: var(--dm-surface2) !important; border-top-color: var(--dm-border) !important; } /* ── Filter Bar ────────────────────────────────────────── */ [data-theme="dark"] .filter-bar { background: var(--dm-surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,.4) !important; } [data-theme="dark"] .filter-label, [data-theme="dark"] .filter-label-txt { color: var(--dm-text2) !important; } [data-theme="dark"] .filter-btn, [data-theme="dark"] .flt-btn { background: var(--dm-surface2) !important; border-color: var(--dm-border2) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .flt-btn:hover { border-color: #4f6ef7 !important; color: #7c9ef8 !important; background: rgba(79,110,247,0.12) !important; } [data-theme="dark"] .filter-btn.active, [data-theme="dark"] .flt-btn.active { background: #4f6ef7 !important; border-color: #4f6ef7 !important; color: white !important; } [data-theme="dark"] .filter-custom span { color: var(--dm-text2) !important; } /* ── Analytics Panel ───────────────────────────────────── */ [data-theme="dark"] .analytics-panel { background: var(--dm-surface) !important; } [data-theme="dark"] .analytics-header h3 { color: var(--dm-text) !important; } [data-theme="dark"] .range-label { background: var(--dm-surface2) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .payment-bar-bg, [data-theme="dark"] .score-bar-bg, [data-theme="dark"] .calls-bar-bg, [data-theme="dark"] .outcome-bar-bg { background: var(--dm-surface3) !important; } [data-theme="dark"] .payment-bar-text, [data-theme="dark"] .payment-mode-label, [data-theme="dark"] .outcome-label { color: var(--dm-text2) !important; } [data-theme="dark"] .daily-trend { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .daily-trend-title { color: var(--dm-text2) !important; } [data-theme="dark"] .analytics-loading { color: var(--dm-text2) !important; } [data-theme="dark"] .analytics-big-count, [data-theme="dark"] .analytics-avg { color: var(--dm-text2) !important; } /* ── Detail Modal (team performance) ──────────────────── */ [data-theme="dark"] .detail-user-card { background: linear-gradient(135deg, rgba(79,110,247,0.15), rgba(124,58,237,0.15)) !important; } [data-theme="dark"] .dstat { background: var(--dm-surface2) !important; } [data-theme="dark"] .dstat-val { color: var(--dm-text) !important; } [data-theme="dark"] .dstat-lbl { color: var(--dm-text2) !important; } [data-theme="dark"] .heatmap-day.hm-0 { background: var(--dm-surface3) !important; } [data-theme="dark"] .heatmap-legend .box.hm-0 { background: var(--dm-surface3) !important; } [data-theme="dark"] .heatmap-legend { color: var(--dm-text2) !important; } [data-theme="dark"] .outcome-section h5 { color: var(--dm-text) !important; } [data-theme="dark"] .detail-name { color: var(--dm-text) !important; } [data-theme="dark"] .detail-meta { color: var(--dm-text2) !important; } /* ── Employee table ─────────────────────────────────────── */ [data-theme="dark"] .emp-name { color: var(--dm-text) !important; } [data-theme="dark"] .emp-role { color: var(--dm-text2) !important; } [data-theme="dark"] .rank-num { color: var(--dm-text2) !important; } [data-theme="dark"] .score-num { color: #a78bfa !important; } [data-theme="dark"] .calls-num { color: var(--dm-text) !important; } [data-theme="dark"] .btn-view { background: rgba(124,58,237,0.15) !important; color: #a78bfa !important; } [data-theme="dark"] .btn-view:hover { background: #7c3aed !important; color: white !important; } [data-theme="dark"] .dept-pill.default { background: var(--dm-surface3) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .table-header h3 { color: var(--dm-text) !important; } [data-theme="dark"] #table-count-meta { color: var(--dm-text2) !important; } /* ── VOIP Log ───────────────────────────────────────────── */ [data-theme="dark"] .voip-log-header { background: var(--dm-surface2) !important; color: var(--dm-text) !important; } [data-theme="dark"] .voip-log-body { background: var(--dm-surface) !important; } [data-theme="dark"] .voip-log-table td { border-color: var(--dm-border) !important; } /* ── Notifications Dropdown ─────────────────────────────── */ [data-theme="dark"] .notifications-dropdown { background: var(--dm-surface) !important; border-color: var(--dm-border2) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .notif-header { border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } [data-theme="dark"] .notif-sub { color: var(--dm-text2) !important; } [data-theme="dark"] .notif-item { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .notif-item:hover { background: var(--dm-surface2) !important; } [data-theme="dark"] .notif-item-title { color: var(--dm-text) !important; } [data-theme="dark"] .notif-item-time, [data-theme="dark"] .notif-item-body { color: var(--dm-text2) !important; } [data-theme="dark"] .notif-footer { border-top-color: var(--dm-border) !important; } [data-theme="dark"] .notif-footer a { color: #7c9ef8 !important; } [data-theme="dark"] .notif-empty p { color: var(--dm-text2) !important; } /* ── Audit trail (in table cells) ──────────────────────── */ [data-theme="dark"] .audit-trail { background: rgba(16,185,129,0.1) !important; border-left-color: #10b981 !important; color: #6ee7b7 !important; } /* ── Bootstrap Buttons ──────────────────────────────────── */ [data-theme="dark"] .btn-secondary { background: var(--dm-surface2) !important; border-color: var(--dm-border2) !important; color: var(--dm-text) !important; } [data-theme="dark"] .btn-secondary:hover { background: var(--dm-surface3) !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; } /* ── Empty & loading states ─────────────────────────────── */ [data-theme="dark"] .empty-state { color: var(--dm-text2) !important; } [data-theme="dark"] .empty-state h3 { color: var(--dm-text2) !important; } [data-theme="dark"] .loading-state p { color: var(--dm-text2) !important; } /* ── Badges (keep colorful, just soften) ───────────────── */ [data-theme="dark"] .source-badge.daily-call { background: rgba(30,64,175,0.3) !important; color: #93c5fd !important; } [data-theme="dark"] .source-badge.manual { background: var(--dm-surface3) !important; color: var(--dm-text2) !important; } [data-theme="dark"] .payment-badge { background: rgba(7,89,133,0.3) !important; color: #7dd3fc !important; } /* ── Hardcoded inline color overrides ───────────────────── */ [data-theme="dark"] [style*="color: #1f2937"], [data-theme="dark"] [style*="color:#1f2937"] { color: var(--dm-text) !important; } [data-theme="dark"] [style*="color: #374151"], [data-theme="dark"] [style*="color:#374151"] { color: var(--dm-text2) !important; } [data-theme="dark"] [style*="color: #6b7280"], [data-theme="dark"] [style*="color:#6b7280"] { color: var(--dm-text2) !important; } [data-theme="dark"] [style*="color: #9ca3af"], [data-theme="dark"] [style*="color:#9ca3af"] { color: var(--dm-text3) !important; } [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background-color:white"] { background: var(--dm-surface) !important; } [data-theme="dark"] [style*="background: #f9fafb"], [data-theme="dark"] [style*="background:#f9fafb"] { background: var(--dm-surface2) !important; } [data-theme="dark"] [style*="background: #f3f4f6"], [data-theme="dark"] [style*="background:#f3f4f6"] { background: var(--dm-surface2) !important; } /* ── Scrollbar ──────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-surface) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14) !important; border-radius: 6px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24) !important; } /* ═══════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON (always styled, state-aware) ═══════════════════════════════════════════════════════ */ .dark-mode-btn { position: relative; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.70); background: rgba(255,255,255,0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 12px; color: #374151; font-size: 16px; cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dark-mode-btn:hover { background: rgba(255,255,255,0.92); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); } /* In dark mode, show sun icon in amber */ [data-theme="dark"] .dark-mode-btn { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.13) !important; color: #fbbf24 !important; } [data-theme="dark"] .dark-mode-btn:hover { background: rgba(251,191,36,0.15) !important; color: #fde68a !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(251,191,36,0.2) !important; }