/* CM9 shared scrollbar layer — MC #1696 / ticket #106.
   "Bring back a slide bar on bottom of screen so I can move screen on client
   info tab instead of having to make the whole window or screen bigger to
   see everything." Mark's override broadens this to every employee/manager/
   RepSuite app page: any container that overflows the visible screen,
   vertical or horizontal, must get a real, visible, grabbable scrollbar.

   Two things live here:

   1. VISIBLE SCROLLBAR THEME — restyles the native scrollbar (WebKit +
      Firefox) so it's a solid, always-drawn bar that matches whichever CM9
      theme is active, instead of the OS's auto-hiding overlay style that
      disappears the moment the mouse leaves it (that invisibility was half
      of the original complaint — reps could not find/grab it even where one
      technically existed). Reads the shared theme vars (--s1/--s2/--border2/
      --teal/--mid, see shared/cm9-theme.css + shared/cm9-theme.js) with
      neutral fallbacks so plain employee pages that don't define a theme
      still get a readable bar instead of the browser default.

   2. OVERFLOW SAFETY NET — a couple of small, additive rules that fix the
      actual ROOT CAUSE class of bug found on the Client Info tab of
      ai/debthelp-unified.html: a flex or grid item that itself scrolls
      (overflow-y/x/both: auto|scroll) still defaults to an "automatic
      minimum size" based on its own content (min-width/min-height: auto).
      That lets it grow past the box its flex/grid parent allotted it instead
      of shrinking to fit — and an ancestor's overflow:hidden (used all over
      this app's fixed-height shell to keep top bars/tab strips in place)
      then clips the excess with NO scrollbar reachable anywhere, which is
      exactly what reps hit ("have to make the whole window bigger"). Setting
      min-width/min-height:0 on that element is the standard, safe fix — it
      only ever helps an element that already declared its own scrolling
      overflow; it cannot affect elements that don't.

      - `.cm9-scroll-y` / `.cm9-scroll-x` / `.cm9-scroll` are opt-in utility
        classes: add whichever applies to any container found to be clipping
        content instead of scrolling it.
      - `[class*="-scroll"]` auto-covers every container that already follows
        this codebase's existing "*-scroll" naming convention for scroll
        regions (e.g. .ci-form-scroll, .bgt-board-scroll, .ver-scroll,
        .calc-scroll, .py-entity-scroll, .grid-scroll) — those get the fix
        for free, no per-page edits needed, and it never touches unrelated
        classes since it only matches on the literal "-scroll" substring.

   This file is pure CSS: it never changes an element's actual overflow
   behavior from hidden→auto (that stays a deliberate, per-container choice
   in each page's own CSS), so it cannot turn a decorative overflow:hidden
   (rounded corners, ellipsis truncation, tab panels that are meant to stay
   clipped) into an unwanted scroll box. It only (a) themes scrollbars that
   already exist, and (b) unblocks the min-size footgun on containers that
   already opted into scrolling. */

/* ── 1. Visible, theme-matched, grabbable scrollbars ─────────────────── */
html {
  scrollbar-width: auto;   /* never Firefox's "thin"/auto-hide look */
  scrollbar-color: var(--border2, var(--border, #9aa5b8)) var(--s1, var(--bg, #eceff4));
}

*::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
*::-webkit-scrollbar-track {
  background: var(--s1, var(--bg, #eceff4));
}
*::-webkit-scrollbar-thumb {
  background: var(--border2, var(--border, #9aa5b8));
  border-radius: 7px;
  border: 3px solid var(--s1, var(--bg, #eceff4));
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--teal, var(--mid, #6b7899));
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: var(--s1, var(--bg, #eceff4));
}

/* ── 2. Overflow safety net ───────────────────────────────────────────── */
.cm9-scroll-y { overflow-y: auto; min-height: 0; min-width: 0; }
.cm9-scroll-x { overflow-x: auto; min-height: 0; min-width: 0; }
.cm9-scroll, .cm9-scroll-xy { overflow: auto; min-height: 0; min-width: 0; }

[class*="-scroll"] { min-width: 0; min-height: 0; }