/* ════════════════════════════════════════════════════════════════════════
   Neurosinos — Design System (camada base compartilhada)
   ────────────────────────────────────────────────────────────────────────
   Componentes reutilizados em todo o app. As cores vêm dos tokens de tema
   (static/css/tokens.css, carregado antes deste arquivo).

   Carregado no <head> do base.html, ANTES do bloco extra_css de cada página,
   para que estilos por-página continuem podendo sobrescrever.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Cores: ficam em tokens.css (uma definição por tema). Aqui só o que não é cor. */

    /* ── Raio, sombra, espaçamento ── */
    --ns-radius-sm:   8px;
    --ns-radius:      10px;
    --ns-radius-lg:   12px;
    --ns-radius-pill: 20px;
    --ns-shadow:      0 1px 5px rgba(var(--ns-shadow-rgb), 0.07);
    --ns-shadow-head: 0 4px 20px rgba(var(--ns-shadow-rgb), 0.2);
    --ns-track:       0.08em;   /* letter-spacing padrão para labels uppercase */

    /* ── Alinha o feedback de validação do Bootstrap à cor de erro do app ── */
    --bs-form-invalid-color:        var(--ns-danger);
    --bs-form-invalid-border-color: var(--ns-danger);
}

[data-bs-theme="dark"] {
    --ns-shadow: 0 1px 5px rgba(var(--ns-shadow-rgb), 0.25);
}

/* ════════════════════════════════════════════════════════════════════════
   Acessibilidade — foco visível por teclado
   Só aparece em navegação por teclado (:focus-visible), não no clique de mouse.
   ════════════════════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--ns-accent);
    outline-offset: 2px;
}
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ns-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   Label de campo (.f-label) — base compartilhada
   Usado pelo componente templates/components/field.html. Templates podem
   redefinir localmente (o extra_css carrega depois e vence em empate).
   ════════════════════════════════════════════════════════════════════════ */
.f-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: var(--ns-track);
    font-weight: 700;
    color: var(--ns-muted);
    margin-bottom: 0.3rem;
    display: block;
}
.f-label .req { color: var(--ns-accent); margin-left: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   Validação inline — feedback de erro por campo
   O mixin InlineErrorFormMixin adiciona `is-invalid` ao input; este bloco
   garante que a mensagem .invalid-feedback apareça logo abaixo.
   ════════════════════════════════════════════════════════════════════════ */
.invalid-feedback {
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Componente — estado vazio (.ns-empty-state)
   Consolida os antigos .pac-empty / .proc-empty / .empty-state em um só.
   ════════════════════════════════════════════════════════════════════════ */
.ns-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--ns-muted-2);
    font-size: 0.88rem;
}
.ns-empty-state .ns-empty-icon,
.ns-empty-state > i {
    font-size: 2rem;
    color: var(--ns-faint);
    display: block;
    margin-bottom: 0.75rem;
}
/* Texto da mensagem — funciona com <p>, <span> ou texto solto */
.ns-empty-state p,
.ns-empty-state span {
    color: var(--ns-muted-2);
    font-size: 0.88rem;
    margin: 0;
}