/* ==========================================================================
   Global Educational Blueprint Watermark Background (Soft Light Tone)
   ========================================================================== */
body,
body.navbar-top,
.page-container,
.page-content,
.content-wrapper {
    background-color: #f8fafc !important;
    background-image: 
        linear-gradient(rgba(248, 250, 252, 0.88), rgba(241, 245, 249, 0.88)),
        url('/assets/images/school_study_bg.jpg') !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
  .login-container {
     padding-right: 0 !important;
    justify-content: center !important; /* Center content horizontally */
    padding-left: 0 !important;         /* Ensure no left padding interferes */
  }
}

.border-left-lg {
    border-radius: 10px !important;
}

/* ==========================================================================
   Global Modern Glassmorphic / Dark-Slate BlockUI Loader System
   ========================================================================== */
.blockOverlay,
.blockUI.blockOverlay,
div.blockUI.blockOverlay {
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 1 !important;
    cursor: wait !important;
    z-index: 9999998 !important;
}

.blockMsg,
.blockMsg.blockPage,
.blockMsg.blockElement,
.blockUI.blockMsg,
.blockUI.blockMsg.blockPage,
.blockUI.blockMsg.blockElement,
div.blockUI.blockMsg,
div.blockMsg {
    background: rgba(15, 23, 42, 0.94) !important;
    background-color: rgba(15, 23, 42, 0.94) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    padding: 22px 28px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    min-width: 240px !important;
    max-width: 360px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    z-index: 9999999 !important;
}

.blockMsg img,
.blockUI.blockMsg img,
div.blockUI.blockMsg img,
div.blockMsg img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    margin-bottom: 10px !important;
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.45)) !important;
    display: inline-block !important;
}

.blockMsg h1,
.blockMsg h2,
.blockMsg h3,
.blockMsg h4,
.blockUI.blockMsg h1,
.blockUI.blockMsg h2,
.blockUI.blockMsg h3,
div.blockUI.blockMsg h1,
div.blockUI.blockMsg h2,
div.blockUI.blockMsg h3,
div.blockMsg h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
}

/* Pace Modern Accent Top Bar */
.pace .pace-progress {
    background: var(--brand-primary, #2563eb) !important;
    height: 3.5px !important;
    box-shadow: 0 0 10px var(--brand-primary, #2563eb) !important;
    z-index: 99999999 !important;
}

/* ==========================================================================
   Global Modern Modal / Popup System
   ========================================================================== */
.modal-backdrop.in {
    opacity: 0.65 !important;
    background-color: #0f172a !important;
}

.modal-dialog {
    margin: 30px auto !important;
}

.modal-dialog.modal-full {
    width: 95% !important;
    max-width: 1400px !important;
}

.modal-dialog.modal-lg {
    max-width: 900px !important;
}

.modal-dialog.modal-sm {
    max-width: 450px !important;
}

.modal-content {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.modal-header {
    background: #ffffff !important;
    padding: 16px 24px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

.modal-header hr {
    display: none !important;
}

.modal-header .modal-title,
.modal-header h3.modal-title,
.modal-header h4.modal-title,
.modal-header h5.modal-title,
.modal-header h6.modal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.2px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-header .close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    float: none !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.modal-header .close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.modal-body {
    padding: 22px 24px !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
}

.modal-footer {
    background: #f8fafc !important;
    padding: 14px 24px !important;
    border-top: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.modal-footer .btn-warning,
.modal-footer .btn-default,
.modal-footer [data-dismiss="modal"] {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 38px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.modal-footer .btn-warning:hover,
.modal-footer .btn-default:hover,
.modal-footer [data-dismiss="modal"]:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.modal-footer .btn-primary {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    height: 38px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(30, 60, 114, 0.25) !important;
    transition: all 0.2s ease !important;
}

.btn {
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    color: #fff;
}

.panel-flat > .panel-heading {
    border-radius: 15px !important;
}

.panel[class*=border-left-] {
    border-radius: 15px;
}

.file-upload-input {
	background-color: transparent !important;
}

/* ==========================================================================
   Refined Modern Side Menu
   ========================================================================== */
.sidebar,
.sidebar-main {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
}

.sidebar-default {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    margin: 10px !important;
    overflow: visible !important;
}

.sidebar-default .sidebar-content {
    padding: 0 !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    overflow: visible !important;
}

/* Global gap between sidebar and main content */
.content-wrapper {
    padding-left: 16px !important;
}

.sidebar-default .sidebar-user {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px 14px 16px 14px !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.sidebar-default .sidebar-user img {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}

.sidebar-default .sidebar-category,
.sidebar-default .category-title,
.sidebar-default .category-content {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.sidebar-default .navigation-header {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #94a3b8 !important;
    padding: 12px 12px 4px 12px !important;
}

.sidebar-default .navigation > li > a {
    border-radius: 8px !important;
    margin: 2px 4px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.sidebar-default .navigation > li > a:hover {
    background-color: #f1f5f9 !important;
    color: #1e3c72 !important;
}

.sidebar-default .navigation > li.active > a,
.sidebar-default .navigation > li > a.active {
    background: #1e3c72 !important;
    color: #ffffff !important;
}

.sidebar-default .navigation > li.active > a i,
.sidebar-default .navigation > li > a.active i {
    color: #ffffff !important;
}

.sidebar-default .navigation > li > ul {
    padding-left: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    position: relative !important;
}

.sidebar-default .navigation > li {
    position: relative !important;
    overflow: hidden !important;
}

.sidebar-default .navigation > li > ul > li {
    opacity: 1 !important;
    transform: none !important;
}

.sidebar-default .navigation > li > ul > li > a {
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
}

.sidebar-default .navigation > li > ul > li > a:hover {
    background-color: #f1f5f9 !important;
    color: #1e3c72 !important;
}

/* ==========================================================================
   Global Dropdown / Select z-index Fix
   ========================================================================== */
.panel,
.panel-flat,
.panel-body,
.att-reg-card,
.content-group,
.form-group {
    overflow: visible !important;
}

.select2-dropdown,
.bootstrap-select .dropdown-menu,
.dropdown-menu {
    z-index: 999999 !important;
}

.sidebar-default .navigation > li > ul {
    z-index: 1050 !important;
}

/* ==========================================================================
   Global DataTable Sort Icon Fix & Header Styling
   ========================================================================== */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 24px !important;
    position: relative !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before {
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
}

/* Distinct, readable table headings - globally */
table.dataTable thead th,
table thead th,
.table thead th {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    padding: 12px 10px !important;
    white-space: nowrap !important;
}

/* Table body text */
table.dataTable tbody td,
table tbody td,
.table tbody td {
    font-size: 13.5px !important;
    color: #334155 !important;
    padding: 11px 10px !important;
    vertical-align: middle !important;
}

/* Modern Card Containers - Globally */
.mod-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
}

.mod-card .panel-heading {
    background: #f8fafc !important;
    padding: 16px 24px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.mod-card .panel-body {
    padding: 24px !important;
}

.mod-icon-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    box-shadow: 0 4px 10px rgba(30, 60, 114, 0.25) !important;
    flex-shrink: 0 !important;
}

/* Panel titles / card headings - distinctly visible */
.panel-title,
.panel-heading .panel-title,
.mod-card .panel-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

/* ==========================================================================
   Global Universal Boxed Inputs & Dropdowns (Textboxes & Selects Look Alike)
   ========================================================================== */
.mod-filter-label,
label.control-label,
.control-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Universal 4-Sided Boxed Inputs & Selects (Optimized for Performance) */
input.form-control,
textarea.form-control,
select.form-control,
select.mod-select-control,
select.selectpicker,
.mod-select-control {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    line-height: normal !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* Critical Fix: Ensure Native Select is Completely Suppressed when Select2 is Active */
select.select2-hidden-accessible,
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
    margin: -1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
    z-index: -999 !important;
}

/* ==========================================================================
   Header Navbar Search Bar Styling (Sleek Glassmorphic Pill)
   ========================================================================== */
.header-search-input,
.navbar input#regNo,
.navbar-nav input[type="search"],
.navbar input[type="search"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 36px 0 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: 220px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: none !important;
}

.header-search-input::placeholder,
.navbar input#regNo::placeholder,
.navbar input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 400 !important;
}

.header-search-input:hover,
.navbar input#regNo:hover,
.navbar input[type="search"]:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.header-search-input:focus,
.navbar input#regNo:focus,
.navbar input[type="search"]:focus {
    background-color: rgba(255, 255, 255, 0.22) !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
    width: 260px !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}

.header-search-btn {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color 0.2s ease !important;
}

.header-search-btn:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   Clean Unified Native Select Dropdowns
   ========================================================================== */
select,
select.form-control,
select.mod-select-control,
select.selectpicker {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 36px 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) center !important;
    background-size: 14px 14px !important;
    cursor: pointer !important;
    outline: none !important;
    width: 100% !important;
    display: block !important;
}

select::-ms-expand {
    display: none !important;
}

select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
}

/* Universal Focus States */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
select.mod-select-control:focus,
select.selectpicker:focus,
select:focus,
.mod-select-control:focus,
.form-control:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   State-of-the-Art Google Material Design 3 Dropdown Theme
   ========================================================================== */
.select2-container--default .select2-dropdown,
.select2-container--bootstrap .select2-dropdown,
.select2-dropdown,
.bootstrap-select .dropdown-menu,
.bootstrap-select > .dropdown-menu {
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 40px -6px rgba(15, 23, 42, 0.15), 0 8px 16px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    background-color: #ffffff !important;
    padding: 6px !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    max-height: none !important;
    animation: mod-dropdown-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes mod-dropdown-pop {
    0% { opacity: 0; transform: translateY(-6px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.select2-dropdown--below,
.bootstrap-select.open > .dropdown-menu {
    margin-top: 5px !important;
}

.select2-dropdown--above {
    margin-bottom: 5px !important;
}

/* Material Search Box inside Dropdown */
.select2-search--dropdown.select2-search--hide,
.select2-dropdown .select2-search--hide {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
}

.select2-search--dropdown:not(.select2-search--hide) {
    padding: 4px 4px 8px 4px !important;
    display: block !important;
}

.select2-search--dropdown:not(.select2-search--hide) .select2-search__field {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    background-color: #f8fafc !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.select2-search--dropdown:not(.select2-search--hide) .select2-search__field:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.select2-results {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Material Options List Container */
.select2-results__options,
.bootstrap-select .dropdown-menu.inner {
    max-height: 230px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Material Slim Scrollbar */
.select2-results__options::-webkit-scrollbar,
.bootstrap-select .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
}

.select2-results__options::-webkit-scrollbar-track,
.bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-track {
    background: #f8fafc !important;
    border-radius: 10px !important;
}

.select2-results__options::-webkit-scrollbar-thumb,
.bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover,
.bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Luxury Material Option Items */
.dropdown-menu > li > a,
.select2-results__option,
.select2-container--default .select2-results__option,
.select2-container--bootstrap .select2-results__option {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    border-radius: 9px !important;
    margin-bottom: 2px !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
    letter-spacing: 0.15px !important;
}

/* Material Hover / Highlighted State */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.select2-results__option--highlighted[aria-selected="false"],
.select2-container--default .select2-results__option--highlighted[aria-selected="false"],
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected="false"],
.select2-results__option:not([aria-selected="true"]):hover {
    background-color: #f1f5f9 !important;
    color: #1e3c72 !important;
    font-weight: 600 !important;
    padding-left: 18px !important;
}

/* Material Active / Selected Item */
.dropdown-menu > .active > a,
.select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--bootstrap .select2-results__option[aria-selected="true"] {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 8px rgba(30, 60, 114, 0.25) !important;
}

.select2-results__option[aria-selected="true"]::after,
.select2-container--default .select2-results__option[aria-selected="true"]::after {
    content: "✓";
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    margin-left: auto;
    padding-left: 10px;
}

.select2-results__option--highlighted[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background: linear-gradient(135deg, #162d55 0%, #1e3c72 100%) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Modern Global DataTable Enhancements
   ========================================================================== */
.dataTables_wrapper {
    padding: 10px 0;
}

/* Header & Footer Containers */
.datatable-header,
.dataTables_wrapper .dt-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

/* Search Box Input & Search Icon Placement */
.dataTables_filter {
    position: relative !important;
    margin-bottom: 12px;
}
.dataTables_filter label {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}
.dataTables_filter input[type="search"],
.dataTables_filter input {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 20px !important;
    padding: 6px 36px 6px 16px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    margin-left: 8px !important;
    height: 36px !important;
}
.dataTables_filter input[type="search"]:focus,
.dataTables_filter input:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
.dataTables_filter label:after,
.dataTables_filter:after {
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    pointer-events: none !important;
    font-size: 13px !important;
    color: #64748b !important;
}

/* Length Select Dropdown */
.dataTables_length label {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
}
.dataTables_length select {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    outline: none !important;
}

/* DataTable Export Buttons - Wrapper reset */
.dt-buttons,
div.dt-buttons,
.dt-buttons.btn-group {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 16px 0 0 !important;
    display: inline-flex !important;
    gap: 6px !important;
}

/* DataTable Export Buttons - Individual buttons */
.dt-buttons .dt-button,
.dt-buttons a,
.dt-buttons button,
.dt-buttons .btn,
.buttons-copy,
.buttons-excel,
.buttons-csv,
.buttons-pdf,
.buttons-print {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #334155 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    text-indent: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dt-buttons a span,
.dt-buttons button span,
.dt-buttons .dt-button span,
.dt-buttons .btn span {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    opacity: 1 !important;
    text-indent: 0 !important;
}

.dt-buttons a:hover,
.dt-buttons button:hover,
.dt-buttons .dt-button:hover,
.dt-buttons .btn:hover {
    background-color: #1e3c72 !important;
    border-color: #1e3c72 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2) !important;
}

.dt-buttons a:hover span,
.dt-buttons button:hover span,
.dt-buttons .dt-button:hover span,
.dt-buttons .btn:hover span {
    color: #ffffff !important;
}

/* DataTable Pagination */
.dataTables_paginate {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}
.dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.15s ease !important;
}
.dataTables_paginate .paginate_button:hover {
    background: #f1f5f9 !important;
    color: #1e3c72 !important;
    border-color: #cbd5e1 !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.active {
    background: #1e3c72 !important;
    color: #ffffff !important;
    border-color: #1e3c72 !important;
    box-shadow: 0 2px 8px rgba(30, 60, 114, 0.25) !important;
}
.dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Modern Table Hover & Border Polish */
table.dataTable,
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

table.dataTable tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: #f8fafc !important;
    transition: background-color 0.15s ease;
}

.dataTables_info {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-top: 16px !important;
}

/* ==========================================================================
   Global Loader Overlay & Spinner
   ========================================================================== */
.mod-loader-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}

.mod-loader-overlay.active {
    display: flex;
}

.mod-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #1e3c72;
    border-radius: 50%;
    animation: mod-spin 0.8s linear infinite;
}

@keyframes mod-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mod-loader-text {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.3px;
}

/* ==========================================================================
   Modern Segmented Attendance Status Control
   ========================================================================== */
.att-status-group {
    display: inline-flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 20px;
    gap: 3px;
    border: 1.5px solid #e2e8f0;
}

.att-status-btn {
    border: none !important;
    background: transparent;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    color: #64748b !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    outline: none !important;
    box-shadow: none !important;
}

.att-status-btn:hover {
    color: #1e293b !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

.att-status-btn.active-P {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3) !important;
}

.att-status-btn.active-A {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3) !important;
}

.att-status-btn.active-L {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3) !important;
}

.att-status-btn.active-H {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(6, 182, 212, 0.3) !important;
}

/* ==========================================================================
   Modern Transaction Summary Pills & Total Earnings Badge
   ========================================================================== */
.total-earnings-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.total-earnings-badge {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #047857 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important;
    width: fit-content !important;
}

.total-earnings-badge i {
    font-size: 22px !important;
}

.collection-pills-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 4px !important;
}

.collection-pill-item {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e40af !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.1) !important;
    transition: all 0.2s ease !important;
}

.collection-pill-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 64, 175, 0.18) !important;
}

/* Fallback override for legacy inline elements in #dt */
#dt .col-lg-12[style*="color: red"],
#dt div[style*="font-size:18px"] {
    display: inline-flex !important;
    width: auto !important;
    float: none !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e40af !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.1) !important;
}

/* Sub Card Boxes for Payment Collection Columns */
.sub-card-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    height: 100% !important;
}

.sub-card-header {
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1.5px solid rgba(0,0,0,0.05) !important;
}

.sub-card-header.bg-blue {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
}

.sub-card-header.bg-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
}

.sub-card-header.bg-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* ==========================================================================
   Modern, Ultra-Sleek jQuery UI & Bootstrap Datepicker Theme
   ========================================================================== */
#ui-datepicker-div,
.ui-datepicker,
.datepicker-dropdown {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.08) !important;
    padding: 16px !important;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    z-index: 99999 !important;
    width: 320px !important;
    margin-top: 6px !important;
}

/* Datepicker Header (Month & Year navigation) */
.ui-datepicker .ui-datepicker-header,
.datepicker-dropdown .datepicker-header {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 2px 12px 2px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 10px !important;
    position: relative !important;
}

.ui-datepicker .ui-datepicker-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
}

.ui-datepicker select.ui-datepicker-month {
    min-width: 85px !important;
    width: auto !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 3px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: #ffffff !important;
    height: 34px !important;
}

.ui-datepicker select.ui-datepicker-year {
    min-width: 95px !important;
    width: auto !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 3px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: #ffffff !important;
    height: 34px !important;
}

/* Prev / Next Navigation Buttons */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    top: 0 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    outline: none !important;
    position: static !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: #1e3c72 !important;
    color: #ffffff !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none !important;
}

.ui-datepicker .ui-datepicker-prev:after {
    content: "‹";
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.ui-datepicker .ui-datepicker-next:after {
    content: "›";
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

/* Calendar Table & Day Grid */
.ui-datepicker table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 3px !important;
    margin: 0 !important;
    border: none !important;
}

.ui-datepicker thead tr {
    border: none !important;
}

.ui-datepicker th {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 6px 0 !important;
    border: none !important;
    background: transparent !important;
}

.ui-datepicker td {
    padding: 0 !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

/* Day Hover & Selection */
.ui-datepicker td a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td.ui-datepicker-today a.ui-state-active,
.ui-datepicker td a.ui-state-active {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(30, 60, 114, 0.3) !important;
}

.ui-datepicker td.ui-datepicker-today a {
    border: 1.5px solid #2563eb !important;
    color: #2563eb !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   Big Modern Materialistic Checkboxes for Due Months
   ========================================================================== */
#DueMonths {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 4px 0 !important;
}

#DueMonths h5 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
}

#DueMonths .checkbox,
#DueMonths .checkbox-inline {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
}

#DueMonths .checkbox.checkbox-inline:hover {
    border-color: #10b981 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

#DueMonths .checkbox.checkbox-inline:has(input[type="checkbox"]:checked),
#DueMonths .checkbox.checkbox-inline.is-checked {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2) !important;
}

#DueMonths .checkbox.checkbox-inline:has(input[type="checkbox"]:checked) label,
#DueMonths .checkbox.checkbox-inline.is-checked label {
    color: #065f46 !important;
    font-weight: 800 !important;
}

/* Neutralise legacy pseudo-elements from Browsecss.css / Limitless */
#DueMonths .checkbox label::before,
#DueMonths .checkbox label::after,
#DueMonths .checkbox-inline label::before,
#DueMonths .checkbox-inline label::after {
    display: none !important;
    content: none !important;
}

/* Restore visible native materialistic checkbox */
#DueMonths input[type="checkbox"],
#DueMonths .messageCheckbox,
#DueMonths .checkbox-inline input[type="checkbox"] {
    opacity: 1 !important;
    position: static !important;
    margin: 0 !important;
    margin-right: 8px !important;
    top: auto !important;
    left: auto !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: #10b981 !important;
    vertical-align: middle !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

#DueMonths label {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   Clean Modern Layout Background
   ========================================================================== */
body {
    background-color: #f1f5f9 !important;
    background-image: none !important;
}

.page-container {
    background: transparent !important;
}

/* ==========================================================================
   4-COLOR SCHEME DESIGN SYSTEM (MATERIAL DARK THEME TOKENS)
   ========================================================================== */
:root,
html,
html.theme-navy,
body.theme-navy {
    --brand-gradient: linear-gradient(135deg, #172554 0%, #1e40af 100%);
    --brand-gradient-hover: linear-gradient(135deg, #0f172a 0%, #172554 100%);
    --brand-primary: #172554;
    --brand-accent: #38bdf8;
    --brand-accent-hover: #1e40af;
    --brand-shadow: rgba(23, 37, 84, 0.4);
    --brand-badge-bg: #eff6ff;
    --brand-badge-text: #172554;
}

html.theme-emerald,
body.theme-emerald {
    --brand-gradient: linear-gradient(135deg, #004d40 0%, #00695c 100%);
    --brand-gradient-hover: linear-gradient(135deg, #00363a 0%, #004d40 100%);
    --brand-primary: #004d40;
    --brand-accent: #00bfa5;
    --brand-accent-hover: #00897b;
    --brand-shadow: rgba(0, 77, 64, 0.3);
    --brand-badge-bg: #e0f2f1;
    --brand-badge-text: #004d40;
}

html.theme-purple,
body.theme-purple {
    --brand-gradient: linear-gradient(135deg, #311b92 0%, #4a148c 100%);
    --brand-gradient-hover: linear-gradient(135deg, #1f0863 0%, #311b92 100%);
    --brand-primary: #311b92;
    --brand-accent: #b388ff;
    --brand-accent-hover: #7c4dff;
    --brand-shadow: rgba(49, 27, 146, 0.3);
    --brand-badge-bg: #ede7f6;
    --brand-badge-text: #311b92;
}

html.theme-crimson,
body.theme-crimson {
    --brand-gradient: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
    --brand-gradient-hover: linear-gradient(135deg, #7f0000 0%, #b71c1c 100%);
    --brand-primary: #b71c1c;
    --brand-accent: #ff5252;
    --brand-accent-hover: #ff1744;
    --brand-shadow: rgba(183, 28, 28, 0.35);
    --brand-badge-bg: #ffebee;
    --brand-badge-text: #b71c1c;
}

html.theme-dark,
body.theme-dark {
    --brand-gradient: linear-gradient(135deg, #bf360c 0%, #e64a19 100%);
    --brand-gradient-hover: linear-gradient(135deg, #870000 0%, #bf360c 100%);
    --brand-primary: #bf360c;
    --brand-accent: #ff6e40;
    --brand-accent-hover: #ff3d00;
    --brand-shadow: rgba(191, 54, 12, 0.35);
    --brand-badge-bg: #fbe9e7;
    --brand-badge-text: #bf360c;
}

/* Global Component Bindings to Active Theme */
.navbar-inverse {
    background: var(--brand-gradient) !important;
    background-color: var(--brand-primary) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
}

/* ==========================================================================
   THEME-SPECIFIC HIGH SPECIFICITY OVERRIDES (Overrides all local page <style>)
   ========================================================================== */

/* 1. MATERIAL DEEP TEAL */
html.theme-emerald .navbar-inverse,
html.theme-emerald .admission-hero,
html.theme-emerald .btn-mod-primary,
html.theme-emerald .btn-primary,
html.theme-emerald button.btn-primary,
html.theme-emerald input[type="submit"].btn-primary,
html.theme-emerald #show,
html.theme-emerald #submit,
html.theme-emerald button[type="submit"]:not(.header-search-btn),
html.theme-emerald .mod-icon-badge,
html.theme-emerald .page-title-badge,
html.theme-emerald .panel-primary > .panel-heading,
html.theme-emerald .sidebar-default .navigation > li.active > a,
html.theme-emerald .sidebar-default .navigation > li.active > a:hover,
html.theme-emerald .sidebar-default .navigation > li.active > a:focus,
html.theme-emerald .paginate_button.current,
html.theme-emerald .paginate_button.current:hover,
html.theme-emerald .table td:last-child a,
html.theme-emerald .table a[href*="promote" i],
html.theme-emerald .table a[href*="Promote" i],
html.theme-emerald .btn.bg-teal-400,
html.theme-emerald .btn-fees-details {
    background: linear-gradient(135deg, #004d40 0%, #00695c 100%) !important;
    background-color: #004d40 !important;
    border-color: #004d40 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 77, 64, 0.35) !important;
}

html.theme-emerald .btn-mod-primary:hover,
html.theme-emerald .btn-primary:hover,
html.theme-emerald #show:hover,
html.theme-emerald #submit:hover,
html.theme-emerald button[type="submit"]:not(.header-search-btn):hover,
html.theme-emerald .table td:last-child a:hover,
html.theme-emerald .table a[href*="promote" i]:hover,
html.theme-emerald .table a[href*="Promote" i]:hover,
html.theme-emerald .btn.bg-teal-400:hover,
html.theme-emerald .btn-fees-details:hover {
    background: linear-gradient(135deg, #00363a 0%, #004d40 100%) !important;
    background-color: #00363a !important;
}

html.theme-emerald .mod-filter-label i,
html.theme-emerald .input-group-addon i,
html.theme-emerald .text-primary,
html.theme-emerald .sidebar-default .navigation > li > a:hover i,
html.theme-emerald .header-live-widgets i.icon-alarm {
    color: #00bfa5 !important;
}

html.theme-emerald .staff-role-badge {
    background-color: #e0f2f1 !important;
    color: #004d40 !important;
}

/* 2. MATERIAL DEEP PURPLE */
html.theme-purple .navbar-inverse,
html.theme-purple .admission-hero,
html.theme-purple .btn-mod-primary,
html.theme-purple .btn-primary,
html.theme-purple button.btn-primary,
html.theme-purple input[type="submit"].btn-primary,
html.theme-purple #show,
html.theme-purple #submit,
html.theme-purple button[type="submit"]:not(.header-search-btn),
html.theme-purple .mod-icon-badge,
html.theme-purple .page-title-badge,
html.theme-purple .panel-primary > .panel-heading,
html.theme-purple .sidebar-default .navigation > li.active > a,
html.theme-purple .sidebar-default .navigation > li.active > a:hover,
html.theme-purple .sidebar-default .navigation > li.active > a:focus,
html.theme-purple .paginate_button.current,
html.theme-purple .paginate_button.current:hover,
html.theme-purple .table td:last-child a,
html.theme-purple .table a[href*="promote" i],
html.theme-purple .table a[href*="Promote" i],
html.theme-purple .btn.bg-teal-400,
html.theme-purple .btn-fees-details {
    background: linear-gradient(135deg, #311b92 0%, #4a148c 100%) !important;
    background-color: #311b92 !important;
    border-color: #311b92 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(49, 27, 146, 0.35) !important;
}

html.theme-purple .btn-mod-primary:hover,
html.theme-purple .btn-primary:hover,
html.theme-purple #show:hover,
html.theme-purple #submit:hover,
html.theme-purple button[type="submit"]:not(.header-search-btn):hover,
html.theme-purple .table td:last-child a:hover,
html.theme-purple .table a[href*="promote" i]:hover,
html.theme-purple .table a[href*="Promote" i]:hover,
html.theme-purple .btn.bg-teal-400:hover,
html.theme-purple .btn-fees-details:hover {
    background: linear-gradient(135deg, #1f0863 0%, #311b92 100%) !important;
    background-color: #1f0863 !important;
}

html.theme-purple .mod-filter-label i,
html.theme-purple .input-group-addon i,
html.theme-purple .text-primary,
html.theme-purple .sidebar-default .navigation > li > a:hover i,
html.theme-purple .header-live-widgets i.icon-alarm {
    color: #b388ff !important;
}

html.theme-purple .staff-role-badge {
    background-color: #ede7f6 !important;
    color: #311b92 !important;
}

/* 3. MATERIAL RED */
html.theme-crimson .navbar-inverse,
html.theme-crimson .admission-hero,
html.theme-crimson .btn-mod-primary,
html.theme-crimson .btn-primary,
html.theme-crimson button.btn-primary,
html.theme-crimson input[type="submit"].btn-primary,
html.theme-crimson #show,
html.theme-crimson #submit,
html.theme-crimson button[type="submit"]:not(.header-search-btn),
html.theme-crimson .mod-icon-badge,
html.theme-crimson .page-title-badge,
html.theme-crimson .panel-primary > .panel-heading,
html.theme-crimson .sidebar-default .navigation > li.active > a,
html.theme-crimson .sidebar-default .navigation > li.active > a:hover,
html.theme-crimson .sidebar-default .navigation > li.active > a:focus,
html.theme-crimson .paginate_button.current,
html.theme-crimson .paginate_button.current:hover,
html.theme-crimson .table td:last-child a,
html.theme-crimson .table a[href*="promote" i],
html.theme-crimson .table a[href*="Promote" i],
html.theme-crimson .btn.bg-teal-400,
html.theme-crimson .btn-fees-details {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
    background-color: #b71c1c !important;
    border-color: #b71c1c !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(183, 28, 28, 0.35) !important;
}

html.theme-crimson .btn-mod-primary:hover,
html.theme-crimson .btn-primary:hover,
html.theme-crimson #show:hover,
html.theme-crimson #submit:hover,
html.theme-crimson button[type="submit"]:not(.header-search-btn):hover,
html.theme-crimson .table td:last-child a:hover,
html.theme-crimson .table a[href*="promote" i]:hover,
html.theme-crimson .table a[href*="Promote" i]:hover,
html.theme-crimson .btn.bg-teal-400:hover,
html.theme-crimson .btn-fees-details:hover {
    background: linear-gradient(135deg, #7f0000 0%, #b71c1c 100%) !important;
    background-color: #7f0000 !important;
}

html.theme-crimson .mod-filter-label i,
html.theme-crimson .input-group-addon i,
html.theme-crimson .text-primary,
html.theme-crimson .sidebar-default .navigation > li > a:hover i,
html.theme-crimson .header-live-widgets i.icon-alarm {
    color: #ff5252 !important;
}

html.theme-crimson .staff-role-badge {
    background-color: #ffebee !important;
    color: #b71c1c !important;
}

/* 4. MATERIAL INDIGO (DEFAULT) */
html.theme-navy .navbar-inverse,
html.theme-navy .admission-hero,
html.theme-navy .btn-mod-primary,
html.theme-navy .btn-primary,
html.theme-navy button.btn-primary,
html.theme-navy input[type="submit"].btn-primary,
html.theme-navy #show,
html.theme-navy #submit,
html.theme-navy button[type="submit"]:not(.header-search-btn),
html.theme-navy .mod-icon-badge,
html.theme-navy .page-title-badge,
html.theme-navy .panel-primary > .panel-heading,
html.theme-navy .sidebar-default .navigation > li.active > a,
html.theme-navy .sidebar-default .navigation > li.active > a:hover,
html.theme-navy .sidebar-default .navigation > li.active > a:focus,
html.theme-navy .paginate_button.current,
html.theme-navy .paginate_button.current:hover,
html.theme-navy .table td:last-child a,
html.theme-navy .table a[href*="promote" i],
html.theme-navy .table a[href*="Promote" i],
html.theme-navy .btn.bg-teal-400,
html.theme-navy .btn-fees-details {
    background: linear-gradient(135deg, #172554 0%, #1e40af 100%) !important;
    background-color: #172554 !important;
    border-color: #172554 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(23, 37, 84, 0.4) !important;
}

html.theme-navy .btn-mod-primary:hover,
html.theme-navy .btn-primary:hover,
html.theme-navy #show:hover,
html.theme-navy #submit:hover,
html.theme-navy button[type="submit"]:not(.header-search-btn):hover,
html.theme-navy .table td:last-child a:hover,
html.theme-navy .table a[href*="promote" i]:hover,
html.theme-navy .table a[href*="Promote" i]:hover,
html.theme-navy .btn.bg-teal-400:hover,
html.theme-navy .btn-fees-details:hover {
    background: linear-gradient(135deg, #0f172a 0%, #172554 100%) !important;
    background-color: #0f172a !important;
}

html.theme-navy .mod-filter-label i,
html.theme-navy .input-group-addon i,
html.theme-navy .text-primary,
html.theme-navy .sidebar-default .navigation > li > a:hover i,
html.theme-navy .header-live-widgets i.icon-alarm {
    color: #38bdf8 !important;
}

html.theme-navy .staff-role-badge {
    background-color: #eff6ff !important;
    color: #172554 !important;
}

/* 5. MATERIAL DEEP ORANGE */
html.theme-dark .navbar-inverse,
html.theme-dark .admission-hero,
html.theme-dark .btn-mod-primary,
html.theme-dark .btn-primary,
html.theme-dark button.btn-primary,
html.theme-dark input[type="submit"].btn-primary,
html.theme-dark #show,
html.theme-dark #submit,
html.theme-dark button[type="submit"]:not(.header-search-btn),
html.theme-dark .mod-icon-badge,
html.theme-dark .page-title-badge,
html.theme-dark .panel-primary > .panel-heading,
html.theme-dark .sidebar-default .navigation > li.active > a,
html.theme-dark .sidebar-default .navigation > li.active > a:hover,
html.theme-dark .sidebar-default .navigation > li.active > a:focus,
html.theme-dark .paginate_button.current,
html.theme-dark .paginate_button.current:hover,
html.theme-dark .table td:last-child a,
html.theme-dark .table a[href*="promote" i],
html.theme-dark .table a[href*="Promote" i],
html.theme-dark .btn.bg-teal-400,
html.theme-dark .btn-fees-details {
    background: linear-gradient(135deg, #bf360c 0%, #e64a19 100%) !important;
    background-color: #bf360c !important;
    border-color: #bf360c !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(191, 54, 12, 0.35) !important;
}

html.theme-dark .btn-mod-primary:hover,
html.theme-dark .btn-primary:hover,
html.theme-dark #show:hover,
html.theme-dark #submit:hover,
html.theme-dark button[type="submit"]:not(.header-search-btn):hover,
html.theme-dark .table td:last-child a:hover,
html.theme-dark .table a[href*="promote" i]:hover,
html.theme-dark .table a[href*="Promote" i]:hover,
html.theme-dark .btn.bg-teal-400:hover,
html.theme-dark .btn-fees-details:hover {
    background: linear-gradient(135deg, #870000 0%, #bf360c 100%) !important;
    background-color: #870000 !important;
}

html.theme-dark .mod-filter-label i,
html.theme-dark .input-group-addon i,
html.theme-dark .text-primary,
html.theme-dark .sidebar-default .navigation > li > a:hover i,
html.theme-dark .header-live-widgets i.icon-alarm {
    color: #ff6e40 !important;
}

html.theme-dark .staff-role-badge {
    background-color: #fbe9e7 !important;
    color: #bf360c !important;
}

/* Headers & Banners */
.admission-hero {
    background: var(--brand-gradient) !important;
    box-shadow: 0 4px 14px var(--brand-shadow) !important;
}

.admission-hero-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

.page-title-badge,
.page-header .page-title-icon {
    background: var(--brand-gradient) !important;
    box-shadow: 0 4px 12px var(--brand-shadow) !important;
    color: #ffffff !important;
}

.mod-icon-badge {
    background: var(--brand-gradient) !important;
    box-shadow: 0 2px 6px var(--brand-shadow) !important;
    color: #ffffff !important;
}

.panel-primary > .panel-heading {
    background: var(--brand-gradient) !important;
    border-color: var(--brand-primary) !important;
    color: #ffffff !important;
}

/* Buttons */
.btn-mod-primary,
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
#show.btn-mod-primary,
#submit.btn-mod-primary {
    background: var(--brand-gradient) !important;
    background-color: var(--brand-primary) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px var(--brand-shadow) !important;
}

.btn-mod-primary:hover,
.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover,
#show.btn-mod-primary:hover,
#submit.btn-mod-primary:hover {
    background: var(--brand-gradient-hover) !important;
    background-color: var(--brand-primary) !important;
    box-shadow: 0 4px 12px var(--brand-shadow) !important;
    color: #ffffff !important;
}

.paginate_button.current,
.paginate_button.current:hover {
    background: var(--brand-gradient) !important;
    border-color: var(--brand-primary) !important;
    color: #ffffff !important;
}

/* Icons & Filter Labels */
.mod-filter-label i,
.mod-filter-label span[class^="icon-"],
.form-group label i {
    color: var(--brand-accent) !important;
}

.input-group-addon i {
    color: var(--brand-accent) !important;
}

.staff-role-badge {
    background-color: var(--brand-badge-bg) !important;
    color: var(--brand-badge-text) !important;
}

.text-primary {
    color: var(--brand-accent) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

.label-primary {
    background-color: var(--brand-accent) !important;
}

/* Form Controls Focus */
.form-control:focus,
.mod-select-control:focus,
select:focus,
input:focus,
textarea:focus {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 2px var(--brand-shadow) !important;
}

.sidebar-default .navigation > li.active > a,
.sidebar-default .navigation > li.active > a:hover,
.sidebar-default .navigation > li.active > a:focus {
    background: var(--brand-gradient) !important;
    color: #ffffff !important;
}

.sidebar-default .navigation > li > a:hover i {
    color: var(--brand-accent) !important;
}

.sidebar-default .navigation > li.active > a i {
    color: #ffffff !important;
}

.navbar-inverse .navbar-header,
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-nav,
.navbar-inverse .container,
.navbar-inverse .container-fluid {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar-inverse .navbar-header {
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    float: left !important;
}

.navbar-inverse .navbar-collapse {
    min-height: 48px !important;
    height: 48px !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
}

.navbar-inverse .navbar-brand {
    padding: 0 14px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.navbar-inverse .navbar-brand img {
    height: 21px !important;
    max-height: 21px !important;
    width: auto !important;
}

/* Sidebar toggle button */
.navbar-inverse .sidebar-main-toggle,
.navbar-inverse .sidebar-mobile-main-toggle {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    margin: 9px 4px !important;
    padding: 0 !important;
    height: 30px !important;
    width: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: all 0.2s ease !important;
}

.navbar-inverse .sidebar-main-toggle:hover,
.navbar-inverse .sidebar-mobile-main-toggle:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Right Nav Bar Flex Alignment */
.navbar-inverse .navbar-nav.navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    height: 48px !important;
    float: right !important;
}

.navbar-inverse .navbar-nav.navbar-right > li {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Theme Picker Dropdown in Navbar */
.navbar-inverse .dropdown-theme-picker {
    display: flex !important;
    align-items: center !important;
}

.navbar-inverse .dropdown-theme-picker .dropdown-toggle {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.navbar-inverse .dropdown-theme-picker .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
}

.navbar-inverse .dropdown-theme-picker .dropdown-toggle i {
    font-size: 15px !important;
    color: #ffffff !important;
}

.navbar-inverse .dropdown-theme-picker .dropdown-menu {
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.2) !important;
    padding: 10px !important;
    min-width: 210px !important;
    background: #ffffff !important;
    margin-top: 8px !important;
    right: 0 !important;
    left: auto !important;
}

.theme-picker-header {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 8px 8px 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.theme-option-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    border: 1.5px solid transparent !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-align: left !important;
    text-decoration: none !important;
    margin-bottom: 2px !important;
}

.theme-option-btn:hover {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.theme-option-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.theme-swatch {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    flex-shrink: 0 !important;
}

.theme-swatch-navy {
    background: linear-gradient(135deg, #172554 0%, #1e40af 100%) !important;
}

.theme-swatch-emerald {
    background: linear-gradient(135deg, #004d40 0%, #00695c 100%) !important;
}

.theme-swatch-purple {
    background: linear-gradient(135deg, #311b92 0%, #4a148c 100%) !important;
}

.theme-swatch-crimson {
    background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%) !important;
}

.theme-swatch-dark {
    background: linear-gradient(135deg, #bf360c 0%, #e64a19 100%) !important;
}

.theme-option-btn.active {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.theme-check-icon {
    font-size: 13px !important;
    color: #10b981 !important;
    display: none;
}

.theme-option-btn.active .theme-check-icon {
    display: inline-block !important;
}

/* ==========================================================================
   Dynamic App Theme Engine (Navy, Emerald, Purple, Crimson, Dark)
   ========================================================================== */
:root,
html,
body,
html.theme-navy,
body.theme-navy {
    --theme-primary: #1e3c72;
    --theme-secondary: #2a5298;
    --theme-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --theme-gradient-hover: linear-gradient(135deg, #162d55 0%, #1e3c72 100%);
    --theme-navbar: linear-gradient(135deg, #172554 0%, #1e40af 100%);
    --theme-accent: #2563eb;
    --theme-accent-light: #eff6ff;
    --theme-shadow: rgba(30, 60, 114, 0.25);
}

html.theme-emerald,
body.theme-emerald {
    --theme-primary: #004d40;
    --theme-secondary: #00695c;
    --theme-gradient: linear-gradient(135deg, #004d40 0%, #00695c 100%);
    --theme-gradient-hover: linear-gradient(135deg, #00332c 0%, #004d40 100%);
    --theme-navbar: linear-gradient(135deg, #004d40 0%, #00695c 100%);
    --theme-accent: #059669;
    --theme-accent-light: #ecfdf5;
    --theme-shadow: rgba(0, 77, 64, 0.25);
}

html.theme-purple,
body.theme-purple {
    --theme-primary: #311b92;
    --theme-secondary: #4a148c;
    --theme-gradient: linear-gradient(135deg, #311b92 0%, #4a148c 100%);
    --theme-gradient-hover: linear-gradient(135deg, #1e0d6b 0%, #311b92 100%);
    --theme-navbar: linear-gradient(135deg, #311b92 0%, #4a148c 100%);
    --theme-accent: #7c3aed;
    --theme-accent-light: #f5f3ff;
    --theme-shadow: rgba(49, 27, 146, 0.25);
}

html.theme-crimson,
body.theme-crimson {
    --theme-primary: #b71c1c;
    --theme-secondary: #d32f2f;
    --theme-gradient: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
    --theme-gradient-hover: linear-gradient(135deg, #7f0000 0%, #b71c1c 100%);
    --theme-navbar: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
    --theme-accent: #ef4444;
    --theme-accent-light: #fef2f2;
    --theme-shadow: rgba(183, 28, 28, 0.25);
}

html.theme-dark,
body.theme-dark {
    --theme-primary: #bf360c;
    --theme-secondary: #e64a19;
    --theme-gradient: linear-gradient(135deg, #bf360c 0%, #e64a19 100%);
    --theme-gradient-hover: linear-gradient(135deg, #870000 0%, #bf360c 100%);
    --theme-navbar: linear-gradient(135deg, #bf360c 0%, #e64a19 100%);
    --theme-accent: #f97316;
    --theme-accent-light: #fff7ed;
    --theme-shadow: rgba(191, 54, 12, 0.25);
}

/* Bind theme variables to navbar, heroes, badges, and all primary buttons */
.navbar-inverse {
    background: var(--theme-navbar) !important;
    border-bottom: none !important;
}

.admission-hero {
    background: var(--theme-gradient) !important;
    box-shadow: 0 4px 14px var(--theme-shadow) !important;
}

.mod-icon-badge {
    background: var(--theme-gradient) !important;
    box-shadow: 0 2px 6px var(--theme-shadow) !important;
}

.btn-mod-primary,
.btn-primary:not(.btn-link):not(.btn-default),
button[type="submit"].btn-primary,
.btn-mod-excel {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px var(--theme-shadow) !important;
    transition: all 0.2s ease !important;
}

.btn-mod-primary:hover,
.btn-primary:not(.btn-link):not(.btn-default):hover,
button[type="submit"].btn-primary:hover,
.btn-mod-excel:hover {
    background: var(--theme-gradient-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--theme-shadow) !important;
}

/* Theme toggle button */
.navbar-inverse .navbar-nav > li > a.theme-toggle-btn,
.navbar-inverse .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    transform: none !important;
}

.navbar-inverse .navbar-nav > li > a.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: scale(1.05) !important;
}

/* Search input */
/* Search input in Navbar */
.navbar-search-form {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.header-search-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.header-search-input {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 0 34px 0 14px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    height: 32px !important;
    line-height: 32px !important;
    width: 190px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.header-search-input:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    width: 230px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

.header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Search Icon Button inside Navbar input (100% Transparent, No Square Borders/Boxes) */
html .header-search-btn,
html button.header-search-btn,
html .navbar .header-search-btn,
html .navbar-search-form button,
html .header-search-wrapper button {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    transition: all 0.15s ease !important;
}

html .header-search-btn:hover,
html button.header-search-btn:hover,
html .navbar .header-search-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html .header-search-btn i,
html button.header-search-btn i,
html .header-search-wrapper button i {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* User Profile Toggle */
.navbar-nav .dropdown-user {
    display: flex !important;
    align-items: center !important;
}

.navbar-nav .dropdown-user .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px 0 6px !important;
    height: 32px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.navbar-nav .dropdown-user .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.navbar-nav .dropdown-user .dropdown-toggle img {
    height: 22px !important;
    width: 22px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    object-fit: cover !important;
    margin: 0 !important;
}

.navbar-nav .dropdown-user .dropdown-toggle span {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.1px !important;
}

.navbar-nav .dropdown-user .dropdown-toggle .caret {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-left: 2px !important;
}

/* Dropdown Menu Box */
.navbar-nav .dropdown-user .dropdown-menu {
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(0,0,0,0.03) !important;
    padding: 8px !important;
    min-width: 220px !important;
    background: #ffffff !important;
    margin-top: 8px !important;
    right: 0 !important;
    left: auto !important;
    overflow: hidden !important;
    animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Menu Items */
.navbar-nav .dropdown-user .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-align: left !important;
    transition: all 0.15s ease !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    width: 100% !important;
}

.navbar-nav .dropdown-user .dropdown-menu > li > a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.navbar-nav .dropdown-user .dropdown-menu > li > a > i {
    font-size: 15px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    float: none !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

/* Specific icon styling */
.navbar-nav .dropdown-user .dropdown-menu > li > a > i.icon-gear {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.navbar-nav .dropdown-user .dropdown-menu > li > a:hover > i.icon-gear {
    background: #2563eb !important;
    color: #ffffff !important;
}

.navbar-nav .dropdown-user .dropdown-menu > li > a > i.icon-switch2 {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

.navbar-nav .dropdown-user .dropdown-menu > li > a:hover > i.icon-switch2 {
    background: #ef4444 !important;
    color: #ffffff !important;
}

.navbar-nav .dropdown-user .dropdown-menu > li + li {
    margin-top: 4px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 4px !important;
}

/* ==========================================================================
   MODERN DASHBOARD PILLS & BADGES (PROMOTE, AMOUNTS, INCHARGE, STATUSES)
   ========================================================================== */

/* 1. All Table Labels & Badges in Dashboard */
html .panel .table .label,
html .panel .table .badge,
html .dash-overview-panel .label,
html .dash-overview-panel .badge,
html .table .label,
html .table .badge {
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.35 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    white-space: nowrap !important;
}

/* 2. PROMOTE Action Pill Button (Single Solid Pill with Crisp White Text - No Double Nested Boxes) */
html .table a[href*="promote" i],
html .table a[href*="Promote" i],
html .table a[onclick*="promote" i],
html .table a[onclick*="Promote" i],
html .table td:last-child a {
    background: var(--brand-gradient, linear-gradient(135deg, #0b1938 0%, #172a4d 100%)) !important;
    background-color: var(--brand-primary, #0b1938) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 5px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px var(--brand-shadow, rgba(11, 25, 56, 0.3)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.3 !important;
    transition: all 0.2s ease !important;
}

html .table a[href*="promote" i]:hover,
html .table a[href*="Promote" i]:hover,
html .table a[onclick*="promote" i]:hover,
html .table a[onclick*="Promote" i]:hover,
html .table td:last-child a:hover {
    background: var(--brand-gradient-hover, linear-gradient(135deg, #060e21 0%, #0c182e 100%)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px var(--brand-shadow, rgba(11, 25, 56, 0.45)) !important;
}

/* Force any span inside the PROMOTE link to be completely transparent with white text */
html .table a[href*="promote" i] span,
html .table a[href*="Promote" i] span,
html .table a[href*="promote" i] .label,
html .table a[href*="Promote" i] .label,
html .table td:last-child a span,
html .table td:last-child a .label {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline !important;
    line-height: 1 !important;
}

/* 3. Fee Due / Amount Badges (e.g. ₹ 175806) - Soft Tinted Capsule */
html .table td:last-child > span,
html .table td:last-child > span.label,
html .table td:last-child > span.label-danger,
html .table td:last-child > span.bg-danger,
html .table td:last-child > span.bg-danger-400 {
    background-color: #fff1f2 !important;
    background-image: none !important;
    color: #e11d48 !important;
    -webkit-text-fill-color: #e11d48 !important;
    border: 1.5px solid #fecdd3 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    box-shadow: 0 1px 2px rgba(225, 29, 72, 0.06) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
}

/* 4. VIEW ATT Action Button */
html .table a[href*="Attendance" i],
html .table a[href*="attendance" i],
html .table a[onclick*="Attendance" i],
html .table a[onclick*="attendance" i],
html .table a.btn-success,
html .table a.bg-success,
html .table a.bg-success-400,
html .table a.label-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    background-color: #10b981 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

html .table a[href*="Attendance" i]:hover,
html .table a[href*="attendance" i]:hover,
html .table a[onclick*="Attendance" i]:hover,
html .table a[onclick*="attendance" i]:hover,
html .table a.btn-success:hover,
html .table a.bg-success:hover,
html .table a.bg-success-400:hover,
html .table a.label-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

/* 5. Class Incharge & Student Count in Description Column (Clean Soft Tint without Black) */
html .table td:nth-child(5) {
    vertical-align: middle !important;
}

html .table td:nth-child(5) > .label,
html .table td:nth-child(5) > span,
html .table td:nth-child(5) > div,
html .table td:nth-child(5) .label-primary,
html .table td:nth-child(5) .bg-primary,
html .table td:nth-child(5) [style*="blue"],
html .table td:nth-child(5) [style*="rgb(30"] {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
}

html .table td:nth-child(5) span span,
html .table td:nth-child(5) div span,
html .table td:nth-child(5) .label span {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-left: 8px !important;
    display: inline-block !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    text-transform: none !important;
}

/* 6. Absent Student Counter Badges (e.g. 3, 0, 4) */
html .table td:nth-child(3) .label,
html .table td:nth-child(3) .badge,
html .table td:nth-child(3) span {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    border: none !important;
}

/* 7. Class Initial Circular Badge (e.g. A, K) */
html .table td:nth-child(4) .btn-rounded,
html .table td:nth-child(4) .label,
html .table td:nth-child(4) .badge,
html .table td:nth-child(4) span.btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* 8. Due Status Column (Cross / Check) */
html .table td:first-child {
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* 9. Attendance Cell alignment */
html .table td:nth-child(2) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* 10. Spacing between multiple pills/badges in a cell */
html .table td .label + .label,
html .table td a.label + span.label,
html .table td span.label + a.label,
html .table td a + a,
html .table td a + span,
html .table td span + a {
    margin-left: 8px !important;
}

/* 11. Modern Fees Details Button on Dashboard (Uses Active Theme) */
html .btn.bg-teal-400,
html .btn-fees-details,
html a[href*="ViewFeeTotal" i] {
    background: var(--brand-gradient, linear-gradient(135deg, #0b1938 0%, #172a4d 100%)) !important;
    background-color: var(--brand-primary, #0b1938) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 7px 18px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 8px var(--brand-shadow, rgba(11, 25, 56, 0.28)) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

html .btn.bg-teal-400:hover,
html .btn-fees-details:hover,
html a[href*="ViewFeeTotal" i]:hover {
    background: var(--brand-gradient-hover, linear-gradient(135deg, #060e21 0%, #0c182e 100%)) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 5px 15px var(--brand-shadow, rgba(11, 25, 56, 0.4)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 12. Modern Expense & UPI Chips in KPI Cards */
html .panel-body .label.bg-danger-300 {
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 12px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    display: inline-block !important;
    margin-top: 3px !important;
}

/* ==========================================================================
   MATERIAL MODAL HEADER & POPUP THEME UNDERLINE STYLING
   ========================================================================== */

/* 1. Modal Dialog & Content Box */
.modal-content {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
    background: #ffffff !important;
}

/* 2. Modal Header with Centered Title & Material Theme Underline */
.modal-header {
    background: #ffffff !important;
    padding: 16px 24px !important;
    position: relative !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Glowing Theme Accent Underline */
.modal-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3.5px !important;
    background: var(--brand-gradient, linear-gradient(135deg, #172554 0%, #1e40af 100%)) !important;
    box-shadow: 0 1px 4px var(--brand-shadow, rgba(23, 37, 84, 0.25)) !important;
}

/* Modal Title (Centered) */
.modal-header .modal-title,
.modal-header h3.modal-title,
.modal-header h4.modal-title,
.modal-header h5.modal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--brand-primary, #172554) !important;
    -webkit-text-fill-color: var(--brand-primary, #172554) !important;
    letter-spacing: 0.2px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Hide obsolete HR tags inside modal headers */
.modal-header hr {
    display: none !important;
}

/* 3. Modern Material Circular Close Button (Right-Aligned) */
.modal-header .close,
.modal-header button.close {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    border: 1.5px solid #e2e8f0 !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    line-height: 1 !important;
    text-shadow: none !important;
    z-index: 10 !important;
}

.modal-header .close:hover,
.modal-header button.close:hover {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    -webkit-text-fill-color: #ef4444 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-50%) rotate(90deg) !important;
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2) !important;
}

.modal-header .close i,
.modal-header button.close i,
.modal-header .close i.icon-cross2,
.modal-header button.close i.icon-cross2 {
    font-size: 13px !important;
    line-height: 1 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Modal Body & Footer Polish */
.modal-body {
    padding: 20px 24px !important;
    background: #ffffff !important;
}

.modal-footer {
    padding: 12px 24px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    border-radius: 0 0 12px 12px !important;
}

.modal-footer .btn {
    border-radius: 20px !important;
    padding: 6px 18px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

/* ==========================================================================
   Modern Sidebar Submenu Markers & Tree Hierarchy Indicators
   ========================================================================== */
.navigation-main > li > ul,
.navigation-accordion ul,
.sidebar-category ul.navigation ul {
    position: relative !important;
    padding: 6px 0 6px 0 !important;
    margin: 4px 0 6px 18px !important;
    border-left: 1.5px dashed #cbd5e1 !important;
    list-style: none !important;
    background: transparent !important;
}

.navigation-main li ul li,
.navigation-accordion ul li,
.sidebar-category ul.navigation ul li {
    position: relative !important;
    margin: 2px 0 !important;
}

/* Submenu Anchor Link */
.navigation-main li ul li a,
.navigation-accordion ul li a,
.sidebar-category ul.navigation ul li a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px 8px 24px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    border-radius: 0 10px 10px 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Branch Connector Dot Marker */
.navigation-main li ul li a::before,
.navigation-accordion ul li a::before,
.sidebar-category ul.navigation ul li a::before {
    content: '' !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #94a3b8 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
}

/* Submenu Hover State */
.navigation-main li ul li a:hover,
.navigation-accordion ul li a:hover,
.sidebar-category ul.navigation ul li a:hover {
    color: var(--brand-primary, #1e40af) !important;
    background: rgba(30, 64, 175, 0.06) !important;
    padding-left: 28px !important;
    font-weight: 600 !important;
}

.navigation-main li ul li a:hover::before,
.navigation-accordion ul li a:hover::before,
.sidebar-category ul.navigation ul li a:hover::before {
    background-color: var(--brand-primary, #1e40af) !important;
    transform: translateY(-50%) scale(1.4) !important;
    box-shadow: 0 0 6px var(--brand-primary, #1e40af), 0 0 0 2px rgba(255, 255, 255, 1) !important;
}

/* Submenu Active State */
.navigation-main li ul li.active a,
.navigation-main li ul li a.active,
.navigation-accordion ul li.active a,
.navigation-accordion ul li a.active {
    color: var(--brand-primary, #1e40af) !important;
    background: rgba(30, 64, 175, 0.1) !important;
    font-weight: 700 !important;
    padding-left: 28px !important;
}

.navigation-main li ul li.active a::before,
.navigation-main li ul li a.active::before,
.navigation-accordion ul li.active a::before,
.navigation-accordion ul li a.active::before {
    background-color: var(--brand-primary, #1e40af) !important;
    transform: translateY(-50%) scale(1.4) !important;
    box-shadow: 0 0 8px var(--brand-primary, #1e40af), 0 0 0 2px rgba(255, 255, 255, 1) !important;
}
/* ==========================================================================
   Ultra-Lightweight Modern Dropdown (TomSelect) Styling
   ========================================================================== */

/* Hide native element once TomSelect takes over */
select.tomselected,
.tomselected {
    display: none !important;
    position: absolute !important;
    visibility: hidden !important;
}

/* Outer Wrapper */
.ts-wrapper {
    width: 100% !important;
    position: relative !important;
}

/* Closed Dropdown Control Box */
.ts-wrapper .ts-control {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 34px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.ts-wrapper:hover .ts-control {
    border-color: #94a3b8 !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.ts-wrapper.dropdown-active .ts-control {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Custom Single Chevron Arrow */
.ts-wrapper.single .ts-control::after {
    border: none !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    margin-top: -7px !important;
    transition: transform 0.2s ease !important;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    transform: rotate(180deg) !important;
}

/* Open Floating Dropdown List */
.ts-dropdown {
    background-color: #ffffff !important;
    border: 1.5px solid #2563eb !important;
    border-top: none !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 8px 12px -6px rgba(0, 0, 0, 0.08) !important;
    margin-top: -1.5px !important;
    padding: 4px 0 !important;
    z-index: 99999 !important;
}

/* Search Box inside Dropdown */
.ts-dropdown .dropdown-input-wrap {
    padding: 8px 10px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.ts-dropdown .dropdown-input {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    width: 100% !important;
    outline: none !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

.ts-dropdown .dropdown-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

/* Option Items */
.ts-dropdown .ts-dropdown-content {
    max-height: 240px !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
}

.ts-dropdown .option {
    padding: 8px 14px !important;
    font-size: 13px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

.ts-dropdown .option.selected {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Mini Sidebar (sidebar-xs) Collapse & Hover Popover Fixes
   ========================================================================== */
@media (min-width: 769px) {
    /* Ensure no parent container clips or hides the hover flyouts */
    body.sidebar-xs .page-container,
    body.sidebar-xs .page-content,
    body.sidebar-xs .sidebar,
    body.sidebar-xs .sidebar-main,
    body.sidebar-xs .sidebar-content,
    body.sidebar-xs .sidebar-category,
    body.sidebar-xs .sidebar-category-visible,
    body.sidebar-xs .category-content,
    body.sidebar-xs .navigation-main {
        overflow: visible !important;
    }

    body.sidebar-xs .sidebar,
    body.sidebar-xs .sidebar-main {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    body.sidebar-xs .sidebar-main .sidebar-content {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        border-radius: 12px !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    body.sidebar-xs .sidebar-main .sidebar-user {
        padding: 12px 4px 8px 4px !important;
        margin: 0 !important;
        max-width: 56px !important;
        overflow: hidden !important;
    }

    body.sidebar-xs .sidebar-main .sidebar-user .sidebar-user-logo-wrap {
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    body.sidebar-xs .sidebar-main .sidebar-user .sidebar-user-logo {
        height: 36px !important;
        max-height: 36px !important;
        max-width: 36px !important;
        width: 36px !important;
        object-fit: contain !important;
    }

    body.sidebar-xs .sidebar-main .sidebar-user .sidebar-user-text {
        display: none !important;
    }

    /* Navigation items in Mini Mode */
    body.sidebar-xs .sidebar-main .navigation-main > li {
        position: relative !important;
    }

    body.sidebar-xs .sidebar-main .navigation-main > li:hover,
    body.sidebar-xs .sidebar-main .navigation-main > li.hover-flyout {
        z-index: 10001 !important;
    }

    body.sidebar-xs .sidebar-main .navigation-main > li > a {
        text-align: center !important;
        padding: 12px 0 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    body.sidebar-xs .sidebar-main .navigation-main > li > a > i {
        float: none !important;
        margin: 0 !important;
        display: block !important;
        font-size: 16px !important;
    }

    /* Hide text labels by default */
    body.sidebar-xs .sidebar-main .navigation-main > li > a > span {
        display: none !important;
    }

    /* Hide submenus by default in mini mode */
    body.sidebar-xs .sidebar-main .navigation-main > li > ul {
        display: none !important;
    }

    /* Flyout Label on Hover */
    body.sidebar-xs .sidebar-main .navigation-main > li:hover > a > span,
    body.sidebar-xs .sidebar-main .navigation-main > li.hover-flyout > a > span {
        display: flex !important;
        align-items: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        right: auto !important;
        width: 230px !important;
        min-width: 230px !important;
        height: 44px !important;
        min-height: 44px !important;
        z-index: 10003 !important;
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
        color: #ffffff !important;
        padding: 0 16px !important;
        border-radius: 0 8px 8px 0 !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15) !important;
        text-align: left !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* If item has a submenu, adjust border-radius */
    body.sidebar-xs .sidebar-main .navigation-main > li:has(ul):hover > a > span,
    body.sidebar-xs .sidebar-main .navigation-main > li:has(ul).hover-flyout > a > span,
    body.sidebar-xs .sidebar-main .navigation-main > li:hover > a.has-ul > span,
    body.sidebar-xs .sidebar-main .navigation-main > li.hover-flyout > a.has-ul > span {
        border-radius: 0 8px 0 0 !important;
    }

    /* Flyout Submenu List on Hover */
    body.sidebar-xs .sidebar-main .navigation-main > li:hover > ul,
    body.sidebar-xs .sidebar-main .navigation-main > li.hover-flyout > ul {
        display: block !important;
        position: absolute !important;
        top: 44px !important;
        left: 100% !important;
        right: auto !important;
        width: 230px !important;
        min-width: 230px !important;
        z-index: 10002 !important;
        background: #ffffff !important;
        border: 1.5px solid #cbd5e1 !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 4px 10px 22px rgba(0, 0, 0, 0.18) !important;
        list-style: none !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }

    body.sidebar-xs .sidebar-main .navigation-main > li:hover > ul > li,
    body.sidebar-xs .sidebar-main .navigation-main > li.hover-flyout > ul > li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.sidebar-xs .sidebar-main .navigation-main > li:hover > ul > li > a,
    body.sidebar-xs .sidebar-main .navigation-main > li.hover-flyout > ul > li > a {
        display: block !important;
        padding: 9px 18px !important;
        color: #334155 !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        text-align: left !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
        background: transparent !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    body.sidebar-xs .sidebar-main .navigation-main > li:hover > ul > li > a:hover,
    body.sidebar-xs .sidebar-main .navigation-main > li.hover-flyout > ul > li > a:hover {
        background-color: #f1f5f9 !important;
        color: #2563eb !important;
        padding-left: 22px !important;
        font-weight: 600 !important;
    }
}