/* style.css */
/* Scoped styles for leaderboard to avoid touching other pages */
/*
 * Leaderboard highlight.  Use theme variables so that the active column
 * colour adapts to both light and dark palettes.  The active column
 * text inherits the default text colour rather than forcing white,
 * and the underline uses the success colour defined in the theme.
 */
#leaderboard-root .active-col {
  position: relative;
  color: var(--text-color);
}
#leaderboard-root .active-col::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  /* underline uses the success colour so it stands out in both themes */
  background: var(--correct-color);
}
/* === Scrollbar (Firefox + WebKit) === */

/* Палитра — завязана на темы */
/*
 * Scrollbar palette.  Use theme variables for track and thumb so that
 * scrollbars harmonise with the current light/dark palette.  Provide
 * separate definitions for the dark theme to ensure sufficient
 * contrast.  Fallback values are removed because the variables are
 * always defined in `base.html`.
 */
:root {
  --scrollbar-track: var(--background);
  /* thumb uses a muted divider colour in the light theme */
  --scrollbar-thumb: var(--divider-color);
  --scrollbar-thumb-hover: var(--input-border);
}
.dark-theme {
  --scrollbar-track: var(--background);
  /* In the dark theme use block hover/background shades for the thumb */
  --scrollbar-thumb: var(--block-hover-background);
  --scrollbar-thumb-hover: var(--block-background);
}

/* Firefox */
html{
  scrollbar-width: thin;                     /* thin/auto */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  /* Чтобы исчезновение/появление скроллбара не дёргало макет */
  scrollbar-gutter: stable;
}

/* Chrome/Edge/Safari */
*::-webkit-scrollbar{
  width: 12px;                               /* общая «толщина» */
  height: 12px;
}

*::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb{
  background-color: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid var(--scrollbar-track);  /* даёт «канавку» вокруг */
}

*::-webkit-scrollbar-thumb:hover{
  background-color: var(--scrollbar-thumb-hover);
}

/* Уголок (когда есть оба скроллбара) */
*::-webkit-scrollbar-corner{
  background: var(--scrollbar-track);
}

/* Опционально — чуть уже внутри карточек/панелей */
.container, .card, .modal, .offcanvas, .table-responsive{
  scrollbar-width: thin;
}