/**
 * Base — reset e estilos de elementos HTML puros.
 * Carregado em todas as páginas, antes de components.css.
 */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-md);
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
    line-height: 1.5;
    min-height: 100vh;
}

img, svg {
    max-width: 100%;
    display: block;
}

a {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-700);
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-gray-900);
}

/* ── Ícones (Phosphor, inline SVG via helper icon()) ──────────────────────── */

.icon {
    display: inline-block; /* sobrescreve o `svg { display:block }` do reset */
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
    vertical-align: middle;
}

.icon-sm  { width: 1em;    height: 1em; }
.icon-lg  { width: 1.75em; height: 1.75em; }
.icon-xl  { width: 2.25em; height: 2.25em; }

/* Garante que o atributo boolean `hidden` sempre vença, mesmo sobre
   classes que definem display (ex: .alert, .panel). Sem isso, qualquer
   elemento com `class="alert" hidden` aparece vazio na tela. */
[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ── Barra de rolagem global ────────────────────────────────────────────────
   Sem as setas do scrollbar clássico do Windows, thumb em degradê bordô —
   mesma paleta do fundo do sidebar (.app-sidebar). Containers com scrollbar
   própria (sidebar, dropdowns, listas de dashboard) têm seletores mais
   específicos e continuam com o estilo deles, sem conflito.

   Chrome/Edge/Brave recentes já suportam as propriedades padrão
   scrollbar-width/scrollbar-color e, quando declaradas, elas ganham
   prioridade sobre os pseudo-elementos ::-webkit-scrollbar-* — anulando o
   degradê e a remoção das setas. `@supports not selector(::-webkit-scrollbar)`
   restringe scrollbar-width/color só a navegadores que NÃO entendem os
   pseudo-elementos (Firefox), deixando os demais usar só o ::-webkit-*. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary-800) var(--color-gray-100);
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

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

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

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(180deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
}