/* ========================================================================
   CUSTOM SCROLLBAR STYLING - Make scrollbars easier to grab
   ======================================================================== */

/* Scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
.sidebar-content::-webkit-scrollbar,
.data-table-container::-webkit-scrollbar,
.properties-content::-webkit-scrollbar,
.pane-content::-webkit-scrollbar {
  width: 18px; /* Much wider scrollbar - easier to grab like sliders */
  height: 18px;
}

.sidebar-content::-webkit-scrollbar-track,
.data-table-container::-webkit-scrollbar-track,
.properties-content::-webkit-scrollbar-track,
.pane-content::-webkit-scrollbar-track {
  background: var(--vis-bg-primary);
  border-radius: 10px;
  margin: 2px;
}

.sidebar-content::-webkit-scrollbar-thumb,
.data-table-container::-webkit-scrollbar-thumb,
.properties-content::-webkit-scrollbar-thumb,
.pane-content::-webkit-scrollbar-thumb {
  background: var(--workspace-border-default);
  border-radius: 10px;
  border: 2px solid var(--vis-bg-primary); /* Thin border - more area for grabbing */
  min-height: 50px; /* Larger minimum thumb size */
  min-width: 50px; /* For horizontal scrollbars */
}

.sidebar-content::-webkit-scrollbar-thumb:hover,
.data-table-container::-webkit-scrollbar-thumb:hover,
.properties-content::-webkit-scrollbar-thumb:hover,
.pane-content::-webkit-scrollbar-thumb:hover {
  background: var(--workspace-icon-primary);
  border-width: 1px; /* Even thinner border on hover = more grabbable area */
}

.sidebar-content::-webkit-scrollbar-thumb:active,
.data-table-container::-webkit-scrollbar-thumb:active,
.properties-content::-webkit-scrollbar-thumb:active,
.pane-content::-webkit-scrollbar-thumb:active {
  background: var(--workspace-icon-primary);
  border-width: 0px; /* No border when dragging = maximum grabbable area */
}

/* Firefox scrollbar styling */
.sidebar-content,
.data-table-container,
.properties-content,
.pane-content {
  scrollbar-width: auto; /* Use wider scrollbars instead of thin */
  scrollbar-color: var(--workspace-border-default) var(--vis-bg-primary);
}

/* Corner where vertical and horizontal scrollbars meet */
.sidebar-content::-webkit-scrollbar-corner,
.data-table-container::-webkit-scrollbar-corner,
.properties-content::-webkit-scrollbar-corner,
.pane-content::-webkit-scrollbar-corner {
  background: var(--vis-bg-primary);
}