/* dark.css — dark theme for every page.
 *
 * Pages reference these tokens as var(--surface, white), var(--ok-bg, #d1fae5), …
 * (the fallback is the original light colour), and the page's own :root tokens
 * (--light, --dark, --border, --secondary, …) are re-pointed below. theme.js sets
 * <html data-theme="dark"|"light"> and renders the toggle button.
 */

:root {
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #f1f5f9;
    --surface-strong: #e2e8f0;
    --text-2: #475569;
    --ok-bg: #d1fae5;     --ok-fg: #065f46;
    --err-bg: #fee2e2;    --err-fg: #991b1b;
    --info-bg: #dbeafe;   --info-fg: #1e40af;
    --warn-bg: #fef3c7;   --warn-fg: #92400e;
    --indigo-bg: #e0e7ff; --indigo-fg: #4338ca;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* tokens every page already defines in its own :root */
    --light: #0f172a;            /* page background */
    --dark: #e2e8f0;             /* body text */
    --secondary: #94a3b8;
    --border: #334155;
    --primary-light: rgba(59, 130, 246, 0.2);
    --sidebar-bg: #0b1220;
    --sidebar-hover: #1e293b;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.55);

    /* tokens added for the previously hard-coded colours */
    --surface: #1e293b;
    --surface-soft: #243247;
    --surface-muted: #2b3a52;
    --surface-strong: #334155;
    --text-2: #cbd5e1;
    --ok-bg: rgba(16, 185, 129, 0.18);    --ok-fg: #6ee7b7;
    --err-bg: rgba(239, 68, 68, 0.18);    --err-fg: #fca5a5;
    --info-bg: rgba(59, 130, 246, 0.2);   --info-fg: #93c5fd;
    --warn-bg: rgba(245, 158, 11, 0.18);  --warn-fg: #fcd34d;
    --indigo-bg: rgba(99, 102, 241, 0.22); --indigo-fg: #a5b4fc;
}

html[data-theme="dark"] body { background-color: var(--light); color: var(--dark); }
html[data-theme="dark"] ::placeholder { color: #64748b; opacity: 1; }
html[data-theme="dark"] :is(input, select, textarea) { background-color: var(--surface); color: var(--dark); }
html[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) { background-color: initial; }
html[data-theme="dark"] option { background: #1e293b; color: #e2e8f0; }
html[data-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #1e293b inset; -webkit-text-fill-color: #e2e8f0;
}
html[data-theme="dark"] .btn, html[data-theme="dark"] a.btn, html[data-theme="dark"] .nav-item { color: inherit; }
html[data-theme="dark"] hr { border-color: var(--border); }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: var(--surface-muted); color: var(--dark); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }

/* --secondary becomes a light grey in dark mode, which leaves white button text unreadable */
html[data-theme="dark"] .btn-secondary { background: #475569; color: #fff; }
html[data-theme="dark"] .btn-secondary:hover { background: #64748b; }

/* sidebar sits on the darkest layer */
html[data-theme="dark"] .sidebar { border-right: 1px solid #1e293b; }

/* ── SweetAlert2 popups / toasts ── */
html[data-theme="dark"] .swal2-popup { background: #1e293b; color: #e2e8f0; }
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container { color: #e2e8f0; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select { background: #0f172a; color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] .swal2-timer-progress-bar { background: rgba(255, 255, 255, 0.4); }
html[data-theme="dark"] .swal2-success-circular-line-left,
html[data-theme="dark"] .swal2-success-circular-line-right,
html[data-theme="dark"] .swal2-success-fix { background: #1e293b !important; }

/* ── Tailwind-CDN pages (login / setup / recovery / verify) ── */
html[data-theme="dark"] .bg-white { background-color: #1e293b !important; }
html[data-theme="dark"] .bg-gray-50 { background-color: #0f172a !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: #243247 !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: #334155 !important; }
html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
html[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
html[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.15) !important; }
html[data-theme="dark"] .bg-teal-50 { background-color: rgba(20, 184, 166, 0.15) !important; }
html[data-theme="dark"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-gray-700 { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-gray-600 { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-gray-500 { color: #94a3b8 !important; }
html[data-theme="dark"] .text-gray-400 { color: #64748b !important; }
html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-800 { color: #fca5a5 !important; }
html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-amber-700 { color: #fcd34d !important; }
html[data-theme="dark"] .text-teal-800, html[data-theme="dark"] .text-teal-700 { color: #5eead4 !important; }
html[data-theme="dark"] .text-sky-800, html[data-theme="dark"] .text-sky-700 { color: #7dd3fc !important; }
html[data-theme="dark"] .border-gray-200 { border-color: #334155 !important; }
html[data-theme="dark"] .border-gray-300 { border-color: #475569 !important; }
html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #243247 !important; }

/* ── theme toggle button (injected by theme.js) ── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; cursor: pointer;
    border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
    background: var(--surface, #fff); color: var(--dark, #0f172a);
    transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--surface-muted, #f1f5f9); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle.floating { position: fixed; top: 14px; right: 14px; z-index: 9999; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }