/* ========================================================================== ClickEarn — Dark Mode Overrides the core CSS custom properties from variables.css when [data-theme="dark"] is set on . Because almost every component (cards, tables, forms, badges) already reads color via var(--color-*), swapping these values re-themes the whole app without touching each component's own CSS file. ========================================================================== */ :root[data-theme="dark"]{ --color-bg: #14101F; --color-surface: #1E1930; --color-sidebar: #0D0A16; --color-border: #322A47; --color-text: #F1EFFB; --color-text-muted: #A79FC4; --color-text-soft: #7A7296; --color-primary-50: rgba(124,58,237,.14); --color-primary-100: rgba(124,58,237,.22); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.45); --shadow-card: 0 2px 10px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.25); } :root[data-theme="dark"] body{ background:var(--color-bg); color:var(--color-text); } :root[data-theme="dark"] .card-panel, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .ptc-ad-card, :root[data-theme="dark"] .method-tile, :root[data-theme="dark"] .ticket-item, :root[data-theme="dark"] .form-control-clean, :root[data-theme="dark"] .form-select-clean, :root[data-theme="dark"] .icon-btn, :root[data-theme="dark"] .user-menu-btn, :root[data-theme="dark"] .sidebar-toggle-btn, :root[data-theme="dark"] .ce-dropdown-menu, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .btn-outline-light-custom{ background:var(--color-surface); border-color:var(--color-border); color:var(--color-text); } :root[data-theme="dark"] .sidebar--light{ background:var(--color-surface); border-color:var(--color-border); } :root[data-theme="dark"] .sidebar--light .sidebar-link{ color:var(--color-text-muted); } :root[data-theme="dark"] .sidebar--light .sidebar-link:hover{ background:var(--color-primary-50); color:#fff; } :root[data-theme="dark"] .table-clean tbody td{ border-color:var(--color-border); } :root[data-theme="dark"] .table-clean tbody tr:hover{ background:rgba(124,58,237,.08); } :root[data-theme="dark"] .table-clean thead th{ border-color:var(--color-border); } :root[data-theme="dark"] .topbar{ background:rgba(20,16,31,.85); } :root[data-theme="dark"] .app-footer{ color:var(--color-text-soft); } :root[data-theme="dark"] .empty-state{ color:var(--color-text-muted); } :root[data-theme="dark"] .tab-pills{ background:rgba(255,255,255,.05); } :root[data-theme="dark"] .progress-clean{ background:rgba(255,255,255,.08); } :root[data-theme="dark"] hr{ border-color:var(--color-border); } :root[data-theme="dark"] .settings-nav a:hover, :root[data-theme="dark"] .settings-nav a.active{ background:var(--color-primary-50); }