/* panel-dark.css — dark theme matching the approved mockups (deep navy + slate cards + blue * accent). Drop-in: loaded AFTER style.css; activated by class="theme-dark" on . Works * mostly by overriding the style.css CSS variables, plus targeted fixes for components that * hardcode a light value (the .table, badges) or are unstyled in the base sheet (.input, code). * No HTML/JS structure changes required. Blended from a Gemini + GPT-5.5 generation pass. */ body.theme-dark { color-scheme: dark; --primary: #2563eb; --primary-dark: #1d4ed8; --primary-50: rgba(37, 99, 235, 0.12); --secondary: #9ca3af; --danger: #dc2626; /* darker red → readable white text on small Logout/Revoke/Delete buttons */ --warning: #f59e0b; --success: #22c55e; --dark: #0b1220; /* top bar */ --darker: #020617; --surface: #111827; /* cards */ --bg: #0b1220; /* app background */ --light: #1f2937; --border: #1f2937; --text: #e5e7eb; --text-light: #9ca3af; --shadow: 0 1px 2px 0 rgba(0,0,0,.35), 0 1px 3px 0 rgba(0,0,0,.28); --shadow-lg: 0 18px 40px -20px rgba(0,0,0,.7), 0 8px 20px -12px rgba(0,0,0,.5); background: var(--bg); color: var(--text); } /* Surfaces that hardcode a light background in style.css. */ body.theme-dark .card, body.theme-dark .table, body.theme-dark .modal-content, body.theme-dark .login-card, body.theme-dark .stat-card { background: var(--surface); } /* Dashboard stat numbers + login header text (hardcoded dark in base → invisible on dark cards). */ body.theme-dark .stat-content h3, body.theme-dark .login-header h1 { color: var(--text); } body.theme-dark .stat-content p, body.theme-dark .login-header p { color: var(--text-light); } /* Form labels — base sheet sets .form-group label to a dark slate (#374151): low-contrast on dark. */ body.theme-dark .form-group label { color: var(--text-light); } body.theme-dark .table th { color: var(--text-light); } body.theme-dark .table thead { background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border); } body.theme-dark .table th, body.theme-dark .table td { border-bottom-color: var(--border); } body.theme-dark .table tbody tr:hover { background: rgba(255,255,255,.04); } body.theme-dark .card-title, body.theme-dark .modal-title, body.theme-dark .modal-header h2 { color: var(--text); } /* Form controls — UNSTYLED in style.css (browser-default = light), so the theme must style them * fully to match the mockup (rounded, padded, dark). Covers both `.input` and bare elements. */ body.theme-dark .input, body.theme-dark input[type="text"], body.theme-dark input[type="number"], body.theme-dark input[type="url"], body.theme-dark input[type="email"], body.theme-dark input[type="password"], body.theme-dark input[type="search"], body.theme-dark input[type="datetime-local"], body.theme-dark input[type="date"], body.theme-dark select, body.theme-dark textarea, body.theme-dark .form-group input, body.theme-dark .form-group select, body.theme-dark .form-group textarea { background: #0b1220; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font: inherit; outline: none; } /* Focus ring on text-like fields only — NOT checkboxes/radios/file (they'd get a stray 3px glow). */ body.theme-dark .input:focus, body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, body.theme-dark select:focus, body.theme-dark textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.25); } body.theme-dark ::placeholder { color: #9ca3af; opacity: 1; } /* Checkboxes / radios / file inputs keep their native control but tint to the accent. */ body.theme-dark input[type="checkbox"], body.theme-dark input[type="radio"] { accent-color: var(--primary); } body.theme-dark input[type="file"] { background: transparent; border: 0; padding: 0; color: var(--text-light); } /* The native "Choose file" button (#m-image-file on Messages) stays light otherwise. */ body.theme-dark input[type="file"]::file-selector-button { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer; } /* Autofill repaints fields yellow/white on Chrome — pin them dark. */ body.theme-dark input:-webkit-autofill, body.theme-dark input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #0b1220 inset; caret-color: var(--text); } /* Buttons (primary/danger already use vars). Secondary needs a dark surface. */ body.theme-dark .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } body.theme-dark .btn-secondary:hover { background: var(--light); border-color: #4b5563; } /* Badges (pills) — readable tints on dark. */ body.theme-dark .badge-success { background: rgba(34,197,94,.15); color: #4ade80; } body.theme-dark .badge-danger { background: rgba(239,68,68,.15); color: #f87171; } body.theme-dark .badge-warning { background: rgba(245,158,11,.15); color: #fbbf24; } body.theme-dark .badge-info { background: rgba(59,130,246,.15); color: #60a5fa; } /* Inline code (cells render values in ). */ body.theme-dark code, body.theme-dark .code { background: #1f2937; color: #e5e7eb; border-radius: 6px; padding: 1px 6px; } /* Stat-card icons. */ body.theme-dark .stat-icon-primary { background: rgba(37,99,235,.15); color: #60a5fa; } body.theme-dark .stat-icon-success { background: rgba(34,197,94,.15); color: #4ade80; } body.theme-dark .stat-icon-warning { background: rgba(245,158,11,.15); color: #fbbf24; } /* Alerts (if status text uses the .alert-* classes — base hardcodes pastel light bgs). */ body.theme-dark .alert-success { background: rgba(34,197,94,.12); color: #86efac; border-left-color: var(--success); } body.theme-dark .alert-error, body.theme-dark .alert-danger { background: rgba(239,68,68,.12); color: #fca5a5; border-left-color: var(--danger); } body.theme-dark .alert-info { background: rgba(59,130,246,.12); color: #93c5fd; border-left-color: #3b82f6; } /* Modal + nav + misc chrome. */ body.theme-dark .modal-header { border-bottom-color: var(--border); } body.theme-dark .modal-footer { border-top-color: var(--border); } /* Close button: give it a visible BASE color on dark (base sheet's hover→--dark is invisible). */ body.theme-dark .close, body.theme-dark .modal-close { color: var(--text-light); opacity: 1; } body.theme-dark .close:hover, body.theme-dark .close:focus, body.theme-dark .modal-close:hover, body.theme-dark .modal-close:focus { color: var(--text); } /* Nav links: keep a readable slate on the dark bar (don't let the content-link blue leak in). */ body.theme-dark .nav-menu a { color: #94a3b8; } body.theme-dark .nav-menu a:hover, body.theme-dark .nav-menu a.active { color: #fff; border-bottom-color: var(--primary); } body.theme-dark .spinner { border-color: var(--border); border-top-color: var(--primary); } /* Content links only — scoped so it can't override the nav (which has lower specificity). */ body.theme-dark .container a { color: #60a5fa; } body.theme-dark ::selection { background: rgba(37,99,235,.35); color: #fff; } body.theme-dark hr { border-color: var(--border); } /* Slim dark scrollbars — the descendant selector + the main-window (body's own) bar. */ body.theme-dark, body.theme-dark * { scrollbar-width: thin; scrollbar-color: #374151 #0b1220; } body.theme-dark::-webkit-scrollbar, body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } body.theme-dark::-webkit-scrollbar-track, body.theme-dark ::-webkit-scrollbar-track { background: #0b1220; } body.theme-dark::-webkit-scrollbar-thumb, body.theme-dark ::-webkit-scrollbar-thumb { background: #374151; border: 2px solid #0b1220; border-radius: 9999px; } body.theme-dark::-webkit-scrollbar-thumb:hover, body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; }