/*
 * Custom scrollbar styles applied globally to table containers. Both the
 * horizontal and vertical scrollbars remain visible at all times to avoid
 * layout shifts when content is added dynamically.
 */

/* Force horizontal scrollbar visibility and prevent text wrapping */
.overflow-x-auto {
  overflow-x: scroll;            /* Always show horizontal scrollbar */
  white-space: nowrap;           /* Ensure horizontal scrolling */
  scrollbar-gutter: stable;      /* Reserve space for the scrollbar */
  scrollbar-color: #fb923c #f2f2f2;
  scrollbar-width: thin;
}

/* Force vertical scrollbar visibility and set minimum height */
.overflow-y-scroll {
  overflow-y: scroll;            /* Always show vertical scrollbar */
  min-height: 200px;             /* Visible even with few rows */
  scrollbar-gutter: stable;
  scrollbar-color: #fb923c #f2f2f2;
  scrollbar-width: thin;
  scroll-behavior: smooth;       /* Enable smooth scrolling */
}

/* WebKit scrollbar styling for both axes */
.overflow-y-scroll::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  width: 8px;                    /* Vertical scrollbar width */
  height: 8px;                   /* Horizontal scrollbar height */
}

.overflow-y-scroll::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track {
  background: #f2f2f2;
}

.overflow-y-scroll::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: #fb923c;
  border-radius: 4px;
  border: 2px solid #f2f2f2;
}