/* ── CSS Custom Properties ─────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --bg-page:              #fafafa;
    --bg-surface:           #ffffff;
    --bg-surface-alt:       #f3f4f6;
    --bg-button:            #f0f0f0;
    --bg-button-hover:      #e4e4e4;
    --bg-primary:           #2563eb;
    --bg-primary-hover:     #1d4ed8;
    --bg-primary-subtle:    #eff6ff;
    --bg-primary-subtle-hover: #dbeafe;
    --bg-danger:            #dc2626;
    --bg-danger-subtle:     #fee2e2;
    --bg-error-subtle:      #fef2f2;
    --bg-success-subtle:    #ecfdf5;
    --bg-correct:           #dcfce7;
    --bg-wrong:             #fee2e2;

    /* Text */
    --text:                 #111827;
    --text-secondary:       #374151;
    --text-muted:           #6b7280;
    --text-subtle:          #9ca3af;
    --text-primary:         #2563eb;
    --text-danger:          #dc2626;
    --text-error:           #b91c1c;
    --text-correct:         #166534;
    --text-wrong:           #dc2626;

    /* Borders */
    --border:               #e5e7eb;
    --border-strong:        #d1d5db;
    --border-nav:           #dddddd;
    --border-input:         #cccccc;
    --border-primary:       #bfdbfe;
    --border-danger:        #dc2626;
    --border-error:         #fca5a5;
    --border-success:       #6ee7b7;
    --border-correct:       #6ee7b7;
    --border-wrong:         #fca5a5;

    /* Shadows */
    --shadow-input:         0 2px 14px rgba(0, 0, 0, 0.08);
    --shadow-overlay:       rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] {
    --bg-page:              #1a1a1a;
    --bg-surface:           #252525;
    --bg-surface-alt:       #2f2f2f;
    --bg-button:            #3a3a3a;
    --bg-button-hover:      #464646;
    --bg-primary:           #3b82f6;
    --bg-primary-hover:     #2563eb;
    --bg-primary-subtle:    #1e2a3a;
    --bg-primary-subtle-hover: #1a2535;
    --bg-danger:            #ef4444;
    --bg-danger-subtle:     #2d1515;
    --bg-error-subtle:      #2d1515;
    --bg-success-subtle:    #152d1e;
    --bg-correct:           #152d1e;
    --bg-wrong:             #2d1515;

    --text:                 #e8e8e8;
    --text-secondary:       #d0d0d0;
    --text-muted:           #b8b8b8;
    --text-subtle:          #a0a0a0;
    --text-primary:         #6ba3f5;
    --text-danger:          #f87171;
    --text-error:           #fca5a5;
    --text-correct:         #4ade80;
    --text-wrong:           #f87171;

    --border:               #383838;
    --border-strong:        #484848;
    --border-nav:           #2d2d2d;
    --border-input:         #484848;
    --border-primary:       #1e3a5f;
    --border-danger:        #ef4444;
    --border-error:         #5c1a1a;
    --border-success:       #1a5c2e;
    --border-correct:       #1a5c2e;
    --border-wrong:         #5c1a1a;

    --shadow-input:         0 2px 14px rgba(0, 0, 0, 0.5);
    --shadow-overlay:       rgba(0, 0, 0, 0.65);
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Color scheme (makes browser-native controls like date pickers match the theme) ── */
:root                { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
:root {
    scrollbar-color: #c1c1c1 transparent;
}
[data-theme="dark"] {
    scrollbar-color: #484848 transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 4px; }
:root ::-webkit-scrollbar-thumb { background: #c1c1c1; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #484848; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }

/* ── Base ───────────────────────────────────────────────────────────── */
body {
    font-family: monospace;
    margin: 0;
    background: var(--bg-page);
    color: var(--text);
    overflow: hidden;
}

/* ── Nav ────────────────────────────────────────────────────────────── */
nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    height: 48px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-nav);
}
nav .brand { font-weight: bold; font-size: 1rem; margin-right: auto; }
nav a.home-btn {
    padding: 5px 14px;
    font-family: monospace;
    font-size: 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-button);
    text-decoration: none;
    color: var(--text);
}
nav a.home-btn:hover { background: var(--bg-button-hover); }
nav .user-info { font-size: 0.82rem; color: var(--text-muted); }
nav .logout-btn {
    padding: 5px 14px;
    font-family: monospace;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-button);
    color: var(--text);
}
nav .logout-btn:hover { background: var(--bg-button-hover); }

/* ── Theme toggle ───────────────────────────────────────────────────── */
.theme-toggle {
    padding: 5px 14px;
    font-family: monospace;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-button);
    color: var(--text);
}
.theme-toggle:hover { background: var(--bg-button-hover); }

/* ── Main layout ────────────────────────────────────────────────────── */
main {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 24px 40px;
    height: calc(100vh - 48px);
    overflow-y: auto;
}
h1 { font-size: 1.4rem; margin-bottom: 24px; }
h2 {
    font-size: 1rem;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
section {
    background: var(--bg-surface);
    border: 1px solid var(--border-nav);
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

/* ── Utility buttons ────────────────────────────────────────────────── */
.btn {
    padding: 7px 16px;
    font-family: monospace;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    border: none;
}
.btn-primary {
    background: var(--bg-primary);
    color: #fff;
    border: none;
}
.btn-primary:hover { background: var(--bg-primary-hover); }
.btn-secondary {
    background: var(--bg-button);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-button-hover); }
.btn-danger {
    background: var(--bg-danger);
    color: #fff;
    border: 1px solid var(--border-danger);
}
.btn-danger:hover { opacity: 0.9; }

/* ── Utility inputs ─────────────────────────────────────────────────── */
.form-input {
    padding: 7px 10px;
    font-family: monospace;
    font-size: 0.85rem;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text);
}
.form-input:focus { outline: none; border-color: var(--bg-primary); }

/* ── Message boxes ──────────────────────────────────────────────────── */
.msg {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.msg-error {
    background: var(--bg-error-subtle);
    border: 1px solid var(--border-error);
    color: var(--text-error);
}
.msg-success {
    background: var(--bg-success-subtle);
    border: 1px solid var(--border-success);
    color: var(--text);
}

/* ── Utility text ───────────────────────────────────────────────────── */
.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.link        { color: var(--text-primary); text-decoration: none; }
.link:hover  { text-decoration: underline; }