/* ==========================================================================
   FANALYTICS — global scrollbar chrome (dark + subtle cyan)
   Loaded app-wide via index.html / app-styles-manifest.js
   ========================================================================== */

:root {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*,
*::before,
*::after {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit / Blink (Chrome, Edge, Safari desktop) */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

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

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--scrollbar-track);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid var(--scrollbar-track);
  background-clip: padding-box;
}

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

/* Re-apply on panels that need explicit class (nested scroll regions) */
.scrollbar-fanalytics {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.scrollbar-fanalytics::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.scrollbar-fanalytics::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.scrollbar-fanalytics::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--scrollbar-track);
  background-clip: padding-box;
}

.scrollbar-fanalytics::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.scrollbar-fanalytics::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* Thinner variant for small cards / dense panels */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.scrollbar-thin::-webkit-scrollbar {
  width: var(--scrollbar-size-thin);
  height: var(--scrollbar-size-thin);
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  border-width: 1px;
}

/* Hide chrome but keep scroll (horizontal tab rows, etc.) */
.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Touch-first viewports: native overlay scrollbars; avoid fighting horizontal chip rows */
@media (hover: none) and (pointer: coarse) {
  html,
  body {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}