:root {
            --primary-pink: #FF3B8D;
            --magenta: #D946EF;
            --cyan: #22B8C7;
            --turquoise: #20B8B4;
            --yellow: #FBBF24;
            --orange: #F59E0B;
            --purple: #8B5CF6;
            --bg-main: #FAFAFC;
            --surface-alt: #F8FAFC;
            --sidebar-bg: #FFFDFE;
            --surface: #FFFFFF;
            --soft-bg: #F8FAFC;
            --border: #E2E8F0;
            --text-primary: #171923;
            --text-secondary: #667085;
            --success: #10B981;
            --danger: #F43F5E;
            --font-family: var(--font-family-sans);
        }

        /* ============================================================
           GLOBAL OVERRIDE: DEFAULT STISLA/BOOTSTRAP PRIMARY COLORS
           ============================================================ */
        .custom-control-input:checked ~ .custom-control-label::before {
            border-color: #EC1870 !important;
            background-color: #EC1870 !important;
        }
        .custom-control-input:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 0.2rem rgba(236, 24, 112, 0.25) !important;
        }
        .form-control:focus {
            border-color: #EC1870 !important;
            box-shadow: 0 0 0 0.2rem rgba(236, 24, 112, 0.25) !important;
        }
        /* Bootstrap Datepicker & Daterangepicker Override */
        .datepicker table tr td.today,
        .datepicker table tr td.today:hover,
        .datepicker table tr td.today.disabled,
        .datepicker table tr td.today.disabled:hover {
            background-color: #fde8f0 !important;
            border-color: #EC1870 !important;
            color: #EC1870 !important;
        }
        .datepicker table tr td.active,
        .datepicker table tr td.active:hover,
        .datepicker table tr td.active.disabled,
        .datepicker table tr td.active.disabled:hover,
        .datepicker table tr td.active.today,
        .daterangepicker td.active, 
        .daterangepicker td.active:hover {
            background-color: #EC1870 !important;
            background-image: none !important;
            border-color: transparent !important;
            color: #fff !important;
        }
        /* Select2 Override */
        .select2-container--default .select2-results__option[aria-selected="true"] {
            background-color: #fde8f0 !important;
            color: #EC1870 !important;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected],
        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #EC1870 !important;
            color: white !important;
        }

        /* ============================================================
           GLOBAL KOPITA CARD (RUMAH) DESIGN & EQUAL-HEIGHT MECHANISM
           ============================================================ */
        .kopita-card {
            background: #FFFFFF !important;
            border: 1px solid #E2E8F0 !important;
            border-radius: 14px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            transition: all 0.2s ease-in-out;
            position: relative;
            overflow: hidden;
        }

        /* Universal Equal-Height Row & Card Engine */
        .row.equal-height,
        .row.align-items-stretch,
        .dash-grid-row,
        .row-equal {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: stretch !important;
        }

        .row.equal-height > [class*="col-"],
        .row.equal-height > .col,
        .row.equal-height > .dash-grid-col,
        .row.align-items-stretch > [class*="col-"],
        .row.align-items-stretch > .col,
        .row.align-items-stretch > .dash-grid-col,
        .dash-grid-row > [class*="col-"],
        .dash-grid-row > .col,
        .dash-grid-row > .dash-grid-col,
        .row-equal > [class*="col-"],
        .row-equal > .col,
        .row-equal > .dash-grid-col {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            margin-bottom: 0 !important;
        }

        .row.equal-height > [class*="col-"] > .card,
        .row.equal-height > [class*="col-"] > .kopita-card,
        .row.equal-height > [class*="col-"] > .dash-hero-card,
        .row.equal-height > [class*="col-"] > .dash-action-card,
        .row.equal-height > [class*="col-"] > .dash-kpi-card,
        .row.equal-height > [class*="col-"] > .card-clean,
        .row.align-items-stretch > [class*="col-"] > .card,
        .row.align-items-stretch > [class*="col-"] > .kopita-card,
        .row.align-items-stretch > [class*="col-"] > .dash-hero-card,
        .row.align-items-stretch > [class*="col-"] > .dash-action-card,
        .row.align-items-stretch > [class*="col-"] > .dash-kpi-card,
        .row.align-items-stretch > [class*="col-"] > .card-clean,
        .dash-grid-row > [class*="col-"] > .card,
        .dash-grid-row > [class*="col-"] > .kopita-card,
        .dash-grid-row > [class*="col-"] > .dash-hero-card,
        .dash-grid-row > [class*="col-"] > .dash-action-card,
        .dash-grid-row > [class*="col-"] > .dash-kpi-card,
        .dash-grid-row > [class*="col-"] > .card-clean,
        .row-equal > [class*="col-"] > .card,
        .row-equal > [class*="col-"] > .kopita-card,
        .row-equal > [class*="col-"] > .dash-hero-card,
        .row-equal > [class*="col-"] > .dash-action-card,
        .row-equal > [class*="col-"] > .dash-kpi-card,
        .row-equal > [class*="col-"] > .card-clean,
        .dash-grid-col > .card,
        .dash-grid-col > .kopita-card,
        .dash-grid-col > .dash-hero-card,
        .dash-grid-col > .dash-action-card,
        .dash-grid-col > .dash-kpi-card,
        .dash-grid-col > .card-clean {
            flex: 1 1 100% !important;
            height: 100% !important;
            min-height: 100% !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
            margin-bottom: 0 !important;
        }

        .kopita-card > .card-body,
        .card-clean > .card-body {
            flex: 1 1 auto !important;
            display: flex !important;
            flex-direction: column !important;
        }

        @media (max-width: 767.98px) {
            .dash-grid-row > [class*="col-"]:not(:last-child),
            .dash-grid-row > .dash-grid-col:not(:last-child),
            .row.equal-height > [class*="col-"]:not(:last-child),
            .row.align-items-stretch > [class*="col-"]:not(:last-child) {
                margin-bottom: 16px !important;
            }
        }

        /* Breadcrumb Standardization & Spacing Fixes */
        .breadcrumb {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 6px !important;
        }
        .breadcrumb-item {
            display: flex !important;
            align-items: center !important;
            padding-left: 0 !important;
        }
        .breadcrumb-item + .breadcrumb-item::before {
            content: "/" !important;
            padding-right: 6px !important;
            color: #94A3B8 !important;
        }
        
        /* Fix vertical alignment of breadcrumb with the page title */
        @media (min-width: 768px) {
            .dash-container > .d-flex.align-items-md-center {
                align-items: flex-start !important;
            }
            .dash-container > .d-flex > nav {
                margin-top: 5px !important; /* Align exactly with the h4 text baseline */
            }
        }

        /* ============================================================
           GLOBAL CONTENT TEXT COLOR & VISUAL HIERARCHY SYSTEM
           ============================================================ */

        /* Universal Font Family & Base Text Color */
        body, button, input, select, textarea, .form-control, .form-select, .btn, .dropdown-menu, table, th, td, span:not([class*="fa-"]), div, h1, h2, h3, h4, h5, h6, p, a, label, li, nav {
            font-family: var(--font-family-sans) !important;
        }

        /* 1. Judul Halaman dan Judul Section: #172033, font-weight: 700 */
        .page-title,
        .main-header-title,
        .section-header h1,
        .dash-container h4.fw-bold,
        .dash-container h4,
        h1.page-title,
        .section-header > h1,
        .section-title,
        .parent-title,
        .card-header h4,
        .card-header h5,
        .card-header .card-title,
        .kopita-card-header h4,
        .kopita-card-header h5,
        .modal-title,
        h2,
        .h2-title {
            color: #172033 !important;
            font-weight: 700 !important;
        }

        .page-title,
        .main-header-title,
        .section-header h1,
        .dash-container h4.fw-bold,
        .dash-container h4,
        h1.page-title,
        .section-header > h1 {
            font-size: 28px !important;
            line-height: 1.25 !important;
            letter-spacing: -0.02em !important;
            margin-bottom: 6px !important;
        }

        .section-title,
        .parent-title,
        .card-header h4,
        .card-header h5,
        .card-header .card-title,
        .kopita-card-header h4,
        .kopita-card-header h5,
        .modal-title,
        h2,
        .h2-title {
            font-size: 21px !important;
            line-height: 1.3 !important;
            letter-spacing: -0.015em !important;
        }

        /* 2. Judul Subsection: #1E293B, font-weight: 600 */
        .subsection-title,
        .form-section-title,
        .card-body h5,
        .card-body h6,
        h3,
        .h3-title,
        .card-title:not(.card-header *) {
            font-size: 17px !important;
            font-weight: 600 !important;
            line-height: 1.35 !important;
            color: #1E293B !important;
        }

        /* 3. Label Form & Nama Pengguna / Informasi Utama: #1E293B, font-weight: 600 */
        label:not(.select-card-option):not(.custom-control-label):not(.btn):not([class*="d-"]):not([class*="card"]),
        .form-label,
        .col-form-label,
        .control-label,
        form label:not(.select-card-option):not(.custom-control-label):not(.btn):not([class*="d-"]):not([class*="card"]),
        .child-label,
        .user-name,
        .user-title,
        .main-info,
        .profile-name,
        .account-name,
        .dropdown-item-title {
            font-size: 14px !important;
            font-weight: 600 !important;
            color: #1E293B !important;
            margin-bottom: 8px !important; /* Jarak 8px antara label dengan input */
            display: inline-block !important;
        }

        /* Support for card-like selectable label options */
        label.select-card-option {
            display: flex !important;
            margin-bottom: 0 !important;
        }

        /* 4. Isi Input, Isi Tabel, dan Teks Data: #334155, font-weight: 400 */
        .form-control,
        .form-select,
        .select2-container .select2-selection--single,
        .select2-container .select2-selection--multiple,
        table th,
        table td,
        .dataTables_wrapper,
        .table,
        input[type="text"],
        input[type="number"],
        input[type="email"],
        input[type="password"],
        input[type="date"],
        select,
        textarea,
        .data-text,
        .table th,
        .table td,
        body {
            font-size: 14.5px !important;
            font-weight: 400 !important;
            color: #334155 !important;
        }

        /* 5. Deskripsi, Placeholder, Helper Text, dan Informasi Sekunder: #94A3B8 */
        .page-description,
        .section-description,
        .card-description,
        .section-lead,
        .text-muted,
        p.text-muted,
        .description-text,
        .dash-container p.text-muted,
        .form-text,
        .help-block,
        .helper-text,
        .invalid-feedback,
        .valid-feedback,
        small.text-muted,
        small,
        .text-secondary,
        .secondary-info {
            font-size: 14px !important;
            font-weight: 400 !important;
            color: #94A3B8 !important;
            line-height: 1.5 !important;
        }

        .form-text,
        .help-block,
        .helper-text,
        .invalid-feedback,
        .valid-feedback,
        small.text-muted,
        small {
            font-size: 13px !important;
            margin-top: 4px !important;
        }

        ::placeholder,
        .form-control::placeholder,
        .select2-search__field::placeholder {
            color: #94A3B8 !important;
            opacity: 1 !important;
        }

        /* 6. Link dan Active State: Pink Utama (#EC1870 / #FF3B8D) */
        a.text-primary,
        .text-pink-primary,
        .breadcrumb-item.active {
            color: #EC1870 !important;
        }

        /* ============================================================
           GLOBAL UNIFIED INPUT GROUP SYSTEM (MENYATU & RAPIH)
           ============================================================ */
        .input-group {
            position: relative !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: stretch !important;
            width: 100% !important;
            border-radius: 10px !important;
        }

        .input-group-prepend,
        .input-group-append {
            display: flex !important;
            align-items: stretch !important;
            z-index: 1;
        }

        .input-group-prepend {
            margin-right: -1px !important;
        }

        .input-group-append {
            margin-left: -1px !important;
        }

        .input-group .input-group-text {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 42px !important;
            min-height: 42px !important;
            padding: 0 16px !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            color: #475569 !important;
            background-color: #F8FAFC !important;
            border: 1px solid #CBD5E1 !important;
            transition: all 0.2s ease !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }

        /* Prepend Addon Radius & Border */
        .input-group > .input-group-prepend:first-child > .input-group-text,
        .input-group > .input-group-prepend:first-child > .btn {
            border-top-left-radius: 10px !important;
            border-bottom-left-radius: 10px !important;
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        /* Append Addon Radius & Border */
        .input-group > .input-group-append:last-child > .input-group-text,
        .input-group > .input-group-append:last-child > .btn {
            border-top-right-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        /* Form Control inside Input Group: seamless connection & flat adjoining borders */
        .input-group > .form-control {
            position: relative !important;
            flex: 1 1 auto !important;
            width: 1% !important;
            min-width: 0 !important;
            margin-bottom: 0 !important;
            height: 42px !important;
            z-index: 2;
        }

        /* Flatten corners when preceded by prepend */
        .input-group > .input-group-prepend ~ .form-control,
        .input-group > .form-control:not(:first-child) {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        /* Flatten corners when followed by append */
        .input-group > .form-control:not(:last-child) {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        /* Flatten all corners when sandwiched between prepend and append */
        .input-group > .input-group-prepend ~ .form-control:not(:last-child) {
            border-radius: 0 !important;
        }

        /* Focus synchronization: seamless highlight on the whole input-group */
        .input-group:focus-within {
            z-index: 5 !important;
        }
        .input-group:focus-within > .input-group-prepend > .input-group-text,
        .input-group:focus-within > .input-group-append > .input-group-text {
            border-color: #EC1870 !important;
            color: #EC1870 !important;
            background-color: #FFF0F5 !important;
        }
        .input-group:focus-within > .form-control {
            border-color: #EC1870 !important;
            z-index: 5 !important;
        }


        .nav-pills .nav-link {
            border-radius: 12px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: #334155 !important;
            padding: 10px 16px !important;
            margin-bottom: 4px !important;
        }

        .nav-pills .nav-link.active,
        .nav-pills .show > .nav-link {
            background: linear-gradient(135deg, #FF3B8D, #D91B5C) !important;
            color: #FFFFFF !important;
            box-shadow: 0 4px 14px rgba(255, 59, 141, 0.3) !important;
        }

        /* ============================================================
           DATATABLES FILTER (SEARCH) STYLING
           ============================================================ */
        @media (min-width: 641px) {
            .dataTables_wrapper .row:first-child {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 16px;
            }
            
            .dataTables_wrapper .row:first-child > [class*="col-"] {
                flex: 0 0 auto;
                width: auto;
                max-width: none;
                padding: 0;
            }

            .dataTables_wrapper .dataTables_filter {
                text-align: left !important;
                margin-right: 16px;
            }

            .dataTables_wrapper .dataTables_filter label {
                margin-bottom: 0 !important;
            }

            .dataTables_wrapper .dataTables_filter input {
                min-width: 250px;
            }
        }

        .dataTables_wrapper .dataTables_filter input {
            border-radius: 10px !important;
            height: 38px !important;
            border: 1px solid #CBD5E1 !important;
            padding: 8px 16px 8px 36px !important;
        }



        /* ============================================================
           GLOBAL SPACING & LAYOUT SYSTEM
           ============================================================ */

        /* Jarak 20–24px setelah header section */
        .section-header,
        .page-header-wrapper,
        .dash-container > .d-flex.flex-column.flex-md-row.align-items-md-center.justify-content-between.mb-4 {
            margin-bottom: 22px !important;
        }

        /* Jarak 16px antarkomponen */
        .kopita-card,
        .card,
        .form-group,
        .row.g-3 > div,
        .mb-3 {
            margin-bottom: 16px !important;
        }

        /* Jarak 8px antara label dengan input */
        .form-group > label,
        .form-group > .form-label,
        div > label:not(.select-card-option):not(.custom-control-label):not(.btn):not([class*="d-"]):not([class*="card"]) {
            margin-bottom: 8px !important;
        }

        /* Standard height & styling for form inputs */
        .form-control {
            height: 42px !important;
            border-radius: 10px !important;
            border: 1px solid #CBD5E1 !important;
            padding: 9px 14px !important;
            font-size: 14.5px !important;
            transition: border-color 0.2s ease !important;
            box-shadow: none !important;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #EC1870 !important;
            box-shadow: none !important;
            outline: none !important;
        }

        /* Modern Custom File Input Styling */
        input[type="file"].form-control {
            padding: 0 !important;
            height: 42px !important;
            line-height: 40px !important;
            color: #64748B !important;
            font-size: 13.5px !important;
            cursor: pointer !important;
            overflow: hidden !important;
            background-color: #ffffff !important;
        }

        input[type="file"].form-control::file-selector-button {
            margin: 0 12px 0 0 !important;
            padding: 0 16px !important;
            border: none !important;
            border-right: 1px solid #CBD5E1 !important;
            background-color: #F8FAFC !important;
            color: #334155 !important;
            height: 100% !important;
            font-weight: 600 !important;
            font-size: 13.5px !important;
            cursor: pointer !important;
            transition: all 200ms ease !important;
        }

        input[type="file"].form-control::file-selector-button:hover {
            background-color: #E2E8F0 !important;
            color: #0F172A !important;
        }

        textarea.form-control {
            height: auto !important;
        }

        /* Force Select2 Container to respect parent flex/grid bounds & never overflow */
        .select2-container {
            box-sizing: border-box !important;
        }
        .select2-container.select2,
        .select2-container:not(.select2-container--open) {
            width: 100% !important;
            max-width: 100% !important;
        }
        .select2-container--open:not(.select2) {
            width: auto !important;
            max-width: none !important;
        }
        .select2-dropdown {
            max-width: 100vw !important;
            box-sizing: border-box !important;
        }
        .select2-search--dropdown .select2-search__field {
            box-sizing: border-box !important;
        }
        select.select2-hidden-accessible,
        .select2-hidden-accessible {
            height: 1px !important;
            width: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            border: 0 !important;
            position: absolute !important;
            white-space: nowrap !important;
        }
        .select2-container .select2-selection--single {
            height: 42px !important;
            border-radius: 10px !important;
            border: 1px solid #CBD5E1 !important;
            display: flex !important;
            align-items: center !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 40px !important;
            padding-left: 14px !important;
            padding-right: 30px !important;
            color: #1E293B !important;
            font-size: 14.5px !important;
            font-weight: 400 !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            right: 8px !important;
        }

        /* Global Modal Hierarchy */
        .modal-header {
            padding: 20px 24px !important;
            border-bottom: 1px solid #E2E8F0 !important;
        }
        .modal-title {
            font-size: 20px !important;
            font-weight: 700 !important;
            color: #0F172A !important;
        }
        .modal-body {
            padding: 24px !important;
        }
        .modal-footer {
            padding: 16px 24px !important;
            border-top: 1px solid #E2E8F0 !important;
        }

        /* Preserve FontAwesome Icon Font Family */
        .fa, .fas, .far, .fab, .fal, .fad, [class*="fa-"], [class^="fa-"] {
            font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
            font-weight: 900 !important;
        }

        /* Ambient Gradient Background (#FAFAFC Crisp Milk White Tone) */
        body {
            font-family: var(--font-family-sans) !important;
            background-color: #FAFAFC !important;
            background-image: 
                radial-gradient(circle at top right, rgba(139, 92, 246, 0.05), transparent 32%),
                radial-gradient(circle at bottom left, rgba(255, 59, 141, 0.04), transparent 35%),
                radial-gradient(circle at 50% 50%, rgba(34, 184, 199, 0.02), transparent 45%) !important;
            background-attachment: fixed !important;
            background-size: cover !important;
            min-height: 100vh;
            color: #171923 !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        #app,
        .main-wrapper,
        .main-content {
            background-color: transparent !important;
        }

        /* Clean Enterprise Layout — White Navbar & Modern SaaS Sidebar */
        .main-navbar,
        nav.main-navbar {
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            height: 64px !important;
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            margin: 0 0 24px 0 !important;
            border-radius: 0 !important;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
            border-bottom: 1px solid #E2E8F0 !important;
            padding: 0 28px !important;
            z-index: 800 !important;
            display: flex !important;
            align-items: center !important;
        }

        /* 1. Main Content Layout Responsive Width */
        body:not(.sidebar-mini) .main-content {
            padding-left: 250px !important;
        }

        body.sidebar-mini .main-content {
            padding-left: 78px !important;
        }

        .main-content {
            padding-top: 24px !important;
            padding-right: 0 !important;
            padding-bottom: 70px !important;
            transition: padding-left 0.3s ease !important;
        }

        .main-content > .section {
            padding-left: 24px !important;
            padding-right: 24px !important;
        }

        @media (max-width: 1024px) {
            .main-content,
            body:not(.sidebar-mini) .main-content,
            body.sidebar-mini .main-content {
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 24px !important;
            }
            .main-content > .section {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
            .main-footer {
                left: 0 !important;
            }


            /* Backdrop Overlay when mobile sidebar drawer is open */
            body.sidebar-show .main-wrapper::before {
                content: '' !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                background: rgba(15, 23, 42, 0.45) !important;
                backdrop-filter: blur(4px) !important;
                -webkit-backdrop-filter: blur(4px) !important;
                z-index: 880 !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }

            /* Prevent body pseudo-element overlay from covering sidebar */
            body.sidebar-show::before,
            body.sidebar-show::after {
                display: none !important;
                content: none !important;
                background: transparent !important;
                opacity: 0 !important;
            }
        }

        body.sidebar-mini .main-footer {
            left: 78px !important;
        }

        /* Override Stisla default purple backgrounds in Sidebar-Mini Flyout */
        body.sidebar-mini .main-sidebar .sidebar-menu li ul.dropdown-menu,
        body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu,
        body.sidebar-mini .main-sidebar .sidebar-menu li:hover > ul.dropdown-menu {
            background-color: #FFFFFF !important;
            background: #FFFFFF !important;
        }

        body.sidebar-mini .main-sidebar .sidebar-menu li ul.dropdown-menu li a,
        body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li a,
        body.sidebar-mini .main-sidebar .sidebar-menu li:hover > ul.dropdown-menu li > a {
            background-color: transparent !important;
            background: transparent !important;
            color: #0F172A !important;
        }

        body.sidebar-mini .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover,
        body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li a:hover,
        body.sidebar-mini .main-sidebar .sidebar-menu li:hover > ul.dropdown-menu li:hover > a,
        body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li > a:focus {
            background-color: transparent !important;
            background: transparent !important;
            color: #FF3B8D !important;
        }

        body.sidebar-mini .main-sidebar .sidebar-menu li ul.dropdown-menu li.dropdown.active > a,
        body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li.dropdown.active > a {
            background-color: transparent !important;
            background: transparent !important;
            color: #0F172A !important;
            font-weight: 600 !important;
        }

        body.sidebar-mini .main-sidebar .sidebar-menu li ul.dropdown-menu li.active:not(.dropdown) > a,
        body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li.active:not(.dropdown) > a,
        body.sidebar-mini .main-sidebar .sidebar-menu li ul.dropdown-menu li.active:not(.dropdown) > a:hover,
        body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li.active:not(.dropdown) > a:hover {
            background-color: transparent !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: #FF3B8D !important;
            font-weight: 700 !important;
        }

        .navbar-bg {
            display: none !important;
        }

        /* Clean Header Navbar Right Alignment */
        .main-navbar {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            left: auto !important;
            right: 0 !important;
            padding-left: 24px !important;
            padding-right: 28px !important;
            position: relative !important;
            width: 100% !important;
            background: #FFFFFF !important;
        }

        .main-navbar > div {
            margin-left: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 12px !important;
        }



        /* Global POS & Cart Total Area Container */
        .pos-order-footer,
        .pos-checkout-area,
        .pos-action-container {
            padding: 14px 16px 16px;
            border-top: 1px solid #E2E8F0;
            flex-shrink: 0;
            background: #FFFFFF;
        }

        .pos-summary-card {
            background: #FFFFFF;
            border: 1px solid #E2E8F0;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        }

        .pos-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3px 0;
        }

        .pos-summary-label {
            font-size: 0.85rem;
            color: #64748B;
            font-weight: 500;
        }

        .pos-summary-val {
            font-size: 0.88rem;
            font-weight: 700;
            color: #0F172A;
        }

        .pos-summary-divider {
            height: 1px;
            background: #E2E8F0;
            margin: 8px 0 10px;
            width: 100%;
        }

        .pos-summary-total-row,
        .pos-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 0 0;
        }

        .pos-total-label {
            font-size: 0.95rem;
            font-weight: 700;
            color: #0F172A;
            letter-spacing: -0.01em;
        }

        .pos-total-val {
            font-size: 1.12rem;
            font-weight: 800;
            color: #0F172A;
            letter-spacing: -0.01em;
        }

        /* Ensure dropdown menus & popovers are always on top of tables and export buttons */
        .dropdown-menu,
        .dropdown-menu.show {
            z-index: 99999 !important;
        }