/* ==========================================================================
   NugrahaWarehouse — Custom Scrollbar Styling (v1.8.6)
   Per Aji feedback: scrollbar putih di sidebar dark mode mengganggu UI.
   Standard `::-webkit-scrollbar` + Firefox `scrollbar-*` properties.
   Auto-adapts to light + dark mode based on .dark class.
   ========================================================================== */

/* ─── Default scrollbar (modern, subtle, theme-aware) ────────────────── */

/* Webkit/Blink (Chrome, Edge, Safari, Opera) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);  /* slate-400 @ 40% */
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 200ms ease;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.6);  /* slate-400 @ 60% */
}

*::-webkit-scrollbar-thumb:active {
  background-color: rgba(100, 116, 139, 0.7);  /* slate-500 @ 70% */
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark mode (when .dark class is present on html) */
.dark *::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.5);  /* slate-600 @ 50% */
}

.dark *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.7);  /* slate-500 @ 70% */
}

.dark *::-webkit-scrollbar-thumb:active {
  background-color: rgba(148, 163, 184, 0.8);  /* slate-400 @ 80% */
}

/* Firefox (uses standard scrollbar-color property) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;  /* thumb track */
}

.dark * {
  scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
}

/* ─── Sidebar-specific (slightly narrower, even more subtle) ─────────── */

aside::-webkit-scrollbar,
.nw-scrollbar-sidebar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

aside::-webkit-scrollbar-thumb,
.nw-scrollbar-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.25);
}

aside::-webkit-scrollbar-thumb:hover,
.nw-scrollbar-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.45);
}

.dark aside::-webkit-scrollbar-thumb,
.dark .nw-scrollbar-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.4);
}

.dark aside::-webkit-scrollbar-thumb:hover,
.dark .nw-scrollbar-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.6);
}

/* ─── Main content area scrollbar (medium emphasis) ──────────────────── */

main::-webkit-scrollbar,
.nw-scrollbar-main::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

main::-webkit-scrollbar-thumb,
.nw-scrollbar-main::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.35);
}

main::-webkit-scrollbar-thumb:hover,
.nw-scrollbar-main::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.55);
}

.dark main::-webkit-scrollbar-thumb,
.dark .nw-scrollbar-main::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.45);
}

.dark main::-webkit-scrollbar-thumb:hover,
.dark .nw-scrollbar-main::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.65);
}

/* ─── Modal scrollbar (subtle, in-modal content) ─────────────────────── */

.nw-modal-container::-webkit-scrollbar {
  width: 8px;
}

.nw-modal-container::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.3);
}

.nw-modal-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.5);
}

.dark .nw-modal-container::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.4);
}

.dark .nw-modal-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.6);
}

/* ─── Always hide scrollbar utility (for horizontal nav, etc.) ──────── */

.nw-scrollbar-hidden {
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE/old Edge */
}

.nw-scrollbar-hidden::-webkit-scrollbar {
  display: none;  /* Chrome/Safari/Opera */
}
