/* SPDX-License-Identifier: MIT
 *
 * Copied from hire4real/static/css/components/data-table-scrollbar.css (MIT, same author),
 * 2026-10-04, 54 lines. Colour tokens replaced per doctrine 8.
 *
 * Here it is a wide table's own visible scrollbar (SL_05C Part A).
 * Their class names, geometry, transitions and breakpoints are kept as they are; their header and
 * notes follow this one unchanged, except that a colour value a note quotes is elided as [colour]
 * (doctrine 8 reaches comments too).
 *
 * DIVERGES FROM hire4real/static/css/components/data-table-scrollbar.css: the thumb is ink-2 in
 *   both themes (ink on hover), where their light override greys it to near its track: a thumb the
 *   colour of its track does not say that more columns sit to the right (SL_05C Part A).
 */
/* NIGHT_85F T4 — force a visible thin horizontal scrollbar on wide tables.
   The auto-hiding browser default (Chrome/Firefox on macOS + many Linux DEs)
   gives users no visual affordance that scroll is available. This rule pins
   the scrollbar visible on both themes and both mobile + desktop.

   Dark-default. The [data-theme="light"] block at the bottom is the ONLY light
   selector; it never matches the dark ship-of-record theme. output.css is
   untouched (this is a new additive sheet linked after it). */
.data-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: var(--ink-2) transparent;
}
.data-table-wrap::-webkit-scrollbar {
  height: 10px;                             /* horizontal scrollbar height */
  -webkit-appearance: none;
}
.data-table-wrap::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 0 0 12px 12px;
}
.data-table-wrap::-webkit-scrollbar-thumb {
  background: var(--ink-2);
  border-radius: 8px;
  border: 2px solid var(--surface-2);
}
.data-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--ink);
}

/* Overflow hint — the "who the fck knows?" affordance. Gradient shadows on the
   left/right edges tell the user there are MORE COLUMNS over there; they fade
   out as the user scrolls to that end (background-attachment: local). */
.data-table-wrap {
  background:
    linear-gradient(to left, var(--surface) 0%, transparent 20px) 100% 0 / 20px 100% no-repeat,
    linear-gradient(to right, var(--surface) 0%, transparent 20px) 0 0 / 20px 100% no-repeat;
  background-attachment: local, local;
}

/* Light theme (dark stays byte-identical; light values come from NIGHT_85C tokens). */
[data-theme="light"] .data-table-wrap {
  scrollbar-color: var(--ink-2) transparent;
}
[data-theme="light"] .data-table-wrap::-webkit-scrollbar-track {
  background: var(--surface-2);
}
[data-theme="light"] .data-table-wrap::-webkit-scrollbar-thumb {
  background: var(--ink-2);
  border-color: var(--line);
}
[data-theme="light"] .data-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--ink);
}