/* ============================================================================
   SCROLLBAR — tema escuro, em todos os navegadores
   ----------------------------------------------------------------------------
   Três mecanismos diferentes, porque nenhum sozinho cobre todos os motores:

   1. color-scheme: dark
      A base. Diz ao navegador que a página é escura, e ele já entrega
      scrollbar, campos de formulário, menus de <select> e o fundo de overscroll
      na variante escura nativa. É o único caminho no Safari do iOS e o que
      resolve as barras de overlay do macOS. Sem isto, um <select> claro
      aparece no meio de uma tela escura.

   2. scrollbar-width / scrollbar-color  (padrão CSS)
      Firefox e Chrome 121+. As duas propriedades são herdadas, então declarar
      em :root cobre a página inteira e qualquer elemento com scroll próprio.

   3. ::-webkit-scrollbar  (pseudo-elementos)
      Chrome, Edge, Safari e Opera. Dá controle fino (largura, raio, hover) que
      o padrão ainda não oferece. Aplicado com o seletor universal para valer
      como padrão; regras por componente continuam vencendo por especificidade.

   Nota: onde o navegador suporta os dois, o padrão (2) tem prioridade sobre os
   pseudo-elementos (3) no Chrome 121+. Por isso os valores dos dois blocos são
   propositalmente equivalentes — o resultado é o mesmo tanto faz qual vença.

   Carregar este arquivo ANTES dos CSS de componente, para que as regras
   específicas de cada tela possam sobrescrevê-lo.
   ============================================================================ */

:root {
    color-scheme: dark;

    /* thumb, depois track */
    --sb-thumb: #3b3b42;
    --sb-thumb-hover: #4e4e57;
    --sb-track: rgba(255, 255, 255, 0.03);
}

/* ── Padrão CSS (Firefox, Chrome 121+) ────────────────────────────────────── */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* ── WebKit / Blink ───────────────────────────────────────────────────────── */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

*::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 8px;
    /* borda transparente com background-clip afina o thumb sem encostar nas
       bordas da track — o mesmo truque que dá o respiro das barras nativas */
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb-hover);
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:active {
    background: var(--sb-thumb-hover);
    background-clip: content-box;
}

/* Quadrado onde as barras horizontal e vertical se encontram: sem isto ele
   fica branco no Chrome, e é justamente o canto mais visível numa tela escura. */
*::-webkit-scrollbar-corner {
    background: var(--sb-track);
}

/* Redimensionador de <textarea>: acompanha a mesma paleta. */
*::-webkit-resizer {
    background: var(--sb-track);
}

/* ── Barras finas ──
   Para listas e painéis estreitos, onde 10px pesa demais. Aplique a classe
   .scroll-fino no elemento que rola. */
.scroll-fino {
    scrollbar-width: thin;
}

.scroll-fino::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

/* ── Preferência do sistema por menos movimento ──
   O scroll suave programático fica desligado; a rolagem continua normal. */
@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }
}