/* Dompet QU — Smooth Scroll system (semua portal)
   Scrollbar modern tipis: konsisten di semua elemen scroll */

:root {
  --dq-scroll-track: transparent;
  --dq-scroll-thumb: rgba(14, 165, 233, .38);
  --dq-scroll-thumb-hover: rgba(3, 105, 161, .68);
  --dq-scroll-thumb-idle: transparent;
  --dq-scroll-thumb-grad: linear-gradient(180deg, rgba(125, 211, 252, .75), rgba(14, 165, 233, .55));
  --dq-scroll-thumb-grad-hover: linear-gradient(180deg, #38bdf8, #0284c7);
  /* Scrollbar minimal — jangan geser layout / padding kanan */
  --dq-scroll-size: 4px;
  --dq-scroll-gutter: 0px;
  --dq-scroll-radius: 999px;
  --dq-scroll-inset: 0px;
  --dq-scroll-p: 0;
  --dq-scroll-pad: 5rem;
}

html[data-theme="dark"] {
  --dq-scroll-thumb: rgba(125, 211, 252, .32);
  --dq-scroll-thumb-hover: rgba(125, 211, 252, .58);
  --dq-scroll-thumb-grad: linear-gradient(180deg, rgba(125, 211, 252, .45), rgba(56, 189, 248, .32));
  --dq-scroll-thumb-grad-hover: linear-gradient(180deg, #7dd3fc, #0ea5e9);
}

html.dq-smooth {
  scroll-behavior: auto; /* engine JS yang mengontrol */
  scroll-padding-top: var(--dq-scroll-pad);
  overscroll-behavior-y: none;
  /* Tanpa gutter cadangan — padding kiri/kanan konten tetap simetris */
  scrollbar-gutter: auto;
}

html.dq-smooth-reduce,
html.dq-smooth-reduce body {
  scroll-behavior: auto !important;
}

/* Progress bar atas — tipis modern */
.dq-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.dq-scroll-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  background: linear-gradient(90deg, #7dd3fc 0%, #0ea5e9 50%, #0369a1 100%);
  box-shadow: 0 0 8px rgba(14, 165, 233, .35);
  transition: opacity .25s ease;
}

/*
 * GLOBAL scrollbar — berlaku semua elemen scroll di semua halaman.
 * Soft auto-hide: idle transparan, muncul saat hover / sedang scroll.
 */
html,
body,
html.dq-smooth,
.dq-smooth-pane,
.dq-scroll-soft,
.dq-card__scroll,
.dq-scroll-pane,
.dq-dt__table-wrap,
.dq-dt__cards,
.dq-ss__list,
.dq-dp__panel,
.dq-admin-aside,
.dq-admin-main,
.dq-shell-scroll,
.dq-aside__nav,
textarea,
pre,
[data-smooth-scroll],
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dq-scroll-thumb-idle) var(--dq-scroll-track);
}

html.dq-smooth.dq-scroll-show,
html.dq-smooth:hover,
html:hover,
body:hover,
.dq-smooth-pane:hover,
.dq-smooth-pane:focus-within,
.dq-smooth-pane.is-scroll-show,
.dq-scroll-soft:hover,
.dq-scroll-soft:focus-within,
.dq-scroll-soft.is-scroll-show,
.dq-card__scroll:hover,
.dq-card__scroll:focus-within,
.dq-card__scroll.is-scroll-show,
.dq-scroll-pane:hover,
.dq-scroll-pane:focus-within,
.dq-scroll-pane.is-scroll-show,
.dq-dt__table-wrap:hover,
.dq-dt__table-wrap:focus-within,
.dq-dt__table-wrap.is-scroll-show,
.dq-dt__cards:hover,
.dq-dt__cards.is-scroll-show,
.dq-ss__list:hover,
.dq-ss__list:focus-within,
.dq-ss__list.is-scroll-show,
.dq-admin-aside:hover,
.dq-admin-main:hover,
.dq-shell-scroll:hover,
.dq-shell-scroll.is-scroll-show,
.dq-aside__nav:hover,
.dq-aside__nav.is-scroll-show,
*:hover {
  scrollbar-color: var(--dq-scroll-thumb) var(--dq-scroll-track);
}

*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--dq-scroll-size);
  height: var(--dq-scroll-size);
  background: transparent;
}

*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--dq-scroll-radius);
}

*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--dq-scroll-radius);
  border: var(--dq-scroll-inset) solid transparent;
  background-clip: padding-box;
  transition: background .2s ease;
}

html.dq-scroll-show::-webkit-scrollbar-thumb,
html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb,
.is-scroll-show::-webkit-scrollbar-thumb {
  background: var(--dq-scroll-thumb-grad);
  background-clip: padding-box;
}

*:hover::-webkit-scrollbar-thumb:hover,
html:hover::-webkit-scrollbar-thumb:hover,
body:hover::-webkit-scrollbar-thumb:hover {
  background: var(--dq-scroll-thumb-grad-hover);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: transparent;
}

/* Panel overflow (sidebar admin, konten, tabel) */
.dq-smooth-pane,
.dq-scroll-soft {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-gutter: auto;
  box-sizing: border-box;
}

/*
 * Sidebar: scrollbar flush ke tepi kanan.
 * Jangan pakai scrollbar-gutter:stable di aside/nav — itu menyisakan strip kosong ~14px.
 */
.dq-admin-aside,
.dq-admin-aside.dq-scroll-soft,
.dq-admin-aside.dq-smooth-pane,
.dq-aside__nav,
.dq-aside__nav.dq-scroll-soft,
.dq-aside__nav.dq-smooth-pane {
  --dq-scroll-thumb: rgba(186, 230, 253, .34);
  --dq-scroll-thumb-hover: rgba(125, 211, 252, .58);
  --dq-scroll-thumb-grad: linear-gradient(180deg, rgba(186, 230, 253, .5), rgba(56, 189, 248, .32));
  --dq-scroll-thumb-grad-hover: linear-gradient(180deg, rgba(186, 230, 253, .75), rgba(56, 189, 248, .5));
  --dq-scroll-inset: 0;
  --dq-scroll-radius: 0;
  scrollbar-gutter: auto !important;
}

.dq-aside__nav,
.dq-aside__nav.dq-scroll-soft,
.dq-aside__nav.dq-smooth-pane {
  padding-right: 0 !important;
}

.dq-aside__nav::-webkit-scrollbar,
.dq-admin-aside::-webkit-scrollbar {
  width: var(--dq-scroll-size);
}

.dq-aside__nav::-webkit-scrollbar-track,
.dq-admin-aside::-webkit-scrollbar-track {
  margin: 0;
  background: transparent;
}

.dq-aside__nav::-webkit-scrollbar-thumb,
.dq-admin-aside::-webkit-scrollbar-thumb {
  border: 0 !important;
  border-radius: 0 !important;
  background-clip: border-box !important;
}

/* ---------- Shell scroll: header tetap, scrollbar tipis di tepi (tanpa gutter) ---------- */
.dq-shell-scroll,
.dq-shell-scroll.dq-scroll-soft,
.dq-shell-scroll.dq-smooth-pane,
[data-scroll-root].dq-shell-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: auto !important;
  scrollbar-width: thin;
  box-sizing: border-box;
  scroll-padding-top: 1rem;
  --dq-scroll-size: 4px;
  --dq-scroll-inset: 0;
  --dq-scroll-gutter: 0px;
}

/* Overlay bila didukung — scrollbar tidak memakan lebar konten */
@supports (overflow: overlay) {
  .dq-shell-scroll,
  [data-scroll-root].dq-shell-scroll {
    overflow-y: overlay;
  }
}

.dq-shell-scroll::-webkit-scrollbar,
[data-scroll-root].dq-shell-scroll::-webkit-scrollbar {
  width: var(--dq-scroll-size);
  height: var(--dq-scroll-size);
}

.dq-shell-scroll::-webkit-scrollbar-track,
[data-scroll-root].dq-shell-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 0;
}

.dq-shell-scroll::-webkit-scrollbar-thumb,
[data-scroll-root].dq-shell-scroll::-webkit-scrollbar-thumb {
  border: 0 !important;
  border-radius: var(--dq-scroll-radius);
  background-clip: border-box !important;
}

/* ---------- Admin dual-pane: topbar di luar scroll, konten scroll mandiri ---------- */
html[data-portal="admin"] {
  height: 100%;
  overflow: hidden;
  scrollbar-gutter: auto;
}
html[data-portal="admin"] body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.dq-admin-shell {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 768px) {
  .dq-admin-shell {
    display: grid;
    grid-template-columns: var(--dq-aside-w, 272px) minmax(0, 1fr);
  }

  .dq-admin-aside {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    position: relative;
    top: auto;
  }

  .dq-admin-aside,
  .dq-aside__nav {
    scrollbar-gutter: auto !important;
    box-sizing: border-box;
  }
}

.dq-admin-main {
  height: 100%;
  max-height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  /* Drawer sidebar tetap soft-scroll saat terbuka */
  .dq-admin-aside {
    overflow-y: auto;
  }
}

/* ---------- Landing: header di luar scroll ---------- */
html[data-portal="landing"] {
  height: 100%;
  overflow: hidden;
  scrollbar-gutter: auto;
}
html[data-portal="landing"] body.lp-body {
  height: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html[data-portal="landing"] .lp-header {
  position: relative;
  flex: 0 0 auto;
  z-index: 60;
}
html[data-portal="landing"] .lp-shell-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Auth: bar di luar scroll ---------- */
html[data-portal="auth"] {
  height: 100%;
  overflow: hidden;
  scrollbar-gutter: auto;
}
html[data-portal="auth"] body.auth-body {
  height: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}
html[data-portal="auth"] .auth-shell {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
html[data-portal="auth"] .auth-main {
  min-height: 0;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}
html[data-portal="auth"] .auth-main__bar {
  flex: 0 0 auto;
}

/* ---------- User app: topbar + bottom nav di luar scroll ---------- */
html[data-portal="user"] {
  height: 100%;
  overflow: hidden;
  scrollbar-gutter: auto;
}
html[data-portal="user"] body.dq-app-shell {
  height: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}
html[data-portal="user"] .dq-app-pane {
  height: 100dvh;
  max-height: 100dvh;
}
html[data-portal="user"] .dq-bottom-nav {
  position: relative;
  bottom: auto;
}

/* Anchor offset (hash / FAQ) — header sudah di luar pane */
.lp-body {
  --dq-scroll-pad: 1.25rem;
}
.auth-body {
  --dq-scroll-pad: 1rem;
}
.dq-app-shell {
  --dq-scroll-pad: 1rem;
}
html[data-portal="admin"] {
  --dq-scroll-pad: 1rem;
}

/* Soft fade di tepi panel scroll (opsional, desktop) */
@supports (animation-timeline: scroll()) {
  @media (pointer: fine) {
    .dq-smooth-pane[data-scroll-fade="1"] {
      mask-image: linear-gradient(#000 0%, #000 calc(100% - 1.25rem), transparent 100%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .dq-scroll-progress__bar {
    transition: none;
  }
  html.dq-smooth,
  .dq-smooth-pane,
  .dq-scroll-soft {
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  :root {
    --dq-scroll-size: 3px;
    --dq-scroll-gutter: 0px;
    --dq-scroll-inset: 0px;
  }
  .dq-scroll-progress { height: 2px; }
}

/* Touch: thumb tipis selalu soft-visible agar bisa di-drag */
@media (pointer: coarse) {
  html,
  body,
  html.dq-smooth,
  .dq-smooth-pane,
  .dq-scroll-soft,
  * {
    scrollbar-color: var(--dq-scroll-thumb) var(--dq-scroll-track);
  }
  *::-webkit-scrollbar-thumb,
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background: var(--dq-scroll-thumb-grad);
    background-clip: padding-box;
  }
}