/* ============================================================
   Scrollbar – estilo unificado, moderno e responsivo ao dark mode
   ============================================================ */

/* ── Firefox / padrão CSS ── */
*,
*::before,
*::after {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, .45) transparent;   /* light */
}

.dark *,
.dark *::before,
.dark *::after,
html.dark {
    scrollbar-color: rgba(75, 85, 99, .6) transparent;       /* dark */
}

/* ── Webkit (Chrome, Edge, Safari, Opera) ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, .45);
    border-radius: 9999px;
    transition: background .2s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, .7);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark mode – webkit */
.dark ::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, .6);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, .85);
}

/* ── Sidebar (sempre dark) ── */
#sidebar {
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

#sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
}

#sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .25);
}

/* ── Listagens: cabecalho e corpo sao duas <table> separadas ──
   O corpo rola dentro de [data-list-scroll-surface] e a barra de rolagem
   consome 6px da largura dele; o cabecalho, que nao rola, fica 6px mais
   largo. Como as tabelas sao table-fixed com uma unica coluna elastica,
   esses 6px saem so dela e TODAS as colunas seguintes do corpo aparecem
   deslocadas para a esquerda em relacao ao proprio rotulo.
   `scrollbar-gutter: stable` reserva a calha nos dois, com ou sem rolagem,
   entao as duas tabelas tem sempre a mesma largura util. */
[data-list-head-surface],
[data-list-head-surface] ~ [data-list-scroll-surface] {
    scrollbar-gutter: stable;
}

[data-list-head-surface] {
    overflow-y: auto;
}