/* ============================================================
   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 {
    width: 100% !important;
}

.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:not(i),
.h2:not(i),
.h3:not(i),
.h4:not(i),
.h5:not(i),
.h6:not(i) {
    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;
}


.module-header {
    background-color: #f8f9fa !important;
    border-top: 2px solid #dee2e6 !important;
}

.module-header td {
    font-weight: bold;
    color: #495057;
    font-size: 1.1em;
}

.menu-row td:first-child {
    padding-left: 2.5rem !important;
    position: relative;
}

.menu-row td:first-child::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 0;
    bottom: 50%;
    width: 1px;
    background-color: #ced4da;
}

.menu-row td:first-child::after {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    width: 15px;
    height: 1px;
    background-color: #ced4da;
}

.permission-checkbox,
.check-all-row-web,
.check-all-row-mob {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

/* ── Schedule slot cells: CSS custom props for dark/light mode ── */
:root {
    --sc-busy-bg:     #dbeafe;
    --sc-busy-bd:     #93c5fd;
    --sc-busy-hbg:    #bfdbfe;
    --sc-busy-subj:   #1e3a8a;
    --sc-busy-cls:    #2563eb;
    --sc-busy-time:   #64748b;
    --sc-free-bg:     #d1fae5;
    --sc-free-bd:     #6ee7b7;
    --sc-free-txt:    #059669;
    --sc-break-bg:    #fef9c3;
    --sc-break-bd:    #fde68a;
    --sc-break-txt:   #854d0e;
    --sc-off-bg:      var(--bs-light, #f8f9fa);
    --sc-off-bd:      var(--bs-border-color, #dee2e6);
    --sc-off-txt:     var(--bs-secondary, #6c757d);
    --sc-th-bg:       var(--bs-primary, #556ee6);
    --sc-day-bg:      var(--bs-primary, #556ee6);
    --sc-period-chip: var(--bs-primary, #556ee6);
}
[data-bs-theme="dark"], .dark-mode {
    --sc-busy-bg:     #1e3a5f;
    --sc-busy-bd:     #2563eb;
    --sc-busy-hbg:    #1d4ed8;
    --sc-busy-subj:   #93c5fd;
    --sc-busy-cls:    #60a5fa;
    --sc-busy-time:   #94a3b8;
    --sc-free-bg:     #064e3b;
    --sc-free-bd:     #059669;
    --sc-free-txt:    #34d399;
    --sc-break-bg:    #422006;
    --sc-break-bd:    #d97706;
    --sc-break-txt:   #fcd34d;
    --sc-off-bg:      rgba(255,255,255,.05);
    --sc-off-bd:      rgba(255,255,255,.1);
}

/* ── Grid ── */
.tt-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tt-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: auto; }
.tt-grid thead th {
    background: var(--sc-th-bg);
    color: #fff; padding: 9px 12px; font-size: 11px; font-weight: 700;
    border-radius: 8px; text-align: center; white-space: nowrap;
    letter-spacing: .4px;
}
.tt-grid thead th.period-th { min-width: 54px; max-width: 68px; opacity: .85; }
.tt-grid thead th.day-th    { min-width: 120px; }
.tt-grid td { padding: 2px; vertical-align: top; }

/* ── Slot cells ── */
.slot-cell {
    border-radius: 9px; padding: 8px 10px; min-height: 68px;
    font-size: 12px; transition: transform .15s, box-shadow .15s;
    display: flex; flex-direction: column; justify-content: center;
    border: 2px solid transparent; word-break: break-word;
}
.slot-cell.busy     { background: var(--sc-busy-bg);  border-color: var(--sc-busy-bd);  }
.slot-cell.busy:hover { background: var(--sc-busy-hbg); box-shadow: 0 4px 10px rgba(0,0,0,.1); transform: translateY(-1px); }
.slot-cell.free     { background: var(--sc-free-bg);  border-color: var(--sc-free-bd);  }
.slot-cell.break-s  { background: var(--sc-break-bg); border-color: var(--sc-break-bd); }
.slot-cell.week-off { background: var(--sc-off-bg);   border-color: var(--sc-off-bd);   }

.slot-cell .subject-nm { font-weight: 700; color: var(--sc-busy-subj); line-height: 1.3; }
.slot-cell .class-nm   { color: var(--sc-busy-cls);  font-size: 11px; margin-top: 1px; }
.slot-cell .time-nm    { font-size: 10px; color: var(--sc-busy-time); margin-top: 3px; }
.slot-cell .free-nm    { font-weight: 600; color: var(--sc-free-txt); font-size: 11px; }
.slot-cell .off-nm     { color: var(--sc-off-txt); font-size: 11px; }
.slot-cell .break-nm   { font-weight: 600; color: var(--sc-break-txt); font-size: 11px; }

/* ── Single-teacher day columns ── */
.single-tt-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.single-tt-inner   { display: flex; gap: 6px; min-width: max-content; padding-bottom: 4px; }
.day-col { min-width: 130px; flex: 1; }
.day-col-hdr {
    background: var(--sc-day-bg); color: #fff;
    text-align: center; padding: 9px 6px;
    font-weight: 700; font-size: 13px;
    border-radius: 8px 8px 0 0;
}
.day-col-body {
    padding: 4px;
    background: var(--bs-card-bg, var(--bs-body-bg, #fff));
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* ── Period chip ── */
.period-chip {
    background: var(--sc-period-chip);
    color: #fff; border-radius: 6px;
    padding: 5px 8px; font-weight: 700;
    font-size: 11px; text-align: center;
    white-space: nowrap;
}

/* ── Day separator row ── */
.day-sep-cell { padding: 6px 0 2px !important; }
.day-sep-pill {
    background: var(--bs-primary, #556ee6);
    color: #fff; border-radius: 6px;
    padding: 4px 12px; font-weight: 700;
    font-size: 11px; display: inline-block;
}

/* ── Loader ── */
#schedule_loader {
    display: none; position: absolute; inset: 0;
    background: rgba(var(--bs-body-bg-rgb, 255,255,255), .75);
    z-index: 10; align-items: center; justify-content: center;
    border-radius: 10px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .day-col       { min-width: 105px; }
    .slot-cell     { min-height: 56px; padding: 6px 8px; }
    .tt-grid thead th.day-th { min-width: 100px; }
}
@media (max-width: 480px) {
    .slot-cell .time-nm { display: none; }
}