/* ════════════════════════════════════════════════ ProofGet Beta — Dark / Light Theme Applied via data-theme="dark" on ════════════════════════════════════════════════ */ /* Toggle button — glass-white style for gradient headers */ .theme-toggle-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: white; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background 0.2s, transform 0.15s; flex-shrink: 0; } .theme-toggle-btn:hover { background: rgba(255,255,255,0.28); transform: scale(1.05); } /* ════════════════════════════════════════════════ DARK MODE ════════════════════════════════════════════════ */ html[data-theme="dark"] { color-scheme: dark; /* Core variables — override every view's :root */ --bg: #0f1117; --surface: #1a1e2e; --border: #2d3748; --text: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 14px rgba(0,0,0,0.45); --shadow-lg: 0 10px 30px rgba(0,0,0,0.6); } html[data-theme="dark"] body { background: var(--bg); color: var(--text); } /* ── Navigation ────────────────────────────────── */ html[data-theme="dark"] .site-nav { background: #151824; border-bottom-color: var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.35); } html[data-theme="dark"] .site-nav a { color: var(--text-secondary); } html[data-theme="dark"] .site-nav a:hover { background: rgba(255,255,255,0.05); color: var(--text); } html[data-theme="dark"] .site-nav a.active { color: #63b3ed; border-bottom-color: #63b3ed; } html[data-theme="dark"] .site-nav .nav-logout { color: #fc8181; } html[data-theme="dark"] .site-nav .nav-logout:hover { background: rgba(252,129,129,0.08); } /* ── Cards & surfaces ───────────────────────────── */ html[data-theme="dark"] .card, html[data-theme="dark"] .quick-link, html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .group-card, html[data-theme="dark"] .client-item { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .card-body { background: var(--surface); } html[data-theme="dark"] .quick-link:hover, html[data-theme="dark"] .client-item:hover { border-color: #63b3ed; } /* Quick link icon tints */ html[data-theme="dark"] .ql-icon.blue { background: rgba(49,130,206,0.18) !important; } html[data-theme="dark"] .ql-icon.green { background: rgba(56,161,105,0.18) !important; } html[data-theme="dark"] .ql-icon.amber { background: rgba(221,107,32,0.18) !important; } html[data-theme="dark"] .ql-icon.purple { background: rgba(107,70,193,0.18) !important; } /* ── Inputs ─────────────────────────────────────── */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0d1018 !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="dark"] input::placeholder { color: var(--text-muted) !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus { border-color: #63b3ed !important; box-shadow: 0 0 0 3px rgba(99,179,237,0.15) !important; } /* ── Tables ─────────────────────────────────────── */ html[data-theme="dark"] thead th { background: #1f2535 !important; color: var(--text-secondary); border-bottom-color: var(--border); } html[data-theme="dark"] tbody td { border-bottom-color: var(--border); color: var(--text); } html[data-theme="dark"] tbody tr:hover { background: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .row-total { background: #1f2535 !important; border-top-color: var(--border) !important; } /* ── Buttons ────────────────────────────────────── */ html[data-theme="dark"] .btn-muted { background: #262a38; color: var(--text-secondary); } html[data-theme="dark"] .btn-muted:hover { background: #2f3447; color: var(--text); } /* ── Separators ─────────────────────────────────── */ html[data-theme="dark"] .separator::before, html[data-theme="dark"] .separator::after { background: var(--border) !important; } html[data-theme="dark"] .separator span { color: var(--text-muted); } /* ── Footer ─────────────────────────────────────── */ html[data-theme="dark"] .page-footer { border-top-color: var(--border); color: var(--text-muted); } /* ── Admin — editable cells ─────────────────────── */ html[data-theme="dark"] .editable:hover { background: rgba(255,255,255,0.07); } html[data-theme="dark"] .editable.empty { color: var(--text-muted); } /* ── Admin — client/group sections ─────────────── */ html[data-theme="dark"] .client-section-body { background: #111520; } html[data-theme="dark"] .group-header:hover { background: rgba(255,255,255,0.04); } html[data-theme="dark"] .group-header.expanded { border-bottom-color: var(--border); } html[data-theme="dark"] .domain-tag { background: #262a38; border-color: var(--border); color: var(--text); } html[data-theme="dark"] .assign-form select { background: #0d1018; color: var(--text); border-color: var(--border); } /* ── Warning banners ────────────────────────────── */ html[data-theme="dark"] .warning-banner { background: #2d2208; border-color: #7c4a0a; color: #fbd38d; } /* ── Scrollbar ──────────────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f1117; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5568; }