/* ============================================================
   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 & SELECTPICKER ─────────────────── */
.select2-container,
.modal .select2-container:not(.select2-container--open),
.offcanvas .select2-container:not(.select2-container--open),
.select2-container:not(.select2-container--open) {
    width: 100% !important;
    z-index: auto !important;
}

.select2-container--default.select2-container--focus {
    z-index: 2 !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;
    z-index: 999999 !important;
}

/* When Select2 dropdown is open, it must be above modals, offcanvas, and all inputs */
body > .select2-container--open,
.modal .select2-container--open,
.offcanvas .select2-container--open,
.select2-container--open {
    z-index: 999999 !important;
}

.select2-container--open .select2-dropdown {
    z-index: 999999 !important;
}

/* Bootstrap-select picker support */
.bootstrap-select:not(.show):not(.open) {
    z-index: auto !important;
}
.bootstrap-select.show,
.bootstrap-select.open {
    z-index: 999998 !important;
}
.bootstrap-select.show .dropdown-menu,
.bootstrap-select.open .dropdown-menu {
    z-index: 999999 !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;
}

/* ────────── EXCEL-STYLE MULTIPLE SELECT ────────── */

/* Multiple Select trigger button (closed state) */
.select2-container--default .select2-selection--multiple {
    position: relative !important;
    min-height: 38px !important;
    height: 38px !important;
    border: 1.5px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm, 6px) !important;
    background: var(--m-surface) !important;
    padding: 0 32px 0 8px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: var(--m-ease, all 0.2s ease) !important;
}

/* Dropdown arrow on multiple select (like Excel column filter button) */
.select2-container--default .select2-selection--multiple::after {
    content: '' !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4.5px solid transparent !important;
    border-right: 4.5px solid transparent !important;
    border-top: 5px solid #74788d !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
}
.select2-container--default.select2-container--open .select2-selection--multiple::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Rendered list inside multiple select trigger */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    list-style: none !important;
}

/* Choice pills in multiple select */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--m-primary-soft, #e8f4fd) !important;
    border: 1px solid rgba(0, 120, 170, 0.22) !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--m-primary, #0078aa) !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    line-height: 20px !important;
    flex-shrink: 0 !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--m-primary, #0078aa) !important;
    margin-right: 5px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #e02d2d !important;
}

/* Excel Summary Pill (e.g. "All Selected (12)" or "+3 more") */
.select2-container--default .select2-selection--multiple .select2-excel-summary-chip {
    background-color: var(--m-primary-soft, #e8f4fd) !important;
    border: 1px solid var(--m-primary, #0078aa) !important;
    color: var(--m-primary, #0078aa) !important;
    font-weight: 600 !important;
    cursor: default !important;
}
.select2-container--default .select2-selection--multiple .select2-excel-summary-chip .select2-excel-clear-all {
    color: #e02d2d !important;
    margin-right: 5px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 15px !important;
    line-height: 1 !important;
}
.select2-container--default .select2-selection--multiple .select2-excel-summary-chip .select2-excel-clear-all:hover {
    color: #b91c1c !important;
    transform: scale(1.15) !important;
}

/* Inline search field inside multiple select - keeps single-line height */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 10px !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 0 4px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 24px !important;
    height: 24px !important;
    background: transparent !important;
    color: var(--m-text) !important;
}

/* Excel Dropdown: Options container */
.select2-dropdown .select2-results__options[aria-multiselectable="true"] {
    max-height: 260px !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
}

/* Excel Dropdown: Checkbox for each option */
.select2-results__options[aria-multiselectable="true"] .select2-results__option[role="option"] {
    position: relative !important;
    padding: 8px 14px 8px 38px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--m-text, #2d3748) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    user-select: none !important;
    border-radius: 0 !important;
    transition: background-color 0.12s ease !important;
}

/* Empty Checkbox square [ ] */
.select2-results__options[aria-multiselectable="true"] .select2-results__option[role="option"]::before {
    content: '' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 17px !important;
    height: 17px !important;
    border: 1.5px solid #a0aec0 !important;
    border-radius: 3.5px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

/* Option Hover state */
.select2-results__options[aria-multiselectable="true"] .select2-results__option[role="option"]:hover,
.select2-results__options[aria-multiselectable="true"] .select2-results__option--highlighted[role="option"] {
    background-color: var(--m-primary-soft, rgba(0, 120, 170, 0.08)) !important;
    color: var(--m-primary, #0078aa) !important;
}
.select2-results__options[aria-multiselectable="true"] .select2-results__option[role="option"]:hover::before,
.select2-results__options[aria-multiselectable="true"] .select2-results__option--highlighted[role="option"]::before {
    border-color: var(--m-primary, #0078aa) !important;
}

/* Checked option [✓] */
.select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"] {
    background-color: rgba(0, 120, 170, 0.04) !important;
    color: var(--m-text, #2d3748) !important;
    font-weight: 500 !important;
}
.select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"]::before {
    background-color: var(--m-primary, #0078aa) !important;
    border-color: var(--m-primary, #0078aa) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
    background-size: 11px 11px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 1px 3px rgba(0, 120, 170, 0.3) !important;
}

/* Indent for nested options (optgroups) */
.select2-results__options[aria-multiselectable="true"] .select2-results__option--nested {
    padding-left: 48px !important;
}
.select2-results__options[aria-multiselectable="true"] .select2-results__option--nested::before {
    left: 22px !important;
}

/* Optgroup header */
.select2-results__options[aria-multiselectable="true"] .select2-results__group {
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--m-text-light, #718096) !important;
    background-color: var(--m-surface2, #f8fafc) !important;
    border-top: 1px solid var(--m-border, #e2e8f0) !important;
    border-bottom: 1px solid var(--m-border, #e2e8f0) !important;
}

/* "Select All" Option Styling */
.select2-results__options[aria-multiselectable="true"] .select2-results__option[id*="select_all"],
.select2-results__options[aria-multiselectable="true"] .select2-results__option[data-select2-id*="select_all"],
.select2-results__options[aria-multiselectable="true"] .select2-results__option--select-all {
    font-weight: 600 !important;
    border-bottom: 1.5px solid var(--m-border, #e2e8f0) !important;
    margin-bottom: 4px !important;
    background-color: var(--m-surface2, #f8fafc) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* Excel Search Box inside the Dropdown */
.select2-excel-search {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--m-border, #e2e8f0) !important;
    background: var(--m-surface2, #f8fafc) !important;
}
.select2-excel-search-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.select2-excel-search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #74788d !important;
    font-size: 14px !important;
    pointer-events: none !important;
}
.select2-excel-search-input {
    width: 100% !important;
    padding: 6px 10px 6px 30px !important;
    border-radius: 5px !important;
    font-size: 12.5px !important;
    height: 32px !important;
    border: 1.5px solid var(--m-border, #ced4da) !important;
    background: var(--m-surface, #ffffff) !important;
    color: var(--m-text, #495057) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.select2-excel-search-input:focus {
    border-color: var(--m-primary, #0078aa) !important;
    box-shadow: 0 0 0 2px var(--m-primary-soft, rgba(0, 120, 170, 0.15)) !important;
}

/* Dark mode for Excel Multiple Select */
[data-layout-mode="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option[role="option"]::before {
    background-color: #2a3042 !important;
    border-color: #555b6d !important;
}
[data-layout-mode="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option[aria-selected="true"]::before {
    background-color: var(--m-primary, #0078aa) !important;
    border-color: var(--m-primary, #0078aa) !important;
}
[data-layout-mode="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option[id*="select_all"],
[data-layout-mode="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option[data-select2-id*="select_all"],
[data-layout-mode="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__option--select-all {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-layout-mode="dark"] .select2-results__options[aria-multiselectable="true"] .select2-results__group {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #a6b0cf !important;
}
[data-layout-mode="dark"] .select2-excel-search {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-layout-mode="dark"] .select2-excel-search-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cdd3ee !important;
}
[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(0, 120, 170, 0.18) !important;
    border-color: rgba(0, 120, 170, 0.35) !important;
    color: #7b96f5 !important;
}
[data-layout-mode="dark"] .select2-container--default .select2-selection--multiple .select2-excel-summary-chip {
    background-color: rgba(0, 120, 170, 0.25) !important;
    border-color: var(--m-primary, #0078aa) !important;
    color: #ffffff !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;
    }
}
/* ============================================================
   GLOBAL DROPDOWN-IN-CARD FIX
   Bootstrap .card has overflow:hidden which clips dropdown menus.
   ============================================================ */
.card:has(.dropdown),
.card-body:has(.dropdown),
.filter-card {
    overflow: visible !important;
}

/* ============================================================
   GLOBAL REPORT / ATTENDANCE SHARED STYLES
   ============================================================ */
.filter-card {
    border-radius: 12px;
    padding: 18px 20px;
    background: var(--m-surface);
}
.filter-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 6px;
    display: block;
}
.table-card {
    border-radius: 12px;
    background: var(--m-surface);
}
.table-matrix th,
.table-matrix td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding: 7px 5px;
}
.table-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--m-surface2) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.table-matrix th:first-child,
.table-matrix td:first-child {
    position: sticky; left: 0;
    width: 45px; min-width: 45px; max-width: 45px;
    z-index: 2; background-color: var(--m-surface) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,.03);
}
.table-matrix th:nth-child(2),
.table-matrix td:nth-child(2) {
    position: sticky; left: 45px;
    width: 220px; min-width: 220px; max-width: 220px;
    z-index: 2; background-color: var(--m-surface) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,.03);
}
.table-matrix th:nth-child(3),
.table-matrix td:nth-child(3) {
    position: sticky; left: 265px;
    width: 150px; min-width: 150px; max-width: 150px;
    z-index: 2; background-color: var(--m-surface) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,.05);
}
.table-matrix thead th:first-child {
    position: sticky; top: 0; left: 0;
    width: 45px; min-width: 45px; max-width: 45px;
    z-index: 4; background-color: var(--m-surface2) !important;
}
.table-matrix thead th:nth-child(2) {
    position: sticky; top: 0; left: 45px;
    width: 220px; min-width: 220px; max-width: 220px;
    z-index: 4; background-color: var(--m-surface2) !important;
}
.table-matrix thead th:nth-child(3) {
    position: sticky; top: 0; left: 265px;
    width: 150px; min-width: 150px; max-width: 150px;
    z-index: 4; background-color: var(--m-surface2) !important;
}
.photo-thumb {
    width: 38px; height: 38px;
    border-radius: 50%; object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    border: 2px solid var(--m-surface); flex-shrink: 0;
}
.modal-photo-lg {
    width: 100%; max-height: 280px;
    border-radius: 12px; object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.info-card {
    background: var(--m-surface2);
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    margin-bottom: 12px;
}
.info-label {
    font-size: 11px; text-transform: uppercase;
    font-weight: 700; color: #64748b;
    margin-bottom: 4px; letter-spacing: 0.5px;
}
.info-value {
    font-size: 14px; font-weight: 700;
    color: var(--m-text); margin: 0;
}
.badge-holiday { background-color: #6f42c1 !important; color: #fff !important; }
.badge-late    { background-color: #f59e0b !important; color: #fff !important; }
.badge-early   { background-color: #f97316 !important; color: #fff !important; }
.datepicker,
.datepicker-dropdown,
.datepicker-container,
.flatpickr-calendar,
.bootstrap-timepicker-widget {
    z-index: 999999 !important;
    background-color: var(--m-surface, #ffffff) !important;
    border: 1px solid var(--m-border, rgba(0, 0, 0, 0.15)) !important;
    box-shadow: var(--m-shadow-lg, 0 6px 12px rgba(0, 0, 0, 0.175)) !important;
}

.datepicker table,
.datepicker-dropdown table {
    background-color: var(--m-surface, #ffffff) !important;
}

[data-layout-mode="dark"] .datepicker,
[data-layout-mode="dark"] .datepicker-dropdown,
[data-layout-mode="dark"] .datepicker-container,
[data-layout-mode="dark"] .flatpickr-calendar {
    background-color: var(--m-surface2, #2a3042) !important;
    border-color: var(--m-border, rgba(255, 255, 255, 0.15)) !important;
    color: var(--m-text, #eff2f7) !important;
}

[data-layout-mode="dark"] .datepicker table,
[data-layout-mode="dark"] .datepicker-dropdown table {
    background-color: var(--m-surface2, #2a3042) !important;
}