/* ============================================================================ Risper CRM — Dark mode (CLAUDE-PWA.md §8.90) Opt-in: active only when . Bootstrap 5.3 components adapt natively; this file covers the app's custom surfaces. Default is light. ============================================================================ */ html[data-bs-theme="dark"] { --crm-bg: #14141c; --crm-border: #2b2b39; --crm-card-radius: 20px; --crm-card-shadow: 0 2px 14px rgba(0, 0, 0, .45); color-scheme: dark; } html[data-bs-theme="dark"] body { background: var(--crm-bg); color: #d7d7e3; } /* Surfaces */ html[data-bs-theme="dark"] .topbar, html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .stat-card, html[data-bs-theme="dark"] .lead-card, html[data-bs-theme="dark"] .kanban-card, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .notif-dropdown, html[data-bs-theme="dark"] .user-dropdown-menu, html[data-bs-theme="dark"] .dropdown-menu { background: #1e1e2a !important; color: #d7d7e3; border-color: var(--crm-border) !important; } html[data-bs-theme="dark"] .kanban-cards { background: #181821; } html[data-bs-theme="dark"] .page-content, html[data-bs-theme="dark"] .main-wrapper { background: var(--crm-bg); } /* Text */ html[data-bs-theme="dark"] .topbar .page-title, html[data-bs-theme="dark"] .stat-card .stat-value, html[data-bs-theme="dark"] .lead-card .lc-title, html[data-bs-theme="dark"] .topbar-user .user-name { color: #ececf5; } html[data-bs-theme="dark"] .stat-card .stat-label, html[data-bs-theme="dark"] .lead-card .lc-meta, html[data-bs-theme="dark"] .text-muted { color: #9a9ab0 !important; } /* Forms */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .crm-search-box, html[data-bs-theme="dark"] .crm-fd-btn { background: #24242f !important; color: #e6e6f0 !important; border-color: #34343f !important; } html[data-bs-theme="dark"] .form-control::placeholder { color: #6b6b80 !important; } /* Tables (header already uses the dark sidebar colour) */ html[data-bs-theme="dark"] table.dataTable tbody tr { background: #1e1e2a; } html[data-bs-theme="dark"] table.dataTable tbody td { color: #d7d7e3 !important; border-color: #2b2b39 !important; } html[data-bs-theme="dark"] table.dataTable tbody tr:hover { background: #26263340 !important; } html[data-bs-theme="dark"] .crm-filter-bar { background: #1a1a24; border-color: var(--crm-border) !important; } html[data-bs-theme="dark"] .crm-dt-bottom { border-color: var(--crm-border); } /* Mobile bottom nav + offline elements */ html[data-bs-theme="dark"] .crm-bottom-nav { background: #1e1e2a; border-color: var(--crm-border); } html[data-bs-theme="dark"] table.dataTable.crm-cards tr { background: #1e1e2a; border-color: var(--crm-border); } html[data-bs-theme="dark"] table.dataTable.crm-cards td { border-color: #2b2b39 !important; } html[data-bs-theme="dark"] .crm-skeleton { background: #2a2a37; } /* Dividers / borders that were near-white */ html[data-bs-theme="dark"] .notif-item { border-color: #2b2b39; } html[data-bs-theme="dark"] .notif-item:hover { background: #24242f; } /* The dark toggle button itself */ .crm-theme-toggle .ph-sun { display: none; } html[data-bs-theme="dark"] .crm-theme-toggle .ph-sun { display: inline; } html[data-bs-theme="dark"] .crm-theme-toggle .ph-moon { display: none; } /* ── Agent / Subcontractor / Sadmin portals (their own class names) ─────────── */ html[data-bs-theme="dark"] { --ap-bg: #14141c; --ap-border: #2b2b39; --sp-bg: #14141c; --sp-border: #2b2b39; } html[data-bs-theme="dark"] body { background: #14141c !important; color: #d7d7e3; } html[data-bs-theme="dark"] .ap-main, html[data-bs-theme="dark"] .sp-main, html[data-bs-theme="dark"] .sa-main, html[data-bs-theme="dark"] .sa-page { background: #14141c; } html[data-bs-theme="dark"] .ap-topbar, html[data-bs-theme="dark"] .ap-card, html[data-bs-theme="dark"] .ap-kpi, html[data-bs-theme="dark"] .sp-topbar, html[data-bs-theme="dark"] .sp-card, html[data-bs-theme="dark"] .sa-topbar, html[data-bs-theme="dark"] .sa-card, html[data-bs-theme="dark"] .sa-stat, html[data-bs-theme="dark"] .sa-stat-card { background: #1e1e2a !important; color: #d7d7e3; border-color: #2b2b39 !important; } html[data-bs-theme="dark"] .ap-topbar-title, html[data-bs-theme="dark"] .sp-page-title, html[data-bs-theme="dark"] .sa-topbar-title { color: #ececf5 !important; } html[data-bs-theme="dark"] .sa-topbar { border-bottom-color: #2b2b39 !important; }