/* Theme-matched scrollbars (Firefox + WebKit)
  Apply to common scroll areas across the app.
  Uses global CSS variables for easy theming/overrides. */

:root {
  --sb-size: 8px;
  --sb-thumb: #fd9644;
  --sb-thumb-hover: #e86c10;
  --sb-track: #f1f1f1;
  --sb-radius: 8px;
  --sb-border: 2px;
}

/* Firefox */
.sidebar-nav,
.table-wrap,
.activity-list,
.dropdown-menu,
.rich-text-editor,
.seq-left,
.seq-middle,
.seq-right {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit (Chrome, Edge, Safari) */
.sidebar-nav::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.activity-list::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.rich-text-editor::-webkit-scrollbar,
.seq-left::-webkit-scrollbar,
.seq-middle::-webkit-scrollbar,
.seq-right::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size); /* for horizontal areas like table-wrap */
}

.sidebar-nav::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.activity-list::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
.rich-text-editor::-webkit-scrollbar-track,
.seq-left::-webkit-scrollbar-track,
.seq-middle::-webkit-scrollbar-track,
.seq-right::-webkit-scrollbar-track {
  background: var(--sb-track);
}

.sidebar-nav::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.activity-list::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.rich-text-editor::-webkit-scrollbar-thumb,
.seq-left::-webkit-scrollbar-thumb,
.seq-middle::-webkit-scrollbar-thumb,
.seq-right::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: var(--sb-radius);
  border: var(--sb-border) solid var(--sb-track);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.activity-list::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.rich-text-editor::-webkit-scrollbar-thumb:hover,
.seq-left::-webkit-scrollbar-thumb:hover,
.seq-middle::-webkit-scrollbar-thumb:hover,
.seq-right::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-hover);
}

/* Global catch-all to style any scrollable element */
html, body, * {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
*::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}
*::-webkit-scrollbar-track { background: var(--sb-track); }
*::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: var(--sb-radius);
  border: var(--sb-border) solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }