:root {
    color-scheme: light;
    --ui-bg: #eef2fa;
    --ui-surface: #ffffff;
    --ui-surface-2: #f4f7fc;
    --ui-text: #17213b;
    --ui-text-muted: #5d708f;
    --ui-border: #d3ddf0;
    --ui-navbar: #1e3a5f;
    --ui-navbar-text: #ffffff;
    --ui-shadow: 0 4px 20px rgba(30, 58, 95, 0.10);
    --ui-accent-1: #2563eb;
    --ui-accent-2: #6366f1;
    --ui-cta: #2563eb;
    --ui-hover: #7c3aed;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ui-bg: #0b1220;
    --ui-surface: #121b2f;
    --ui-surface-2: #1b2742;
    --ui-text: #eef4ff;
    --ui-text-muted: #9db2d4;
    --ui-border: #2c3f62;
    --ui-navbar: #0a1020;
    --ui-navbar-text: #eef4ff;
    --ui-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    --ui-accent-1: #22d3ee;
    --ui-accent-2: #7c3aed;
    --ui-hover: #f43f5e;
}

body,
body.bg-light,
body.bg-body-tertiary {
    background: var(--ui-bg) !important;
    color: var(--ui-text);
}

:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) body.bg-light,
:root:not([data-theme="dark"]) body.bg-body-tertiary {
    background:
        radial-gradient(1200px 700px at 10% -10%, rgba(37, 99, 235, 0.10), transparent 55%),
        radial-gradient(1200px 700px at 90% -20%, rgba(99, 102, 241, 0.10), transparent 55%),
        var(--ui-bg) !important;
    background-attachment: fixed !important;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] body.bg-light,
:root[data-theme="dark"] body.bg-body-tertiary {
    background:
        radial-gradient(1200px 700px at 10% -10%, rgba(34, 211, 238, 0.15), transparent 55%),
        radial-gradient(1200px 700px at 90% -20%, rgba(124, 58, 237, 0.14), transparent 55%),
        var(--ui-bg) !important;
    background-attachment: fixed !important;
}

.navbar,
.topbar,
.navbar.bg-dark,
.navbar.navbar-dark {
    background: var(--ui-navbar) !important;
}

.navbar .navbar-brand,
.navbar .navbar-text,
.navbar .btn,
.topbar .navbar-brand,
.topbar .navbar-text {
    color: var(--ui-navbar-text) !important;
}

.card,
.modal-content,
.offcanvas,
.list-group-item,
.dropdown-menu,
.table,
.table thead,
.table tbody,
.alert,
.admin-sidebar,
.page-shell,
.container .bg-white {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text);
    border-color: var(--ui-border) !important;
}

.card,
.modal-content,
.offcanvas,
.admin-sidebar,
.table,
.dropdown-menu {
    box-shadow: var(--ui-shadow);
}

.table,
.table > :not(caption) > * > * {
    color: var(--ui-text);
    border-color: var(--ui-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--ui-surface-2);
}

.text-muted,
.small,
.form-text,
.card .text-muted,
.table .text-muted,
.alert .text-muted {
    color: var(--ui-text-muted) !important;
}

.form-control,
.form-select,
.input-group-text,
.btn-outline-secondary,
.btn-outline-dark,
.btn-light,
.btn-outline-light,
textarea,
select,
input {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--ui-text-muted) !important;
}

:root:not([data-theme="dark"]) a,
:root:not([data-theme="dark"]) .btn-link {
    color: var(--ui-accent-1);
}

:root:not([data-theme="dark"]) a:hover,
:root:not([data-theme="dark"]) .btn-link:hover {
    color: var(--ui-hover);
}

:root:not([data-theme="dark"]) .btn-primary {
    background: linear-gradient(135deg, #2563eb, #6366f1) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.30);
}

:root:not([data-theme="dark"]) .btn-primary:hover,
:root:not([data-theme="dark"]) .btn-primary:focus {
    background: linear-gradient(135deg, #6366f1, #2563eb) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.32);
}

:root:not([data-theme="dark"]) .btn-success {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.26);
}

:root:not([data-theme="dark"]) .btn-outline-primary,
:root:not([data-theme="dark"]) .btn-outline-secondary,
:root:not([data-theme="dark"]) .btn-outline-dark {
    color: var(--ui-accent-1) !important;
    border-color: var(--ui-accent-1) !important;
}

:root:not([data-theme="dark"]) .btn-outline-primary:hover,
:root:not([data-theme="dark"]) .btn-outline-secondary:hover,
:root:not([data-theme="dark"]) .btn-outline-dark:hover {
    color: #ffffff !important;
    background-color: var(--ui-accent-1) !important;
    border-color: var(--ui-accent-1) !important;
}

:root:not([data-theme="dark"]) .navbar,
:root:not([data-theme="dark"]) .topbar,
:root:not([data-theme="dark"]) .navbar.bg-dark,
:root:not([data-theme="dark"]) .navbar.navbar-dark {
    background: linear-gradient(90deg, #1e3a5f, #2d5288) !important;
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.18);
    border-bottom: none;
}

:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .modal-content,
:root:not([data-theme="dark"]) .offcanvas,
:root:not([data-theme="dark"]) .dropdown-menu,
:root:not([data-theme="dark"]) .admin-sidebar {
    background: #ffffff !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: 0 2px 16px rgba(30, 58, 95, 0.08) !important;
}

:root:not([data-theme="dark"]) .table thead th {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
}

:root:not([data-theme="dark"]) .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: #f0f4fc;
}

:root:not([data-theme="dark"]) .form-control:focus,
:root:not([data-theme="dark"]) .form-select:focus,
:root:not([data-theme="dark"]) textarea:focus,
:root:not([data-theme="dark"]) input:focus {
    border-color: var(--ui-accent-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18) !important;
}

/* ── LIGHT: Input base styling ── */
:root:not([data-theme="dark"]) .form-control,
:root:not([data-theme="dark"]) .form-select,
:root:not([data-theme="dark"]) textarea,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
    background-color: #ffffff !important;
    color: #17213b !important;
    border-color: #cdd8f0 !important;
    border-radius: 8px;
}

/* ── LIGHT: Fix navbar buttons (btn-outline-light / btn-light) invisible on dark navbar ── */
:root:not([data-theme="dark"]) .navbar .btn,
:root:not([data-theme="dark"]) .navbar a.btn,
:root:not([data-theme="dark"]) .navbar .btn-outline-light,
:root:not([data-theme="dark"]) .navbar .btn-light {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
}

:root:not([data-theme="dark"]) .navbar .btn:hover,
:root:not([data-theme="dark"]) .navbar a.btn:hover,
:root:not([data-theme="dark"]) .navbar .btn-outline-light:hover,
:root:not([data-theme="dark"]) .navbar .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ── LIGHT: Card top-accent + rounded ── */
:root:not([data-theme="dark"]) .card {
    border-top: 3px solid var(--ui-accent-1) !important;
    border-radius: 12px !important;
}

/* ── LIGHT: Admin sidebar menu links ── */
:root:not([data-theme="dark"]) .menu-link {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: #17213b !important;
    text-decoration: none;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    margin-bottom: 2px;
}

:root:not([data-theme="dark"]) .menu-link:hover,
:root:not([data-theme="dark"]) .menu-link.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.11), rgba(99, 102, 241, 0.04)) !important;
    color: #2563eb !important;
    border-left-color: #2563eb;
}

/* ── LIGHT: Table enhancements ── */
:root:not([data-theme="dark"]) .table thead th {
    background: linear-gradient(90deg, #1e3a5f, #2d5288) !important;
    color: #ffffff !important;
}

:root:not([data-theme="dark"]) .table tbody tr:hover > td,
:root:not([data-theme="dark"]) .table tbody tr:hover > th {
    background-color: rgba(37, 99, 235, 0.06) !important;
}

/* ── LIGHT: Restore Bootstrap colored cards (bg-primary etc.) ── */
/* These must NOT be forced to white — preserve their original Bootstrap color */
:root:not([data-theme="dark"]) .card.bg-primary {
    background-color: #0d6efd !important;
    border-top-color: transparent !important;
    color: #ffffff !important;
}
:root:not([data-theme="dark"]) .card.bg-success {
    background-color: #198754 !important;
    border-top-color: transparent !important;
    color: #ffffff !important;
}
:root:not([data-theme="dark"]) .card.bg-warning {
    background-color: #ffc107 !important;
    border-top-color: transparent !important;
    color: #212529 !important;
}
:root:not([data-theme="dark"]) .card.bg-danger {
    background-color: #dc3545 !important;
    border-top-color: transparent !important;
    color: #ffffff !important;
}
:root:not([data-theme="dark"]) .card.bg-info {
    background-color: #0dcaf0 !important;
    border-top-color: transparent !important;
    color: #212529 !important;
}
:root:not([data-theme="dark"]) .card.bg-dark {
    background-color: #212529 !important;
    border-top-color: transparent !important;
    color: #ffffff !important;
}
:root:not([data-theme="dark"]) .card.bg-secondary {
    background-color: #6c757d !important;
    border-top-color: transparent !important;
    color: #ffffff !important;
}
/* Ensure text-white inside colored cards stays white */
:root:not([data-theme="dark"]) .card.bg-primary .card-title,
:root:not([data-theme="dark"]) .card.bg-primary .card-text,
:root:not([data-theme="dark"]) .card.bg-success .card-title,
:root:not([data-theme="dark"]) .card.bg-success .card-text,
:root:not([data-theme="dark"]) .card.bg-danger .card-title,
:root:not([data-theme="dark"]) .card.bg-danger .card-text,
:root:not([data-theme="dark"]) .card.bg-dark .card-title,
:root:not([data-theme="dark"]) .card.bg-dark .card-text,
:root:not([data-theme="dark"]) .card.bg-secondary .card-title,
:root:not([data-theme="dark"]) .card.bg-secondary .card-text {
    color: #ffffff !important;
}

:root[data-theme="dark"] a,
:root[data-theme="dark"] .btn-link {
    color: var(--ui-accent-2);
}

:root[data-theme="dark"] a:hover,
:root[data-theme="dark"] .btn-link:hover {
    color: var(--ui-hover);
}

:root[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, var(--ui-accent-2), var(--ui-accent-1)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.35);
}

:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus {
    background-color: var(--ui-hover) !important;
    border-color: var(--ui-hover) !important;
    box-shadow: 0 10px 20px rgba(244, 63, 94, 0.35);
}

:root[data-theme="dark"] .btn-success {
    background-color: var(--ui-accent-1) !important;
    border-color: var(--ui-accent-1) !important;
    color: #0f172a !important;
}

:root[data-theme="dark"] .btn-success:hover,
:root[data-theme="dark"] .btn-success:focus {
    background-color: var(--ui-hover) !important;
    border-color: var(--ui-hover) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-dark,
:root[data-theme="dark"] .btn-outline-primary {
    color: var(--ui-accent-2) !important;
    border-color: var(--ui-accent-2) !important;
}

:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-dark:hover,
:root[data-theme="dark"] .btn-outline-primary:hover {
    color: #ffffff !important;
    background-color: var(--ui-hover) !important;
    border-color: var(--ui-hover) !important;
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] input:focus {
    border-color: var(--ui-accent-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.22) !important;
}

:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table > :not(caption) > * > * {
    color: #ffffff !important;
}

:root[data-theme="dark"] .table thead th {
    background-color: #0d1730 !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .table tbody td,
:root[data-theme="dark"] .table tbody th {
    background-color: var(--ui-surface) !important;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .offcanvas,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .admin-sidebar,
:root[data-theme="dark"] .table {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    backdrop-filter: blur(4px);
}

:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .navbar.bg-dark,
:root[data-theme="dark"] .navbar.navbar-dark {
    background:
        linear-gradient(90deg, #0a1020, #101a31) !important;
    border-bottom: 1px solid var(--ui-border);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] input {
    color: #ffffff !important;
}

.btn-close {
    filter: var(--theme-close-filter, none);
}

body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

.modal-backdrop,
.offcanvas-backdrop {
    opacity: 0 !important;
    display: none !important;
    pointer-events: none !important;
}

:root[data-theme="dark"] .btn-close {
    --theme-close-filter: invert(1) grayscale(100%) brightness(200%);
}

#themeToggleButton {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1085;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--ui-shadow);
}

#themeToggleButton:hover {
    transform: translateY(-1px);
    border-color: var(--ui-hover);
    color: var(--ui-hover);
}

@media (max-width: 576px) {
    #themeToggleButton {
        right: 12px;
        bottom: 12px;
        padding: 7px 12px;
        font-size: 0.85rem;
    }
}