/*
 * Estado de preenchimento dos formulários do Conecta PCSE.
 *
 * O JavaScript global ativa estas regras somente em formulários de
 * cadastro/edição. Formulários de filtro permanecem neutros, salvo opt-in com
 * data-pcse-form-state="on".
 */

.pcse-form-tracked {
    --pcse-form-accent: var(--bs-theme, #00e6a8);
    --pcse-form-accent-rgb: var(--bs-theme-rgb, 0, 230, 168);
    --pcse-form-warning: var(--bs-warning, #f4b942);
    --pcse-form-warning-rgb: var(--bs-warning-rgb, 244, 185, 66);
    --pcse-form-danger: var(--bs-danger, #ff5d6c);
    --pcse-form-danger-rgb: var(--bs-danger-rgb, 255, 93, 108);
    --pcse-form-border: rgba(255, 255, 255, 0.16);
    --pcse-form-muted: rgba(255, 255, 255, 0.62);
}

/*
 * Dentro dos formulários acompanhados, o ponto colorido já comunica a
 * obrigatoriedade. Evita duplicá-lo com o asterisco global do base.html.
 */
.pcse-form-tracked label.form-label:has(+ input:required)::after,
.pcse-form-tracked label.form-label:has(+ select:required)::after,
.pcse-form-tracked label.form-label:has(+ textarea:required)::after,
.pcse-form-tracked input:required + label.form-label::after,
.pcse-form-tracked select:required + label.form-label::after,
.pcse-form-tracked textarea:required + label.form-label::after,
.pcse-form-tracked label.form-label.required::after {
    content: none;
}

/*
 * Faixa discreta na borda esquerda: âmbar para campo opcional ainda vazio e
 * vermelho para campo obrigatório ainda vazio. A borda explícita prevalece
 * inclusive sobre modais que removem o box-shadow dos controles.
 */
.pcse-form-tracked .pcse-field-empty:not([type="checkbox"]):not([type="radio"]),
.pcse-form-tracked .pcse-field-empty + .select2-container .select2-selection,
.pcse-form-tracked .pcse-field-empty + .pcse-dtp-wrapper .pcse-dtp-display {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-left-color: rgba(var(--pcse-form-warning-rgb), 0.72) !important;
}

.pcse-form-tracked .pcse-field-empty.pcse-field-required-empty:not([type="checkbox"]):not([type="radio"]),
.pcse-form-tracked .pcse-field-empty.pcse-field-required-empty + .select2-container .select2-selection,
.pcse-form-tracked .pcse-field-empty.pcse-field-required-empty + .pcse-dtp-wrapper .pcse-dtp-display {
    border-left-color: rgba(var(--pcse-form-danger-rgb), 0.92) !important;
}

/*
 * O restaurador do modal desktop usa um seletor deliberadamente forte para
 * repor a borda original. Este estado global precisa superá-lo nos campos
 * pendentes, inclusive nos controles visuais de Select2 e datetimepicker.
 */
body :is(#pcse-global-modal-form-state, .modal)
    .modal-dialog
    .pcse-form-tracked
    .pcse-field-empty:not([type="checkbox"]):not([type="radio"]),
body :is(#pcse-global-modal-form-state, .modal)
    .modal-dialog
    .pcse-form-tracked
    .pcse-field-empty
    + .select2-container
    .select2-selection,
body :is(#pcse-global-modal-form-state, .modal)
    .modal-dialog
    .pcse-form-tracked
    .pcse-field-empty
    + .pcse-dtp-wrapper
    .pcse-dtp-display {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-left-color: rgba(var(--pcse-form-warning-rgb), 0.72) !important;
}

body :is(#pcse-global-modal-form-state, .modal)
    .modal-dialog
    .pcse-form-tracked
    .pcse-field-empty.pcse-field-required-empty:not([type="checkbox"]):not([type="radio"]),
body :is(#pcse-global-modal-form-state, .modal)
    .modal-dialog
    .pcse-form-tracked
    .pcse-field-empty.pcse-field-required-empty
    + .select2-container
    .select2-selection,
body :is(#pcse-global-modal-form-state, .modal)
    .modal-dialog
    .pcse-form-tracked
    .pcse-field-empty.pcse-field-required-empty
    + .pcse-dtp-wrapper
    .pcse-dtp-display {
    border-left-color: rgba(var(--pcse-form-danger-rgb), 0.92) !important;
}

.pcse-form-tracked .pcse-label-pending::before {
    display: inline-block;
    width: 0.36rem;
    height: 0.36rem;
    margin-right: 0.42rem;
    vertical-align: 0.08em;
    content: "";
    border-radius: 50%;
    background: rgba(var(--pcse-form-warning-rgb), 0.88);
}

.pcse-form-tracked .pcse-label-pending.pcse-label-required::before {
    background: var(--pcse-form-danger);
}

.pcse-form-tracked .pcse-field-empty:focus,
.pcse-form-tracked .pcse-field-empty:focus-visible,
.pcse-form-tracked .pcse-field-empty.select2-hidden-accessible + .select2-container--open .select2-selection,
.pcse-form-tracked .pcse-field-empty + .pcse-dtp-wrapper .pcse-dtp-display:focus {
    border-left-color: var(--pcse-form-accent) !important;
}

/* Pílula e linha de progresso injetadas no cabeçalho de cada seção. */
.pcse-form-section-header {
    --pcse-form-accent: var(--bs-theme, #00e6a8);
    --pcse-form-accent-rgb: var(--bs-theme-rgb, 0, 230, 168);
    --pcse-form-border: rgba(255, 255, 255, 0.16);
    --pcse-form-muted: rgba(255, 255, 255, 0.62);
    position: relative;
    column-gap: 0.6rem;
}

.pcse-form-section-title,
.pcse-form-section-title-row {
    min-width: 0;
}

.pcse-form-section-title-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
}

.pcse-section-progress {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.42rem;
    min-height: 1.55rem;
    padding: 0.16rem 0.52rem;
    margin-left: 0;
    color: var(--pcse-form-muted);
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.035em;
    white-space: nowrap;
    border: 1px solid var(--pcse-form-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.pcse-form-section-header > .card-header-btn {
    margin-left: auto;
}

.pcse-section-progress-track,
.pcse-form-progress-track {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}

.pcse-section-progress-track {
    width: 2.15rem;
    height: 0.2rem;
}

.pcse-section-progress-bar,
.pcse-form-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--pcse-form-accent);
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pcse-section-progress-icon {
    display: none;
    color: var(--pcse-form-accent);
    font-size: 0.88rem;
}

.pcse-section-progress.is-complete {
    color: var(--pcse-form-accent);
    border-color: rgba(var(--pcse-form-accent-rgb), 0.38);
    background: rgba(var(--pcse-form-accent-rgb), 0.1);
}

.pcse-section-progress.is-complete .pcse-section-progress-icon {
    display: inline-flex;
}

.pcse-section-progress.is-complete .pcse-section-progress-track {
    display: none;
}

.pcse-section-progress.is-empty .pcse-section-progress-bar {
    background: rgba(255, 255, 255, 0.25);
}

.pcse-section-progress-line {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(
        90deg,
        var(--pcse-form-accent),
        rgba(var(--pcse-form-accent-rgb), 0.35)
    );
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Progresso geral opcional: basta usar data-pcse-form-total no contêiner. */
.pcse-form-progress {
    display: flex;
    flex: 1 1 11rem;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    color: var(--pcse-form-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.pcse-form-progress-track {
    flex: 1 1 auto;
    width: auto;
    height: 0.32rem;
}

.pcse-form-progress-value {
    flex: 0 0 auto;
    color: var(--pcse-form-accent);
    font-variant-numeric: tabular-nums;
}

@keyframes pcse-field-flash {
    0% {
        border-color: rgba(var(--pcse-form-accent-rgb), 0.92);
        box-shadow: 0 0 0 3px rgba(var(--pcse-form-accent-rgb), 0.2);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--pcse-form-accent-rgb), 0);
    }
}

.pcse-field-flash,
.pcse-field-flash + .select2-container .select2-selection,
.pcse-field-flash + .pcse-dtp-wrapper .pcse-dtp-display {
    animation: pcse-field-flash 1.6s ease-out;
}

@media (max-width: 767.98px) {
    .pcse-section-progress {
        min-height: 1.45rem;
        padding-inline: 0.45rem;
        font-size: 0.64rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcse-section-progress-bar,
    .pcse-section-progress-line,
    .pcse-form-progress-bar {
        transition: none;
    }

    .pcse-field-flash,
    .pcse-field-flash + .select2-container .select2-selection,
    .pcse-field-flash + .pcse-dtp-wrapper .pcse-dtp-display {
        animation: none;
    }
}