/* ============================================================
   MODERN UI OVERRIDES  –  EMS Theme Enhancement
   Loaded after app.min.css + style.css to win all specificity
   ============================================================ */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
    --m-primary:        #556ee6;
    --m-primary-hover:  #4458c5;
    --m-primary-soft:   rgba(85,110,230,.10);
    --m-primary-soft2:  rgba(85,110,230,.18);
    --m-accent:         #34c38f;
    --m-danger:         #f46a6a;
    --m-warning:        #f1b44c;
    --m-info:           #50a5f1;

    --m-bg:             #f5f6fa;
    --m-surface:        #ffffff;
    --m-surface2:       #f8f9fc;
    --m-border:         #e8eaf2;
    --m-border-soft:    rgba(0,0,0,.06);
    --m-text:           #343a52;
    --m-text-muted:     #74788d;
    --m-text-light:     #adb5bd;

    --m-shadow-xs:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --m-shadow-sm:  0 2px 8px rgba(0,0,0,.08);
    --m-shadow-md:  0 4px 20px rgba(0,0,0,.10);
    --m-shadow-lg:  0 10px 40px rgba(0,0,0,.14);

    --m-radius-sm:  8px;
    --m-radius:     12px;
    --m-radius-lg:  18px;
    --m-radius-xl:  24px;
    --m-ease:       all .2s cubic-bezier(.4,0,.2,1);

    --m-sidebar-bg:         #ffffff;
    --m-sidebar-border:     #eef0f7;
    --m-sidebar-text:       #545a6d;
    --m-sidebar-muted:      #a6aab8;
    --m-sidebar-active-bg:  rgba(85,110,230,.10);
    --m-sidebar-active-txt: #556ee6;
    --m-sidebar-hover-bg:   rgba(85,110,230,.06);
    --m-sidebar-icon:       #9599b3;

    --m-topbar-bg:      #ffffff;
    --m-topbar-border:  #eef0f7;
    --m-topbar-shadow:  0 1px 0 #eef0f7, 0 2px 12px rgba(0,0,0,.05);
}

[data-layout-mode="dark"] {
    --m-bg:             #1a1e2e;
    --m-surface:        #222638;
    --m-surface2:       #272b40;
    --m-border:         rgba(255,255,255,.08);
    --m-border-soft:    rgba(255,255,255,.05);
    --m-text:           #cdd3ee;
    --m-text-muted:     #8890ac;
    --m-text-light:     #505878;

    --m-shadow-xs:  0 1px 3px rgba(0,0,0,.25),  0 1px 2px rgba(0,0,0,.18);
    --m-shadow-sm:  0 2px 8px rgba(0,0,0,.30);
    --m-shadow-md:  0 4px 20px rgba(0,0,0,.40);
    --m-shadow-lg:  0 10px 40px rgba(0,0,0,.55);

    --m-sidebar-bg:         #1e2338;
    --m-sidebar-border:     rgba(255,255,255,.06);
    --m-sidebar-text:       #9098b8;
    --m-sidebar-muted:      #4c5270;
    --m-sidebar-active-bg:  rgba(85,110,230,.20);
    --m-sidebar-active-txt: #7b96f5;
    --m-sidebar-hover-bg:   rgba(255,255,255,.04);
    --m-sidebar-icon:       #606880;

    --m-topbar-bg:      #1e2338;
    --m-topbar-border:  rgba(255,255,255,.06);
    --m-topbar-shadow:  0 1px 0 rgba(255,255,255,.04), 0 2px 16px rgba(0,0,0,.35);

    /* ── Bootstrap dark vars override (beats app.min.css) ── */
    --bs-body-bg:           #1a1e2e;
    --bs-body-color:        #cdd3ee;
    --bs-heading-color:     #e2e6f8;
    --bs-border-color:      rgba(255,255,255,.08);
    --bs-card-bg:           #222638;
    --bs-custom-white:      #222638;
    --bs-gray-100:          #1e2338;
    --bs-gray-200:          #222638;
    --bs-gray-300:          #272b40;
    --bs-gray-400:          #8890ac;
    --bs-gray-500:          #a0a8c4;
    --bs-gray-600:          #cdd3ee;
    --bs-gray-700:          #e2e6f8;
    --bs-gray-800:          #f0f2fc;
    --bs-gray-900:          #f8f9fa;
    --bs-heading-bg:        #1e2338;
    --bs-topbar-search-bg:  #272b40;
    --bs-heading-dark-bg:   #1a1e2e;
    --bs-footer-bg:         #1e2338;
    --bs-footer-color:      #8890ac;
    --bs-input-border-color:       rgba(255,255,255,.1);
    --bs-input-focus-border-color: rgba(85,110,230,.5);
    --bs-menu-item-color:   #9098b8;
}


/* ────────── GLOBAL ───────────────────────────────────── */
* { box-sizing: border-box; }

body,
.vertical-menu, #page-topbar, .modal-content, .card, .dropdown-menu {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body {
    background-color: var(--m-bg) !important;
    color: var(--m-text) !important;
    -webkit-font-smoothing: antialiased;
    font-size: .875rem;
    line-height: 1.6;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); }
[data-layout-mode="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* ────────── TOPBAR ──────────────────────────────────── */
#page-topbar {
    background: var(--m-topbar-bg) !important;
    box-shadow: var(--m-topbar-shadow) !important;
    border-bottom: 1px solid var(--m-topbar-border) !important;
    height: 62px !important;
}
.navbar-header { height: 62px !important; padding: 0 20px 0 0 !important; }

/* ── Logo brand box – expanded state ───────────────── */
.navbar-brand-box {
    border-right: 1px solid var(--m-topbar-border) !important;
    background: var(--m-topbar-bg) !important;
    width: 250px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    /* no overflow:hidden – logo img must be visible */
    flex-shrink: 0 !important;
}

/* Logo link wrapper */
.navbar-brand-box .logo {
    display: block !important;
    line-height: 62px !important;
    height: 100% !important;
    text-align: center !important;
}

/* Logo image sizing – prevent overflowing the 62px bar */
.navbar-brand-box .logo-lg img {
    height: auto !important;
    max-height: 44px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block !important;
}
.navbar-brand-box .logo-sm img {
    height: auto !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 50px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ── Default Logo Display (Expanded) ── */
/* The theme hides .logo-lg by default. We force it to show here. */
.navbar-brand-box .logo-dark span.logo-lg,
.navbar-brand-box .logo-light span.logo-lg {
    display: flex !important;
    align-items: center !important;
}
.navbar-brand-box .logo-dark span.logo-sm,
.navbar-brand-box .logo-light span.logo-sm {
    display: none !important;
}

/* ── Collapsed state – icon-only logo ── */
/* Must have higher specificity than the expanded rules above */
body.vertical-collpsed .navbar-brand-box {
    width: 70px !important;
    padding: 0 !important;
    justify-content: center !important;
}
body.vertical-collpsed .navbar-brand-box .logo-dark span.logo-lg,
body.vertical-collpsed .navbar-brand-box .logo-light span.logo-lg { 
    display: none !important; 
}
body.vertical-collpsed .navbar-brand-box .logo-dark span.logo-sm,
body.vertical-collpsed .navbar-brand-box .logo-light span.logo-sm { 
    display: flex !important; 
}
.navbar-header .btn, .navbar-header .header-item, .navbar-header .noti-icon {
    color: var(--m-text-muted) !important;
    transition: var(--m-ease) !important;
    border-radius: var(--m-radius-sm) !important;
}
.navbar-header .btn:hover, .navbar-header .header-item:hover, .navbar-header .noti-icon:hover {
    color: var(--m-primary) !important;
    background: var(--m-primary-soft) !important;
}

/* ────────── LEFT SIDEBAR ────────────────────────────── */
.vertical-menu {
    background: var(--m-sidebar-bg) !important;
    border-right: 1px solid var(--m-sidebar-border) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.04) !important;
    transition: background .25s !important;
}
[data-layout-mode="dark"] .vertical-menu {
    box-shadow: 2px 0 24px rgba(0,0,0,.25) !important;
}

#sidebar-menu .menu-title {
    color: var(--m-sidebar-muted) !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    padding: 20px 20px 6px !important;
    opacity: 1 !important;
}

#sidebar-menu ul li a {
    color: var(--m-sidebar-text) !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    padding: 9px 14px 9px 18px !important;
    border-radius: var(--m-radius-sm) !important;
    margin: 1px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: var(--m-ease) !important;
    position: relative !important;
}
#sidebar-menu ul li a i {
    font-size: 1rem !important;
    color: var(--m-sidebar-icon) !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    transition: color .2s !important;
}
#sidebar-menu ul li a:hover {
    background: var(--m-sidebar-hover-bg) !important;
    color: var(--m-sidebar-active-txt) !important;
}
#sidebar-menu ul li a:hover i { color: var(--m-sidebar-active-txt) !important; }

/* ── Active leaf item (non-expandable) ─────────────── */
#sidebar-menu ul li.mm-active > a:not(.has-arrow),
#sidebar-menu ul li a.active:not(.has-arrow) {
    background: var(--m-sidebar-active-bg) !important;
    color: var(--m-sidebar-active-txt) !important;
    font-weight: 600 !important;
}
#sidebar-menu ul li.mm-active > a:not(.has-arrow) i,
#sidebar-menu ul li a.active:not(.has-arrow) i { color: var(--m-sidebar-active-txt) !important; }

/* Left accent bar – ONLY on TOP-LEVEL non-expandable active items */
#sidebar-menu > ul > li.mm-active > a:not(.has-arrow)::before,
#sidebar-menu > ul > li > a.active:not(.has-arrow)::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px; width: 3px;
    background: var(--m-primary);
    border-radius: 0 3px 3px 0;
}

/* ── Expandable parent when active (has sub-menu open) */
#sidebar-menu ul li.mm-active > a.has-arrow,
#sidebar-menu ul li a.mm-active.has-arrow,
#sidebar-menu ul li a.active.has-arrow {
    background: transparent !important;
    color: var(--m-text) !important;
    font-weight: 600 !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li.mm-active > a.has-arrow,
[data-layout-mode="dark"] #sidebar-menu ul li a.mm-active.has-arrow {
    color: var(--m-text) !important;
}
#sidebar-menu ul li.mm-active > a.has-arrow i { color: var(--m-primary) !important; }
#sidebar-menu ul li.mm-active > a.has-arrow::after { border-color: var(--m-primary) !important; }
#sidebar-menu ul li a.has-arrow::after { border-color: var(--m-text-light) !important; margin-left: auto !important; }

/* ── Sub-menu ─────────────────────────────────────── */
#sidebar-menu ul li ul.sub-menu { padding: 2px 0 4px !important; }
#sidebar-menu ul li ul.sub-menu li a {
    font-size: .79rem !important;
    color: var(--m-text-muted) !important;
    padding: 7px 12px 7px 48px !important;
    font-weight: 400 !important;
    border-radius: var(--m-radius-sm) !important;
    margin: 0 8px !important;
    background: transparent !important;
}
#sidebar-menu ul li ul.sub-menu li a::before {
    content: '';
    position: absolute;
    left: 30px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--m-text-light);
    transition: background .2s, transform .2s;
}
#sidebar-menu ul li ul.sub-menu li a:hover {
    color: var(--m-sidebar-active-txt) !important;
    background: var(--m-sidebar-hover-bg) !important;
}
#sidebar-menu ul li ul.sub-menu li a:hover::before {
    background: var(--m-primary) !important;
    transform: translateY(-50%) scale(1.4) !important;
}
#sidebar-menu ul li ul.sub-menu li.mm-active a,
#sidebar-menu ul li ul.sub-menu li a.active {
    color: var(--m-sidebar-active-txt) !important;
    font-weight: 600 !important;
    background: var(--m-primary-soft) !important;
}
#sidebar-menu ul li ul.sub-menu li.mm-active a::before,
#sidebar-menu ul li ul.sub-menu li a.active::before {
    background: var(--m-primary) !important;
    transform: translateY(-50%) scale(1.4) !important;
}

/* ── Collapsed Sidebar Overrides ────────────────────────────── */

/* Clean up Hamburger Button */
#vertical-menu-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--m-text) !important;
    height: 62px !important;
    width: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 20px !important;
    border-radius: 0 !important;
}
[data-layout-mode="dark"] #vertical-menu-btn { color: var(--m-text-light) !important; }

/* Fix sidebar menu items alignment in collapsed mode */
.vertical-collpsed #sidebar-menu ul li a {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.vertical-collpsed #sidebar-menu ul li a i {
    width: auto !important;
    margin: 0 !important;
    font-size: 1.45rem !important;
}

/* Fix Hover Expanded Top-Level Link */
.vertical-collpsed #sidebar-menu > ul > li:hover > a {
    background: var(--m-surface) !important;
    color: var(--m-primary) !important;
    border-radius: 0 8px 0 0 !important;
    box-shadow: 3px 0 10px 0 rgba(0, 0, 0, .05) !important;
    width: calc(190px + 70px) !important;
    padding: 15px 0 15px 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.vertical-collpsed #sidebar-menu > ul > li:hover > a i {
    width: auto !important;
    margin-right: 15px !important;
}
.vertical-collpsed #sidebar-menu > ul > li:hover > a span {
    font-weight: 600 !important;
    display: block !important;
    padding-left: 0 !important;
}

/* Ensure active icon is clearly highlighted in collapsed mode */
.vertical-collpsed #sidebar-menu > ul > li.mm-active > a,
.vertical-collpsed #sidebar-menu > ul > li > a.active {
    background: var(--m-sidebar-active-bg) !important;
}
.vertical-collpsed #sidebar-menu > ul > li.mm-active > a i,
.vertical-collpsed #sidebar-menu > ul > li > a.active i {
    color: var(--m-primary) !important;
}

/* Sub-menu Box */
.vertical-collpsed #sidebar-menu > ul > li:hover > ul.sub-menu {
    background: var(--m-surface) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 3px 5px 10px 0 rgba(0, 0, 0, .05) !important;
}
.vertical-collpsed #sidebar-menu ul li ul.sub-menu li a {
    padding: 7px 12px 7px 30px !important;
    margin: 0 6px !important;
    text-align: left !important;
}
.vertical-collpsed #sidebar-menu ul li ul.sub-menu li a::before {
    left: 14px !important;
}

/* Dark mode propagation */
[data-layout-mode="dark"] .vertical-collpsed #sidebar-menu > ul > li:hover > a,
[data-layout-mode="dark"] .vertical-collpsed #sidebar-menu > ul > li:hover > ul.sub-menu {
    background: #272b40 !important;
    box-shadow: 3px 5px 15px 0 rgba(0, 0, 0, .4) !important;
}
[data-layout-mode="dark"] .vertical-collpsed #sidebar-menu > ul > li:hover > a {
    color: #cdd3ee !important;
}

/* ────────── MAIN CONTENT ────────────────────────────── */
.main-content {
    background: var(--m-bg) !important;
    /* Use flex column to push footer to bottom without blank gap when content is short */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}
.page-content {
    padding: calc(62px + 20px) 18px 60px !important;
    flex: 1 !important; /* Grow to fill available space, keeps footer anchored */
}

/* ── Layout wrapper – prevent sidebar overflow causing body gap ── */
#layout-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* Vertical menu – fixed positioned, scroll internally */
.vertical-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    /* Do NOT use overflow:hidden here – collapsed hover flyout needs to overflow */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 1002 !important;
}
/* In collapsed mode, allow the flyout (hover) popup to exceed the sidebar width */
.vertical-collpsed .vertical-menu {
    overflow: visible !important;
}
.vertical-menu .h-100[data-simplebar] {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Collapsed sidebar – icon column fixed with correct width */
body.vertical-collpsed .vertical-menu {
    width: 70px !important;
}

/* Fix for collapsed sidebar hover menus getting clipped */
body.vertical-collpsed .vertical-menu .h-100[data-simplebar],
body.vertical-collpsed .vertical-menu .simplebar-wrapper,
body.vertical-collpsed .vertical-menu .simplebar-mask,
body.vertical-collpsed .vertical-menu .simplebar-content-wrapper {
    overflow: visible !important;
}

/* In collapsed mode only show icons, hide text labels */
.vertical-collpsed #sidebar-menu ul li a {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.vertical-collpsed #sidebar-menu ul li a i {
    width: auto !important;
    margin: 0 !important;
    font-size: 1.45rem !important;
}
.vertical-collpsed #sidebar-menu .menu-title {
    display: none !important;
}

/* ────────── CARDS ───────────────────────────────────── */
.card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-xs) !important;
    transition: box-shadow .2s, border-color .2s !important;
}
.card:hover { box-shadow: var(--m-shadow-sm) !important; }
.card-header {
    background: var(--m-surface) !important;
    border-bottom: 1px solid var(--m-border) !important;
    padding: 14px 20px !important;
    border-radius: var(--m-radius) var(--m-radius) 0 0 !important;
}
.card-title { font-size: .95rem !important; font-weight: 700 !important; color: var(--m-text) !important; margin: 0 !important; }
.card-body { padding: 18px 20px !important; }
.card-footer { background: var(--m-surface2) !important; border-top: 1px solid var(--m-border) !important; padding: 12px 20px !important; }
[data-layout-mode="dark"] .card,
[data-layout-mode="dark"] .card-header,
[data-layout-mode="dark"] .card-footer { background: var(--m-surface) !important; border-color: var(--m-border) !important; }

/* ────────── TABLES ──────────────────────────────────── */
.table { color: var(--m-text) !important; border-color: var(--m-border) !important; font-size: .84rem !important; }
.table thead th {
    background: var(--m-surface2) !important;
    color: var(--m-text-muted) !important;
    font-weight: 600 !important;
    font-size: .73rem !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 2px solid var(--m-border) !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
}
.table tbody td {
    border-bottom: 1px solid var(--m-border) !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    color: var(--m-text) !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table-hover tbody tr:hover { background: var(--m-primary-soft) !important; }
[data-layout-mode="dark"] .table thead th { background: rgba(255,255,255,.04) !important; border-color: var(--m-border) !important; }
[data-layout-mode="dark"] .table tbody td { border-color: var(--m-border) !important; }

/* ────────── BUTTONS ─────────────────────────────────── */
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 7px 16px !important;
    transition: var(--m-ease) !important;
    letter-spacing: .2px !important;
    border-width: 1.5px !important;
}
.btn:active { transform: scale(.97) !important; }
.btn:focus { box-shadow: 0 0 0 3px var(--m-primary-soft) !important; }
.btn-primary { background: var(--m-primary) !important; border-color: var(--m-primary) !important; color: #fff !important; }
.btn-primary:hover { background: var(--m-primary-hover) !important; border-color: var(--m-primary-hover) !important; box-shadow: 0 4px 12px rgba(85,110,230,.35) !important; }
.btn-sm { padding: 4px 11px !important; font-size: .77rem !important; border-radius: 6px !important; }
.btn-lg { padding: 10px 22px !important; font-size: .9rem !important; border-radius: 10px !important; }

/* ────────── FORMS ───────────────────────────────────── */
.form-control, .form-select {
    background: var(--m-surface) !important;
    border: 1.5px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    color: var(--m-text) !important;
    font-size: .84rem !important;
    font-family: 'Inter', sans-serif !important;
    padding: 8px 12px !important;
    transition: var(--m-ease) !important;
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--m-primary) !important;
    box-shadow: 0 0 0 3px var(--m-primary-soft) !important;
    outline: none !important;
    background: var(--m-surface) !important;
    color: var(--m-text) !important;
}
.form-control::placeholder { color: var(--m-text-light) !important; }
.form-label { font-size: .8rem !important; font-weight: 600 !important; color: var(--m-text-muted) !important; margin-bottom: 5px !important; }
[data-layout-mode="dark"] .form-control,
[data-layout-mode="dark"] .form-select { background: rgba(255,255,255,.05) !important; border-color: var(--m-border) !important; color: var(--m-text) !important; }
[data-layout-mode="dark"] .form-control:focus,
[data-layout-mode="dark"] .form-select:focus { background: rgba(255,255,255,.07) !important; border-color: var(--m-primary) !important; }

/* ────────── DROPDOWNS ───────────────────────────────── */
.dropdown-menu {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-lg) !important;
    padding: 6px !important;
    animation: dropIn .15s ease both !important;
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.dropdown-item {
    border-radius: 7px !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    color: var(--m-text) !important;
    padding: 8px 12px !important;
    transition: background .12s !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--m-primary-soft) !important;
    color: var(--m-primary) !important;
}
.dropdown-divider { border-color: var(--m-border) !important; margin: 4px 0 !important; }
[data-layout-mode="dark"] .dropdown-menu { background: var(--m-surface2) !important; border-color: var(--m-border) !important; }
[data-layout-mode="dark"] .dropdown-item { color: var(--m-text) !important; }

/* ────────── MODALS ──────────────────────────────────── */
.modal-backdrop {
    background: rgba(10,13,28,.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.modal-backdrop.show { opacity: 1 !important; }
.modal-dialog { margin-top: 6vh !important; }
.modal.fade .modal-dialog { transform: translateY(-20px) scale(.97) !important; transition: transform .25s cubic-bezier(.34,1.4,.6,1), opacity .2s ease !important; }
.modal.show .modal-dialog { transform: none !important; }
.modal-content {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow-lg) !important;
    overflow: hidden !important;
}
.modal-header {
    background: var(--m-surface) !important;
    border-bottom: 1px solid var(--m-border) !important;
    padding: 18px 22px !important;
}
.modal-title { font-size: .98rem !important; font-weight: 700 !important; color: var(--m-text) !important; }
.modal-header .btn-close {
    width: 28px !important; height: 28px !important;
    border-radius: 8px !important;
    background: var(--m-surface2) !important;
    border: 1px solid var(--m-border) !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: var(--m-ease) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2374788d'%3e%3cpath d='m.5 0-.5.5 7.5 7.5L.5 15.5l.5.5 7.5-7.5L16 16l.5-.5L8.5 8 16.5.5 16 0 8 7.5.5 0z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px !important;
    filter: none !important;
}
.modal-header .btn-close:hover {
    background-color: #fee2e2 !important;
    border-color: #fecaca !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath d='m.5 0-.5.5 7.5 7.5L.5 15.5l.5.5 7.5-7.5L16 16l.5-.5L8.5 8 16.5.5 16 0 8 7.5.5 0z'/%3e%3c/svg%3e") !important;
}
.modal-body { padding: 22px !important; color: var(--m-text) !important; background: var(--m-surface) !important; }
.modal-footer { background: var(--m-surface2) !important; border-top: 1px solid var(--m-border) !important; padding: 14px 22px !important; gap: 8px !important; }
[data-layout-mode="dark"] .modal-content,
[data-layout-mode="dark"] .modal-header,
[data-layout-mode="dark"] .modal-body { background: var(--m-surface) !important; border-color: var(--m-border) !important; color: var(--m-text) !important; }
[data-layout-mode="dark"] .modal-footer { background: var(--m-surface2) !important; border-color: var(--m-border) !important; }
[data-layout-mode="dark"] .modal-header .btn-close {
    background-color: rgba(255,255,255,.08) !important;
    border-color: var(--m-border) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a6acbe'%3e%3cpath d='m.5 0-.5.5 7.5 7.5L.5 15.5l.5.5 7.5-7.5L16 16l.5-.5L8.5 8 16.5.5 16 0 8 7.5.5 0z'/%3e%3c/svg%3e") !important;
}
[data-layout-mode="dark"] .modal-header .btn-close:hover {
    background-color: rgba(220,53,69,.2) !important;
    border-color: rgba(220,53,69,.3) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f46a6a'%3e%3cpath d='m.5 0-.5.5 7.5 7.5L.5 15.5l.5.5 7.5-7.5L16 16l.5-.5L8.5 8 16.5.5 16 0 8 7.5.5 0z'/%3e%3c/svg%3e") !important;
}
.modal-xl { max-width: min(96vw,1200px) !important; }
.modal-lg { max-width: min(92vw,780px) !important; }

/* ────────── BADGES ──────────────────────────────────── */
.badge { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: .68rem !important; padding: 3px 8px !important; border-radius: 50px !important; }

/* ────────── PAGE TITLE ──────────────────────────────── */
.page-title-box { padding: 18px 0 10px !important; }
.page-title-box h4 { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--m-text) !important; margin: 0 !important; }
.breadcrumb { font-size: .75rem !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--m-text-light) !important; }
.breadcrumb-item.active { color: var(--m-text-muted) !important; }
.breadcrumb-item a { color: var(--m-primary) !important; text-decoration: none; }

/* ────────── PAGINATION ──────────────────────────────── */
/* ── Pagination ─────────────────────────────────────── */
.pagination {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}
.pagination .page-item { list-style: none !important; }
.pagination .page-item .page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--m-border) !important;
    color: var(--m-text-muted) !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    background: var(--m-surface) !important;
    transition: var(--m-ease) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
}
.pagination .page-item .page-link:hover {
    background: var(--m-primary-soft) !important;
    color: var(--m-primary) !important;
    border-color: rgba(85,110,230,.25) !important;
}
/* Active page */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover {
    background: var(--m-primary) !important;
    border-color: var(--m-primary) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(85,110,230,.35) !important;
    cursor: default !important;
}
/* Disabled (prev/next when at edges) */
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link:hover {
    background: var(--m-surface2) !important;
    border-color: var(--m-border) !important;
    color: var(--m-text-light) !important;
    opacity: .55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
}
/* Ellipsis dots */
.pagination .page-item:not([onclick]) .page-link {
    cursor: default !important;
    pointer-events: none !important;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--m-text-light) !important;
    min-width: auto !important;
    padding: 4px 6px !important;
}
/* Dark mode */
[data-layout-mode="dark"] .pagination .page-item .page-link {
    background: var(--m-surface2) !important;
    border-color: var(--m-border) !important;
    color: var(--m-text-muted) !important;
}
[data-layout-mode="dark"] .pagination .page-item.active .page-link {
    background: var(--m-primary) !important;
    border-color: var(--m-primary) !important;
    color: #fff !important;
}
[data-layout-mode="dark"] .pagination .page-item.disabled .page-link {
    background: rgba(255,255,255,.04) !important;
    color: var(--m-text-light) !important;
}

/* ────────── SELECT2 ─────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--m-surface) !important;
    border: 1.5px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    min-height: 38px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: .84rem !important;
    transition: var(--m-ease) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--m-primary) !important; box-shadow: 0 0 0 3px var(--m-primary-soft) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--m-text) !important; line-height: 36px !important; padding-left: 12px !important; }
.select2-dropdown { background: var(--m-surface) !important; border: 1.5px solid var(--m-border) !important; border-radius: var(--m-radius) !important; box-shadow: var(--m-shadow-lg) !important; }
.select2-container--default .select2-results__option--highlighted { background: var(--m-primary-soft) !important; color: var(--m-primary) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--m-primary-soft2) !important; color: var(--m-primary) !important; }
.select2-search--dropdown .select2-search__field { border: 1.5px solid var(--m-border) !important; border-radius: 7px !important; padding: 7px 10px !important; font-family: 'Inter', sans-serif !important; font-size: .84rem !important; color: var(--m-text) !important; background: var(--m-surface2) !important; }
[data-layout-mode="dark"] .select2-container--default .select2-selection--single,
[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple { background: rgba(255,255,255,.05) !important; border-color: var(--m-border) !important; }
[data-layout-mode="dark"] .select2-dropdown { background: var(--m-surface2) !important; border-color: var(--m-border) !important; }
[data-layout-mode="dark"] .select2-container--default .select2-results__option { color: var(--m-text) !important; background: transparent !important; }
[data-layout-mode="dark"] .select2-search--dropdown .select2-search__field { background: rgba(255,255,255,.05) !important; border-color: var(--m-border) !important; color: var(--m-text) !important; }

/* ────────── NAV TABS ────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--m-border) !important; gap: 2px !important; }
.nav-tabs .nav-link { border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--m-text-muted) !important; font-weight: 600 !important; font-size: .82rem !important; padding: 9px 16px !important; margin-bottom: -2px !important; transition: color .15s, border-color .15s !important; background: transparent !important; }
.nav-tabs .nav-link:hover { color: var(--m-text) !important; }
.nav-tabs .nav-link.active { color: var(--m-primary) !important; border-bottom-color: var(--m-primary) !important; background: transparent !important; }
[data-layout-mode="dark"] .nav-tabs { border-color: var(--m-border) !important; }

/* ────────── MISC ────────────────────────────────────── */
.input-group-text { background: var(--m-surface2) !important; border: 1.5px solid var(--m-border) !important; color: var(--m-text-muted) !important; font-size: .84rem !important; }
[data-layout-mode="dark"] .input-group-text { background: rgba(255,255,255,.06) !important; border-color: var(--m-border) !important; color: var(--m-text-muted) !important; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--m-text) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; }
.text-muted { color: var(--m-text-muted) !important; }
hr { border-color: var(--m-border) !important; opacity: 1 !important; }

.list-group-item { background: var(--m-surface) !important; border-color: var(--m-border) !important; color: var(--m-text) !important; font-size: .84rem !important; }
[data-layout-mode="dark"] .list-group-item { background: var(--m-surface) !important; border-color: var(--m-border) !important; }

.page-loader { background: rgba(255,255,255,.85) !important; backdrop-filter: blur(3px) !important; }
[data-layout-mode="dark"] .page-loader { background: rgba(30,33,48,.85) !important; }

.swal2-popup { border-radius: var(--m-radius-xl) !important; font-family: 'Inter', sans-serif !important; background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; box-shadow: var(--m-shadow-lg) !important; padding: 28px 28px 22px !important; }
.swal2-title { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--m-text) !important; }
.swal2-html-container { color: var(--m-text-muted) !important; font-size: .875rem !important; }
[data-layout-mode="dark"] .swal2-popup { background: var(--m-surface2) !important; border-color: var(--m-border) !important; }

@media (max-width: 992px) { .page-content { padding: calc(62px + 16px) 12px 48px !important; } }
@media (max-width: 768px) { .modal-dialog { margin: 10px !important; } .modal-content { border-radius: var(--m-radius) !important; } }

/* ══════════════════════════════════════════════════════════
   TABLE TOOLBAR  – search input, per-page select, pagination
   ══════════════════════════════════════════════════════════ */

/* ── Search box wrapper ──────────────────────────────────── */
.search-box { position: relative !important; }
.search-box .search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1rem !important;
    color: var(--m-text-light) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: color .2s !important;
}
.search-box .searchfilter {
    padding-left: 34px !important;
    background: var(--m-surface) !important;
    border: 1.5px solid var(--m-border) !important;
    border-radius: 10px !important;
    color: var(--m-text) !important;
    font-size: .84rem !important;
    font-family: 'Inter', sans-serif !important;
    height: 38px !important;
    transition: all .2s ease !important;
    box-shadow: none !important;
}
.search-box .searchfilter:focus {
    border-color: var(--m-primary) !important;
    box-shadow: 0 0 0 3px var(--m-primary-soft) !important;
    outline: none !important;
}
.search-box .searchfilter:focus ~ .search-icon,
.search-box:focus-within .search-icon { color: var(--m-primary) !important; }
.search-box .searchfilter::placeholder { color: var(--m-text-light) !important; font-size: .82rem !important; }

[data-layout-mode="dark"] .search-box .searchfilter {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: var(--m-text) !important;
}
[data-layout-mode="dark"] .search-box .searchfilter:focus {
    background: rgba(255,255,255,.07) !important;
    border-color: var(--m-primary) !important;
}

/* ── Per-page select (dishapagination) ───────────────────── */
.select2-container--default.dishapagination-s2 .select2-selection--single,
#dataperpage + .select2-container .select2-selection--single {
    height: 38px !important;
    line-height: 36px !important;
}

/* Force the select2 for .dishapagination to look modern */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* ── Pagination – refined for getpagination() output ──────── */
.pagination,
ul.pagination {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.pagination .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 4px 10px !important;
    border-radius: 9px !important;
    border: 1.5px solid var(--m-border) !important;
    color: var(--m-text-muted) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    background: var(--m-surface) !important;
    transition: all .18s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
    cursor: pointer !important;
    user-select: none !important;
    box-shadow: var(--m-shadow-xs) !important;
    font-family: 'Inter', sans-serif !important;
}
.pagination .page-item .page-link:hover {
    background: var(--m-primary-soft) !important;
    color: var(--m-primary) !important;
    border-color: rgba(85,110,230,.3) !important;
    box-shadow: 0 2px 8px rgba(85,110,230,.15) !important;
}
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover {
    background: var(--m-primary) !important;
    border-color: var(--m-primary) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(85,110,230,.40) !important;
    cursor: default !important;
}
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link:hover {
    background: var(--m-surface2) !important;
    border-color: var(--m-border) !important;
    color: var(--m-text-light) !important;
    opacity: .5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
}
/* chevron icons inside prev/next */
.pagination .page-item .page-link i {
    font-size: 1rem !important;
    line-height: 1 !important;
    display: flex !important;
}
/* ellipsis */
.pagination .page-item:not([onclick]) .page-link {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--m-text-light) !important;
    min-width: auto !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Dark mode pagination */
[data-layout-mode="dark"] .pagination .page-item .page-link {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.09) !important;
    color: var(--m-text-muted) !important;
    box-shadow: none !important;
}
[data-layout-mode="dark"] .pagination .page-item .page-link:hover {
    background: rgba(85,110,230,.18) !important;
    color: #7b96f5 !important;
    border-color: rgba(85,110,230,.35) !important;
}
[data-layout-mode="dark"] .pagination .page-item.active .page-link {
    background: var(--m-primary) !important;
    border-color: var(--m-primary) !important;
    color: #fff !important;
}
[data-layout-mode="dark"] .pagination .page-item.disabled .page-link {
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(255,255,255,.06) !important;
    color: var(--m-text-light) !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE  – global body / topbar / footer / form fixes
   ══════════════════════════════════════════════════════════ */

[data-layout-mode="dark"] body {
    background-color: #1a1e2e !important;
    color: #cdd3ee !important;
}

/* Topbar dark */
[data-layout-mode="dark"] #page-topbar {
    background: #1e2338 !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
}
[data-layout-mode="dark"] .navbar-brand-box {
    background: #1e2338 !important;
    border-right-color: rgba(255,255,255,.06) !important;
}

/* Footer dark */
[data-layout-mode="dark"] .footer {
    background: #1e2338 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    color: #8890ac !important;
}
[data-layout-mode="dark"] .footer a { color: #7b96f5 !important; }

/* Table dark */
[data-layout-mode="dark"] .table {
    color: #cdd3ee !important;
    border-color: rgba(255,255,255,.07) !important;
}
[data-layout-mode="dark"] .table thead th {
    background: rgba(255,255,255,.04) !important;
    color: #8890ac !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
}
[data-layout-mode="dark"] .table tbody td {
    border-bottom-color: rgba(255,255,255,.06) !important;
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .table-hover tbody tr:hover {
    background: rgba(85,110,230,.10) !important;
}
[data-layout-mode="dark"] .table-light,
[data-layout-mode="dark"] thead.table-light {
    background: rgba(255,255,255,.04) !important;
    --bs-table-bg: rgba(255,255,255,.04) !important;
    --bs-table-color: #8890ac !important;
}

/* Card dark refinement */
[data-layout-mode="dark"] .card {
    background: #222638 !important;
    border-color: rgba(255,255,255,.07) !important;
}
[data-layout-mode="dark"] .card-header {
    background: #222638 !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
}
[data-layout-mode="dark"] .card-footer {
    background: #1e2338 !important;
    border-top-color: rgba(255,255,255,.07) !important;
}

/* Input/form dark */
[data-layout-mode="dark"] .form-control,
[data-layout-mode="dark"] .form-select,
[data-layout-mode="dark"] .input-group-text {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .form-control::placeholder { color: #505878 !important; }
[data-layout-mode="dark"] .form-control:focus,
[data-layout-mode="dark"] .form-select:focus {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(85,110,230,.6) !important;
    box-shadow: 0 0 0 3px rgba(85,110,230,.15) !important;
}

/* Dropdown dark */
[data-layout-mode="dark"] .dropdown-menu {
    background: #272b40 !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.5) !important;
}
[data-layout-mode="dark"] .dropdown-item {
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .dropdown-item:hover {
    background: rgba(85,110,230,.15) !important;
    color: #7b96f5 !important;
}
[data-layout-mode="dark"] .dropdown-divider {
    border-color: rgba(255,255,255,.07) !important;
}

/* Badge/alert dark text */
[data-layout-mode="dark"] .badge-soft-primary { background: rgba(85,110,230,.2) !important; color: #7b96f5 !important; }
[data-layout-mode="dark"] .badge-soft-success { background: rgba(52,195,143,.2) !important; color: #47d7a6 !important; }
[data-layout-mode="dark"] .badge-soft-danger  { background: rgba(244,106,106,.2) !important; color: #f98f8f !important; }
[data-layout-mode="dark"] .badge-soft-warning { background: rgba(241,180,76,.2) !important; color: #f5c563 !important; }
[data-layout-mode="dark"] .badge-soft-info    { background: rgba(80,165,241,.2) !important; color: #7dc4f7 !important; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR – fix multiple simultaneous active states
   ══════════════════════════════════════════════════════════ */

/* Remove dot from items that are NOT explicitly active/hover */
#sidebar-menu ul li ul.sub-menu li a::before {
    width: 5px !important;
    height: 5px !important;
    left: 28px !important;
}
/* Only ACTIVE sub-item gets colored dot */
#sidebar-menu ul li ul.sub-menu li:not(.mm-active) a:not(.active)::before {
    background: var(--m-text-light) !important;
    transform: translateY(-50%) !important;
}

/* Sidebar vertical menu dark – ensure correct bg */
[data-layout-mode="dark"] #sidebar-menu .menu-title {
    color: #4c5270 !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li a {
    color: #9098b8 !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li a i {
    color: #606880 !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li a:hover {
    background: rgba(255,255,255,.04) !important;
    color: #7b96f5 !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li a:hover i { color: #7b96f5 !important; }
[data-layout-mode="dark"] #sidebar-menu ul li.mm-active > a:not(.has-arrow) {
    background: rgba(85,110,230,.20) !important;
    color: #7b96f5 !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li.mm-active > a:not(.has-arrow) i { color: #7b96f5 !important; }
[data-layout-mode="dark"] #sidebar-menu ul li ul.sub-menu li a {
    color: #606880 !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li ul.sub-menu li.mm-active a,
[data-layout-mode="dark"] #sidebar-menu ul li ul.sub-menu li a.active {
    color: #7b96f5 !important;
    background: rgba(85,110,230,.15) !important;
}
[data-layout-mode="dark"] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #7b96f5 !important;
    background: rgba(255,255,255,.04) !important;
}

/* ══════════════════════════════════════════════════════════
   MODAL – dark mode form inputs, labels, validation
   ══════════════════════════════════════════════════════════ */

[data-layout-mode="dark"] .modal-content {
    background: #222638 !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .modal-header {
    background: #1e2338 !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}
[data-layout-mode="dark"] .modal-body {
    background: #222638 !important;
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .modal-footer {
    background: #1e2338 !important;
    border-top-color: rgba(255,255,255,.08) !important;
}
[data-layout-mode="dark"] .modal-title { color: #e2e6f8 !important; }

/* Modal form controls – clearly visible */
[data-layout-mode="dark"] .modal .form-control,
[data-layout-mode="dark"] .modal .form-select {
    background: rgba(255,255,255,.06) !important;
    border: 1.5px solid rgba(255,255,255,.12) !important;
    color: #cdd3ee !important;
    border-radius: 10px !important;
}
[data-layout-mode="dark"] .modal .form-control::placeholder { color: #505878 !important; }
[data-layout-mode="dark"] .modal .form-control:focus,
[data-layout-mode="dark"] .modal .form-select:focus {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(85,110,230,.65) !important;
    box-shadow: 0 0 0 3px rgba(85,110,230,.18) !important;
    color: #e2e6f8 !important;
}
[data-layout-mode="dark"] .modal .form-label {
    color: #8890ac !important;
    font-weight: 600 !important;
}
[data-layout-mode="dark"] .modal .invalid-feedback,
[data-layout-mode="dark"] .modal .text-danger { color: #f98f8f !important; }

/* ══════════════════════════════════════════════════════════
   SELECT2 – dark mode dropdown (covers dishapagination too)
   ══════════════════════════════════════════════════════════ */

[data-layout-mode="dark"] .select2-container--default .select2-selection--single,
[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple {
    background: rgba(255,255,255,.06) !important;
    border: 1.5px solid rgba(255,255,255,.12) !important;
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #505878 !important;
}
[data-layout-mode="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
[data-layout-mode="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: rgba(85,110,230,.65) !important;
    box-shadow: 0 0 0 3px rgba(85,110,230,.15) !important;
}
[data-layout-mode="dark"] .select2-dropdown {
    background: #1e2338 !important;
    border: 1.5px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
}
[data-layout-mode="dark"] .select2-container--default .select2-results__option {
    color: #cdd3ee !important;
    background: transparent !important;
    border-radius: 7px !important;
}
[data-layout-mode="dark"] .select2-container--default .select2-results__option--highlighted {
    background: rgba(85,110,230,.18) !important;
    color: #7b96f5 !important;
}
[data-layout-mode="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(85,110,230,.25) !important;
    color: #7b96f5 !important;
}
[data-layout-mode="dark"] .select2-search--dropdown { padding: 6px !important; }
[data-layout-mode="dark"] .select2-search--dropdown .select2-search__field {
    background: rgba(255,255,255,.06) !important;
    border: 1.5px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    color: #cdd3ee !important;
    padding: 8px 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: .84rem !important;
}
[data-layout-mode="dark"] .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(85,110,230,.65) !important;
    box-shadow: 0 0 0 2px rgba(85,110,230,.15) !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   MISC DARK MODE FIXES
   ══════════════════════════════════════════════════════════ */

/* Accordion */
[data-layout-mode="dark"] .accordion-item {
    background: #222638 !important;
    border-color: rgba(255,255,255,.08) !important;
}
[data-layout-mode="dark"] .accordion-button {
    background: #1e2338 !important;
    color: #cdd3ee !important;
    box-shadow: none !important;
}
[data-layout-mode="dark"] .accordion-button:not(.collapsed) {
    background: rgba(85,110,230,.15) !important;
    color: #7b96f5 !important;
}
[data-layout-mode="dark"] .accordion-body {
    background: #222638 !important;
    color: #cdd3ee !important;
}

/* Alert boxes */
[data-layout-mode="dark"] .alert {
    border-color: rgba(255,255,255,.07) !important;
}
[data-layout-mode="dark"] .alert-primary { background: rgba(85,110,230,.15) !important; color: #7b96f5 !important; }
[data-layout-mode="dark"] .alert-success { background: rgba(52,195,143,.15) !important; color: #47d7a6 !important; }
[data-layout-mode="dark"] .alert-danger  { background: rgba(244,106,106,.15) !important; color: #f98f8f !important; }
[data-layout-mode="dark"] .alert-warning { background: rgba(241,180,76,.15) !important; color: #f5c563 !important; }
[data-layout-mode="dark"] .alert-info    { background: rgba(80,165,241,.15) !important; color: #7dc4f7 !important; }

/* Form check */
[data-layout-mode="dark"] .form-check-input {
    background-color: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.15) !important;
}
[data-layout-mode="dark"] .form-check-input:checked {
    background-color: #556ee6 !important;
    border-color: #556ee6 !important;
}

/* Page title */
[data-layout-mode="dark"] .page-title-box h4 { color: #e2e6f8 !important; }
[data-layout-mode="dark"] .page-title-box .breadcrumb-item a { color: #7b96f5 !important; }
[data-layout-mode="dark"] .page-title-box .breadcrumb-item.active { color: #8890ac !important; }
[data-layout-mode="dark"] .page-title-box .breadcrumb-item + .breadcrumb-item::before { color: #505878 !important; }

/* Input group dark */
[data-layout-mode="dark"] .input-group-text {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #8890ac !important;
}

/* Horizontal rules */
[data-layout-mode="dark"] hr { border-color: rgba(255,255,255,.07) !important; }

/* List group */
[data-layout-mode="dark"] .list-group-item {
    background: #222638 !important;
    border-color: rgba(255,255,255,.07) !important;
    color: #cdd3ee !important;
}

/* Page footer */
[data-layout-mode="dark"] footer.footer {
    background: #1e2338 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
}
[data-layout-mode="dark"] footer.footer,
[data-layout-mode="dark"] .footer { color: #8890ac !important; }
[data-layout-mode="dark"] .footer a { color: #7b96f5 !important; text-decoration: none; }