/* ===================================================================
   Liquid glass
   Lapisan permukaan untuk seluruh aplikasi. Warnanya diambil dari token
   --intra-* / --bs-* yang sudah ada, jadi mode terang dan gelap ikut
   otomatis dan tidak ada warna baru yang diperkenalkan.

   Dua tingkat permukaan, sengaja dibedakan:
   - Melayang (dropdown, modal, sidebar, offcanvas, toast): blur asli,
     karena ada isi halaman di belakangnya yang memang perlu diburamkan.
   - Datar (kartu): hanya tampilan kaca tanpa
     backdrop-filter. Satu halaman bisa memuat puluhan kartu, dan blur
     sebanyak itu membuat gulir tersendat di laptop kelas ringan.
   =================================================================== */

html.light-style {
    --lg-surface: color-mix(in srgb, var(--intra-surface) 76%, transparent);
    --lg-surface-solid: var(--intra-surface);
    --lg-card: color-mix(in srgb, var(--intra-surface) 86%, transparent);
    --lg-edge: color-mix(in srgb, #fff 46%, var(--intra-border));
    --lg-sheen: rgba(255, 255, 255, 0.55);
    --lg-sheen-soft: rgba(255, 255, 255, 0.16);
    --lg-blur: blur(20px) saturate(1.6);
}

html.dark-style {
    --lg-surface: color-mix(in srgb, var(--intra-surface) 72%, transparent);
    --lg-surface-solid: var(--intra-surface);
    --lg-card: color-mix(in srgb, var(--intra-surface) 84%, transparent);
    --lg-edge: color-mix(in srgb, #fff 14%, var(--intra-border));
    --lg-sheen: rgba(255, 255, 255, 0.14);
    --lg-sheen-soft: rgba(255, 255, 255, 0.05);
    --lg-blur: blur(22px) saturate(1.5);
}

/* -------------------------------------------------------------------
   Latar ambien
   Kaca hanya terbaca kalau ada sesuatu di belakangnya. Latar halaman
   yang rata membuat permukaan tembus terlihat seperti kartu pudar,
   jadi diberi semburat lembut yang tidak ikut tergulir.
   ------------------------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(62rem 34rem at 6% -8%, rgba(var(--bs-primary-rgb), 0.15), transparent 60%),
        radial-gradient(52rem 30rem at 98% 2%, rgba(var(--intra-accent-teal-rgb, var(--bs-secondary-rgb)), 0.12), transparent 58%),
        radial-gradient(46rem 28rem at 50% 110%, rgba(var(--bs-primary-rgb), 0.10), transparent 60%);
}

/* Pembungkus tata letak diberi latar padat oleh pdsi.css, sehingga
   semburat di atas akan tertutup. Di sini dibuat tembus; warna dasarnya
   tetap datang dari body. */
html.light-style .layout-wrapper,
html.light-style .layout-page,
html.light-style .content-wrapper,
html.dark-style .layout-wrapper,
html.dark-style .layout-page,
html.dark-style .content-wrapper {
    background-color: transparent !important;
}

html.dark-style body::before {
    background:
        radial-gradient(62rem 34rem at 6% -8%, rgba(var(--bs-primary-rgb), 0.28), transparent 60%),
        radial-gradient(52rem 30rem at 98% 2%, rgba(var(--intra-accent-teal-rgb, var(--bs-secondary-rgb)), 0.18), transparent 58%),
        radial-gradient(46rem 28rem at 50% 110%, rgba(var(--bs-primary-rgb), 0.16), transparent 60%);
}

/* -------------------------------------------------------------------
   Permukaan melayang
   ------------------------------------------------------------------- */
.modal-content,
.offcanvas,
.toast,
.popover {
    background: var(--lg-surface) !important;
    border: 1px solid var(--lg-edge) !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    box-shadow:
        0 24px 60px rgba(var(--intra-shadow-rgb), 0.18),
        inset 0 1px 0 var(--lg-sheen),
        inset 0 -1px 0 var(--lg-sheen-soft) !important;
}

.modal-content,
.offcanvas {
    border-radius: 1.15rem !important;
}

.toast,
.popover {
    border-radius: 0.9rem !important;
}

/* Latar gelap bawaan modal terlalu pekat untuk permukaan kaca. */
.modal-backdrop.show {
    opacity: 0.32;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* Sidebar ikut melayang di atas latar ambien. */
#layout-menu.bg-menu-theme {
    background: var(--lg-surface) !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border-right: 1px solid var(--lg-edge) !important;
    box-shadow: inset -1px 0 0 var(--lg-sheen-soft) !important;
}

/* -------------------------------------------------------------------
   Permukaan datar
   Tanpa backdrop-filter, tapi tetap tembus sedikit supaya semburat
   latar terbaca, plus garis sorot tipis di tepi atas.
   ------------------------------------------------------------------- */
.card {
    background: var(--lg-card);
    border: 1px solid var(--lg-edge);
    border-radius: 1rem;
    box-shadow:
        0 10px 30px rgba(var(--intra-shadow-rgb), 0.07),
        inset 0 1px 0 var(--lg-sheen);
}

/* Kartu berwarna sengaja padat; jangan diganggu. */
.card[class*="bg-"],
.card[class*="text-bg-"],
.card.bg-transparent {
    box-shadow: none;
}

/* Kartu di dalam permukaan kaca lain tidak boleh menumpuk transparansi,
   nanti teksnya jadi pudar. */
.modal-content .card,
.offcanvas .card {
    background: var(--lg-surface-solid);
    box-shadow: none;
}

/* Bagian dalam kartu tidak perlu ikut tembus, cukup jernih. */
.card>.card-header,
.card>.card-footer {
    background: transparent;
    border-color: var(--intra-divider);
}

/* -------------------------------------------------------------------
   Cadangan
   ------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .modal-content,
    .offcanvas,
    .toast,
    .popover,
    #layout-menu.bg-menu-theme {
        background: var(--lg-surface-solid) !important;
    }
}

/* Pengguna yang meminta transparansi dikurangi, lewat setelan sistem
   maupun lewat panel aksesibilitas aplikasi. */
@media (prefers-reduced-transparency: reduce) {

    body::before {
        display: none;
    }

    .modal-content,
    .offcanvas,
    .toast,
    .popover,
    #layout-menu.bg-menu-theme,
    .card {
        background: var(--lg-surface-solid) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

html.intra-a11y-reduce-transparency body::before {
    display: none;
}

html.intra-a11y-reduce-transparency .modal-content,
html.intra-a11y-reduce-transparency .offcanvas,
html.intra-a11y-reduce-transparency .toast,
html.intra-a11y-reduce-transparency .popover,
html.intra-a11y-reduce-transparency #layout-menu.bg-menu-theme,
html.intra-a11y-reduce-transparency .card {
    background: var(--lg-surface-solid) !important;
}

/* Kontras tinggi menuntut tepi dan latar yang tegas, bukan berlapis. */
html.intra-a11y-high-contrast body::before {
    display: none;
}