/* =============================================================
   Validação de formulários — aparência do estado inválido

   Carregado nas quatro faces (central/tenant × backend/frontend),
   junto com js/validacao-formularios.js.

   Cobre Tabler (backend) e Bootstrap puro (frontend do tema),
   por isso as duas famílias de seletor aparecem lado a lado.
   ============================================================= */

/* -------------------------------------------------------------
   Fora o X vermelho de dentro do campo.

   Tabler e Bootstrap desenham um ícone de erro como background da
   própria caixa e reservam espaço com padding-right. Some com os
   dois: a borda vermelha e a mensagem abaixo já comunicam o erro,
   e o ícone dentro do campo atrapalha quem está digitando —
   principalmente em campo com máscara ou com botão no input-group.
   ------------------------------------------------------------- */
.form-control.is-invalid,
.was-validated .form-control:invalid,
textarea.form-control.is-invalid,
.was-validated textarea.form-control:invalid {
    background-image: none;
    padding-right: 0.75rem;
}

/* No select o background carrega DUAS imagens: a seta do dropdown
   (--tblr-form-select-bg-img) e o ícone de validação
   (--tblr-form-select-bg-icon). Zerando só a segunda, a seta fica. */
.form-select.is-invalid,
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid,
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    --tblr-form-select-bg-icon: none;
}

/* Bootstrap puro (frontend) monta o mesmo par direto na
   propriedade, então lá a seta precisa ser redesenhada. */
.form-select.is-invalid,
.was-validated .form-select:invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23929dab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* -------------------------------------------------------------
   Mensagem de erro

   O Bootstrap só mostra .invalid-feedback quando ela é irmã
   POSTERIOR de quem tem .is-invalid. Isso quebra em select2,
   tom-select e file-upload, que injetam markup entre os dois. A
   classe no container resolve independente do arranjo do DOM.
   ------------------------------------------------------------- */
.campo-com-erro .invalid-feedback,
.invalid-feedback.mostrar-erro {
    display: block;
}

.invalid-feedback {
    font-weight: 500;
}

/* Widgets de terceiros não recebem .is-invalid no elemento que o
   usuário enxerga — a borda tem de vir do container. */
.campo-com-erro .select2-container--default .select2-selection,
.campo-com-erro .ts-wrapper .ts-control,
.campo-com-erro .form-control-plaintext {
    border-color: var(--tblr-form-invalid-border-color, #d63939);
}

/* -------------------------------------------------------------
   Rótulo de campo obrigatório

   Já existe .form-label-required no tema; aqui só garantimos o
   asterisco quando o campo tem `required` mas o componente não
   passou a classe (acontece em form escrito à mão).
   ------------------------------------------------------------- */
.form-label-required::after {
    content: " *";
    color: var(--tblr-danger, #d63939);
}

/* -------------------------------------------------------------
   Foco no primeiro campo inválido após tentativa de envio
   ------------------------------------------------------------- */
.campo-em-foco {
    animation: validacao-destaque 0.9s ease;
}

@keyframes validacao-destaque {
    0%,
    100% {
        box-shadow: none;
    }

    35% {
        box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .campo-em-foco {
        animation: none;
    }
}