/* FILE: wwwroot/app.css
   PURPOSE: Estilos globais não-cobertos por tokens.css (utilitários mínimos, boundary de erro, formulários).
   AI-NOTE: NÃO substituir tokens.css. Aqui só vai o que é genuinamente global. */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--pe-success); }
.invalid { outline: 1px solid var(--pe-danger); }
.validation-message { color: var(--pe-danger); font-size: var(--pe-text-sm); }

.blazor-error-boundary {
    background: var(--pe-danger);
    color: #fff;
    padding: var(--pe-space-4);
    border-radius: var(--pe-radius-md);
}
.blazor-error-boundary::after { content: "Ocorreu um erro."; }

/* Utilitários globais discretos. */
.pe-container { max-width: var(--pe-container-max); margin-inline: auto; padding-inline: var(--pe-space-4); }
.pe-container--narrow { max-width: var(--pe-container-narrow); }
.pe-stack > * + * { margin-top: var(--pe-space-4); }
.pe-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Touch feedback :active global ──────────────────────────────────────────
   Em dispositivos touch (pointer:coarse), todos os botões e links interativos
   têm um scale ligeiro no :active para simular o toque físico de uma app nativa.
   `transition-duration: 60ms` garante que o feedback é imediato.
   `pointer-events: coarse` limita ao mobile para não interferir com hover no desktop. */
@media (pointer: coarse) {
    a:not([aria-disabled="true"]):active,
    button:not(:disabled):active,
    [role="button"]:active {
        opacity: 0.8;
        transform: scale(0.97);
        transition: transform 60ms ease, opacity 60ms ease;
    }
}

/* ── Anti-zoom iOS: font-size mínimo 16px em todos os campos de formulário ──
   O iOS Safari faz zoom automático quando o input tem font-size < 16px.
   Esta regra previne esse comportamento em toda a app. */
@media (max-width: 767px) {
    input, textarea, select {
        font-size: max(1rem, 16px) !important;
    }
}

/* ── scroll-margin-top global ─────────────────────────────────────────────
   Garante que anchors (#id) navegados via URL ou JS scrollIntoView não ficam
   escondidos atrás do header sticky. Valor = altura do header por breakpoint.
   mobile : 52px (bar1) + 38px (ticker) = 90px
   tablet : 60px + 44px (navbar) + 38px (ticker) = 142px
   desktop: 64px + 42px (navbar) + 38px (ticker) = 144px */
[id] {
    scroll-margin-top: var(--pe-scroll-offset, 90px);
}

@media (min-width: 768px) {
    [id] { scroll-margin-top: 142px; }
}

@media (min-width: 1024px) {
    [id] { scroll-margin-top: 144px; }
}