/* product/static/css/ux-surface.css — Correções de cascata do produto
 * (wave ux-surface; issues 28, 29, 30 — gabsgoms10/gis-profitlinkr).
 *
 * Carrega como ÚLTIMO stylesheet do <head> de base/base.html — depois de
 * todo CSS da plataforma — então cada regra aqui vence a declaração da
 * plataforma em empate de especificidade, por ordem de cascata.
 *
 * Tokens-only: ZERO hex, funções de cor (rgb/hsl), cor nomeada ou url
 * externa — só var(--*) (mesmo invariante de gis.css e landing.css;
 * enforced por scripts/ux_surface_check.py e pelos guards pytest).
 */

/* issue 28 — focus ring suprimido: a plataforma declara outline de
   2px var(--accent) em :focus-visible cedo e depois aplica outline none
   em .form-control:focus — empate de especificidade (0,1,1) resolvido
   pela regra posterior, então o anel de foco sumia nos campos de form.
   Re-declarado aqui, vence por ordem de arquivo. */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
.form-control:focus-visible,
.input:focus-visible,
.field :is(input, textarea, select):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* issue 29 — touch targets ≥44px no funil de auth (WCAG 2.5.5). */
.auth-card .form-control,
.auth-card .input {
    min-height: 44px;
}

/* Checkbox "Lembrar-me": allauth renderiza o input DENTRO do label —
   .checkbox-label é o alvo real; os seletores :has()/irmão cobrem
   variações de markup entre versões do boilerplate. */
.auth-card .checkbox-label,
.auth-card .field:has(input[type="checkbox"]),
.auth-card input[type="checkbox"] + label,
.auth-card label:has(> input[type="checkbox"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.auth-card input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: none;
}

/* Links inline do form (esqueci a senha / criar conta) — idempotente
   com a regra equivalente da plataforma. */
.auth-links a,
.auth-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* issue 30 — nav/footer com alvos de toque ≥44px a 375px + skip-link. */
@media (max-width: 576px) {
    .navbar-nav a,
    .nav-link,
    .footer-nav a,
    .footer a {
        min-height: 44px;
        padding-top: 14px;
        padding-bottom: 14px;
        display: inline-flex;
        align-items: center;
    }

    .skip-link:focus-visible {
        padding: 14px 16px;
    }
}

/* issue 30 — dígitos de badges/contadores alinhados (tabular-nums). */
.badge-accent {
    font-variant-numeric: tabular-nums;
}