/* ==========================================================================
   Tema Glassmorphism
   Aktif bila <body data-layout-mode="dark" data-theme="glass" data-float="1">.
   - Warna dasar tema gelap sudah di-retint ke indigo di theme-glass.css (auto-generated).
   - Latar: gradien warna-warni tetap (fixed). Panel: putih transparan.
   - Blur (backdrop-filter) HANYA di elemen melayang (topbar, sidebar, footer, modal,
     dropdown, bar sticky). Card tidak di-blur: di atas gradien halus blur tidak
     terlihat bedanya, dan backdrop-filter di card bisa merusak elemen position:fixed
     di dalamnya + berat untuk halaman dengan banyak card.
   ========================================================================== */

body[data-theme=glass] {
    --dk-bg: #0d0e1c;
    --dk-card: rgba(255, 255, 255, .06);
    --dk-surface: rgba(255, 255, 255, .09);
    --dk-border: rgba(255, 255, 255, .12);
    --dk-input: rgba(255, 255, 255, .06);
    --dk-disabled: rgba(255, 255, 255, .03);
    --dk-hold-1: rgba(255, 255, 255, .04);
    --dk-hold-2: rgba(255, 255, 255, .06);
    --dk-border-strong: rgba(255, 255, 255, .22);
    --dk-thead: rgba(255, 255, 255, .08);
    --dk-thead-border: rgba(255, 255, 255, .12);
    --dk-thead-text: #e6e7f0;

    --dk-sticky: rgba(26, 28, 58, .86);

    --glass-chrome: rgba(22, 24, 50, .55);
    --glass-pop: rgba(26, 28, 58, .86);
    --glass-blur: blur(18px) saturate(160%);
    --float-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

/* Latar gradien warna-warni */
body[data-layout-mode=dark][data-theme=glass] {
    background:
        radial-gradient(40% 50% at 12% 18%, rgba(124, 58, 237, .55), transparent 70%),
        radial-gradient(35% 45% at 88% 12%, rgba(14, 165, 233, .42), transparent 70%),
        radial-gradient(45% 55% at 78% 88%, rgba(219, 39, 119, .38), transparent 70%),
        radial-gradient(40% 50% at 18% 92%, rgba(16, 185, 129, .22), transparent 70%),
        #0d0e1c;
    background-attachment: fixed;
}

html:has(body[data-theme=glass]) {
    background-color: #0d0e1c;
}

/* --------------------------------------------------------------------------
   Elemen melayang: kaca buram
   -------------------------------------------------------------------------- */
/* Sidebar sudah punya transform (head-css), jadi blur langsung di elemennya aman */
body[data-layout-mode=dark][data-theme=glass] .vertical-menu {
    background: var(--glass-chrome) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: rgba(255, 255, 255, .14) !important;
}

/* Topbar & footer: blur dipasang di ::before. backdrop-filter langsung di elemennya
   akan mengurung offcanvas fullscreen (position:fixed) yang ada di dalam topbar. */
body[data-layout-mode=dark][data-theme=glass] #page-topbar,
body[data-layout-mode=dark][data-theme=glass] .footer {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .14) !important;
    isolation: isolate;
}

body[data-layout-mode=dark][data-theme=glass] #page-topbar::before,
body[data-layout-mode=dark][data-theme=glass] .footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass-chrome);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    pointer-events: none;
}

body[data-layout-mode=dark][data-theme=glass] .vertical-menu .navbar-brand-box {
    background: transparent !important;
}

body[data-layout-mode=dark][data-theme=glass] .modal-content,
body[data-layout-mode=dark][data-theme=glass] .offcanvas,
body[data-layout-mode=dark][data-theme=glass] .dropdown-menu,
body[data-layout-mode=dark][data-theme=glass] .choices__list--dropdown,
body[data-layout-mode=dark][data-theme=glass] .choices__list[aria-expanded],
body[data-layout-mode=dark][data-theme=glass] .select2-dropdown,
body[data-layout-mode=dark][data-theme=glass] .swal2-popup,
body[data-layout-mode=dark][data-theme=glass] .sticky-save-bar,
body[data-layout-mode=dark][data-theme=glass] .detail-sticky-bar,
body[data-layout-mode=dark][data-theme=glass] .mobile-checkout-bar,
body[data-layout-mode=dark][data-theme=glass] .eo-action-bar,
body[data-layout-mode=dark][data-theme=glass] .floating-review-bar,
body[data-layout-mode=dark][data-theme=glass] .floating-actions,
body[data-layout-mode=dark][data-theme=glass] #filterMenu {
    background: var(--glass-pop) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: rgba(255, 255, 255, .14) !important;
}

/* --------------------------------------------------------------------------
   Card & permukaan: putih transparan (tanpa blur)
   -------------------------------------------------------------------------- */
body[data-layout-mode=dark][data-theme=glass] .card {
    background-color: var(--dk-card) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
}

body[data-layout-mode=dark][data-theme=glass] .card-header,
body[data-layout-mode=dark][data-theme=glass] .card-footer {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

body[data-layout-mode=dark][data-theme=glass] .form-control,
body[data-layout-mode=dark][data-theme=glass] .form-select {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #e0e1e7;
}

body[data-layout-mode=dark][data-theme=glass] .form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}

body[data-layout-mode=dark][data-theme=glass] .input-group-text {
    background-color: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .14);
}

body[data-layout-mode=dark][data-theme=glass] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
    --bs-table-border-color: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .10);
}

body[data-layout-mode=dark][data-theme=glass] .table > :not(caption) > * > * {
    border-color: rgba(255, 255, 255, .10);
}

/* Belang & hover tabel: tipis saja di atas latar kaca */
body[data-layout-mode=dark][data-theme=glass] .table-striped > tbody > tr:nth-of-type(odd),
body[data-layout-mode=dark][data-theme=glass] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, .035);
    background-color: transparent;
}

body[data-layout-mode=dark][data-theme=glass] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(255, 255, 255, .07);
}

/* --------------------------------------------------------------------------
   Menu sidebar: pill kaca
   -------------------------------------------------------------------------- */
body[data-theme=glass] #sidebar-menu ul li a:hover {
    background-color: rgba(255, 255, 255, .06);
}

body[data-theme=glass] #sidebar-menu > ul > li.mm-active > a {
    background-color: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    color: #fff !important;
}

body[data-theme=glass] #sidebar-menu ul.sub-menu li.mm-active > a {
    background-color: transparent !important;
    color: #f0f1f8 !important;
}

body[data-theme=glass] #sidebar-menu ul.sub-menu li a.active:not(.has-arrow) {
    background-color: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}

body[data-theme=glass] #sidebar-menu ul.sub-menu li.mm-active > a::before,
body[data-theme=glass] #sidebar-menu ul.sub-menu li a.active::before {
    background-color: #fff !important;
    border-color: #fff !important;
}

/* Browser tanpa backdrop-filter: buat lebih pekat supaya tetap terbaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body[data-theme=glass] {
        --glass-chrome: rgba(22, 24, 50, .94);
        --glass-pop: rgba(26, 28, 58, .97);
    }
}