/* =============================================================================
   Visual novo (card 978926), onda 4 — formulários compartilhados

   Vale para todo formulário montado sobre o design system (form.base.css,
   <x-form-header>, <x-form-tabs>, <x-form-section>, <x-form-actions>) e para os
   campos Bootstrap dentro de .form-page. Só age com <html data-ui="next">.

   - Rótulo legível: 12px, caixa normal, peso 600 (o 10px em maiúsculas do tema
     cai abaixo do piso do DESIGN.md e cansa em formulário longo).
   - Campos de 36px, borda firme, foco com contorno preto; erro em vermelho com
     a mensagem logo abaixo.
   - Abas sublinhadas sem caixa em volta (mesmo desenho de AirTabs).
   - Barra de ações plana, separada por uma linha, botão primário à direita.
   ============================================================================= */

html[data-ui="next"] body[data-theme="air"] .form-page .form-label,
html[data-ui="next"] body[data-theme="air"] .form-page label.col-form-label {
    margin-bottom: 6px;
    font-size: var(--air-ui-fs-small);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--air-ink);
}

html[data-ui="next"] body[data-theme="air"] .form-page .form-control,
html[data-ui="next"] body[data-theme="air"] .form-page .form-select {
    min-height: 36px;
    border: 1px solid var(--air-border-strong);
    border-radius: var(--air-radius-sm);
    background-color: var(--air-input-bg);
    color: var(--air-ink-strong);
    font-size: 13px;
}

html[data-ui="next"] body[data-theme="air"] .form-page textarea.form-control {
    min-height: 88px;
}

html[data-ui="next"] body[data-theme="air"] .form-page .form-control:focus,
html[data-ui="next"] body[data-theme="air"] .form-page .form-select:focus {
    border-color: var(--air-ink-strong);
    box-shadow: 0 0 0 2px var(--air-focus-ring);
}

html[data-ui="next"] body[data-theme="air"] .form-page .form-control.is-invalid,
html[data-ui="next"] body[data-theme="air"] .form-page .form-select.is-invalid {
    border-color: var(--air-accent-danger);
}

html[data-ui="next"] body[data-theme="air"] .form-page .invalid-feedback {
    font-size: var(--air-ui-fs-small);
    color: var(--air-accent-danger);
}

html[data-ui="next"] body[data-theme="air"] .form-page .form-text {
    font-size: var(--air-ui-fs-small);
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .form-page .form-check-label {
    font-size: 13px;
    color: var(--air-ink);
}

/* Abas sublinhadas, sem caixa. */
html[data-ui="next"] body[data-theme="air"] .form-tabs-wrapper {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--air-border-color);
    border-radius: 0;
    background: transparent;
}

html[data-ui="next"] body[data-theme="air"] .form-tabs .nav-link {
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .form-tabs .nav-link:hover {
    background: transparent;
    border-bottom-color: var(--air-border-strong);
    color: var(--air-ink-strong);
}

html[data-ui="next"] body[data-theme="air"] .form-tabs .nav-link.active {
    border-bottom-color: var(--air-ink-strong);
    color: var(--air-ink-strong);
}

html[data-ui="next"] body[data-theme="air"] .form-tabs .nav-link.has-errors,
html[data-ui="next"] body[data-theme="air"] .form-tabs .nav-link.has-errors.active {
    border-bottom-color: var(--air-accent-danger);
    color: var(--air-accent-danger);
}

/* Cartões do formulário: planos. */
html[data-ui="next"] body[data-theme="air"] .form-page .card {
    border: 1px solid var(--air-border-color);
    border-radius: var(--air-radius-lg);
    box-shadow: none;
}

/* Seções. */
html[data-ui="next"] body[data-theme="air"] .form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--air-ink-strong);
}

html[data-ui="next"] body[data-theme="air"] .form-section-icon {
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .form-section-hint {
    font-size: var(--air-ui-fs-small);
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .form-section-badge {
    font-size: var(--air-ui-fs-label);
}

/* Barra de ações: plana, separada por linha. */
html[data-ui="next"] body[data-theme="air"] .form-actions {
    padding: 16px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

html[data-ui="next"] body[data-theme="air"] .form-actions .btn {
    min-height: 36px;
    padding-inline: 20px;
}

/* Botão Voltar do cabeçalho: discreto. */
html[data-ui="next"] body[data-theme="air"] .back-button-wrapper .btn {
    border-color: transparent;
    background: transparent;
    color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] .back-button-wrapper .btn:hover {
    color: var(--air-ink-strong);
}

/* =============================================================================
   Redesenho (pedido do José, 24/09/2026: "não vi novidade nas telas")
   ============================================================================= */

/* Seções: título (com o ícone) em cima e os campos embaixo, como na clássica — a
   versão em duas colunas (assunto à esquerda) saiu na revisão do José de 24/09. */
html[data-ui="next"] body[data-theme="air"] .form-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--air-radius-md);
    background: var(--air-surface-hover);
    color: var(--air-ink-strong);
}

/* Barra de ações fixa no rodapé da tela enquanto o formulário rola: salvar
   fica sempre ao alcance, sem voltar ao fim da página. Fica na largura do próprio
   container e com o fundo de quem a contém: com margem negativa e o fundo da página ela
   vazava para fora do cartão e abria um "buraco" escuro dentro dele (revisão do José,
   25/09 — Editar Alíquota, Notificações de Qualidade). */
html[data-ui="next"] body[data-theme="air"] .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: 0;
    padding: 12px 0;
    background: var(--air-surface);
}

html[data-ui="next"] body[data-theme="air"] :is(.card, .air-card, .modal-content) .form-actions {
    margin-bottom: 0;
    background: var(--air-surface-raised);
}

/* Card 980349 — enquanto a página rola, a barra flutua um pouco acima do rodapé, como uma
   caixa com borda; ao chegar ao fim, ela fica no lugar dela, plana (o sticky faz as duas
   coisas; air-form-actions.init.js marca .is-floating só enquanto ela está solta). Para isso
   o .main-content deixou de ter overflow: hidden (air-next.css). */
html[data-ui="next"] body[data-theme="air"] .form-actions {
    bottom: 16px;
}

html[data-ui="next"] body[data-theme="air"] .form-actions.is-floating {
    padding: 12px 16px;
    border-radius: var(--air-radius-lg);
    background: var(--air-surface-raised);
    box-shadow: 0 0 0 1px var(--air-border-color), var(--air-shadow-md);
}

/* O balão de feedback fica fixo no canto inferior direito (52px a 24px da borda) e cobriria o
   botão Salvar da barra solta: ela reserva o espaço dele. */
html[data-ui="next"] body[data-theme="air"]:has(.cf-launcher) .form-actions.is-floating {
    margin-right: 76px;
}

/* Muitas abas quebram linha — nunca rolagem horizontal (decisão do José, 25/09, para todas as
   telas; a rolagem da onda B, 24/09, saiu). O form.base.css força nowrap + overflow. */
html[data-ui="next"] body[data-theme="air"] .form-tabs {
    flex-wrap: wrap;
    overflow: visible;
}

html[data-ui="next"] body[data-theme="air"] .form-tabs .nav-link {
    padding: 10px 12px;
    white-space: nowrap;
}

/* Cabeçalho de formulário/detalhe sem o círculo de ícone, como nas listagens aprovadas. */
html[data-ui="next"] body[data-theme="air"] .form-heading > .form-badge {
    display: none;
}

/* Rótulos de campo sempre na caixa da frase (relatórios e filtros de módulo ainda traziam
   rótulo em caixa alta com espaçamento — onda E, 24/09). */
html[data-ui="next"] body[data-theme="air"] label.form-label,
html[data-ui="next"] body[data-theme="air"] .form-label {
    letter-spacing: 0;
    text-transform: none;
}

/* Telas que montam o título pela trilha (components.breadcrumb) e o "Voltar" logo abaixo:
   o Voltar sobe para cima do título, como nas demais telas do visual novo. */
html[data-ui="next"] body[data-theme="air"] .page-content > .container-fluid:has(> .air-page-head + .back-button-wrapper) {
    display: flex;
    flex-direction: column;
}

html[data-ui="next"] body[data-theme="air"] .page-content > .container-fluid > .air-page-head + .back-button-wrapper {
    order: -1;
}

/* Rótulo dos painéis de filtro no tamanho de texto de apoio (12px), não no piso de rótulo. */
html[data-ui="next"] body[data-theme="air"] :is(.listing-filters-panel, .projects-filters-panel) .form-label {
    font-size: var(--air-ui-fs-small);
}

/* =============================================================================
   Caixas de seleção e opções (revisão do José, 24/09 — "checkbox com visual melhor e
   atual", tela de funções/ACL como referência). Quadrado de 16px com canto de 4px,
   borda do tema, marcado em tinta sólida (preto no claro, claro no escuro) com o
   visto desenhado na cor oposta; foco com anel, sem o brilho azul do Bootstrap.
   Interruptores (.form-switch) ficam como estão.
   ============================================================================= */
html[data-ui="next"] body[data-theme="air"] :is(
    .form-check:not(.form-switch) > .form-check-input,
    .form-check-input[type="checkbox"]:not(.form-switch *),
    .air-select input[type="checkbox"],
    table input[type="checkbox"]:not(.form-check-input)
) {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.15em;
    border: 1.5px solid var(--air-border-strong);
    border-radius: 4px;
    background-color: var(--air-input-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    vertical-align: -0.2em;
    cursor: pointer;
    transition: background-color 120ms var(--air-ui-ease-out), border-color 120ms var(--air-ui-ease-out);
}

html[data-ui="next"] body[data-theme="air"] .form-check-input[type="radio"]:not(.form-switch *) {
    border-radius: 50%;
}

html[data-ui="next"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type]:not(.form-switch *):hover:not(:disabled) {
    border-color: var(--air-ink-muted);
}

html[data-ui="next"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type]:not(.form-switch *):focus {
    box-shadow: none;
    outline: 0;
}

html[data-ui="next"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type]:not(.form-switch *):focus-visible {
    box-shadow: 0 0 0 3px var(--air-focus-ring);
}

html[data-ui="next"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type]:not(.form-switch *):is(:checked, :indeterminate) {
    border-color: var(--air-accent-solid);
    background-color: var(--air-accent-solid);
}

html[data-ui="next"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type="checkbox"]:not(.form-switch *):checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5.5 10.5 3 3 6-7'/%3e%3c/svg%3e");
}

html[data-ui="next"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type="checkbox"]:not(.form-switch *):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

html[data-ui="next"] body[data-theme="air"] .form-check-input[type="radio"]:not(.form-switch *):checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* No escuro a tinta sólida é clara: o visto e o ponto ficam escuros. */
html[data-ui="next"][data-bs-theme="dark"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type="checkbox"]:not(.form-switch *):checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230c0c0c' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5.5 10.5 3 3 6-7'/%3e%3c/svg%3e");
}

html[data-ui="next"][data-bs-theme="dark"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type="checkbox"]:not(.form-switch *):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230c0c0c' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

html[data-ui="next"][data-bs-theme="dark"] body[data-theme="air"] .form-check-input[type="radio"]:not(.form-switch *):checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230c0c0c'/%3e%3c/svg%3e");
}

html[data-ui="next"] body[data-theme="air"] :is(.form-check-input, .air-select input, table input)[type]:not(.form-switch *):disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

html[data-ui="next"] body[data-theme="air"] .form-check-input:not(.form-switch *) ~ .form-check-label {
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui="next"] body[data-theme="air"] .form-check-input {
        transition: none;
    }}

/* Status como seleção (air-status-select.init.js): no lugar do interruptor, com a largura de
   um campo curto mesmo em coluna larga. */
html[data-ui="next"] body[data-theme="air"] .air-status-field {
    max-width: 320px;
    margin-bottom: 0.5rem;
}

/* Lista de permissões (funções/ACL): caixa e texto com respiro. */
html[data-ui="next"] body[data-theme="air"] .acl-permission-check {
    gap: 8px;
}