/* ============================================================
   CUSTOM SCROLLBAR — "Glow" overlay (DOM + JS)
   ------------------------------------------------------------
   Scrollbar native disembunyikan & diganti thumb <div> melayang
   yang digambar oleh assets/js/custom-scrollbar.js.

   PENTING: penyembunyian native di-scope ke `html.csb-on`, dan
   class itu HANYA dipasang oleh JS saat init sukses. Jadi kalau
   skrip gagal termuat/error, scrollbar default browser balik
   otomatis (tidak pernah ada kondisi "tanpa scrollbar sama
   sekali"). Jangan lepaskan scope `.csb-on` ini.

   Token warna ikut tema app (light default + html[data-theme="dark"]),
   sama pola dengan variables.css.
============================================================ */

:root{
    --csb-thumb:#2563EB;              /* --primary light */
    --csb-glow:rgba(37,99,235,.55);
    --csb-glow-hi:rgba(37,99,235,.95);
}
html[data-theme="dark"]{
    --csb-thumb:#3B82F6;              /* --primary dark */
    --csb-glow:rgba(59,130,246,.62);
    --csb-glow-hi:rgba(96,165,250,1);
}

/* ── sembunyikan scrollbar native (hanya saat JS aktif) ── */
html.csb-on{scrollbar-width:none}          /* Firefox: root */
html.csb-on *{scrollbar-width:none}        /* Firefox: semua kontainer */
html.csb-on::-webkit-scrollbar,
html.csb-on ::-webkit-scrollbar{
    width:0 !important;height:0 !important;display:none !important;
}

/* ── lapisan overlay (fixed, tembus klik kecuali thumb) ── */
#csb-layer{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:2147483000;
}

/* ── thumb "Glow" ── */
.csb-thumb{
    position:fixed;
    pointer-events:auto;
    cursor:grab;
    touch-action:none;
    user-select:none;-webkit-user-select:none;
    border-radius:99px;
    background:var(--csb-thumb);
    box-shadow:0 0 8px var(--csb-glow), 0 0 2px var(--csb-glow);
    opacity:0;
    transition:opacity .28s ease, box-shadow .2s ease, width .16s ease, height .16s ease;
    will-change:transform,top,left;
}
.csb-thumb.show{opacity:1}
.csb-thumb:hover,
.csb-thumb.drag{
    box-shadow:0 0 15px var(--csb-glow-hi), 0 0 5px var(--csb-glow-hi);
}
.csb-thumb:active{cursor:grabbing}

/* dimensi per-sumbu (sumbu lain diatur inline oleh JS) */
.csb-thumb.v{width:6px}
.csb-thumb.h{height:6px}
.csb-thumb.v:hover,.csb-thumb.v.drag{width:8px}
.csb-thumb.h:hover,.csb-thumb.h.drag{height:8px}

@media (prefers-reduced-motion: reduce){
    .csb-thumb{transition:opacity .01s linear}
}