/* table-scroll.css — the styling half of Bspkfw\Core\Html::scrollableTable()
   (the behaviour half is /js/table-scroll.js). Its OWN file, not a section
   of base.css, on purpose: a page rendered through a bespoke shell that
   loads none of base.css links this file + the script and the helper is a
   drop-in — the same shape as kselect.min.css. The framework layout links
   it unconditionally right after base.css; a custom-chrome page links
       <link rel="stylesheet" href="/css/table-scroll.css?v=N">
       <script src="/js/table-scroll.js?v=N" defer></script>
   itself. Never copy these rules into a project stylesheet — that is a
   second copy of a framework contract, and it drifts the first time the
   cue changes here. */

/* ============================================================
   Horizontally scrolling tables — edge cues (.bspkfw-tscroll)
   ============================================================

   A wide table in a scroll container works, but gives the reader no sign
   that anything is off-screen: the page doesn't look broken, so nobody
   thinks to scroll. Markup comes from `Bspkfw\Core\Html::scrollableTable()`
   (or is hand-written with the same classes), behaviour from
   /js/table-scroll.js, which sets `data-at` on the wrapper:

       none    the content fits — NO cue at all (a permanent cue on a
               table that doesn't scroll is worse than none)
       start   scrolled fully left  — content hidden to the RIGHT
       middle  content hidden BOTH ways
       end     scrolled fully right — content hidden to the LEFT

   WHY THE CUE IS A SIBLING OF THE SCROLLER AND NOT ITS BACKGROUND: the
   classic "scrolling shadows" trick (cover + shadow layers with
   `background-attachment: local/scroll`) paints on the scroller's own
   background — which is BEHIND its children — and `.data-table` sets an
   opaque background with opaque cells over it. All four layers compute
   correctly and NOTHING appears on screen. The cue therefore lives
   outside the scroller, in a `position: relative` wrapper, painted over
   the table. Styling the scrollbar doesn't work either: on overlay-
   scrollbar platforms it occupies no layout space and fades out, leaving
   no standing hint. Don't re-derive either of those.

   `pointer-events: none` so a cue never eats a click on the cell beneath
   it, and no transition by default — the cue tracks a scroll position, so
   animating it would lag the thing it describes (and would need a
   `prefers-reduced-motion` escape). Tune per project with the custom
   properties rather than re-writing the rules. */
.bspkfw-tscroll {
    position: relative;
}

.bspkfw-tscroll-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The view is focusable (role="region" + tabindex) so a keyboard user can
   reach and scroll it — table-scroll.js drops the tabindex again whenever
   the content fits, so a table that doesn't scroll is not a tab stop. */
.bspkfw-tscroll-view:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.bspkfw-tscroll-cue {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bspkfw-tscroll-cue-width, 26px);
    pointer-events: none;
    opacity: 0;
    /* Above the table AND above a sticky header / sticky first column,
       which is deliberate: those scroll horizontally with everything
       else, so the edge they sit at has hidden content too. */
    z-index: 3;
}

/* `.data-table` is a rounded card, so square-cornered cues would paint
   over the curve. Inherit the same radius on the outer corners only. */
.bspkfw-tscroll-cue[data-edge="left"] {
    left: 0;
    border-radius: var(--bspkfw-tscroll-cue-radius, 8px) 0 0 var(--bspkfw-tscroll-cue-radius, 8px);
    background: linear-gradient(to right,
        var(--bspkfw-tscroll-cue-color, rgba(15, 23, 42, 0.20)),
        var(--bspkfw-tscroll-cue-fade, rgba(15, 23, 42, 0)));
}

.bspkfw-tscroll-cue[data-edge="right"] {
    right: 0;
    border-radius: 0 var(--bspkfw-tscroll-cue-radius, 8px) var(--bspkfw-tscroll-cue-radius, 8px) 0;
    background: linear-gradient(to left,
        var(--bspkfw-tscroll-cue-color, rgba(15, 23, 42, 0.20)),
        var(--bspkfw-tscroll-cue-fade, rgba(15, 23, 42, 0)));
}

.bspkfw-tscroll[data-at="start"]  > .bspkfw-tscroll-cue[data-edge="right"],
.bspkfw-tscroll[data-at="end"]    > .bspkfw-tscroll-cue[data-edge="left"],
.bspkfw-tscroll[data-at="middle"] > .bspkfw-tscroll-cue { opacity: 1; }

/* Paper has no scroll position: drop the cue and let the whole table
   print instead of clipping it at the viewport width it happened to
   have on screen. */
@media print {
    .bspkfw-tscroll-cue  { display: none; }
    .bspkfw-tscroll-view { overflow-x: visible; }
}