html {
    /* Default browser biasanya 16px. Ubah ke 14px atau 13px untuk mengecilkan semua elemen (karena Bootstrap pakai rem) */
    font-size: 12px !important; 
}
/* ══════════════════════════════════════════════
   Global Brand Color Theme Overrides (#e54b13)
   ══════════════════════════════════════════════ */
:root {
    --bs-primary: #e54b13 !important;
    --bs-primary-rgb: 229, 75, 19 !important;
    --primary: #e54b13 !important;
    --primary-rgb: 229, 75, 19 !important;
    --bs-link-color: #e54b13 !important;
    --bs-link-color-rgb: 229, 75, 19 !important;
    --bs-link-hover-color: #c73e0e !important;
    --bs-link-hover-color-rgb: 199, 62, 14 !important;
}

/* ══════════════════════════════════════════════
   Force Light Mode — hapus semua dark mode styles
   ══════════════════════════════════════════════ */
html, body {
    color-scheme: light only !important;
}

/* Override: paksa atribut data-theme-version ke light secara visual */
[data-theme-version="dark"] {
    color-scheme: light !important;
    background-color: #fff !important;
    color: #333 !important;
}

/* Force primary color for Bootstrap utility classes */
.text-primary {
    color: #e54b13 !important;
}
.bg-primary {
    background-color: #e54b13 !important;
}
.border-primary {
    border-color: #e54b13 !important;
}
.link-primary {
    color: #e54b13 !important;
}
.link-primary:hover, .link-primary:focus {
    color: #c73e0e !important;
}

/* SVG icon compatibility */
svg.text-primary path,
svg .text-primary path {
    fill: #e54b13 !important;
}

/* Spinner border */
.spinner-border.text-primary {
    border-color: #e54b13 !important;
    border-right-color: transparent !important;
}

/* Fix for password field with validation error and eye icon */
/* .form-control.is-invalid {
    background-image: none !important;
}

input[type="password"].form-control {
    padding-right: 2.5rem !important;
}

.mb-4.position-relative .show-pass {
    position: absolute;
    right: 15px;
    top: 43px;
    z-index: 10;
    cursor: pointer;
}

.position-relative .invalid-feedback {
    display: block;
}
 */
.form-control.is-invalid,
.form-select.is-invalid,
select.form-control.is-invalid {
    background-image: none !important;
}

/* Khusus untuk password field, tetap beri padding untuk icon eye */
input[type="password"].form-control.is-invalid,
input[type="password"].form-control {
    padding-right: 45px !important;
}

.bootstrap-select.is-invalid .filter-option,
.input-group.is-invalid .input-group-text {
    color: var(--bs-form-invalid-border-color);
}

.input-group.is-invalid .input-group-text {
    border: 1px solid var(--bs-form-invalid-border-color);
}

.input-group.is-invalid .form-control {
    border: 1px solid var(--bs-form-invalid-border-color);
}

/* === filepond css === */
/* The background color of the filepond drop area and file panel */
[data-theme-version="dark"] .filepond--panel-root {
    background-color: #2c3e50; /* A dark blue-gray */
    border: 2px solid #34495e; /* A slightly darker border */
}

/* The background color of the file and file panel (used when dropping an image) */
[data-theme-version="dark"] .filepond--item-panel {
    background-color: #34495e;
}

/* The text color of the drop label */
[data-theme-version="dark"] .filepond--drop-label {
    color: #ecf0f1; /* Light gray text */
}

/* The underline color for "Browse" button */
[data-theme-version="dark"] .filepond--label-action {
    text-decoration-color: #ecf0f1;
}

/* The text color of the file status and info labels */
[data-theme-version="dark"] .filepond--file-status-main,
[data-theme-version="dark"] .filepond--file-info-main {
    color: #ecf0f1;
}

/* The background color of the action buttons */
[data-theme-version="dark"] .filepond--file-action-button {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    color: white;
}

.filepond--credits {
    display: none !important;
}
/* === filepond css end === */

/* Ensure labels are visible in dark mode */
[data-theme-version="dark"] label,
[data-theme-version="dark"] .form-label,
[data-theme-version="dark"] .form-control {
    color: #fff !important;
}

/* Invert Logo in Dark Mode for visibility */
[data-theme-version="dark"] .brand-logo img {
    filter: brightness(0) invert(1);
}

/* Fix text-black in dark mode */
[data-theme-version="dark"] .text-black {
    color: #fff !important;
}

/* ══════════════════════════════════════════════
   Card Header & Card Surfaces - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .card-header.bg-light {
    background-color: #1e2a3a !important;
    border-bottom: 1px solid #2d3d50 !important;
}

[data-theme-version="dark"] .card {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .card-body {
    background-color: transparent;
}

[data-theme-version="dark"] .card-footer {
    background-color: transparent !important;
    border-color: #2d3d50 !important;
}

/* ── Global bg-light Dark Override ── */
[data-theme-version="dark"] .bg-light {
    background-color: #1e2a3a !important;
}

[data-theme-version="dark"] .border {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .border-top {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .border-dashed {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .form-control.bg-light[readonly] {
    background-color: #1e2a3a !important;
    color: #dee2e6 !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .form-check-input {
    background-color: #1a2332 !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .form-check-input:checked {
    background-color: #e54b13 !important;
    border-color: #e54b13 !important;
}

/* ══════════════════════════════════════════════
   Policy Content Fade Overlay
   ══════════════════════════════════════════════ */
.policy-content-fade {
    height: 30px;
    background: linear-gradient(to bottom, transparent 0%, #fff 100%);
}

[data-theme-version="dark"] .policy-content-fade {
    background: linear-gradient(to bottom, transparent 0%, #1a2332 100%) !important;
}

/* ══════════════════════════════════════════════
   Text Utilities - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .card-header .text-primary {
    color: #6ea8fe !important;
}

[data-theme-version="dark"] .text-dark {
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .text-muted {
    color: #8d9bae !important;
}

[data-theme-version="dark"] .fw-bold.text-dark,
[data-theme-version="dark"] .card-title.text-primary {
    color: #6ea8fe !important;
}

/* ══════════════════════════════════════════════
   Table - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .table-light,
[data-theme-version="dark"] .table-light th {
    background-color: #1e2a3a !important;
    color: #8d9bae !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .table {
    color: #dee2e6 !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .table td {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .table thead th {
    background-color: #1e2a3a !important;
    color: #8d9bae !important;
    border-color: #2d3d50 !important;
}

/* ══════════════════════════════════════════════
   Input Group & Form Elements - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .input-group-text.bg-light {
    background-color: #1e2a3a !important;
    border-color: #2d3d50 !important;
    color: #8d9bae !important;
}

[data-theme-version="dark"] .input-group-text {
    border-color: #2d3d50 !important;
    background-color: #1e2a3a !important;
    color: #8d9bae !important;
}

[data-theme-version="dark"] .form-select,
[data-theme-version="dark"] select.form-control {
    background-color: #1a2332 !important;
    color: #dee2e6 !important;
    border-color: #2d3d50 !important;
}

/* ══════════════════════════════════════════════
   Badges & Indicators - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .badge.bg-light {
    background-color: #1e2a3a !important;
    color: #8d9bae !important;
}

[data-theme-version="dark"] .bg-opacity-10 {
    --bs-bg-opacity: 0.15 !important;
}

/* ══════════════════════════════════════════════
   Coverage Cards - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .coverage-main-card,
[data-theme-version="dark"] .coverage-additional-card,
[data-theme-version="dark"] .coverage-claim-card {
    background-color: #1a2332 !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .coverage-main-card.selected,
[data-theme-version="dark"] .coverage-additional-card.selected {
    border-color: #6ea8fe !important;
    background-color: rgba(110, 168, 254, 0.08) !important;
}

[data-theme-version="dark"] .coverage-claim-card.selected {
    border-color: #ffca2c !important;
    background-color: rgba(255, 202, 44, 0.08) !important;
}

/* ══════════════════════════════════════════════
   Modal - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .modal-content {
    background-color: #1a2332 !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .modal-header {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .modal-header.bg-light {
    background-color: #1e2a3a !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .modal-title {
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .modal-body {
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .modal-footer {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .modal-footer.bg-light {
    background-color: #1e2a3a !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme-version="dark"] .modal-content .text-dark {
    color: #dee2e6 !important;
}

/* ══════════════════════════════════════════════
   Buttons - Dark Mode (outline variants)
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .btn-light {
    background-color: #1e2a3a !important;
    border-color: #2d3d50 !important;
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .btn-light:hover {
    background-color: #253445 !important;
}

/* ══════════════════════════════════════════════
   Pickadate Datepicker - Dark Mode
   ══════════════════════════════════════════════ */
/* [data-theme-version="dark"] .picker__holder {
    background-color: #1a2332 !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .picker__header {
    background-color: #1e2a3a !important;
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .picker__month,
[data-theme-version="dark"] .picker__year {
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .picker__weekday {
    color: #6ea8fe !important;
}

[data-theme-version="dark"] .picker__day {
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .picker__day:hover {
    background-color: #253445 !important;
    color: #fff !important;
}

[data-theme-version="dark"] .picker__day--today {
    color: #6ea8fe !important;
}

[data-theme-version="dark"] .picker__day--selected,
[data-theme-version="dark"] .picker__day--selected:hover,
[data-theme-version="dark"] .picker__day--highlighted {
    background-color: #6ea8fe !important;
    color: #fff !important;
}

[data-theme-version="dark"] .picker__day--disabled,
[data-theme-version="dark"] .picker__day--outfocus {
    color: #3d4f63 !important;
}

[data-theme-version="dark"] .picker__nav--prev,
[data-theme-version="dark"] .picker__nav--next {
    color: #8d9bae !important;
}

[data-theme-version="dark"] .picker__nav--prev:hover,
[data-theme-version="dark"] .picker__nav--next:hover {
    background-color: #253445 !important;
    color: #fff !important;
}

[data-theme-version="dark"] .picker__footer,
[data-theme-version="dark"] .picker__button--today,
[data-theme-version="dark"] .picker__button--clear,
[data-theme-version="dark"] .picker__button--close {
    color: #8d9bae !important;
    background-color: transparent !important;
}

[data-theme-version="dark"] .picker__button--today:hover,
[data-theme-version="dark"] .picker__button--clear:hover,
[data-theme-version="dark"] .picker__button--close:hover {
    color: #6ea8fe !important;
    background-color: #253445 !important;
}

[data-theme-version="dark"] .picker__table td {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .picker__box {
    background-color: #1a2332 !important;
    border-color: #2d3d50 !important;
} */

/* ══════════════════════════════════════════════
   Quill Editor - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .ql-toolbar.ql-snow {
    background-color: #1e2a3a !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .ql-container.ql-snow {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .ql-editor {
    background-color: #1a2332 !important;
    color: #dee2e6 !important;
}

[data-theme-version="dark"] .ql-editor.ql-blank::before {
    color: #5a6d82 !important;
}

[data-theme-version="dark"] .ql-snow .ql-stroke {
    stroke: #8d9bae !important;
}

[data-theme-version="dark"] .ql-snow .ql-fill {
    fill: #8d9bae !important;
}

[data-theme-version="dark"] .ql-snow .ql-picker-label {
    color: #8d9bae !important;
}

/* ══════════════════════════════════════════════
   Selectpicker borders - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .bootstrap-select .dropdown-toggle {
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .form-control.border-start-0 {
    border-left-color: transparent !important;
}

[data-theme-version="dark"] .input-group-text.border-end-0 {
    border-right-color: transparent !important;
}

/* ══════════════════════════════════════════════
   Tooltip & Popover - Dark Mode
   ══════════════════════════════════════════════ */
[data-theme-version="dark"] .tooltip-inner {
    background-color: #e9ecef !important;
    color: #1a2332 !important;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme-version="dark"] .bs-tooltip-top .tooltip-arrow::before,
[data-theme-version="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #e9ecef !important;
}

[data-theme-version="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
[data-theme-version="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #e9ecef !important;
}

[data-theme-version="dark"] .bs-tooltip-start .tooltip-arrow::before,
[data-theme-version="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #e9ecef !important;
}

[data-theme-version="dark"] .bs-tooltip-end .tooltip-arrow::before,
[data-theme-version="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #e9ecef !important;
}

[data-theme-version="dark"] .popover {
    background-color: #1e2a3a !important;
    border-color: #2d3d50 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme-version="dark"] .popover-header {
    background-color: #1a2332 !important;
    color: #dee2e6 !important;
    border-color: #2d3d50 !important;
}

[data-theme-version="dark"] .popover-body {
    color: #b0bec5 !important;
}

[data-theme-version="dark"] .bs-popover-top > .popover-arrow::after,
[data-theme-version="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: #1e2a3a !important;
}

[data-theme-version="dark"] .bs-popover-bottom > .popover-arrow::after,
[data-theme-version="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: #1e2a3a !important;
}

/* ══════════════════════════════════════════════
   Sidebar — Primary Color (#e54b13)
   ══════════════════════════════════════════════ */

/* Background sidebar utama */
.deznav {
    background-color: #ff5e1a !important;
}

/* Nav header (logo area) */
.nav-header {
    background-color: #ff5e1a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Hamburger lines */
.nav-header .hamburger .line {
    background-color: #ffffff !important;
}

/* Wrapper li menu - geser seluruh blok ke kanan agar tidak menempel di tepi kiri */
.deznav .metismenu > li {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 5px !important; /* Beri sedikit jarak antar menu */
}

/* Metismenu - semua item nav */
.deznav .metismenu > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    padding: 12px 20px !important; /* Jarak teks ke tepi kotak highlight */
    border-radius: 10px !important; /* Membuat sudut highlight membulat */
}

/* Icon di sidebar */
.deznav .metismenu > li > a i,
.deznav .metismenu > li > a .flaticon-381-networking,
.deznav .metismenu > li > a [class^="flaticon-"],
.deznav .metismenu > li > a [class*=" flaticon-"] {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Nav text */
.deznav .metismenu .nav-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Hover state untuk menu utama */
.deznav .metismenu > li > a:hover,
.deznav .metismenu > li:hover > a {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
}

.deznav .metismenu > li > a:hover i,
.deznav .metismenu > li > a:hover .nav-text,
.deznav .metismenu > li:hover > a i,
.deznav .metismenu > li:hover > a .nav-text {
    color: #ffffff !important;
}

/* Active state — menu utama */
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li.mm-active > a:hover {
    background-color: rgba(0, 0, 0, 0.20) !important;
    color: #ffffff !important;
}

.deznav .metismenu > li.mm-active > a i,
.deznav .metismenu > li.mm-active > a .nav-text {
    color: #ffffff !important;
}

/* Submenu (dropdown dalam sidebar) */
.deznav .metismenu ul {
    background-color: transparent !important; /* Hilangkan background default ul agar menyatu dengan background sidebar */
}

.deznav .metismenu ul li a {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 10px 20px 10px !important;
    border-radius: 10px !important;
}

.deznav .metismenu ul li a:hover {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.10) !important;
}

/* Active item di submenu */
.deznav .metismenu ul li a.mm-active,
.deznav .metismenu ul li.mm-active > a {
    color: #ffffff !important;
    font-weight: 600;
}

/* Arrow expand/collapse pada has-arrow */
.deznav .metismenu .has-arrow:after {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.deznav .metismenu .mm-active > .has-arrow:after {
    border-color: #ffffff !important;
}

/* Scrollbar sidebar */
.deznav-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Dark mode — tetap gunakan primary */
[data-theme-version="dark"] .deznav {
    background-color: #ff5e1a !important;
}

[data-theme-version="dark"] .nav-header {
    background-color: #ff5e1a !important;
}

[data-theme-version="dark"] .deznav .metismenu > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme-version="dark"] .deznav .metismenu ul {
    background-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme-version="dark"] .deznav .metismenu ul li a {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ══════════════════════════════════════════════
   Header / Navbar — Primary Color (#e54b13)
   ══════════════════════════════════════════════ */

/* Background header */
.header {
    background-color: #ff5e1a !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.header .header-content {
    background-color: transparent !important;
}

/* Judul halaman di header (dashboard_bar) */
.header .dashboard_bar {
    color: #ffffff !important;
    font-weight: 600;
}

/* Icon-icon di header (bell, sun, moon) */
.header .nav-link,
.header .nav-link .fas,
.header .nav-link .far,
.header .nav-link svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff;
}

/* Bell/notification icon SVG */
.header .nav-link svg path {
    fill: #ffffff !important;
}

/* Username & email di header-profile */
.header .header-info .text-body,
.header .header-info strong {
    color: #ffffff !important;
}

.header .header-info p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Hover state icon di header */
.header .nav-link:hover .fas,
.header .nav-link:hover .far {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Pulse indicator notifikasi */
.header .pulse-css {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.4) !important;
}

/* Dark mode — tetap gunakan primary */
[data-theme-version="dark"] .header {
    background-color: #ff5e1a !important;
    border-bottom: none !important;
}

[data-theme-version="dark"] .header .nav-link,
[data-theme-version="dark"] .header .dashboard_bar {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════
   btn-link — Konsisten dengan Primary (#e54b13)
   ══════════════════════════════════════════════ */
.btn-link {
    color: #e54b13 !important;
    text-decoration: none;
}

.btn-link:hover {
    color: #c73e0e !important;
    text-decoration: underline !important;
}

/* ══════════════════════════════════════════════
   Button hover — font color tetap putih
   ══════════════════════════════════════════════ */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #ffffff !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff !important;
}

/* Bootstrap utility hover override */
.btn:hover,
.btn:focus {
    color: inherit;
}

/* ══════════════════════════════════════════════
   Content Area — warna pudar berbasis primary
   ══════════════════════════════════════════════ */
.content-body {
    background-color: #fdf1ec !important;
}

/* Page wrapper utama */
#main-wrapper {
    background-color: #fdf1ec !important;
}

/* ══════════════════════════════════════════════
   Footer — kontras dengan warna baru
   ══════════════════════════════════════════════ */
.footer {
    background-color: transparent !important;
    border-top: none !important;
}

.footer .copyright p {
    color: #8d9bae !important;
}

.footer .copyright p a {
    color: #e54b13 !important;
}

.footer .copyright p a:hover {
    color: #c73e0e !important;
    text-decoration: underline;
}

/* ══════════════════════════════════════════════
   Nav Header Logo — Full vs Compact Toggle
   ══════════════════════════════════════════════ */

@media (min-width: 1024px) {
    /* Saat sidebar Terbuka (Full) — Tanpa kelas .menu-toggle */
    #main-wrapper:not(.menu-toggle) .nav-header .logo-abbr {
        display: none !important;
    }

    #main-wrapper:not(.menu-toggle) .nav-header .brand-title {
        display: block !important;
        max-width: 160px !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    #main-wrapper:not(.menu-toggle) .nav-header .brand-logo {
        justify-content: center !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Saat sidebar Tertutup (Compact) — Dengan kelas .menu-toggle */
    #main-wrapper.menu-toggle .nav-header .logo-abbr {
        display: block !important;
        max-width: 42px !important;
        height: auto !important;
    }

    #main-wrapper.menu-toggle .nav-header .brand-title {
        display: none !important;
    }

    #main-wrapper.menu-toggle .nav-header .brand-logo {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 1023px) {
    /* Di layar mobile/tablet, paksa selalu tampilkan logo compact */
    .nav-header .logo-abbr {
        display: block !important;
        max-width: 40px !important;
        height: auto !important;
    }
    .nav-header .brand-title {
        display: none !important;
    }
    .nav-header .brand-logo {
        justify-content: center !important;
        padding: 0 !important;
    }
}

/* ══════════════════════════════════════════════
   Preloader / Page Loader Orange Theme Overrides
   ══════════════════════════════════════════════ */
#preloader {
    background-color: #ff5e1a !important; /* Orange background */
}

.sk-three-bounce {
    background-color: #ff5e1a !important; /* Orange background */
}

.sk-three-bounce .sk-child {
    background-color: #ffffff !important; /* White bounce dots for contrast */
}

/* Override dark theme loader settings as well to maintain consistency */
[data-theme-version="dark"] #preloader {
    background-color: #ff5e1a !important;
}

[data-theme-version="dark"] .sk-three-bounce {
    background-color: #ff5e1a !important;
}

[data-theme-version="dark"] .sk-three-bounce .sk-child {
    background-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5) !important;
}