.bordered-image {
    border: 1px solid rgba(0,0,0,0.1); /* Semi-transparent */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    padding: 4px; /* Space between image and border */
    background: white; /* For PNGs with transparency */
    transition: border-color 0.3s ease; /* Smooth hover effect */
}

.bordered-image:hover {
    border-color: #3a57e8; /* Changes color on hover */
}

.top-border {
    border-top: 4px solid #3a57e8; /* Add a top border with custom color */
}

.img-block {
    display: inline-block; /* Ensures the image behaves like an inline-block element */
    vertical-align: middle; /* Aligns the image vertically with text or other inline elements */
    max-width: 100% !important;
    width: 35%;
    height:auto;
}

/* -------------------------------------------------------------------------- */
/* Uniform form validation styling (global)                                    */
/* -------------------------------------------------------------------------- */

/* Remove invalid focus glow (keep border color) */
.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.bootstrap-select.is-invalid .dropdown-toggle:focus {
    box-shadow: none !important;
}

/* Subtle soft focus shadow for form controls (non-invalid) */
:root {
    --mc-focus-shadow: 0 0 10px #4646461c;
    --mc-focus-border: rgba(134, 134, 134, 0.55);
}

.form-control:focus:not(.is-valid):not(.is-invalid),
.form-select:focus:not(.is-valid):not(.is-invalid),
select.form-control:focus:not(.is-valid):not(.is-invalid),
.bootstrap-select > .dropdown-toggle:focus:not(.is-valid):not(.is-invalid),
/* Flatpickr uses an alternate visible input */
.flatpickr-input[readonly]:focus,
.flatpickr-input:focus {
    box-shadow: var(--mc-focus-shadow) !important;
    border-color: var(--mc-focus-border) !important;
}

/* Keep valid border color when focused (don’t override with generic focus border) */
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: #1EBA62 !important;
}
.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
    border-color: #1EBA62 !important;
}
.bootstrap-select.is-valid .dropdown-toggle:focus {
    border-color: #1EBA62 !important;
}

/* Ensure invalid keeps its border and no glow */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.is-invalid:focus,
.bootstrap-select.is-invalid .dropdown-toggle:focus {
    box-shadow: none !important;
}

/* Ensure validation border isn't visually covered by native background icons */
.form-control,
.form-select,
select.form-control,
.bootstrap-select > .dropdown-toggle {
    background-clip: padding-box;
}

/* Keep native select arrows/validation icons from sitting on the border */
select.form-control,
.form-select {
    padding-right: 2.5rem;
    background-position: right 0.75rem center;
}

/* Bootstrap-select caret: position it inside the control consistently */
.bootstrap-select > .dropdown-toggle {
    padding-right: 2.5rem;
}
.bootstrap-select > .dropdown-toggle::after {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    pointer-events: none;
}

/* Optional: hide bootstrap-select caret when desired */
.bootstrap-select.no-caret > .dropdown-toggle::after {
    display: none !important;
}

/* Move Bootstrap validation SVG slightly left (valid + invalid) */
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-control:invalid,
.form-control.is-invalid {
    background-position: right 0.85rem center !important;
}

/* form-select has two background images (arrow + validation icon) */
.was-validated .form-select:valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple]):not([size]) {
    background-position: right 0.85rem center, center right 2.95rem !important;
}

/* -------------------------------------------------------------------------- */
/* System field and control standardization                                    */
/* -------------------------------------------------------------------------- */
:root {
    --gc-control-height: 44px;
    --gc-control-radius: 8px;
    --gc-control-border: #d9dee8;
    --gc-control-border-hover: #b9c2d3;
    --gc-control-focus: #0d6efd;
    --gc-control-bg: #ffffff;
    --gc-control-text: #17213a;
    --gc-control-muted: #8b93a7;
    --gc-control-disabled: #eef1f5;
    --gc-control-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.form-label,
label.form-label,
.form-group > label,
.input-label {
    color: #1f2a44;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.form-control:not(.bootstrap-select),
.form-select:not(.bootstrap-select),
select.form-control,
textarea.form-control,
.input-group .form-control:not(.bootstrap-select),
.input-group .form-select:not(.bootstrap-select),
.bootstrap-select > .dropdown-toggle,
.nice-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--gc-control-height) !important;
    border: 1px solid var(--gc-control-border) !important;
    border-radius: var(--gc-control-radius) !important;
    background-color: var(--gc-control-bg) !important;
    color: var(--gc-control-text) !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* :not(textarea) - a text area is several lines, not a one-line control
   (2026-10-11: every Notes / Remarks box was squeezed to 44px). */
.form-control:not(.bootstrap-select):not(textarea),
.form-select:not(.bootstrap-select),
select.form-control,
.bootstrap-select > .dropdown-toggle,
.nice-select,
.select2-container--default .select2-selection--single {
    height: var(--gc-control-height) !important;
    padding: 0.62rem 0.9rem !important;
}

textarea.form-control:not(.bootstrap-select) {
    height: auto !important;
    min-height: 96px !important;
    padding: 0.75rem 0.9rem !important;
}

.form-control:hover:not(.bootstrap-select):not(:disabled):not([readonly]),
.form-select:hover:not(.bootstrap-select):not(:disabled),
select.form-control:hover:not(:disabled),
.bootstrap-select > .dropdown-toggle:hover,
.nice-select:hover,
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--gc-control-border-hover) !important;
}

.form-control:focus:not(.bootstrap-select):not(.is-valid):not(.is-invalid),
.form-select:focus:not(.bootstrap-select):not(.is-valid):not(.is-invalid),
select.form-control:focus:not(.is-valid):not(.is-invalid),
textarea.form-control:focus:not(.is-valid):not(.is-invalid),
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select.open > .dropdown-toggle,
.nice-select.open,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--gc-control-focus) !important;
    box-shadow: var(--gc-control-shadow) !important;
    outline: 0 !important;
}

.form-control:not(.bootstrap-select)::placeholder,
textarea.form-control::placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gc-control-muted) !important;
}

.form-control:disabled:not(.bootstrap-select),
.form-control[readonly]:not(.bootstrap-select),
.form-select:disabled:not(.bootstrap-select),
select.form-control:disabled,
.bootstrap-select.disabled > .dropdown-toggle,
.nice-select.disabled,
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--gc-control-disabled) !important;
    color: #667085 !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
.flatpickr-input.form-control,
.flatpickr-input[readonly].form-control {
    appearance: auto;
    background-color: var(--gc-control-bg) !important;
}

.input-group {
    align-items: stretch;
}

.input-group-text {
    min-height: var(--gc-control-height);
    border-color: var(--gc-control-border) !important;
    border-radius: var(--gc-control-radius) !important;
    background-color: #f7f8fb !important;
    color: #667085 !important;
    font-weight: 600;
}

.input-group > :not(:first-child) {
    margin-left: -1px;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .btn:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .btn:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.bootstrap-select {
    width: 100% !important;
    display: block !important;
    position: relative;
    vertical-align: top !important;
}

.bootstrap-select.bs-container {
    width: auto !important;
    display: block !important;
}

.bootstrap-select.form-control,
.bootstrap-select.form-select {
    height: var(--gc-control-height) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--gc-control-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    line-height: normal !important;
}

.bootstrap-select.form-control:not([class*="col-"]):not(.input-group-btn),
.bootstrap-select.form-select:not([class*="col-"]):not(.input-group-btn) {
    width: 100% !important;
}

.bootstrap-select > .dropdown-toggle {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--gc-control-height) !important;
    overflow: hidden;
    transform: none !important;
    box-shadow: none !important;
    text-align: left !important;
}

.bootstrap-select > .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
    min-width: 0;
}

.bootstrap-select > .dropdown-toggle .filter-option-inner,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bootstrap-select .dropdown-menu,
.select2-dropdown,
.nice-select .list {
    border: 1px solid var(--gc-control-border) !important;
    border-radius: var(--gc-control-radius) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
    overflow: hidden;
}

.bootstrap-select .dropdown-menu {
    background: #ffffff !important;
    padding: 0 !important;
    min-width: 100% !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
}

.bootstrap-select .dropdown-menu.inner {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
}

.bootstrap-select .bs-searchbox {
    padding: 0.65rem 0.65rem 0.35rem !important;
}

.bootstrap-select .bs-searchbox .form-control {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 5px !important;
    border-color: #c9d0dc !important;
    box-shadow: none !important;
}

.bootstrap-select .bs-actionsbox {
    padding: 0 0.65rem 0.5rem !important;
}

.bootstrap-select .bs-actionsbox .btn-group {
    display: inline-flex;
    width: auto;
    border: 1px solid #d9dee8;
    border-radius: 5px;
    overflow: hidden;
}

.bootstrap-select .bs-actionsbox .btn {
    min-height: 40px;
    padding: 0.45rem 1rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #344054 !important;
    box-shadow: none !important;
    font-size: 0.82rem;
    font-weight: 500 !important;
}

.bootstrap-select .bs-actionsbox .btn + .btn {
    border-left: 1px solid #d9dee8 !important;
}

.bootstrap-select .dropdown-item,
.select2-results__option,
.nice-select .option {
    min-height: 38px;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.92rem;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a .text,
.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu .dropdown-item .text {
    color: #17213a !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus,
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus {
    background-color: #eef1f5 !important;
    color: #17213a !important;
}

.bootstrap-select .dropdown-menu li a:hover .text,
.bootstrap-select .dropdown-menu li a:focus .text,
.bootstrap-select .dropdown-menu .dropdown-item:hover .text,
.bootstrap-select .dropdown-menu .dropdown-item:focus .text {
    color: #17213a !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.selected a .text {
    background-color: #e5e9f0 !important;
    color: #17213a !important;
}

.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.active a .text,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.selected a .text,
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active,
.bootstrap-select .dropdown-item.active .text,
.bootstrap-select .dropdown-item:active .text,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #eef1f5 !important;
    color: #17213a !important;
}

.btn,
button.btn,
a.btn {
    min-height: 42px !important;
    border-radius: 8px !important;
    padding: 0.64rem 1.05rem !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: normal;
    border-width: 1px !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.btn-primary,
.btn-dark,
.btn.btn-primary,
.btn.btn-dark,
button.btn-primary,
button.btn-dark,
a.btn-primary,
a.btn-dark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
}

.btn:active,
.btn.active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12) !important;
}

.btn i,
.btn svg,
.btn .fa,
.btn .fas,
.btn .far,
.btn .material-icons,
.btn .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 0.95em;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}

.btn-primary,
.btn.btn-primary {
    background: #050505 !important;
    border-color: #050505 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: #1f1f1f !important;
    border-color: #1f1f1f !important;
}

.btn-info,
.btn.btn-info {
    background: #10bcd7 !important;
    border-color: #10bcd7 !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn.btn-info:hover {
    background: #0aa8c1 !important;
    border-color: #0aa8c1 !important;
    color: #ffffff !important;
}

.btn-warning,
.btn.btn-warning {
    background: #ffb703 !important;
    border-color: #ffb703 !important;
    color: #ffffff !important;
}

.btn-warning:hover,
.btn.btn-warning:hover {
    background: #f2a900 !important;
    border-color: #f2a900 !important;
    color: #ffffff !important;
}

.btn-success,
.btn.btn-success {
    background: #168b55 !important;
    border-color: #168b55 !important;
    color: #ffffff !important;
}

.btn-outline-primary,
.btn.btn-outline-primary {
    background: #ffffff !important;
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
}

.btn-outline-primary:hover,
.btn-outline-primary.show,
.btn-outline-primary:active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary.show,
.btn.btn-outline-primary:active {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.btn-outline-secondary,
.btn.btn-outline-secondary {
    background: #ffffff !important;
    border-color: #cfd6e3 !important;
    color: #475467 !important;
}

.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover {
    background: #f3f5f8 !important;
    border-color: #b8c2d3 !important;
    color: #1f2a44 !important;
}

.btn-sm {
    min-height: 34px;
    padding: 0.42rem 0.72rem;
    font-size: 0.84rem;
}

.btn-lg {
    min-height: 50px;
    padding: 0.8rem 1.2rem;
}

.btn:focus,
.btn:active:focus,
.btn.show:focus {
    box-shadow: var(--gc-control-shadow) !important;
}

/* -------------------------------------------------------------------------- */
/* Header responsiveness                                                       */
/* -------------------------------------------------------------------------- */
.header {
    padding-right: 1.25rem !important;
    z-index: 2300 !important;
}

.nav-header {
    z-index: 2310 !important;
}

.header .header-content,
.header .navbar,
.header .navbar-collapse {
    min-width: 0;
}

.header .navbar-collapse {
    gap: 1rem;
}

.header-left {
    min-width: 0;
    flex: 1 1 auto;
}

.header-left .dashboard_bar {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-right {
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
    min-width: max-content;
    padding-right: 0.25rem;
}

.header-right .nav-item {
    flex: 0 0 auto;
}

.header-right .nav-link.bell,
.header-right .dropdown .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-profile2 .avatar.avatar-md {
    flex: 0 0 auto;
}

.schedule-native-select,
select.schedule-native-select,
.schedule-native-select.form-control,
.schedule-native-select.form-control-sm {
    height: var(--gc-control-height) !important;
    min-height: var(--gc-control-height) !important;
    padding: 0.62rem 2.25rem 0.62rem 0.9rem !important;
    border: 1px solid var(--gc-control-border) !important;
    border-radius: var(--gc-control-radius) !important;
    background-color: var(--gc-control-bg) !important;
    color: var(--gc-control-text) !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    width: 100% !important;
}

select.schedule-native-select,
select.schedule-native-select.no-selectpicker,
select.schedule-native-select[data-skip-selectpicker="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.schedule-native-select:hover:not(:disabled),
.schedule-native-select:focus:not(.is-valid):not(.is-invalid) {
    border-color: var(--gc-control-focus) !important;
    box-shadow: var(--gc-control-shadow) !important;
    outline: 0 !important;
}

@media (max-width: 1199px) {
    .header {
        padding-right: 0.85rem !important;
    }

    .header-left .dashboard_bar {
        font-size: 1.15rem !important;
    }

    .header-right {
        gap: 0.4rem;
    }
}

@media (max-width: 576px) {
    .form-control:not(.bootstrap-select):not(textarea),
    .form-select:not(.bootstrap-select),
    select.form-control,
    .bootstrap-select > .dropdown-toggle,
    .nice-select,
    .select2-container--default .select2-selection--single {
        min-height: 42px !important;
        height: 42px !important;
        font-size: 0.92rem !important;
    }

    .btn,
    button.btn,
    a.btn {
        min-height: 44px;
        padding: 0.72rem 0.95rem;
        border-radius: 9px !important;
        font-size: 0.93rem;
    }

    .btn-sm {
        width: auto;
        min-height: 34px;
    }
}

@media (max-width: 768px) {
    :root {
        --gc-mobile-sidebar-width: min(82vw, 292px);
        --gc-mobile-header-height: 70px;
    }

    #main-wrapper {
        overflow-x: hidden;
    }

    .dlabnav {
        position: fixed !important;
        top: var(--gc-mobile-header-height) !important;
        left: calc(var(--gc-mobile-sidebar-width) * -1) !important;
        width: var(--gc-mobile-sidebar-width) !important;
        height: calc(100dvh - var(--gc-mobile-header-height)) !important;
        padding-top: 0 !important;
        z-index: 1045 !important;
        box-shadow: 18px 0 36px rgba(0, 0, 0, 0.22) !important;
        transition: left 0.24s ease !important;
        overflow: hidden !important;
    }

    #main-wrapper.menu-toggle .dlabnav {
        left: 0 !important;
    }

    .dlabnav .dlabnav-scroll {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 18px 0 24px !important;
        -webkit-overflow-scrolling: touch;
    }

    .dlabnav .metismenu > li {
        margin: 2px 0 !important;
        padding: 0 10px !important;
    }

    .dlabnav .metismenu > li > a {
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 8px !important;
        padding: 0.72rem 1rem !important;
    }

    .dlabnav .metismenu > li > a i,
    .dlabnav .metismenu > li > a .material-icons,
    .dlabnav .metismenu > li > a .material-symbols-outlined {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        line-height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 21px !important;
    }

    .dlabnav .metismenu > li > a .nav-text {
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .dlabnav .metismenu ul {
        margin: 4px 0 8px !important;
        padding: 4px 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .dlabnav .metismenu ul a {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.55rem 1rem 0.55rem 3.25rem !important;
        line-height: 1.2 !important;
    }

    #main-wrapper.menu-toggle::after {
        content: "";
        position: fixed;
        top: var(--gc-mobile-header-height);
        left: var(--gc-mobile-sidebar-width);
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.42);
        z-index: 1040;
        opacity: 1;
        pointer-events: auto;
    }

    body.gc-mobile-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }
}

/* Keep sidebar labels and their counters on one row at every breakpoint. */
.dlabnav .metismenu > li > a.sidebar-count-link {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.sidebar-count-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-count-content .nav-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.sidebar-count-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    background: #f5b82e;
    color: #111111;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* Keep every sidebar state fully black, including compact hover flyouts. */
.dlabnav,
.dlabnav .dlabnav-scroll,
.dlabnav .metismenu,
.dlabnav .metismenu > li,
.dlabnav .metismenu li > ul,
.dlabnav .metismenu ul,
.menu-toggle .dlabnav,
.menu-toggle .dlabnav .dlabnav-scroll,
.menu-toggle .dlabnav .metismenu,
.menu-toggle .dlabnav .metismenu li > ul,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu li > ul,
[data-sidebar-style="mini"][data-layout="vertical"] .dlabnav .metismenu li > ul,
[data-sidebar-style="overlay"] .dlabnav,
[data-sidebar-style="overlay"] .dlabnav .metismenu li > ul {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.dlabnav {
    z-index: 1060 !important;
}

.dlabnav .dlabnav-scroll,
.dlabnav .metismenu,
.dlabnav .metismenu > li {
    overflow: visible !important;
}

.dlabnav .metismenu > li {
    position: relative !important;
    z-index: 1061 !important;
}

.dlabnav .metismenu > li:hover {
    z-index: 1080 !important;
}

.dlabnav .metismenu li > ul,
.menu-toggle .dlabnav .metismenu li > ul,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu li > ul,
[data-sidebar-style="mini"][data-layout="vertical"] .dlabnav .metismenu li > ul {
    z-index: 1090 !important;
    box-shadow: 14px 12px 32px rgba(0, 0, 0, 0.22) !important;
}

.content-body,
.card,
.table-responsive,
.table,
.sticky-top,
thead,
tbody,
tr,
th,
td {
    z-index: auto;
}

.dlabnav .metismenu > li > a,
.dlabnav .metismenu > li.mm-active > a,
.dlabnav .metismenu > li:hover > a,
.dlabnav .metismenu > li:focus > a,
.menu-toggle .dlabnav .metismenu > li > a,
.menu-toggle .dlabnav .metismenu > li.mm-active > a,
.menu-toggle .dlabnav .metismenu > li:hover > a,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu > li.mm-active > a,
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .metismenu > li:hover > a,
[data-sidebar-style="mini"][data-layout="vertical"] .dlabnav .metismenu > li.mm-active > a,
[data-sidebar-style="mini"][data-layout="vertical"] .dlabnav .metismenu > li:hover > a {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.dlabnav .metismenu ul a,
.dlabnav .metismenu ul a.mm-active,
.dlabnav .metismenu ul a:hover,
.dlabnav .metismenu ul a:focus,
.menu-toggle .dlabnav .metismenu ul a,
.menu-toggle .dlabnav .metismenu ul a:hover,
.menu-toggle .dlabnav .metismenu ul a:focus {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.dlabnav .metismenu > li > a::before,
.dlabnav .metismenu > li > a::after,
.dlabnav .metismenu > li.mm-active > a::before,
.dlabnav .metismenu > li.mm-active > a::after,
.dlabnav .metismenu li ul::before,
.dlabnav .metismenu li ul::after,
.dlabnav .metismenu ul a::before,
.dlabnav .metismenu ul a::after,
.menu-toggle .dlabnav .metismenu > li > a::before,
.menu-toggle .dlabnav .metismenu > li > a::after,
.menu-toggle .dlabnav .metismenu li ul::before,
.menu-toggle .dlabnav .metismenu li ul::after {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
}

/* Keep tall sidebars usable when the menu has many modules/settings. */
.dlabnav {
    max-height: 100vh !important;
    overflow: hidden !important;
}

.dlabnav .dlabnav-scroll {
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 34px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .dlabnav {
        height: calc(100dvh - var(--gc-mobile-header-height)) !important;
        max-height: calc(100dvh - var(--gc-mobile-header-height)) !important;
    }

    .dlabnav .dlabnav-scroll {
        height: 100% !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 48px !important;
    }

    .dlabnav .metismenu,
    .dlabnav .metismenu > li {
        overflow: visible !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Persistent dark-mode polish                                                 */
/* -------------------------------------------------------------------------- */
body[data-theme-version="dark"],
html[data-theme-version="dark"] body {
    background: #1f1f1f !important;
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] .content-body,
body[data-theme-version="dark"] .container-fluid,
body[data-theme-version="dark"] .page-wrapper {
    background: #1f1f1f !important;
}

body[data-theme-version="dark"] .page-title,
body[data-theme-version="dark"] .card,
body[data-theme-version="dark"] .card-body,
body[data-theme-version="dark"] .default-tab,
body[data-theme-version="dark"] .table-responsive,
body[data-theme-version="dark"] .full-data {
    background: #272738 !important;
    border-color: #3a3a54 !important;
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] .form-label,
body[data-theme-version="dark"] label,
body[data-theme-version="dark"] h1,
body[data-theme-version="dark"] h2,
body[data-theme-version="dark"] h3,
body[data-theme-version="dark"] h4,
body[data-theme-version="dark"] h5,
body[data-theme-version="dark"] h6,
body[data-theme-version="dark"] .dashboard_bar,
body[data-theme-version="dark"] .card-title {
    color: #ffffff !important;
}

body[data-theme-version="dark"] .text-muted,
body[data-theme-version="dark"] .date,
body[data-theme-version="dark"] p,
body[data-theme-version="dark"] span {
    color: inherit;
}

body[data-theme-version="dark"] .form-control:not(.bootstrap-select),
body[data-theme-version="dark"] .form-select:not(.bootstrap-select),
body[data-theme-version="dark"] select.form-control,
body[data-theme-version="dark"] textarea.form-control,
body[data-theme-version="dark"] input[type="date"].form-control,
body[data-theme-version="dark"] input[type="time"].form-control,
body[data-theme-version="dark"] input[type="datetime-local"].form-control,
body[data-theme-version="dark"] .flatpickr-input.form-control,
body[data-theme-version="dark"] .bootstrap-select > .dropdown-toggle,
body[data-theme-version="dark"] .nice-select,
body[data-theme-version="dark"] .schedule-native-select,
body[data-theme-version="dark"] select.schedule-native-select {
    background-color: #333344 !important;
    border-color: #4a4a63 !important;
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] .form-control:not(.bootstrap-select)::placeholder,
body[data-theme-version="dark"] textarea.form-control::placeholder,
body[data-theme-version="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder,
body[data-theme-version="dark"] .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    color: #aab0d6 !important;
}

body[data-theme-version="dark"] .form-control:focus:not(.bootstrap-select):not(.is-valid):not(.is-invalid),
body[data-theme-version="dark"] .form-select:focus:not(.bootstrap-select):not(.is-valid):not(.is-invalid),
body[data-theme-version="dark"] select.form-control:focus:not(.is-valid):not(.is-invalid),
body[data-theme-version="dark"] textarea.form-control:focus:not(.is-valid):not(.is-invalid),
body[data-theme-version="dark"] .bootstrap-select > .dropdown-toggle:focus,
body[data-theme-version="dark"] .bootstrap-select.show > .dropdown-toggle,
body[data-theme-version="dark"] .bootstrap-select.open > .dropdown-toggle {
    border-color: #7f86ff !important;
    box-shadow: 0 0 0 3px rgba(127, 134, 255, 0.18) !important;
}

body[data-theme-version="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
body[data-theme-version="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
body[data-theme-version="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.4);
}

body[data-theme-version="dark"] .bootstrap-select .dropdown-menu,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu.inner,
body[data-theme-version="dark"] .select2-dropdown,
body[data-theme-version="dark"] .nice-select .list {
    background: #333344 !important;
    border-color: #4a4a63 !important;
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li a,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li a .text,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu .dropdown-item,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu .dropdown-item .text,
body[data-theme-version="dark"] .nice-select .option {
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li a:hover,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li a:focus,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li.selected a,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li.active a,
body[data-theme-version="dark"] .bootstrap-select .dropdown-item:hover,
body[data-theme-version="dark"] .bootstrap-select .dropdown-item:focus,
body[data-theme-version="dark"] .bootstrap-select .dropdown-item.active,
body[data-theme-version="dark"] .bootstrap-select .dropdown-item:active,
body[data-theme-version="dark"] .nice-select .option:hover,
body[data-theme-version="dark"] .nice-select .option.focus,
body[data-theme-version="dark"] .nice-select .option.selected.focus {
    background: #45455d !important;
    color: #ffffff !important;
}

body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li a:hover .text,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li.selected a .text,
body[data-theme-version="dark"] .bootstrap-select .dropdown-menu li.active a .text,
body[data-theme-version="dark"] .bootstrap-select .dropdown-item:hover .text,
body[data-theme-version="dark"] .bootstrap-select .dropdown-item.active .text {
    color: #ffffff !important;
}

body[data-theme-version="dark"] .search-area .search-word,
body[data-theme-version="dark"] .search-area input.form-control,
body[data-theme-version="dark"] input[name="search"].form-control {
    background-color: #333344 !important;
    border-color: #4a4a63 !important;
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] .search-area button[type="submit"],
body[data-theme-version="dark"] .search-area .search-submit-btn,
body[data-theme-version="dark"] .input-group-text a,
body[data-theme-version="dark"] .input-group .input-group-text {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

body[data-theme-version="dark"] .search-area button[type="submit"] svg,
body[data-theme-version="dark"] .search-area .search-submit-btn svg,
body[data-theme-version="dark"] .input-group-text svg,
body[data-theme-version="dark"] .btn svg,
body[data-theme-version="dark"] .btn i {
    color: #ffffff !important;
    fill: none;
}

body[data-theme-version="dark"] .search-area button[type="submit"] svg path,
body[data-theme-version="dark"] .search-area .search-submit-btn svg path,
body[data-theme-version="dark"] .input-group-text svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

body[data-theme-version="dark"] .btn-primary,
body[data-theme-version="dark"] .btn-dark,
body[data-theme-version="dark"] .btn.btn-primary,
body[data-theme-version="dark"] .btn.btn-dark {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

body[data-theme-version="dark"] .btn-primary:hover,
body[data-theme-version="dark"] .btn-dark:hover,
body[data-theme-version="dark"] .btn.btn-primary:hover,
body[data-theme-version="dark"] .btn.btn-dark:hover {
    background: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
}

body[data-theme-version="dark"] .table,
body[data-theme-version="dark"] table {
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] table thead th,
body[data-theme-version="dark"] .table thead th {
    background: #1f1f2f !important;
    border-color: #3a3a54 !important;
    color: #ffffff !important;
}

body[data-theme-version="dark"] table tbody tr,
body[data-theme-version="dark"] table tbody td,
body[data-theme-version="dark"] .table tbody tr,
body[data-theme-version="dark"] .table tbody td {
    background: #272738 !important;
    border-color: #3a3a54 !important;
    color: #f5f6ff !important;
}

body[data-theme-version="dark"] table tbody tr:hover td,
body[data-theme-version="dark"] .table tbody tr:hover td {
    background: #303047 !important;
}

/* Standardize page navigation placement */
.page-titles {
    justify-content: flex-start !important;
    gap: 12px 16px !important;
}

.page-titles > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
}

.page-titles .justify-content-sm-end,
.page-titles .justify-content-end,
.page-titles .d-flex {
    justify-content: flex-start !important;
}

.page-titles .welcome-text,
.page-titles .welcome-text h4,
.page-titles .welcome-text h2,
.page-titles .welcome-text p {
    text-align: left !important;
}

/* Pagination: at the right-hand end of its list on every page - the same side
   DataTables puts its own pager. The shared pager (views/vendor/pagination/gc)
   fills its row, so a page that wraps it in a centred box or a card footer
   still gets it on the right. This used to force the LEFT, which is why the
   attendance pages (centred wrapper) and the DataTables pages (right) each
   disagreed with the rest. */
.gc-pager,
nav[role="navigation"],
.table-pagenation {
    display: flex;
    justify-content: flex-end !important;
    width: 100%;
}

.gc-pager .pagination,
nav[role="navigation"] .pagination,
.table-pagenation .pagination {
    flex-wrap: wrap;
    margin-bottom: 0;
    margin-left: auto !important;
    margin-right: 0 !important;
}

@media (min-width: 1024px) {
    body[data-layout="vertical"][data-sidebar-style="full"] .nav-header {
        z-index: 2310 !important;
    }

    body[data-layout="vertical"][data-sidebar-style="full"] .header {
        padding-left: var(--width) !important;
    }

    /* The header is already padded by the sidebar's width (above), so its
       content fills what is left. Taking the sidebar off a second time left
       the theme, fullscreen and profile icons a sidebar's width short of the
       right edge on every page. */
    body[data-layout="vertical"][data-sidebar-style="full"] .header .header-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Modals above the fixed header                                              */
/* -------------------------------------------------------------------------- */
/* The page header (.header / .nav-header) sits at z-index 2300/2310, above the
   default Bootstrap modal/backdrop stack (~2040/2050 in this app), so modals
   rendered underneath the header. Multiple header rules (including a desktop
   media-query) keep the header high and have been reverted before, so instead
   of lowering the header we raise every modal and its backdrop above it. */
.modal.show {
    z-index: 2400 !important;
}
.modal-backdrop {
    z-index: 2390 !important;
}

/* -------------------------------------------------------------------------- */
/* Sticky footer (CSS-only)                                                    */
/* -------------------------------------------------------------------------- */
/* .header, .content-body and .footer are #main-wrapper's only normal-flow
   children (the sidebars/nav-header are position:absolute, so they aren't
   affected by this and keep floating over the flex column as before).
   Stacking them in a flex column with content-body set to grow keeps the
   footer pinned to the bottom of the viewport on short pages, without
   needing JS to measure header/footer heights on load - which broke
   whenever a late-loading icon font or AJAX-rendered table content changed
   those heights after the one-time measurement ran. */
#main-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
#main-wrapper > .content-body {
    flex: 1 0 auto !important;
    min-height: 0 !important;
}
#main-wrapper > .footer {
    flex-shrink: 0 !important;
}


/* ---------------------------------------------------------------------------
   Filter dropdowns rendering BEHIND table headers.

   The theme sets .page-title { position: relative; z-index: 1 }, which makes
   that toolbar a STACKING CONTEXT. Every filter dropdown lives inside it, so
   however high the menu's own z-index is - the theme already gives it 9999 -
   it can never paint above a table header further down the page, which sits at
   z-index 3 in the ROOT context. 1 loses to 3, and the menu goes behind.

   That is why raising the menu's z-index never fixed this, on any page. The
   toolbar itself has to be lifted. Done here once, for every page, rather than
   per-page as before.
   --------------------------------------------------------------------------- */
.page-title:has(.bootstrap-select),
.page-title:has(.dropdown-menu),
.class-filter-panel {
    z-index: 20;
}