/* ==========================================================================
   NACOR Stylesheet
   Copyright (c) 2026, Anesthesia Quality Institute (AQI). All rights reserved.
   ========================================================================== */


/* ==========================================================================
   1. Font Import
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,500;0,700;0,900;1,400&display=swap');


/* ==========================================================================
   2. Design Tokens — Light Theme
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: 'Lato', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: #21272a;
    --bs-body-color-rgb: 33, 39, 42;
    --bs-heading-color: #21272a;

    --bs-primary: #32468b;
    --bs-primary-rgb: 50, 70, 139;
    --bs-primary-active: #2a3a73;
    --bs-primary-light: #cadfed;
    --bs-primary-light-rgb: 202, 223, 237;
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(50, 70, 139, 0.2);
    --bs-primary-text-emphasis: #1e2b57;
    --bs-primary-bg-subtle: #d0d5e8;
    --bs-primary-border-subtle: #a1abd1;
    --bs-primary-hover-bg: #cadfed;
    --bs-primary-border-color: #a1abd1;

    --bs-secondary: #4c4b4b;
    --bs-secondary-rgb: 76, 75, 75;
    --bs-secondary-active: #333333;
    --bs-secondary-light: #f4f4f4;
    --bs-secondary-inverse: #ffffff;

    --bs-link-color: #1226aa;
    --bs-link-color-rgb: 18, 38, 170;
    --bs-link-hover-color: #0e1c85;
    --bs-link-hover-color-rgb: 14, 28, 133;

    --bs-success: #096633;
    --bs-success-rgb: 9, 102, 51;
    --bs-success-active: #075129;
    --bs-success-light: #d0e8d9;

    --bs-info: #286fce;
    --bs-info-rgb: 40, 111, 206;
    --bs-info-active: #1e5aab;
    --bs-info-light: #d0e2f7;

    --bs-warning: #e2b93b;
    --bs-warning-rgb: 226, 185, 59;
    --bs-warning-active: #c9a231;
    --bs-warning-light: #fdf3d0;

    --bs-danger: #ce0f0f;
    --bs-danger-rgb: 206, 15, 15;
    --bs-danger-active: #a30c0c;
    --bs-danger-light: #f8d0d0;

    --bs-text-primary: #32468b;
    --bs-text-muted: #697077;

    --bs-border-color: #dde1e6;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 2px;

    --bs-focus-ring-color: rgba(50, 70, 139, 0.25);
    --bs-component-active-bg: #32468b;
}


/* ==========================================================================
   3. Design Tokens — Dark Theme
   ========================================================================== */

[data-bs-theme="dark"] {
    --bs-body-bg: #1a1d21;
    --bs-body-bg-rgb: 26, 29, 33;
    --bs-body-color: #d1d5db;
    --bs-body-color-rgb: 209, 213, 219;
    --bs-heading-color: #d1d5db;
    --bs-heading-color-rgb: 209, 213, 219;

    --bs-primary: #4e64ad;
    --bs-primary-rgb: 78, 100, 173;
    --bs-primary-active: #42548f;
    --bs-primary-light: rgba(78, 100, 173, 0.35);
    --bs-primary-clarity: rgba(78, 100, 173, 0.35);
    --bs-primary-inverse: #ffffff;
    --bs-primary-text-emphasis: #c8d3ec;
    --bs-primary-bg-subtle: #232b4e;
    --bs-primary-border-subtle: #3a4570;

    --bs-link-color: #8898dd;
    --bs-link-color-rgb: 136, 152, 221;
    --bs-link-hover-color: #a0ade5;
    --bs-link-hover-color-rgb: 160, 173, 229;

    --bs-text-primary: #8898dd;
    --bs-text-muted: #9399a8;

    --bs-warning: #e2b93b;
    --bs-warning-rgb: 226, 185, 59;
    --bs-success: #3fbf7a;
    --bs-success-rgb: 63, 191, 122;
    --bs-danger: #e04444;
    --bs-danger-rgb: 224, 68, 68;
    --bs-info: #5b97e0;
    --bs-info-rgb: 91, 151, 224;

    --bs-focus-ring-color: rgba(78, 100, 173, 0.45);
    --bs-component-active-bg: #4e64ad;
}


/* ==========================================================================
   4. Base — Body & Selection
   ========================================================================== */

body {
    font-family: var(--bs-font-sans-serif);
}

::selection {
    background-color: rgba(50, 70, 139, 0.25);
}

body.app-blank {
    background-color: #f4f4f4;
}

body.app-blank .bg-body {
    border: 1px solid #dde1e6;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

body.app-blank .logo-img {
    max-height: 100px;
}

body.app-blank h1 {
    font-size: 1.5rem;
    line-height: 1.625rem;
    font-weight: 700;
    color: #21272a;
}

body.app-blank .form-select-solid {
    background-color: #f4f4f4;
    border: 1px solid #dde1e6;
    color: #3a3939;
}


/* ==========================================================================
   5. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-font-sans-serif);
}

h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; }
h2 { font-size: 1.5rem; line-height: 1.625rem; font-weight: 700; }
h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }
h4 { font-size: 1.125rem; line-height: 1.875rem; font-weight: 500; }


/* ==========================================================================
   6. Links
   ========================================================================== */

a,
a.btn-link,
.link-primary {
    color: #1226aa;
    text-decoration: underline;
}

a:hover,
a.btn-link:hover,
.link-primary:hover {
    color: #0e1c85;
}


/* ==========================================================================
   7. Buttons
   ========================================================================== */

.btn {
    font-family: var(--bs-font-sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
}

.btn-icon,
button.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    min-width: 0;
    width: auto;
    height: auto;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}

.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    background-color: #f8df8d;
    border-color: #f8df8d;
    opacity: 0.55;
}

.btn.btn-secondary {
    --bs-btn-color: #3a3939;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #858585;
    --bs-btn-hover-color: #2f2f2f;
    --bs-btn-hover-bg: #f4f4f4;
    --bs-btn-hover-border-color: #858585;
    --bs-btn-focus-shadow-rgb: 133, 133, 133;
    --bs-btn-active-color: #2f2f2f;
    --bs-btn-active-bg: #f4f4f4;
    --bs-btn-active-border-color: #858585;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #858585;
    --bs-btn-disabled-bg: #ffffff;
    --bs-btn-disabled-border-color: #b3b3b3;
}

.btn-light {
    --bs-btn-color: #21272a;
    --bs-btn-bg: #f4f4f4;
    --bs-btn-border-color: #f4f4f4;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #e2e6ea;
    --bs-btn-hover-border-color: #e2e6ea;
    --bs-btn-focus-shadow-rgb: 226, 230, 234;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #dde1e6;
    --bs-btn-active-border-color: #dde1e6;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #697077;
    --bs-btn-disabled-bg: #f4f4f4;
    --bs-btn-disabled-border-color: #f4f4f4;
}

.btn-light-primary {
    --bs-btn-color: #32468b;
    --bs-btn-bg: #cadfed;
    --bs-btn-border-color: #cadfed;
    --bs-btn-hover-color: #2a3a73;
    --bs-btn-hover-bg: #b8d5e7;
    --bs-btn-hover-border-color: #b8d5e7;
    --bs-btn-focus-shadow-rgb: 202, 223, 237;
    --bs-btn-active-color: #1e2b57;
    --bs-btn-active-bg: #9bd7d7;
    --bs-btn-active-border-color: #9bd7d7;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #697077;
    --bs-btn-disabled-bg: #cadfed;
    --bs-btn-disabled-border-color: #cadfed;
}

.btn-wide {
    min-width: 150px;
}

.btn:hover,
.btn:active,
.btn:focus-visible {
    outline: 0;
}

.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(50, 70, 139, 0.2);
}


/* ==========================================================================
   8. Forms
   ========================================================================== */

.form-control,
.form-select,
.input-group-text {
    border-radius: 0;
    border-color: #c1c7cd;
    background-color: #f4f4f4;
    color: #21272a;
    font-style: italic;
}

.form-control-solid,
.form-select-solid {
    background-color: #f4f4f4;
    border-color: #dde1e6;
    color: #21272a;
    font-style: italic;
}

.form-control-solid:focus,
.form-select-solid:focus {
    background-color: #ffffff;
    border-color: #1226aa;
    box-shadow: 0 0 0 0.2rem rgba(18, 38, 170, 0.12);
}

.form-control::placeholder,
.form-select::placeholder {
    color: #697077;
    font-style: italic;
    opacity: 1;
}

.form-control-lg {
    border-radius: 0;
}

.form-label {
    font-weight: 500;
    color: #21272a;
}

.form-text {
    color: #697077;
}

.form-check-input {
    border-radius: 0;
}

.form-check-input:checked {
    background-color: #32468b;
    border-color: #32468b;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(50, 70, 139, 0.2);
}


/* ==========================================================================
   9. Tables
   ========================================================================== */

.table {
    --bs-table-accent-bg: transparent;
}

.table thead th {
    font-family: var(--bs-font-sans-serif);
    font-weight: 500;
    font-size: 0.875rem;
    color: #000000;
    background-color: #f4f4f4;
    border-bottom: 2px solid #cadfed;
    white-space: nowrap;
}

.table tbody tr,
.table-striped > tbody > tr {
    background-color: #ffffff;
    color: #000000;
}

.table tbody tr:nth-child(odd),
.table-striped > tbody > tr:nth-child(odd) {
    background-color: #dfeef8;
    color: #000000;
}

.table tbody tr:hover,
.table.table-hover tbody tr:hover {
    background-color: #9bd7d7;
    color: #000000;
}

.table tbody tr.selected,
.table tbody tr.selected > td {
    background-color: #f8df8d;
    color: #000000;
}

.table th:last-child,
.table td:last-child {
    white-space: nowrap;
}


/* ==========================================================================
   10. Cards
   ========================================================================== */

.card {
    border-color: #dde1e6;
    border-radius: 0;
}

.card-header {
    background-color: #f4f4f4;
    border-bottom-color: #dde1e6;
    color: #21272a;
}

.card-title {
    font-weight: 700;
    color: #21272a;
}


/* ==========================================================================
   11. Modals
   ========================================================================== */

.modal-content {
    border-color: #dde1e6;
    border-radius: 0;
}

.modal-header {
    border-bottom-color: #dde1e6;
}

.modal-title {
    font-weight: 700;
    color: #21272a;
}

.modal-body {
    color: #21272a;
}

.modal-footer {
    border-top-color: #dde1e6;
}

.modal-backdrop.show {
    opacity: 0.55;
}


/* ==========================================================================
   12. Alerts
   ========================================================================== */

.alert {
    border-radius: 0;
}

.alert-primary {
    color: #1e2b57;
    background-color: #d0d5e8;
    border-color: #a1abd1;
}

.alert-success {
    color: #054d26;
    background-color: #d0e8d9;
    border-color: #a1d1b3;
}

.alert-info {
    color: #174278;
    background-color: #d0e2f7;
    border-color: #a1c5ef;
}

.alert-warning {
    color: #7a5010;
    background-color: #fdf3d0;
    border-color: #f1d89d;
}

.alert-danger {
    color: #7a0909;
    background-color: #f8d0d0;
    border-color: #f1a1a1;
}


/* ==========================================================================
   13. Navigation — Tabs & Pills
   ========================================================================== */

.nav-tabs {
    gap: 0.25em;
    border-bottom: 0;
}

.nav-tabs .nav-link {
    color: #4c4b4b;
    font-weight: 600;
    background-color: #f4f4f4;
    border: 1px solid #c1c7cd;
}

.nav-tabs .nav-link:hover {
    color: #32468b;
    background-color: #e9edf1;
    border-color: #c1c7cd;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
    color: #ffffff;
    font-weight: 600;
    background-color: #626e95;
    border-color: #626e95;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #32468b;
    color: #ffffff;
}


/* ==========================================================================
   14. Dropdowns & Menus
   ========================================================================== */

.dropdown-menu {
    border-color: #dde1e6;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #cadfed;
    color: #32468b;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #32468b;
    color: #ffffff;
}

.menu-item .menu-link {
    color: #21272a;
}

.menu-item .menu-link:hover,
.menu-item .menu-link.active {
    color: #32468b;
    background-color: #f4f6fa;
}

.menu-item .menu-link.active {
    font-weight: 700;
}


/* ==========================================================================
   15. Accordion
   ========================================================================== */

.accordion-item {
    border-color: #dde1e6;
    border-radius: 0;
    background-color: #ffffff;
}

.accordion-button {
    color: #21272a;
    font-weight: 700;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    font-weight: 600;
    background-color: #626e95;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(50, 70, 139, 0.15);
}


/* ==========================================================================
   16. Pagination
   ========================================================================== */

.pagination {
    --bs-pagination-color: #32468b;
    --bs-pagination-hover-color: #2a3a73;
    --bs-pagination-focus-color: #32468b;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(50, 70, 139, 0.2);
    --bs-pagination-active-bg: #32468b;
    --bs-pagination-active-border-color: #32468b;
    --bs-pagination-disabled-bg: #f4f4f4;
}


/* ==========================================================================
   17. Breadcrumbs
   ========================================================================== */

.breadcrumb-item a {
    color: #1226aa;
}

.breadcrumb-item.active {
    color: #4c4b4b;
}


/* ==========================================================================
   18. Badges
   ========================================================================== */

.badge {
    border-radius: 0;
    font-weight: 700;
}

.badge.badge-light-primary {
    color: #32468b;
    background-color: #cadfed;
}


/* ==========================================================================
   19. Progress & Spinners
   ========================================================================== */

.progress {
    background-color: #dde1e6;
    border-radius: 0;
}

.progress-bar {
    background-color: #32468b;
}

.spinner-border,
.spinner-grow {
    color: #32468b;
}


/* ==========================================================================
   20. Header & Toolbar
   ========================================================================== */

.app-header {
    background-color: #ffffff;
    border-bottom: 1px solid #dde1e6;
}

.toolbar {
    background-color: #ffffff;
}


/* ==========================================================================
   21. Utilities
   ========================================================================== */

.bg-primary {
    background-color: #32468b !important;
}

.border-primary {
    border-color: #32468b !important;
}

.text-primary {
    color: #32468b !important;
}

.text-gray-900,
.text-gray-800 {
    color: #21272a !important;
}

.text-gray-700 {
    color: #4c4b4b !important;
}

.text-muted {
    color: #697077 !important;
}


/* ==========================================================================
   22. Dark Theme — Base & Login Page
   ========================================================================== */

[data-bs-theme="dark"] body.app-blank {
    background-color: #1a1d21;
}

[data-bs-theme="dark"] body.app-blank .bg-body {
    border-color: #3a3f44;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] body.app-blank h1 {
    color: #d1d5db;
}

[data-bs-theme="dark"] body.app-blank .form-select-solid {
    background-color: #2b2f33;
    border-color: #3a3f44;
    color: #d1d5db;
}


/* ==========================================================================
   23. Dark Theme — Links
   ========================================================================== */

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] a.btn-link,
[data-bs-theme="dark"] .link-primary {
    color: #8898dd;
}

[data-bs-theme="dark"] a:hover,
[data-bs-theme="dark"] a.btn-link:hover,
[data-bs-theme="dark"] .link-primary:hover {
    color: #a0ade5;
}


/* ==========================================================================
   24. Dark Theme — Typography & Utilities
   ========================================================================== */

[data-bs-theme="dark"] .text-primary {
    color: #4e64ad !important;
}

[data-bs-theme="dark"] .text-gray-900,
[data-bs-theme="dark"] .text-gray-800 {
    color: #d1d5db !important;
}

[data-bs-theme="dark"] .text-gray-700 {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #8b919a !important;
}

[data-bs-theme="dark"] .bg-primary {
    background-color: #4e64ad !important;
}

[data-bs-theme="dark"] .border-primary {
    border-color: #4e64ad !important;
}


/* ==========================================================================
   25. Dark Theme — Forms
   ========================================================================== */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #2b2f33;
    border-color: #3a3f44;
    color: #d1d5db;
    font-style: italic;
}

[data-bs-theme="dark"] .form-control-solid,
[data-bs-theme="dark"] .form-select-solid {
    background-color: #2b2f33;
    border-color: #3a3f44;
    color: #d1d5db;
    font-style: italic;
}

[data-bs-theme="dark"] .form-control-solid:focus,
[data-bs-theme="dark"] .form-select-solid:focus {
    background-color: #353a40;
    border-color: #5b97e0;
    box-shadow: 0 0 0 0.2rem rgba(91, 151, 224, 0.15);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
    color: #8b919a;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #4e64ad;
    border-color: #4e64ad;
}

[data-bs-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(78, 100, 173, 0.25);
}

[data-bs-theme="dark"] .form-label {
    color: #d1d5db;
}

[data-bs-theme="dark"] .form-text {
    color: #8b919a;
}


/* ==========================================================================
   26. Dark Theme — Buttons
   ========================================================================== */

[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(78, 100, 173, 0.3);
}

[data-bs-theme="dark"] .btn.btn-secondary {
    --bs-btn-color: #d1d5db;
    --bs-btn-bg: #2b2f33;
    --bs-btn-border-color: #4a4f54;
    --bs-btn-hover-color: #f0f0f0;
    --bs-btn-hover-bg: #353a40;
    --bs-btn-hover-border-color: #5a5f64;
    --bs-btn-active-color: #f0f0f0;
    --bs-btn-active-bg: #404549;
    --bs-btn-active-border-color: #5a5f64;
    --bs-btn-disabled-color: #5a5f64;
    --bs-btn-disabled-bg: #2b2f33;
    --bs-btn-disabled-border-color: #3a3f44;
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #d1d5db;
    --bs-btn-bg: #2b2f33;
    --bs-btn-border-color: #3a3f44;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #353a40;
    --bs-btn-hover-border-color: #4a4f54;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #404549;
    --bs-btn-active-border-color: #5a5f64;
    --bs-btn-disabled-color: #5a5f64;
    --bs-btn-disabled-bg: #2b2f33;
    --bs-btn-disabled-border-color: #2b2f33;
}

[data-bs-theme="dark"] .btn-light-primary {
    --bs-btn-color: #8898dd;
    --bs-btn-bg: #232b4e;
    --bs-btn-border-color: #3a4570;
    --bs-btn-hover-color: #a0ade5;
    --bs-btn-hover-bg: #2a3360;
    --bs-btn-hover-border-color: #4a5580;
    --bs-btn-active-color: #c8d3ec;
    --bs-btn-active-bg: #344070;
    --bs-btn-active-border-color: #4a5580;
    --bs-btn-disabled-color: #5a5f64;
    --bs-btn-disabled-bg: #232b4e;
    --bs-btn-disabled-border-color: #232b4e;
}


/* ==========================================================================
   27. Dark Theme — Tables
   ========================================================================== */

[data-bs-theme="dark"] .table thead th {
    background-color: #2b2f33;
    color: #9ca3af;
    border-bottom-color: #3a4570;
}

[data-bs-theme="dark"] .table tbody tr,
[data-bs-theme="dark"] .table-striped > tbody > tr {
    background-color: #1e2126;
    color: #d1d5db;
}

[data-bs-theme="dark"] .table tbody tr:nth-child(odd),
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-child(odd) {
    background-color: #252830;
    color: #d1d5db;
}

[data-bs-theme="dark"] .table tbody tr:hover,
[data-bs-theme="dark"] .table.table-hover tbody tr:hover {
    background-color: #2d3140;
    color: #d1d5db;
}

[data-bs-theme="dark"] .table tbody tr.selected,
[data-bs-theme="dark"] .table tbody tr.selected > td {
    background-color: #3a3510;
    color: #f8df8d;
}


/* ==========================================================================
   28. Dark Theme — Cards, Modals & Accordion
   ========================================================================== */

[data-bs-theme="dark"] .card {
    background-color: #1e2126;
    border-color: #3a3f44;
}

[data-bs-theme="dark"] .card-header {
    background-color: #2b2f33;
    border-bottom-color: #3a3f44;
    color: #d1d5db;
}

[data-bs-theme="dark"] .card-title {
    color: #d1d5db;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #1e2126;
    border-color: #3a3f44;
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: #3a3f44;
}

[data-bs-theme="dark"] .modal-title {
    color: #d1d5db;
}

[data-bs-theme="dark"] .modal-body {
    color: #d1d5db;
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: #3a3f44;
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1);
}

[data-bs-theme="dark"] .accordion-item {
    background-color: #1e2126;
    border-color: #3a3f44;
}

[data-bs-theme="dark"] .accordion-button {
    color: #d1d5db;
    background-color: #2b2f33;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    color: #ffffff;
    font-weight: 600;
    background-color: #626e95;
}

[data-bs-theme="dark"] .accordion-body {
    color: #d1d5db;
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1);
}


/* ==========================================================================
   29. Dark Theme — Alerts
   ========================================================================== */

[data-bs-theme="dark"] .alert-primary {
    color: #c8d3ec;
    background-color: #232b4e;
    border-color: #3a4570;
}

[data-bs-theme="dark"] .alert-success {
    color: #a3e8c2;
    background-color: #0d3320;
    border-color: #1a5a38;
}

[data-bs-theme="dark"] .alert-info {
    color: #b4d1f7;
    background-color: #1a2a4a;
    border-color: #2a4a7a;
}

[data-bs-theme="dark"] .alert-warning {
    color: #f0d88a;
    background-color: #3a2e0a;
    border-color: #5a4a15;
}

[data-bs-theme="dark"] .alert-danger {
    color: #f5a0a0;
    background-color: #3a0a0a;
    border-color: #5a1515;
}


/* ==========================================================================
   30. Dark Theme — Navigation
   ========================================================================== */

[data-bs-theme="dark"] .nav-tabs {
    border-bottom: 0;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #9ca3af;
    font-weight: 600;
    background-color: #2b2f33;
    border: 1px solid #3a3f44;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: #8898dd;
    background-color: #353a40;
    border-color: #3a3f44;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-link.active:hover {
    color: #ffffff;
    font-weight: 600;
    background-color: #626e95;
    border-color: #626e95;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active,
[data-bs-theme="dark"] .nav-pills .show > .nav-link {
    background-color: #4e64ad;
    color: #ffffff;
}


/* ==========================================================================
   31. Dark Theme — Dropdowns & Menus
   ========================================================================== */

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1e2126;
    border-color: #3a3f44;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .dropdown-item {
    color: #d1d5db;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #232b4e;
    color: #8898dd;
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
    background-color: #4e64ad;
    color: #ffffff;
}

[data-bs-theme="dark"] .menu-item .menu-link {
    color: #d1d5db;
}

[data-bs-theme="dark"] .menu-item .menu-link:hover,
[data-bs-theme="dark"] .menu-item .menu-link.active {
    color: #8898dd;
    background-color: #232b4e;
}


/* ==========================================================================
   32. Dark Theme — Pagination & Breadcrumbs
   ========================================================================== */

[data-bs-theme="dark"] .pagination {
    --bs-pagination-color: #8898dd;
    --bs-pagination-hover-color: #a0ade5;
    --bs-pagination-focus-color: #8898dd;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(78, 100, 173, 0.3);
    --bs-pagination-active-bg: #4e64ad;
    --bs-pagination-active-border-color: #4e64ad;
    --bs-pagination-disabled-bg: #1e2126;
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: #4e64ad;
    border-color: #4e64ad;
}

[data-bs-theme="dark"] .page-link {
    background-color: #1e2126;
    border-color: #3a3f44;
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: #1e2126;
    border-color: #3a3f44;
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: #8898dd;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: #9ca3af;
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #5a5f64;
}


/* ==========================================================================
   33. Dark Theme — Badges, Progress & Spinners
   ========================================================================== */

[data-bs-theme="dark"] .badge.badge-light-primary {
    color: #8898dd;
    background-color: #232b4e;
}

[data-bs-theme="dark"] .progress {
    background-color: #2b2f33;
}

[data-bs-theme="dark"] .progress-bar {
    background-color: #4e64ad;
}

[data-bs-theme="dark"] .spinner-border,
[data-bs-theme="dark"] .spinner-grow {
    color: #4e64ad;
}


/* ==========================================================================
   34. Dark Theme — Header & Toolbar
   ========================================================================== */

[data-bs-theme="dark"] .app-header {
    background-color: #1e2126;
    border-bottom-color: #3a3f44;
}

[data-bs-theme="dark"] .toolbar {
    background-color: #1e2126;
}


/* ==========================================================================
   35. Shared Primary Button Palette
   One yellow palette shared by default/primary and icon buttons. Declared last
   so it reliably wins over Metronic's light/dark variant classes (e.g. btn-light,
   btn-light-primary), which would otherwise override the icon button colours.
   ========================================================================== */

.btn.btn-primary,
.btn-icon,
[data-bs-theme="dark"] .btn-icon {
    --bs-btn-color: #000000;
    --bs-btn-bg: #f8df8d;
    --bs-btn-border-color: #f8df8d;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #f3c300;
    --bs-btn-hover-border-color: #f3c300;
    --bs-btn-focus-shadow-rgb: 226, 185, 59;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #e2bf3c;
    --bs-btn-active-border-color: #e2bf3c;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: rgba(0, 0, 0, 0.55);
    --bs-btn-disabled-bg: #f8df8d;
    --bs-btn-disabled-border-color: #f8df8d;
}