/*
 * Fundação de formulários NF
 *
 * Este arquivo não define largura, margem ou padding no elemento <form>.
 * O contêiner da página decide o layout; o formulário cuida apenas de campos,
 * feedback e ações. Isso evita que formulários de busca, tabelas e modais
 * herdem um card de 600 px ou botões 100% sem intenção.
 */

:where(form) input[type="text"],
:where(form) input[type="email"],
:where(form) input[type="password"],
:where(form) input[type="url"],
:where(form) input[type="number"],
:where(form, .hangar-workspace__toolbar) input[type="search"],
:where(form) input[type="date"],
:where(form) input[type="datetime-local"],
:where(form) input[type="time"],
:where(form) textarea,
:where(form, .hangar-workspace__toolbar) select {
    width: 100%;
    min-height: 44px;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 1rem;
    line-height: 1.35;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

:where(form) textarea {
    min-height: 112px;
    resize: vertical;
}

:where(form, .hangar-workspace__toolbar) input::placeholder,
:where(form) textarea::placeholder {
    color: var(--muted-color);
    opacity: 0.88;
}

:where(form, .hangar-workspace__toolbar) input:focus-visible,
:where(form) textarea:focus-visible,
:where(form, .hangar-workspace__toolbar) select:focus-visible {
    border-color: var(--signal-color);
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: 1px;
    box-shadow: 0 0 0 1px var(--surface-color);
}

:where(form) input:disabled,
:where(form) textarea:disabled,
:where(form) select:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

:where(form) input[type="file"] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background-color: var(--surface-color);
    color: var(--text-color);
    box-sizing: border-box;
}

:where(form) input[type="color"] {
    width: 72px;
    min-height: 44px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--surface-color);
}

/*
 * 24px e o piso da WCAG 2.5.8, e a excecao de "alvo em linha" nao cobre caixa
 * de marcar: ela nao e uma palavra dentro de um paragrafo, e um controle.
 * Onde a caixa esta dentro de um `<label>`, o alvo real ja era os 44px do
 * rotulo; onde ela aparece solta — na grade do Hangar, na lista de categorias
 * do editor — o alvo eram os 20px do quadradinho, e errar o toque marcava a
 * linha de baixo.
 */
:where(form) input[type="checkbox"],
:where(form) input[type="radio"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--button-background);
}

:where(form) > p {
    display: grid;
    gap: 0.42rem;
    margin: 0 0 1rem;
}

:where(form) label {
    color: var(--text-color);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
}

:where(form) label:has(> input[type="checkbox"]),
:where(form) label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    cursor: pointer;
}

/*
 * Botões sem classe recebem apenas um fallback seguro. A hierarquia visual
 * explícita continua em .btn-primary/.btn-secondary/.btn-danger.
 */
:where(form) button[type="submit"]:not(.btn):not(.btn-search):not(.community-action-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    padding: 0.68rem 1rem;
    border: 1px solid var(--button-background);
    border-radius: 9px;
    background-color: var(--button-background);
    color: var(--button-text-color);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

:where(form) button[type="submit"]:not(.btn):not(.btn-search):not(.community-action-button):hover {
    border-color: var(--button-hover);
    background-color: var(--button-hover);
    color: var(--button-hover-text);
}

.nf-form {
    display: grid;
    gap: 1rem;
}

.nf-form > p {
    margin: 0;
}

.nf-field {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
}

/* O controle preenche o campo **sem depender de estar dentro de um `<form>`**.
   As regras de largura acima usam `:where(form) input[...]`, e um `.nf-field`
   fora de formulário renderizava o input na largura intrínseca do navegador:
   170 px dentro de um campo de 518.

   Foi assim que a própria página de referência — que declara renderizar "com o
   CSS de produção" — mostrou o componente errado, e ensinou o contrário do que
   documenta. Um primitivo de design system precisa bastar-se. */
.nf-field :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
.nf-control :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
}

.nf-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.nf-control {
    position: relative;
    min-width: 0;
}

.nf-control--password input {
    padding-right: 3.5rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.28rem;
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-color);
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.nf-check {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    min-height: 44px;
    padding: 0.55rem 0;
    cursor: pointer;
}

.nf-check input {
    margin-top: 0.1rem;
}

.nf-check > span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.nf-check strong {
    color: var(--text-color);
    font-size: 0.94rem;
}

.nf-check small {
    color: var(--muted-color);
    font-size: 0.82rem;
    font-weight: 500;
}

.field-help,
.nf-form .helptext,
.nf-form > p > .helptext,
.nf-form small {
    margin: 0;
    color: var(--muted-color);
    font-size: 0.86rem;
    line-height: 1.5;
}

.field-help ul,
.nf-form .helptext ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

.field-errors,
.nf-form ul.errorlist {
    margin: 0;
    color: var(--error-color);
    font-size: 0.88rem;
    line-height: 1.45;
}

.field-errors ul.errorlist,
.nf-form ul.errorlist {
    padding: 0;
    list-style: none;
}

.field-errors li + li,
.nf-form ul.errorlist li + li {
    margin-top: 0.2rem;
}

.nf-field.has-errors input,
.nf-field.has-errors select,
.nf-field.has-errors textarea,
.form-field.has-errors input,
.form-field.has-errors select,
.form-field.has-errors textarea {
    border-color: var(--error-color);
}

.nf-field.has-errors input:focus-visible,
.nf-field.has-errors select:focus-visible,
.nf-field.has-errors textarea:focus-visible {
    outline-color: color-mix(in srgb, var(--error-color) 35%, transparent);
}

.nf-alert {
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    color: var(--text-color);
    line-height: 1.5;
}

.nf-alert p,
.nf-alert ul {
    margin: 0.35rem 0 0;
}

.nf-alert--error {
    border-color: color-mix(in srgb, var(--error-color) 62%, var(--border-color));
    background: color-mix(in srgb, var(--error-color) 10%, var(--surface-color));
}

.nf-alert--info {
    border-color: color-mix(in srgb, var(--signal-color) 50%, var(--border-color));
    background: color-mix(in srgb, var(--signal-color) 9%, var(--surface-color));
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.form-field {
    min-width: 0;
}

.form-actions,
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.settings-tab-content form,
.vehicle-form {
    max-width: none;
    margin: 0;
    padding: 0;
}

.settings-form h2 {
    margin-bottom: 0;
}

/* Autenticação */
.auth-shell {
    display: grid;
    width: 100%;
    min-height: min(720px, calc(100vh - 170px));
    padding: clamp(0.5rem, 3vw, 2.5rem) 0;
    place-items: center;
}

/* O cartao de autenticacao — NFUX-101.

   Ele tinha `blur(18px)` e fundo a 94% de opacidade: uma superficie de vidro
   por cima do canvas de particulas. Isso e o que a secao 7.1 da direcao manda
   sair — "backdrop-filter e blur em superficies de conteudo" — e havia um
   motivo concreto alem do estetico: texto sobre fundo translucido muda de
   contraste conforme o que passa atras, e as particulas se movem. O contraste
   do rotulo de um campo nao pode depender de onde a animacao esta.

   O raio tambem desce para a escala: 22px nao esta em `--radius-*`, e um
   valor solto e o comeco de cada tela ter o seu. */
.auth-card {
    width: min(100%, 480px);
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--box-shadow);
}

.auth-card--signup {
    width: min(100%, 540px);
}

.auth-card__header {
    margin-bottom: 1.35rem;
}

.auth-card__header h1 {
    margin: 0.45rem 0 0.55rem;
    font-size: clamp(1.75rem, 5vw, 2.3rem);
    line-height: 1.12;
}

.auth-card__header p {
    margin: 0;
    color: var(--muted-color);
    line-height: 1.55;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.auth-form {
    gap: 1.1rem;
}

.auth-inline-link,
.auth-card__footer a {
    color: var(--accent-strong);
    font-weight: 750;
}

.auth-session-choice {
    margin-top: -0.25rem;
}

.auth-submit {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border-radius: 11px;
}

.auth-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--border-color);
    color: var(--muted-color);
    text-align: center;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.25rem 0;
    color: var(--muted-color);
    font-size: 0.82rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border-color);
}

.auth-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.auth-secondary-actions .btn {
    min-height: 44px;
    flex: 1 1 180px;
}

.auth-identity-note {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.1rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--signal-color) 35%, var(--border-color));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--signal-color) 7%, var(--surface-color));
    color: var(--text-color);
}

.auth-identity-note strong {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.auth-identity-note p,
.auth-identity-note ol {
    margin: 0;
    color: var(--muted-color);
    font-size: 0.86rem;
    line-height: 1.5;
}

.auth-identity-note ol {
    padding-left: 1.2rem;
}

.auth-identity-note a {
    width: fit-content;
    color: var(--accent-strong);
    font-size: 0.86rem;
    font-weight: 750;
}

.auth-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
}

.auth-progress--discord {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.65rem;
}

.auth-progress-note {
    margin: 0 0 1.35rem;
    color: var(--muted-color);
    font-size: 0.82rem;
    line-height: 1.5;
}

.auth-progress li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: var(--muted-color);
    font-size: 0.76rem;
    font-weight: 700;
}

.auth-progress li span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--surface-color);
}

.auth-progress li.is-current {
    color: var(--accent-strong);
}

.auth-progress li.is-current span {
    border-color: var(--accent-color);
    background: var(--accent-soft);
}

.auth-state-card {
    text-align: center;
}

.auth-state-card .auth-card__header {
    margin-top: 0.9rem;
}

.auth-state-icon {
    display: inline-grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 18px;
    font-size: 1.6rem;
}

.auth-state-icon--warning {
    background: color-mix(in srgb, var(--warning-color) 16%, var(--surface-color));
    color: var(--warning-color);
}

.allauth-form {
    width: min(100%, 560px);
    margin: 1rem 0;
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        min-height: auto;
        padding: 0.25rem 0;
        place-items: start center;
    }

    .auth-card {
        padding: 1.1rem;
        border-radius: var(--radius-xl);
    }

    .auth-card__header {
        margin-bottom: 1.1rem;
    }

    .auth-progress li {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .nf-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .form-actions .btn,
    .settings-form .action-row .btn {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    .site-header .site-brand {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .site-header .hamburger-btn,
    .site-header .header-icon-button,
    .site-header .search-form,
    .site-header .search-form .btn-search,
    .site-header > .header-actions > .site-controls .theme-switcher,

    .account-menu summary {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-mobile-search-form input,
    .site-header .nav-mobile-search-form button {
        min-height: 44px;
    }
}


/* ── Alternativas de entrada ──────────────────────────────────────────
   O bloco "ou · Continuar com Discord" do login e do cadastro — F06.

   Existe como estilo próprio porque o snippet padrão do allauth foi
   sobrescrito: ele fala em "third-party" e trata os provedores como lista
   genérica. Aqui há um só, ele tem nome, e vem com a ressalva de que entrar
   pelo Discord prova posse da conta, não vínculo com a organização. */

.auth-alternatives {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* A linha "ou": régua dos dois lados, para ler como alternativa e não como
   passo seguinte. Um separador só embaixo faria o botão parecer continuação
   do formulário. */
.auth-alternatives__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--muted-color);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.auth-alternatives__divider::before,
.auth-alternatives__divider::after {
    content: "";
    height: 1px;
    background: var(--border-color);
}

.auth-alternatives__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
}

.auth-alternatives__note {
    margin: 0;
    color: var(--muted-color);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
}

/* =============================================================================
   O resumo de erros — P1-08
   =============================================================================
   Nao usa vermelho de fundo cheio: o bloco aparece **acima** do formulario e
   pintar a faixa inteira empurra o olho para o aviso e para longe dos campos
   que ele manda corrigir. A barra lateral marca sem gritar.
   ========================================================================== */
.nf-erros {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--error-color);
    border-radius: var(--radius-sm);
    background: var(--error-soft);
}
.nf-erros:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}
.nf-erros__titulo {
    margin: 0 0 var(--space-2);
    font-weight: 600;
}
.nf-erros__lista {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.nf-erros__lista a {
    font-weight: 600;
}

/* =============================================================================
   O aviso de uma acao assincrona — P1-06
   =============================================================================
   Era `.sr-only`: "Nao foi possivel remover a nave" existia so para leitor de
   tela, e quem enxerga via a acao nao acontecer sem nenhuma explicacao.

   `:empty` e o ponto: a regiao viva precisa existir no DOM desde o inicio
   para anunciar, mas nao pode ocupar espaco enquanto nao tem o que dizer. Um
   bloco reservado vazio no meio da tela e ruido permanente.
   ========================================================================== */
.nf-status {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--accent-color);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    font-size: var(--text-sm);
}
.nf-status:empty {
    margin: 0;
    padding: 0;
    border: 0;
}
.nf-status.is-falha {
    border-left-color: var(--error-color);
    background: var(--error-soft);
}
/* Searchable relationships: bounded results, including duplicate names. */
.nf-relation-results { display: grid; gap: 0; list-style: none; padding: .25rem; margin: 0; max-height: 18rem; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--card-bg); }
.nf-relation-results[hidden] { display: none; }
.nf-relation-results li { display: grid; gap: .15rem; padding: .65rem .75rem; min-height: 2.75rem; cursor: pointer; border-radius: var(--radius-sm); }
.nf-relation-results li:hover, .nf-relation-results li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.nf-relation-results small { color: var(--muted-color); }