/* Theme-specific presentation lives here; existing dark page styles stay intact. */
:root { color-scheme: dark; }
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f2f6fa;
    --bg-soft: #eef3f7;
    --surface: #fff;
    --surface-strong: #f8fafc;
    --text: #203044;
    --muted: #586e83;
    --text-muted: var(--muted);
    --line: #d6e1eb;
    --accent: #167a6e;
    --accent-dark: #12695f;
    --accent-soft: #e3f2ed;
    --success-bg: #e3f2ed;
    --success-text: #167a6e;
    --danger-bg: #fdebec;
    --danger-text: #ae2f40;
    --status-success-bg: #e3f2ed;
    --status-success-text: #176454;
    --status-info-bg: #e5f2fa;
    --status-info-text: #205d7d;
    --status-warning-bg: #fff3d5;
    --status-warning-text: #805514;
    --status-secondary-bg: #e9eef4;
    --status-secondary-text: #475c71;
    --status-danger-bg: #fdebec;
    --status-danger-text: #a42d3e;
    --shadow: 0 12px 32px rgba(36, 57, 77, .07);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--surface);
    --bs-border-color: var(--line);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--bg-soft);
}
.interface-preferences { display: inline-flex; align-items: center; gap: 6px; }
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #405164;
    border-radius: 6px;
    background: #1c2b3a;
    color: #a6b6c8;
    font: 16px/1 "Segoe UI", sans-serif;
    cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: #6a7e90; color: #f2f5fb; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent, #62ccbc); outline-offset: 2px; }
.theme-toggle__moon { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: inline; }
html[data-theme="light"] .theme-toggle__sun { display: none; }
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .sidebar { background: #fff; }
html[data-theme="light"] .account-status { color: var(--success-text); background: var(--success-bg); border-color: #b4dbcf; }
html[data-theme="light"] .nav-link.is-active,
html[data-theme="light"] :is(.btn-primary, .btn-success, .btn-info, .button--primary) {
    background: #31b7a0 !important; border-color: #31b7a0 !important; color: #082c27 !important;
}
html[data-theme="light"] .nav-link.is-active:hover,
html[data-theme="light"] :is(.btn-primary, .btn-success, .btn-info, .button--primary):hover {
    background: #27a48f !important; border-color: #27a48f !important; color: #082c27 !important;
}
html[data-theme="light"] :is(.theme-toggle, .language-switcher button) { color: var(--muted); background: var(--bg-soft); border-color: var(--line); box-shadow: none; }
html[data-theme="light"] .language-switcher button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: #bddad2; }
html[data-theme="light"] :is(.theme-toggle, .language-switcher button):hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="light"] ::selection { background: #bae8de; color: #15372f; }
html[data-theme="light"] :is(.site-beta-notice, .login-beta-notice) { background: #fff7df; border-color: #e5c565; color: #805514; box-shadow: none; }
html[data-theme="light"] :is(.site-beta-notice__title, .site-beta-notice__text, .login-beta-notice__title, .login-beta-notice__text) { color: #805514; }
html[data-theme="light"] :is(.site-beta-notice__icon, .login-beta-notice__icon) { color: #a36c08; }
html[data-theme="light"] .btn-close { filter: none; }
html[data-theme="light"] .modal-backdrop.show { opacity: .35; }
html[data-theme="light"] .btn-warning:hover,
html[data-theme="light"] .btn-warning:focus-visible { background: #ffe7a5 !important; color: #805514 !important; border-color: #be922f !important; }
html[data-theme="light"] :is(.alert, .alert p) { color: inherit; }
html[data-theme="light"] .alert p { color: inherit !important; }
html[data-theme="light"] .recording-player { background: var(--bg-soft); }
html[data-theme="light"] .pagination .page-link { background: var(--surface); }
html[data-theme="light"] .pagination .active .page-link { background: var(--accent); color: #fff; }
html[data-theme="light"] .table {
    --bs-table-color: var(--text);
    --bs-table-bg: var(--surface);
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: #f3f7fa;
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: #e9f4f0;
}
html[data-theme="light"] :is(input, textarea)::placeholder { color: #687f94; opacity: 1; }
html[data-theme="light"] :is(.login-card) { background: #fff !important; border-color: var(--line) !important; box-shadow: var(--shadow) !important; }
html[data-theme="light"] :is(.login-title, .login-field__label, .login-brand__name) { color: var(--text); }
html[data-theme="light"] .login-subtitle { color: var(--muted); }
html[data-theme="light"] .login-screen .login-field .form-control { background: var(--surface-strong); color: var(--text); border-color: #c1d0df; }
html[data-theme="light"] .login-screen .login-field .form-control:focus { background: #fff; border-color: var(--accent); }
html[data-theme="light"] .login-screen .login-field .form-control::placeholder { color: #687f94; }
html[data-theme="light"] .password-toggle { color: var(--muted); }
html[data-theme="light"] .password-toggle:hover { color: var(--accent); }
@media (pointer: coarse) {
    .theme-toggle { width: 44px; height: 44px; }
    .account-status-row { flex-wrap: wrap; }
    .account-status-row .language-toolbar--account { margin-left: auto; }
}