/* =========================================================
   GLOBAL LIGHT / DARK THEME
   The theme is stored in localStorage as "pmh-theme" and
   therefore follows the user across every page of the app.
   ========================================================= */
html[data-theme="dark"] {
    color-scheme: dark;
    --theme-bg: #101827;
    --theme-surface: #172235;
    --theme-surface-2: #1e2b40;
    --theme-text: #edf2f7;
    --theme-muted: #aeb9c8;
    --theme-border: #344257;
    --theme-input: #111b2b;
}

html[data-theme="light"] {
    color-scheme: light;
    --theme-bg: #fdfcf8;
    --theme-surface: #ffffff;
    --theme-surface-2: #f3f4f6;
    --theme-text: #1a1a2e;
    --theme-muted: #6b7280;
    --theme-border: #d9dee7;
    --theme-input: #ffffff;
}

html[data-theme="dark"] body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid {
    color: var(--theme-text);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .info-card {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] table {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] th {
    background-color: var(--theme-surface-2) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] td {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--theme-input) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7f8da1 !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item,
html[data-theme="dark"] .dropdown-item-text {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-2) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] a:not(.nav-link):not(.btn) {
    color: #8db9ff;
}

/* Login/passkey pages and other standalone forms */
html[data-theme="dark"] .login-container,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .passkey-card,
html[data-theme="dark"] .register-card {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

/* Prevent white Bootstrap backgrounds from defeating dark mode. */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

/* Smooth transition when changing theme */
body,
.card,
.modal-content,
.dropdown-menu,
input,
textarea,
select,
.form-control,
.form-select,
table,
th,
td {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}