/* Generated by tools/learner/build.mjs from resources/css/shared/scrollbar.css — edit the source, then npm run build:learner. */
/*
 * E.V.G. Lab — one scrollbar style for every part: /cabinet and /admin (Vite imports this file), /learn, /login,
 * /hub/*, the landing and /safety (the static copy public/learner/scrollbar.css, written by `npm run build:learner`).
 * Edit only this file, then `npm run build` and `npm run build:learner`.
 *
 * - The page never jumps sideways: html keeps a stable scrollbar gutter, also while a dialog locks the scroll
 *   (overflow: hidden keeps the gutter; Filament's scroll lock sees the gutter and adds no padding).
 *   A full-height app shell that never scrolls itself (/learn) sets scrollbar-gutter: auto on its html.
 * - Thin bar as in the pilot (6 px, rounded thumb, darker on hover): ::-webkit-scrollbar* in Chrome, Edge and
 *   Safari; the standard scrollbar-width / scrollbar-color only where ::-webkit-scrollbar is unknown (Firefox).
 *   Chrome ignores every ::-webkit-scrollbar rule of an element as soon as scrollbar-color or scrollbar-width is
 *   set on it (and scrollbar-color is inherited), and its own thin bar has arrows and no hover colour.
 * - Theme: light by default, dark with data-theme="dark" (cabinet, learner app, hub, landing) or .dark (Filament),
 *   the system setting on pages without either. High contrast — data-contrast="high" (comfort settings) or the
 *   system prefers-contrast: more — a wider, clearly visible thumb (contrast with the track 8:1 and more).
 *   Forced colours (Windows contrast themes) — system colours only.
 * - Everything is in the lowest cascade layer: any page rule (.no-scrollbar, hidden tab strips) wins.
 */
@layer evg-scrollbar {
  :root {
    --evg-scrollbar-thumb: #cbd5e1;
    --evg-scrollbar-thumb-hover: #94a3b8;
    --evg-scrollbar-track: transparent;
    --evg-scrollbar-size: 6px;
  }

  :root[data-theme="dark"],
  :root.dark {
    --evg-scrollbar-thumb: #334155;
    --evg-scrollbar-thumb-hover: #475569;
  }

  @media (prefers-color-scheme: dark) {
    /* Pages without a theme switch (/safety); Filament marks the light theme by the missing .dark on html.fi */
    :root:not([data-theme]):not(.fi) {
      --evg-scrollbar-thumb: #334155;
      --evg-scrollbar-thumb-hover: #475569;
    }
  }

  /* High contrast, light: #4d4d4d on #ffffff is 8.4:1, the hover thumb is black. */
  :root[data-contrast="high"] {
    --evg-scrollbar-thumb: #4d4d4d;
    --evg-scrollbar-thumb-hover: #000000;
    --evg-scrollbar-track: #ffffff;
    --evg-scrollbar-size: 10px;
  }

  /* High contrast, dark: #bdbdbd on #000000 is 11.6:1, the hover thumb is white. */
  :root[data-contrast="high"][data-theme="dark"],
  :root[data-contrast="high"].dark {
    --evg-scrollbar-thumb: #bdbdbd;
    --evg-scrollbar-thumb-hover: #ffffff;
    --evg-scrollbar-track: #000000;
  }

  @media (prefers-contrast: more) {
    /* Pages without their own contrast setting (landing, /safety, /admin) follow the system. */
    :root:not([data-contrast]) {
      --evg-scrollbar-thumb: #4d4d4d;
      --evg-scrollbar-thumb-hover: #000000;
      --evg-scrollbar-track: #ffffff;
      --evg-scrollbar-size: 10px;
    }

    :root:not([data-contrast])[data-theme="dark"],
    :root:not([data-contrast]).dark {
      --evg-scrollbar-thumb: #bdbdbd;
      --evg-scrollbar-thumb-hover: #ffffff;
      --evg-scrollbar-track: #000000;
    }
  }

  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root:not([data-contrast]):not([data-theme]):not(.fi) {
      --evg-scrollbar-thumb: #bdbdbd;
      --evg-scrollbar-thumb-hover: #ffffff;
      --evg-scrollbar-track: #000000;
    }
  }

  html {
    scrollbar-gutter: stable;
  }

  @supports not selector(::-webkit-scrollbar) {
    html {
      /* Inherited by every scrolling panel of the page. */
      scrollbar-color: var(--evg-scrollbar-thumb) var(--evg-scrollbar-track);
    }

    /* scrollbar-width is not inherited: every element, with zero specificity (any page rule wins). */
    :where(html, html *) {
      scrollbar-width: thin;
    }

    :where(:root[data-contrast="high"], :root[data-contrast="high"] *) {
      scrollbar-width: auto;
    }

    @media (prefers-contrast: more) {
      :where(:root:not([data-contrast]), :root:not([data-contrast]) *) {
        scrollbar-width: auto;
      }
    }

    @media (forced-colors: active) {
      html {
        scrollbar-color: auto;
      }

      :where(html, html *) {
        scrollbar-width: auto;
      }
    }
  }

  /* Chrome, Edge, Safari. */
  ::-webkit-scrollbar {
    width: var(--evg-scrollbar-size);
    height: var(--evg-scrollbar-size);
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: var(--evg-scrollbar-track);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--evg-scrollbar-thumb);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: var(--evg-scrollbar-thumb-hover);
  }

  /* Hidden scrollbar for horizontal chip and tab strips that still scroll. */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Windows contrast themes: system colours only, a wider bar. */
  @media (forced-colors: active) {
    ::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
      background: Canvas;
    }

    ::-webkit-scrollbar-thumb {
      background: CanvasText;
      border: 2px solid Canvas;
    }

    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
      background: Highlight;
    }
  }
}