/* Shared page-level styles for content loaded into #ajax-content.
   Add page-specific rules here instead of inline <style> blocks in individual pages. */

/* studrec/student_id_appointment.php */
.flptb {
	resize: vertical;
	overflow: auto;
	width: 100%;
	height: 300px;
}

/* studrec/student_picture_gallery.php */
.stud-gal-grid .card {
	transition: transform .12s ease, box-shadow .12s ease;
}
.stud-gal-grid .card:hover {
	transform: translateY(-2px);
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}
.stud-gal-photo-wrap {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: rgba(0, 0, 0, .04);
}
[data-theme="dark"] .stud-gal-photo-wrap {
	background-color: rgba(255, 255, 255, .04);
}
.stud-gal-photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.stud-gal-noimg {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	color: rgba(0, 0, 0, .3);
}
[data-theme="dark"] .stud-gal-noimg {
	color: rgba(255, 255, 255, .25);
}
.stud-gal-noimg .material-symbols-outlined {
	font-size: 2.5rem;
}
.stud-gal-noimg-label {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Dark-mode support for Bootstrap's .form-range — this app has no built-in
   override for it (only .form-select/.form-control get one), so left alone
   it stays light-track in dark mode. Used by studrec/student_picture.php and
   studrec/student_picture_webcam2.php's crop-zoom sliders. */
[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
	background-color: #46566b;
}
[data-theme="dark"] .form-range::-moz-range-track {
	background-color: #46566b;
}
[data-theme="dark"] .form-range:disabled::-webkit-slider-thumb {
	background-color: rgba(255, 255, 255, .25);
}
[data-theme="dark"] .form-range:disabled::-moz-range-thumb {
	background-color: rgba(255, 255, 255, .25);
}

/* studrec/student_id_print2.php -- Original/Adjusted picture side-by-side boxes. */
.adjpic-box {
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	min-width: 180px;
	background-color: #f8f9fa;
}
[data-theme="dark"] .adjpic-box {
	border-color: rgba(255, 255, 255, .15);
	background-color: #1b232d;
}
.adjpic-box img {
	max-width: 100%;
	max-height: 260px;
}
.adjpic-label {
	font-weight: 600;
	margin-top: 6px;
}
.coladj-loading-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .65);
	border-radius: 8px;
}
[data-theme="dark"] .coladj-loading-overlay {
	background: rgba(0, 0, 0, .55);
}

/* studrec/student_id_print2.php -- "Remove Background" blocking overlay. Sits
   on .modal-content (not just the image), so it covers the header/footer
   buttons too and blocks the whole modal while the request is in flight --
   no text content, so it can never reflow/shift the image beneath it. This
   modal's chrome is always the fixed .bg-secondary/default gray (not
   theme-toggled), so unlike .coladj-loading-overlay above this doesn't need
   a [data-theme="dark"] variant. */
.removebg-loading-overlay {
	position: absolute;
	inset: 0;
	z-index: 1060; /* above Bootstrap's own modal content stacking */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
	pointer-events: all;
}

/* studrec/student_id_print2.php -- scrollable zoom viewport for the protect-area
   drawing stage. #protectStage's width is set in JS per zoom level (1x-4x); this
   just provides the clipping + pan behavior once it's wider than the modal. */
#protectViewport {
	max-height: 55vh;
	overflow: auto;
}

/* studrec/student_id_management.php & Dark Mode Table Contrast Rules */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] thead.table-light > tr > th {
	background-color: #1e293b !important;
	color: #f1f5f9 !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   studrec/student_id_management.php — Table Styling (Light & Dark Mode)
   ========================================================================== */
#stsre {
	font-size: 0.88rem;
}

#stsre tbody tr td {
	padding: 9px 12px;
	vertical-align: middle;
}

/* --- LIGHT MODE ROW COLORS & CRISP TEXT --- */
:root:not([data-theme="dark"]) .table tbody tr.row-status-success > td,
:root:not([data-theme="dark"]) .table tbody tr.idmgmt-row-processed > td,
:root:not([data-theme="dark"]) .table tbody tr.table-success > td,
:root:not([data-theme="dark"]) .table tbody tr.bg-success > td {
	background-color: #dcfce7 !important;
	color: #064e3b !important;
	border-color: #bbf7d0 !important;
}
:root:not([data-theme="dark"]) .table tbody tr.row-status-success:hover > td,
:root:not([data-theme="dark"]) .table tbody tr.idmgmt-row-processed:hover > td,
:root:not([data-theme="dark"]) .table tbody tr.table-success:hover > td,
:root:not([data-theme="dark"]) .table tbody tr.bg-success:hover > td {
	background-color: #bbf7d0 !important;
}
:root:not([data-theme="dark"]) .table tbody tr.row-status-success a,
:root:not([data-theme="dark"]) .table tbody tr.idmgmt-row-processed a {
	color: #047857 !important;
	font-weight: 700;
	text-decoration: underline;
}

:root:not([data-theme="dark"]) .table tbody tr.row-status-danger > td,
:root:not([data-theme="dark"]) .table tbody tr.row-status-pending > td,
:root:not([data-theme="dark"]) .table tbody tr.idmgmt-row-unmarked > td,
:root:not([data-theme="dark"]) .table tbody tr.table-danger > td,
:root:not([data-theme="dark"]) .table tbody tr.bg-danger > td {
	background-color: #fee2e2 !important;
	color: #7f1d1d !important;
	border-color: #fecaca !important;
}
:root:not([data-theme="dark"]) .table tbody tr.row-status-danger:hover > td,
:root:not([data-theme="dark"]) .table tbody tr.row-status-pending:hover > td,
:root:not([data-theme="dark"]) .table tbody tr.idmgmt-row-unmarked:hover > td,
:root:not([data-theme="dark"]) .table tbody tr.table-danger:hover > td,
:root:not([data-theme="dark"]) .table tbody tr.bg-danger:hover > td {
	background-color: #fecaca !important;
}
:root:not([data-theme="dark"]) .table tbody tr.row-status-danger a,
:root:not([data-theme="dark"]) .table tbody tr.row-status-pending a,
:root:not([data-theme="dark"]) .table tbody tr.idmgmt-row-unmarked a {
	color: #b91c1c !important;
	font-weight: 700;
	text-decoration: underline;
}

:root:not([data-theme="dark"]) .table tbody tr.row-status-default > td,
:root:not([data-theme="dark"]) .table tbody tr.idmgmt-row-noappearance > td {
	background-color: #ffffff !important;
	color: #1e293b !important;
}

/* --- DARK MODE ROW COLORS & DOMINANT BRIGHT WHITE TEXT --- */
[data-theme="dark"] .table tbody tr.row-status-success > td,
[data-theme="dark"] .table tbody tr.idmgmt-row-processed > td,
[data-theme="dark"] .table tbody tr.table-success > td,
[data-theme="dark"] .table tbody tr.bg-success > td {
	background-color: #064e3b !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .table tbody tr.row-status-success:hover > td,
[data-theme="dark"] .table tbody tr.idmgmt-row-processed:hover > td,
[data-theme="dark"] .table tbody tr.table-success:hover > td,
[data-theme="dark"] .table tbody tr.bg-success:hover > td {
	background-color: #047857 !important;
}
[data-theme="dark"] .table tbody tr.row-status-success a,
[data-theme="dark"] .table tbody tr.idmgmt-row-processed a {
	color: #67e8f9 !important;
	font-weight: 700;
	text-decoration: underline;
	text-shadow: none;
}

[data-theme="dark"] .table tbody tr.row-status-danger > td,
[data-theme="dark"] .table tbody tr.row-status-pending > td,
[data-theme="dark"] .table tbody tr.idmgmt-row-unmarked > td,
[data-theme="dark"] .table tbody tr.table-danger > td,
[data-theme="dark"] .table tbody tr.bg-danger > td {
	background-color: #4c0519 !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .table tbody tr.row-status-danger:hover > td,
[data-theme="dark"] .table tbody tr.row-status-pending:hover > td,
[data-theme="dark"] .table tbody tr.idmgmt-row-unmarked:hover > td,
[data-theme="dark"] .table tbody tr.table-danger:hover > td,
[data-theme="dark"] .table tbody tr.bg-danger:hover > td {
	background-color: #881337 !important;
}
[data-theme="dark"] .table tbody tr.row-status-danger a,
[data-theme="dark"] .table tbody tr.row-status-pending a,
[data-theme="dark"] .table tbody tr.idmgmt-row-unmarked a {
	color: #fca5a5 !important;
	font-weight: 700;
	text-decoration: underline;
	text-shadow: none;
}

[data-theme="dark"] .table tbody tr.row-status-default > td,
[data-theme="dark"] .table tbody tr.idmgmt-row-noappearance > td {
	background-color: transparent !important;
	color: #f1f5f9 !important;
}

[data-theme="dark"] .table tbody tr > td {
	color: #ffffff !important;
}

#stsre thead .col-search {
	font-size: 0.8rem;
	padding: 0.25rem 0.5rem;
}

/* Dark Mode Form Selects & Inputs (including modals & disabled states) */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-select,
[data-theme="dark"] input.form-control {
	background-color: #1e293b !important;
	color: #f1f5f9 !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .form-select option {
	background-color: #1e293b !important;
	color: #f1f5f9 !important;
}

[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] select.form-select:disabled,
[data-theme="dark"] input.form-control:disabled {
	background-color: #0f172a !important;
	color: #94a3b8 !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	opacity: 0.85;
}

[data-theme="dark"] .modal-content .card,
[data-theme="dark"] .modal-content .bg-body-tertiary {
	background-color: #1e293b !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	color: #f1f5f9 !important;
}

[data-theme="dark"] .modal-content .alert-warning {
	background-color: rgba(245, 158, 11, 0.12) !important;
	border-color: rgba(245, 158, 11, 0.25) !important;
	color: #fde68a !important;
}

[data-theme="dark"] .modal-content .alert-warning strong,
[data-theme="dark"] .modal-content .alert-warning span {
	color: #fef08a !important;
}

[data-theme="dark"] .modal-content .alert-warning .text-muted {
	color: #cbd5e1 !important;
}

[data-theme="dark"] #na_preview_tbl thead.table-light > tr > th,
[data-theme="dark"] #na_preview_tbl thead > tr > th {
	background-color: #0f172a !important;
	color: #f1f5f9 !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] #na_preview_tbl tbody tr td {
	border-color: rgba(255, 255, 255, 0.08) !important;
	color: #e2e8f0 !important;
}

[data-theme="dark"] #na_preview_tbl tbody tr:hover td {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .form-check-input {
	background-color: #1e293b;
	border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .form-check-input:checked {
	background-color: #3b82f6;
	border-color: #3b82f6;
}

/* ==========================================================================
   Extracted from header.php (Global Overrides, Dark Mode & Layout Adaptations)
   ========================================================================== */

.d1 { background-color: #fa764b !important; color: #fff; font-weight: 400; }
    .d2 { background-color: #16a396 !important; color: #fff; font-weight: 400; }
    .d3 { background-color: #23a81d !important; color: #fff; font-weight: 400; }
    .d4 { background-color: #ff9d00 !important; color: #fff; font-weight: 400; }
    .d5 { background-color: #ff5050 !important; color: #fff; font-weight: 400; }
    .pm { background-color: #007bff !important; color: #fff; font-weight: 400; }
    .pf { background-color: #e83e8c !important; color: #fff; font-weight: 400; }
    .tmm { color: #007bff !important; font-weight: 600; }
    .tff { color: #e83e8c !important; font-weight: 600; }

    /* Dark Mode Table Compatibility */
    [data-theme="dark"] .table {
        --bs-table-color: #dee2e6;
        --bs-table-bg: transparent;
        --bs-table-border-color: #495057;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
        --bs-table-striped-color: #dee2e6;
        --bs-table-active-bg: rgba(255, 255, 255, 0.1);
        --bs-table-active-color: #dee2e6;
        --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
        --bs-table-hover-color: #dee2e6;
        color: var(--bs-table-color);
    }
    [data-theme="dark"] .table-primary {
        --bs-table-bg: rgba(13, 110, 253, 0.15) !important;
        --bs-table-color: #fff !important;
        --bs-table-border-color: rgba(13, 110, 253, 0.3) !important;
    }
    [data-theme="dark"] .table-primary > th, 
    [data-theme="dark"] .table-primary > td {
        background-color: rgba(13, 110, 253, 0.15) !important;
        box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.15) !important;
        color: #fff !important;
        border-color: rgba(13, 110, 253, 0.3) !important;
        font-weight: 600;
    }
    [data-theme="dark"] .table td.text-secondary {
        color: #cbd5e1 !important;
    }
    [data-theme="dark"] .text-muted {
        color: #94a3b8 !important;
    }
    [data-theme="dark"] .text-secondary {
        color: #cbd5e1 !important;
    }
    [data-theme="dark"] .text-success {
        color: #34d399 !important;
    }
    [data-theme="dark"] .text-danger {
        color: #f87171 !important;
    }
    [data-theme="dark"] .text-info {
        color: #38bdf8 !important;
    }
    [data-theme="dark"] .text-warning {
        color: #fbbf24 !important;
    }
    [data-theme="dark"] .tmm {
        color: #60a5fa !important;
    }
    [data-theme="dark"] .tff {
        color: #f472b6 !important;
    }
    
    /* Force collapse animation to be active and smooth */
    .collapsing {
        -webkit-transition: height 0.35s ease !important;
        transition: height 0.35s ease !important;
    }

    /* Premium Slide and Fade animation for Dashboard Tabs */
    #collegeTabsContent > .tab-pane.fade {
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(12px);
        opacity: 0;
    }
    #collegeTabsContent > .tab-pane.fade.show {
        transform: translateY(0);
        opacity: 1;
    }

    @media print, (prefers-reduced-motion: reduce) {
        #collegeTabsContent > .tab-pane.fade {
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
        }
        .collapsing {
            transition: none !important;
        }
    }

    /* ── Select2 Custom Theme Styles ── */
    .select2-container--bootstrap-5 {
        display: block;
    }
    .select2-container--bootstrap-5 .select2-selection {
        border: 1px solid #dae0ec !important;
        border-radius: 5px !important;
        background-color: #fff !important;
        color: #475569 !important;
        font-family: inherit;
        transition: all ease 0.5s !important;
        box-shadow: none !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single {
        height: 56px !important;
        padding: 14px 15px !important;
        font-size: 16px !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        padding: 0 !important;
        line-height: 26px !important;
        color: #475569 !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
        color: #919aa3 !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single {
        background-position: right 15px center !important;
    }

    /* Small Select2 Sizing */
    select.form-select-sm + .select2-container--bootstrap-5 .select2-selection--single,
    select.form-control-sm + .select2-container--bootstrap-5 .select2-selection--single,
    .form-select-sm + .select2-container--bootstrap-5 .select2-selection--single,
    .form-control-sm + .select2-container--bootstrap-5 .select2-selection--single,
    .form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single,
    .form-control-sm ~ .select2-container--bootstrap-5 .select2-selection--single,
    .select2-container--bootstrap-5 .select2--small.select2-selection--single {
        height: 33px !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.77rem !important;
        border-radius: 0.2rem !important;
    }
    select.form-select-sm + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    select.form-control-sm + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    .form-select-sm + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    .form-control-sm + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    .form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    .form-control-sm ~ .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    .select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__rendered {
        line-height: 23px !important;
        padding-right: 1.75rem !important;
        font-size: 0.77rem !important;
    }
    select.form-select-sm + .select2-container--bootstrap-5 .select2-selection--single,
    select.form-control-sm + .select2-container--bootstrap-5 .select2-selection--single,
    .form-select-sm + .select2-container--bootstrap-5 .select2-selection--single,
    .form-control-sm + .select2-container--bootstrap-5 .select2-selection--single,
    .form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single,
    .form-control-sm ~ .select2-container--bootstrap-5 .select2-selection--single,
    .select2-container--bootstrap-5 .select2--small.select2-selection--single {
        background-position: right 0.5rem center !important;
    }

    /* Multiple Select2 Sizing */
    .select2-container--bootstrap-5 .select2-selection--multiple {
        min-height: 56px !important;
        padding: 8px 15px !important;
        font-size: 16px !important;
    }
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
        padding: 0 !important;
    }
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
        background-color: #eff3f9 !important;
        border: 1px solid #dae0ec !important;
        color: #475569 !important;
        font-size: 0.88rem !important;
        padding: 4px 8px !important;
        margin-right: 6px !important;
        margin-bottom: 4px !important;
        border-radius: 4px !important;
    }
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
        color: #919aa3 !important;
        margin-right: 6px !important;
    }
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ff5050 !important;
    }

    /* Small Multiple Select2 Sizing */
    .form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple,
    .form-control-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple,
    .select2-container--bootstrap-5 .select2--small.select2-selection--multiple {
        min-height: calc(1.5em + 0.5rem + 2px) !important;
        padding: 0.15rem 0.4rem !important;
        font-size: 0.77rem !important;
    }
    .form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
    .form-control-sm ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
    .select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__choice {
        font-size: 0.7rem !important;
        padding: 1px 4px !important;
        margin-right: 4px !important;
        margin-bottom: 2px !important;
    }

    /* Focus & Open States */
    .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    .select2-container--bootstrap-5.select2-container--open .select2-selection {
        border-color: #dae0ec !important;
        border-bottom: 2px solid #0f79f3 !important;
        box-shadow: none !important;
        background-color: #fff !important;
    }

    /* Dropdown UI */
    .select2-container--bootstrap-5 .select2-dropdown {
        border: 1px solid #dae0ec !important;
        border-radius: 5px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
        background-color: #fff !important;
        color: #475569 !important;
    }
    .select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-top: 0 solid transparent !important;
    }
    .select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom: 0 solid transparent !important;
    }
    .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
        border: 1px solid #dae0ec !important;
        border-radius: 4px !important;
        color: #475569 !important;
        background-color: #fff !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
        border-color: #dae0ec !important;
        border-bottom: 2px solid #0f79f3 !important;
        box-shadow: none !important;
    }
    .select2-container--bootstrap-5 .select2-results__option {
        padding: 8px 15px !important;
        font-size: 14px !important;
        color: #475569 !important;
    }
    .select2-container--bootstrap-5 .select2-results__option.select2-results__option--highlighted {
        background-color: #0f79f3 !important;
        color: #fff !important;
    }
    .select2-container--bootstrap-5 .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
        background-color: #eff3f9 !important;
        color: #475569 !important;
    }
    .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
        background-color: #eff3f9 !important;
        color: #8695aa !important;
        cursor: not-allowed !important;
        border-color: #dae0ec !important;
    }

    /* ── Select2 Dark Mode overrides ── */
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
        background-color: #1b232d !important;
        border-color: rgba(255,255,255,0.18) !important;
        color: #e3e8ec !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
        color: #e3e8ec !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
        color: #6c7a87 !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    body[data-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
        border-color: rgba(255,255,255,0.18) !important;
        border-bottom: 2px solid #0f79f3 !important;
        box-shadow: none !important;
        background-color: #1b232d !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
        background-color: #1b232d !important;
        border-color: rgba(255,255,255,0.15) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
        color: #e3e8ec !important;
        background-color: #1b232d !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted,
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: #293542 !important;
        color: #ffffff !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
        background-color: #1f2b38 !important;
        color: #e3e8ec !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
        background-color: #1b232d !important;
        color: #e3e8ec !important;
        border-color: rgba(255,255,255,0.18) !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field::placeholder {
        color: #6c7a87 !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
        border-color: rgba(255,255,255,0.18) !important;
        border-bottom: 2px solid #0f79f3 !important;
        box-shadow: none !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
        background-color: #2e3f50 !important;
        border-color: rgba(255,255,255,0.15) !important;
        color: #e3e8ec !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
        color: #adb5bd !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #fff !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__message {
        color: #adb5bd !important;
    }
    body[data-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
        background-color: #151c24 !important;
        color: #5a6472 !important;
        border-color: rgba(255,255,255,0.07) !important;
    }
    
    /* Sidebar Layout Adaptations */
    body:not(.has-left-sidebar) #sidebar-area {
        display: none !important;
    }
    body.has-left-sidebar #sidebar-area {
        display: block !important;
        z-index: 1045 !important;
    }
    body.has-left-sidebar #header-area,
    body.has-left-sidebar #navbar {
        z-index: 10 !important;
    }
    body.has-left-sidebar .desktop-header-brand {
        display: none !important;
    }
    body.has-left-sidebar .header-nav-collapse {
        display: none !important;
    }
    body.has-left-sidebar .main-content {
        max-width: 100% !important;
        padding-left: 270px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transition: padding-left 0.3s ease;
    }
    body.has-left-sidebar[sidebar-data-theme="sidebar-hide"] .main-content {
        padding-left: 72px !important;
    }
    @media (max-width: 1199px) {
        body.has-left-sidebar .main-content,
        body.has-left-sidebar[sidebar-data-theme="sidebar-hide"] .main-content {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
    }

    /* Sidebar Submenu Typography, Indents & Multi-line Text Wrap (Only Submenus, not Top Level) */
    .sidebar-area .menu-vertical .menu-sub .menu-item .menu-link {
        white-space: normal !important;
        word-break: normal !important;
        line-height: 1.35 !important;
        padding: 6.5px 12px 6.5px 28px !important;
        font-size: 13.5px !important;
        position: relative !important;
        display: block !important;
    }
    .sidebar-area .menu-vertical .menu-sub {
        padding-top: 4px !important;
        padding-bottom: 6px !important;
    }
    .sidebar-area .menu-vertical .menu-sub .menu-item {
        margin-bottom: 2px !important;
    }
    .sidebar-area .menu-vertical .menu-sub .menu-item .menu-link::before {
        top: 13px !important;
        left: 12px !important;
        transform: none !important;
    }
    /* Nested Level 3 Submenus */
    .sidebar-area .menu-vertical .menu-sub .menu-item.after-sub-menu .menu-sub {
        padding-top: 2px !important;
    }
    .sidebar-area .menu-vertical .menu-sub .menu-item.after-sub-menu .menu-sub .menu-item {
        margin-left: 12px !important;
    }
    .sidebar-area .menu-vertical .menu-sub .menu-item.after-sub-menu .menu-sub .menu-item .menu-link {
        padding: 5.5px 10px 5.5px 22px !important;
        font-size: 13px !important;
    }
    .sidebar-area .menu-vertical .menu-sub .menu-item.after-sub-menu .menu-sub .menu-item .menu-link::before {
        top: 12px !important;
        left: 9px !important;
    }
    .sidebar-area .menu-vertical .menu-sub .menu-item.after-sub-menu .menu-link.menu-toggle::after {
        top: 14px !important;
        right: 12px !important;
    }

    /* Scrollbar Suppression */
    .sidebar-area .simplebar-track.simplebar-horizontal {
        display: none !important;
        height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .sidebar-area .simplebar-content-wrapper {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .sidebar-area .simplebar-content-wrapper::-webkit-scrollbar,
    .sidebar-area::-webkit-scrollbar,
    .sidebar-area *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Collapsed State: Exact 60px layout & centered icons */
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) {
        width: 60px !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .logo {
        padding: 20px 12px !important;
        justify-content: center !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .logo .logo-text,
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .logo .sidebar-burger-menu,
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .logo .sidebar-burger-menu-close {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .layout-menu {
        padding: 15px 0 !important;
        width: 60px !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-inner {
        width: 60px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-item {
        width: 60px !important;
        margin: 0 auto 4px auto !important;
        text-align: center !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-link {
        width: 60px !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-link .menu-icon {
        margin: 0 auto !important;
        font-size: 22px !important;
        position: static !important;
        display: inline-block !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-link .title,
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-link .count,
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-link.menu-toggle::after,
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-sub,
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-header,
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .menu-title {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    body[sidebar-data-theme="sidebar-hide"] .sidebar-area:not(:hover) .simplebar-track {
        display: none !important;
    }

/* Clock Float Styles */
#clock-float #clk-face::after {
            content:"";position:absolute;z-index:10;inset:0;border-radius:50%;
            width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;
            padding:2px;box-sizing:border-box;
            background:conic-gradient(from -45deg at 50% 50%,rgba(255,255,255,1),rgba(255,255,255,.2) 5% 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,.2) 60% 95%,rgba(255,255,255,1));
            -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            -webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;pointer-events:none;
        }
        #clock-float .clk-number {
            position:absolute;font-size:14px;font-weight:500;
            color:rgba(50,50,50,.9);text-align:center;width:28px;height:18px;
            line-height:18px;z-index:15;pointer-events:none;user-select:none;
        }
        #clock-float .clk-minute-marker {
            position:absolute;width:1px;height:9px;
            background:rgba(80,80,80,.5);top:9px;left:160px;
            transform-origin:center 151px;
        }
        #clock-float-close:hover { background:rgba(200,40,40,.9) !important; }