/* ==========================================================================
   V29 — Lapisan Efek (FX) — VERSI HEMAT DAYA
   Tampilan tetap sama, namun seluruh animasi tak berujung (aurora, kilau,
   denyut) dan efek blur berat dihilangkan. Inilah penyebab utama kipas
   perangkat berdengung, karena browser menggambar ulang layar terus-menerus
   walau pengguna diam. Efek kini hanya muncul saat disentuh/di-hover.
   ========================================================================== */
:root{
  --fx-glass:color-mix(in srgb,#fff 72%,transparent);
  --fx-glass-brd:color-mix(in srgb,var(--pos-primary) 16%,transparent);
  --fx-glow:color-mix(in srgb,var(--pos-primary) 45%,transparent);
  --fx-glow-2:color-mix(in srgb,var(--pos-accent) 45%,transparent);
  --fx-speed:.25s;
}

/* ---------- 1. Latar aurora (statis, tanpa animasi & tanpa blur filter) ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:
    radial-gradient(38rem 38rem at 22% 18%,color-mix(in srgb,var(--pos-primary) 18%,transparent),transparent 62%),
    radial-gradient(34rem 34rem at 78% 26%,color-mix(in srgb,var(--pos-accent) 16%,transparent),transparent 62%),
    radial-gradient(42rem 42rem at 52% 92%,color-mix(in srgb,var(--pos-primary) 14%,transparent),transparent 65%);
}

/* ---------- 2. Kartu (tanpa backdrop-filter yang memberatkan GPU) ---------- */
.card{
  position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,#fff 96%,transparent),color-mix(in srgb,#fff 90%,transparent));
  border:1px solid var(--fx-glass-brd);
}
.card-header{position:relative;overflow:hidden;}
.card-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--fx-glow),var(--fx-glow-2),transparent);
}

/* ---------- 3. Kartu statistik (aura statis) ---------- */
.stat-card{overflow:hidden;}
.stat-card::after{
  content:"";position:absolute;width:12rem;height:12rem;right:-4.5rem;top:-5.5rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--pos-accent) 14%,transparent),transparent 70%);
}
.stat-card .stat-value{
  background:linear-gradient(100deg,var(--pos-primary),var(--pos-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 4. Tombol ---------- */
.btn{position:relative;}
.btn-primary:hover{filter:brightness(1.05);}

/* ---------- 5. Topbar ---------- */
.app-topbar{position:sticky;overflow:visible;}
.app-topbar > *{position:relative;z-index:1;}

/* ---------- 6. Sidebar ---------- */
@media (min-width:992px){ .app-sidebar{position:sticky;} }
.app-nav .nav-link.active::before{box-shadow:0 0 10px var(--fx-glow-2);}
.app-nav .nav-link.active{background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(255,255,255,.06));}
.app-nav .nav-link i{transition:transform .2s ease;}
.app-nav .nav-link:hover i{transform:scale(1.12);}
.app-nav .sub-menu .dropdown-item:hover{background:linear-gradient(90deg,rgba(255,255,255,.16),transparent);}

/* ---------- 7. Tabel ---------- */
.table-hover tbody tr:hover{background:color-mix(in srgb,var(--pos-primary) 7%,transparent) !important;}

/* ---------- 8. Produk kasir ---------- */
.product-tile{position:relative;overflow:hidden;}
.product-tile:hover{border-color:var(--fx-glow);}

/* ---------- 9. Login ---------- */
.login-card{
  background:linear-gradient(180deg,color-mix(in srgb,#fff 96%,transparent),color-mix(in srgb,#fff 90%,transparent));
  border:1px solid rgba(255,255,255,.55);
}

/* ---------- 10. Muncul saat digulir (dipicu JS) ---------- */
.fx-reveal{opacity:0;transform:translateY(12px);}
.fx-reveal.fx-in{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease;}

/* ---------- 11. Bilah gulir & seleksi bertema ---------- */
::selection{background:color-mix(in srgb,var(--pos-primary) 30%,transparent);}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--pos-primary) 45%,transparent) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--pos-primary),var(--pos-accent));border-radius:9px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- 12. Indikator muat halaman ---------- */
#fxTopbarProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--pos-primary),var(--pos-accent));
  transition:width .2s ease,opacity .25s ease;}

/* ---------- 13. Tombol naik ke atas ---------- */
#fxToTop{position:fixed;right:1rem;bottom:1rem;z-index:1050;width:42px;height:42px;border:0;border-radius:50%;
  display:grid;place-items:center;color:#fff;cursor:pointer;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,var(--pos-primary),var(--pos-accent));box-shadow:0 8px 18px var(--fx-glow);
  transition:opacity .25s ease;}
#fxToTop.show{opacity:1;pointer-events:auto;}
#fxToTop:hover{filter:brightness(1.08);}

/* ---------- 14. Mode gelap ---------- */
body.theme-dark .card,html[data-bs-theme="dark"] .card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border-color:rgba(255,255,255,.10);}
body.theme-dark .login-card,html[data-bs-theme="dark"] .login-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border-color:rgba(255,255,255,.14);}

/* ---------- 15. Responsif & aksesibilitas ---------- */
@media (max-width:767.98px){
  body::after{opacity:.35;}
  .stat-card::after{width:8rem;height:8rem;}
  #fxToTop{width:38px;height:38px;right:.7rem;bottom:.7rem;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .fx-reveal{opacity:1;transform:none;}
}
@media print{
  body::after,.card-header::after,#fxToTop,#fxTopbarProgress{display:none !important;}
  .card{background:#fff !important;backdrop-filter:none !important;box-shadow:none !important;}
}

/* ---------- 16. Perbaikan menu pengguna pojok kanan atas ----------
   Menu harus selalu tampil penuh (tidak terpotong topbar/efek), menempel
   di kanan, membuka ke bawah, dan bisa digulir mulus bila isinya panjang. */
.app-topbar{overflow:visible !important;}
.app-topbar::after{border-radius:inherit;}
.app-topbar .navbar,.app-topbar .navbar-nav{overflow:visible !important;}
.app-topbar .nav-item.dropdown{position:relative;z-index:1085;}
.app-topbar .dropdown-menu.app-user-menu,
.app-topbar .dropdown-menu{
  display:none;
  overflow-y:auto !important;overflow-x:hidden !important;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  z-index:1085 !important;
  background:#fff;color:#0f172a;
  box-shadow:0 18px 40px rgba(15,23,42,.28);
}
.app-topbar .dropdown-menu.show{display:block;}
.app-topbar .dropdown-menu .dropdown-item{color:#0f172a;}
.app-topbar .dropdown-menu .dropdown-item:hover,
.app-topbar .dropdown-menu .dropdown-item:focus{
  background:color-mix(in srgb,var(--pos-primary) 12%,transparent);color:#0f172a;}
.app-topbar .dropdown-menu::-webkit-scrollbar{width:8px;}
.app-topbar .dropdown-menu::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pos-primary),var(--pos-accent));border-radius:8px;
  border:2px solid transparent;background-clip:padding-box;}
.app-topbar .dropdown-menu::-webkit-scrollbar-track{background:transparent;}
body.theme-dark .app-topbar .dropdown-menu,html[data-bs-theme="dark"] .app-topbar .dropdown-menu{
  background:#111827;color:#e5e7eb;}
body.theme-dark .app-topbar .dropdown-menu .dropdown-item,
html[data-bs-theme="dark"] .app-topbar .dropdown-menu .dropdown-item{color:#e5e7eb;}
/* Sidebar & area utama tidak boleh menutupi menu */
.app-shell,.app-sidebar,.app-main{z-index:auto;}
#fxTopbarProgress{z-index:1090;}