/* ---------- Build 23.14: isolated global modern scrollbars ----------
 * Keep every scrollable surface in the portal visually consistent with the
 * branded DataTable scrollbars: page, sidebar, modals, responsive tables,
 * forms, cards, code/results panes and any future overflow container.
 */
:root {
  --gc-scroll-size: 9px;
  --gc-scroll-track: rgba(148, 163, 184, .12);
  --gc-scroll-thumb: rgba(10, 133, 136, .58);
  --gc-scroll-thumb-hover: rgba(10, 133, 136, .88);
}

html,
body,
body * {
  scrollbar-width: thin;
  scrollbar-color: var(--gc-scroll-thumb) transparent;
}

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

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

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
  min-height: 34px;
  background: linear-gradient(180deg, rgba(73, 194, 201, .92), rgba(10, 133, 136, .92));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #49C2C9, #087477);
  border: 1px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
body *::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

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

/* Dark sidebar gets a softer light thumb instead of a teal-on-navy rail. */
.app-sidebar {
  scrollbar-color: rgba(255, 255, 255, .34) transparent;
}
.app-sidebar::-webkit-scrollbar { width: 8px; height: 8px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .28);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .50);
  border: 1px solid transparent;
  background-clip: padding-box;
}

/* Re-normalize the older component-specific scrollbar rules so DataTables and
 * fallback tables use the same current system instead of the legacy grey rail. */
.dt-container .dt-scroll-body,
.gdt-scroll,
.table-responsive,
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--gc-scroll-thumb) transparent;
}
.dt-container .dt-scroll-body::-webkit-scrollbar,
.gdt-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: var(--gc-scroll-size);
  height: var(--gc-scroll-size);
}
.dt-container .dt-scroll-body::-webkit-scrollbar-track,
.gdt-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.dt-container .dt-scroll-body::-webkit-scrollbar-thumb,
.gdt-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(73, 194, 201, .92), rgba(10, 133, 136, .92));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.dt-container .dt-scroll-body::-webkit-scrollbar-thumb:hover,
.gdt-scroll::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #49C2C9, #087477);
  border: 1px solid transparent;
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  body * { scroll-behavior: auto !important; }
}