/* ── Shared form validation UI ───────────────────────────────────────────────
 * Works alongside Bootstrap 5 is-valid / is-invalid.
 * Bootstrap already handles .form-control.is-valid / .form-select.is-valid
 * (green border + checkmark SVG). This file covers:
 *   • Non-Bootstrap inputs (class="my-1")
 *   • Error text: secondary color + ⚠ prefix
 *   • Progress counter
 * ────────────────────────────────────────────────────────────────────────── */

/* -- Non-Bootstrap inputs (plain inputs on dark-background sections) ------- */
input.is-valid:not(.form-control),
textarea.is-valid:not(.form-control),
select.is-valid:not(.form-select) {
    border: 1.5px solid #198754 !important;
    border-radius: 0.375rem;
    outline-color: #198754;
}

input.is-invalid:not(.form-control),
textarea.is-invalid:not(.form-control),
select.is-invalid:not(.form-select) {
    border: 1.5px solid #dc3545 !important;
    border-radius: 0.375rem;
    outline-color: #dc3545;
}

/* -- Error text: secondary + ⚠ prefix ------------------------------------ */
/* Targets <small id="*-error"> elements injected by FormValidator forms */
small[id$="-error"] {
    color: #6c757d !important;
    font-size: 0.8rem !important;
    margin-top: 0.15rem;
}
small[id$="-error"]:not(:empty)::before {
    content: '⚠ ';
    color: #dc3545;
}

/* Error text on dark backgrounds (dark green sections) */
small[id$="-error"].fv-on-dark {
    color: #ffc107 !important;
}
small[id$="-error"].fv-on-dark:not(:empty)::before {
    color: #ffc107;
}

/* Bootstrap invalid-feedback: soften text to secondary */
.invalid-feedback {
    color: #6c757d !important;
    font-size: 0.8rem;
}
.invalid-feedback:not(:empty)::before {
    content: '⚠ ';
    color: #dc3545;
}

/* -- Progress counter ----------------------------------------------------- */
.fv-progress {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.4rem;
    min-height: 1.2em;
}
.fv-progress.fv-complete {
    color: #198754;
    font-weight: 500;
}

/* Progress on dark backgrounds */
.fv-progress.fv-on-dark {
    color: rgba(255, 255, 255, 0.7);
}
.fv-progress.fv-on-dark.fv-complete {
    color: #86efac; /* light green */
}