/* 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(--color-border-strong, #525252) transparent;
}
.data-table-wrap::-webkit-scrollbar {
  height: 10px;                             /* horizontal scrollbar height */
  -webkit-appearance: none;
}
.data-table-wrap::-webkit-scrollbar-track {
  background: var(--color-bg-secondary, #171717);
  border-radius: 0 0 12px 12px;
}
.data-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-border-strong, #525252);
  border-radius: 8px;
  border: 2px solid var(--color-bg-secondary, #171717);
}
.data-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary, #737373);
}

/* 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(--color-bg-primary, #0a0a0a) 0%, transparent 20px) 100% 0 / 20px 100% no-repeat,
    linear-gradient(to right, var(--color-bg-primary, #0a0a0a) 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: #a3a3a3 transparent;
}
[data-theme="light"] .data-table-wrap::-webkit-scrollbar-track {
  background: #f4f4f5;
}
[data-theme="light"] .data-table-wrap::-webkit-scrollbar-thumb {
  background: #a3a3a3;
  border-color: #f4f4f5;
}
[data-theme="light"] .data-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #737373;
}