:root {
  --simoris-scrollbar-size: 10px;
  --simoris-scrollbar-radius: 999px;
  --simoris-scrollbar-track: rgba(15, 23, 42, 0.08);
  --simoris-scrollbar-track-strong: rgba(15, 23, 42, 0.14);
  --simoris-scrollbar-thumb-start: #38bdf8;
  --simoris-scrollbar-thumb-end: #6366f1;
  --simoris-scrollbar-thumb-hover-start: #22d3ee;
  --simoris-scrollbar-thumb-hover-end: #8b5cf6;
  --simoris-scrollbar-thumb-shadow: rgba(56, 189, 248, 0.22);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--simoris-scrollbar-thumb-start) var(--simoris-scrollbar-track);
  scrollbar-width: thin;
}

body {
  overscroll-behavior-y: contain;
}

body,
.main-content,
.modal,
.modal-body,
.offcanvas-body,
.dropdown-menu,
.table-responsive,
.dataTables_scrollBody,
.select2-results__options {
  scroll-behavior: smooth;
  scrollbar-color: var(--simoris-scrollbar-thumb-start) var(--simoris-scrollbar-track);
  scrollbar-width: thin;
}

::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar {
  width: var(--simoris-scrollbar-size);
  height: var(--simoris-scrollbar-size);
}

::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.offcanvas-body::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track {
  background: var(--simoris-scrollbar-track);
  border-radius: var(--simoris-scrollbar-radius);
}

::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--simoris-scrollbar-thumb-start), var(--simoris-scrollbar-thumb-end));
  border: 2px solid transparent;
  border-radius: var(--simoris-scrollbar-radius);
  background-clip: padding-box;
  box-shadow: 0 0 14px var(--simoris-scrollbar-thumb-shadow);
}

::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.offcanvas-body::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--simoris-scrollbar-thumb-hover-start), var(--simoris-scrollbar-thumb-hover-end));
  background-clip: padding-box;
}

::-webkit-scrollbar-corner,
.table-responsive::-webkit-scrollbar-corner,
.dataTables_scrollBody::-webkit-scrollbar-corner {
  background: transparent;
}

.table-responsive,
.dataTables_scrollBody,
.dashboard-fids-table-wrap,
.expense-report-table-wrapper,
.store-sales-table-wrapper,
.store-expenses-table-wrapper,
.promotions-table-wrapper {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

.table-responsive::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
.dashboard-fids-table-wrap::-webkit-scrollbar,
.expense-report-table-wrapper::-webkit-scrollbar,
.store-sales-table-wrapper::-webkit-scrollbar,
.store-expenses-table-wrapper::-webkit-scrollbar,
.promotions-table-wrapper::-webkit-scrollbar {
  height: 12px;
}

/*
 * SimpleBar (sidebar) draws its OWN overlay scrollbar and hides the native one
 * on .simplebar-content-wrapper. Do NOT add .simplebar-content-wrapper to the
 * ::-webkit-scrollbar / scrollbar-width groups above — doing so re-enables the
 * native scrollbar and you end up with two scrollbars. Style the overlay here.
 */
.simplebar-scrollbar::before {
  background: linear-gradient(180deg, var(--simoris-scrollbar-thumb-start), var(--simoris-scrollbar-thumb-end));
  border-radius: var(--simoris-scrollbar-radius);
  opacity: 0.72;
}

.simplebar-scrollbar.simplebar-visible::before,
.simplebar-scrollbar:hover::before {
  opacity: 1;
}

.simplebar-track.simplebar-vertical {
  width: 10px;
}

.simplebar-track.simplebar-horizontal {
  height: 10px;
}

.simplebar-track {
  background: transparent;
}

[data-bs-theme="blue-theme"],
[data-bs-theme="dark"],
[data-bs-theme="semi-dark"] {
  --simoris-scrollbar-track: rgba(148, 163, 184, 0.14);
  --simoris-scrollbar-track-strong: rgba(148, 163, 184, 0.2);
  --simoris-scrollbar-thumb-start: #38bdf8;
  --simoris-scrollbar-thumb-end: #818cf8;
  --simoris-scrollbar-thumb-hover-start: #67e8f9;
  --simoris-scrollbar-thumb-hover-end: #a78bfa;
  --simoris-scrollbar-thumb-shadow: rgba(56, 189, 248, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}