/* Theme tokens + dark-mode overrides for Bootstrap 5.1 (no native dark mode) */
:root {
    --app-bg: #f0f2f5;
    --app-fg: #212529;
    --app-muted: #6c757d;
    --app-surface: #ffffff;
    --app-surface-2: #f9fafb;
    --app-border: #e0e4ea;
    --app-brand: #003087;
    --app-accent: #f0c000;
    --app-link: #0d6efd;
    --app-shadow: rgba(0, 0, 0, .1);
    color-scheme: light;
}

html[data-theme="dark"] {
    --app-bg: #121418;
    --app-fg: #e6e8eb;
    --app-muted: #9aa3ad;
    --app-surface: #1c1f26;
    --app-surface-2: #23272f;
    --app-border: #343a44;
    --app-brand: #001f5c;
    --app-accent: #f0c000;
    --app-link: #7fb0ff;
    --app-shadow: rgba(0, 0, 0, .5);
    color-scheme: dark;
}

body { background: var(--app-bg); color: var(--app-fg); transition: background-color .2s, color .2s; }

/* Theme switch */
.theme-switch { align-items: center; display: inline-flex; gap: .5rem; margin: 0; }
.theme-switch .form-check-input { cursor: pointer; height: 1.25rem; margin: 0; width: 2.4rem; }
.theme-switch .form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.theme-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(240, 192, 0, .35); }
.theme-switch .bi { color: #fff; font-size: 1rem; }
.theme-switch .theme-icon-light { display: inline; }
.theme-switch .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-switch .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-switch .theme-icon-dark { display: inline; }

/* ---------- Dark overrides ---------- */
html[data-theme="dark"] .portal-header,
html[data-theme="dark"] .top-bar { background: var(--app-brand); }

html[data-theme="dark"] .text-muted { color: var(--app-muted) !important; }
html[data-theme="dark"] .text-dark { color: var(--app-fg) !important; }
html[data-theme="dark"] .text-primary { color: var(--app-link) !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--app-surface) !important; color: var(--app-fg); }
html[data-theme="dark"] .border { border-color: var(--app-border) !important; }
html[data-theme="dark"] hr { border-color: var(--app-border); opacity: 1; }
html[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.system-card):not(.azure-btn):not(.brand) { color: var(--app-link); }

html[data-theme="dark"] .card { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-fg); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer { background-color: var(--app-surface-2); border-color: var(--app-border); }
html[data-theme="dark"] .shadow-sm { box-shadow: 0 .125rem .25rem var(--app-shadow) !important; }
html[data-theme="dark"] .shadow { box-shadow: 0 .5rem 1rem var(--app-shadow) !important; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text { background-color: var(--app-surface-2); border-color: var(--app-border); color: var(--app-fg); }
html[data-theme="dark"] .form-control::placeholder { color: var(--app-muted); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background-color: var(--app-surface-2); border-color: #86b7fe; color: var(--app-fg); }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: var(--app-surface); color: var(--app-muted); }
html[data-theme="dark"] .form-control-plaintext { color: var(--app-fg); }
html[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--app-surface-2); border-color: var(--app-border); }
html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6e8eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }

html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.06); border-color: var(--app-border); color: var(--app-fg); }
html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--app-border); }
html[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--app-border); }
html[data-theme="dark"] .table-light { --bs-table-bg: var(--app-surface-2); color: var(--app-fg); border-color: var(--app-border); }
html[data-theme="dark"] .table-dark { --bs-table-bg: #0d0f14; }

html[data-theme="dark"] .dropdown-menu { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-fg); }
html[data-theme="dark"] .dropdown-item { color: var(--app-fg); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: var(--app-surface-2); color: var(--app-fg); }
html[data-theme="dark"] .dropdown-item.text-danger { color: #ff6b6b !important; }
html[data-theme="dark"] .dropdown-divider { border-color: var(--app-border); }

html[data-theme="dark"] .list-group-item { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-fg); }

html[data-theme="dark"] .modal-content { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-fg); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--app-border); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

html[data-theme="dark"] .alert-warning { background-color: #3a2e07; border-color: #5c4a0c; color: #ffd76a; }
html[data-theme="dark"] .alert-success { background-color: #0f3320; border-color: #1c5a37; color: #8fe0ad; }
html[data-theme="dark"] .alert-danger { background-color: #3d1418; border-color: #6b2229; color: #ff9aa2; }
html[data-theme="dark"] .alert-info { background-color: #0b2f3a; border-color: #145066; color: #8fd6ea; }
html[data-theme="dark"] .alert a { color: inherit; }

html[data-theme="dark"] .btn-outline-secondary { border-color: #6c757d; color: #c4c9ce; }
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #6c757d; color: #fff; }
html[data-theme="dark"] .btn-outline-primary { border-color: var(--app-link); color: var(--app-link); }
html[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--app-link); color: #0d1117; }
html[data-theme="dark"] .btn-link { color: var(--app-link); }
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-signin { background: #0b3fa8; border-color: #0b3fa8; }
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-signin:hover { background: #1550c8; border-color: #1550c8; }

/* Home page */
html[data-theme="dark"] .welcome-bar { background: var(--app-surface); border-bottom-color: var(--app-border); }
html[data-theme="dark"] .welcome-bar p,
html[data-theme="dark"] .section-label { color: var(--app-muted); }
html[data-theme="dark"] .system-card { background: var(--app-surface); border-color: var(--app-border); color: var(--app-fg); }
html[data-theme="dark"] .system-card:hover { border-color: var(--app-link); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .system-card .sys-icon { color: var(--app-link); }
html[data-theme="dark"] .system-card .sys-desc { color: var(--app-muted); }

/* Standalone auth pages (login / change password) */
html[data-theme="dark"] .login-card { background: var(--app-surface); border-color: var(--app-border); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); color: var(--app-fg); }
html[data-theme="dark"] .login-card h1,
html[data-theme="dark"] .login-card h2 { color: var(--app-fg); }
html[data-theme="dark"] .login-card .card-logo { background: #16264a; border-color: #23407a; color: var(--app-link); }
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .pwd-rules li,
html[data-theme="dark"] .divider { color: var(--app-muted); }
html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after { background: var(--app-border); }
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .action-label { color: #c4c9ce; }
html[data-theme="dark"] .azure-btn { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-fg); }
html[data-theme="dark"] .azure-btn:hover,
html[data-theme="dark"] .azure-btn:focus { background: #16264a; border-color: var(--app-link); color: var(--app-fg); }
html[data-theme="dark"] .security-note { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-muted); }
html[data-theme="dark"] .security-note i,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .reset-link { color: var(--app-link); }
html[data-theme="dark"] .back-link:hover,
html[data-theme="dark"] .reset-link:hover { color: #a9c9ff; }
html[data-theme="dark"] .sync-warning { background: #3a2e07; border-color: #5c4a0c; color: #ffd76a; }
html[data-theme="dark"] .sync-warning i { color: var(--app-accent); }
html[data-theme="dark"] .pwd-rules li.ok { color: #6fdc94; }
html[data-theme="dark"] .pwd-rules li.hint { color: #7c8590; }