/* Validation errors, shared by every layout (jQuery Validate unobtrusive and FormValidation on the
   login pages). The field gets a danger border with a soft tint, its label turns danger, and the
   message shows under it as a small line with an alert icon that fades in. Colors come from
   Bootstrap's --bs-danger variables, so it follows the light/dark theme. Texts: js/validation.js. */

:root {
    --validation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* Message under the field */
.field-validation-error,
.fv-plugins-message-container [data-validator] {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    margin-top: .375rem;
    color: var(--bs-danger) !important;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    animation: validation-message-in .18s ease-out;
}

.field-validation-error::before,
.fv-plugins-message-container [data-validator]::before,
.validation-summary-errors::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: .0625rem;
    background-color: currentColor;
    -webkit-mask: var(--validation-icon) center / contain no-repeat;
    mask: var(--validation-icon) center / contain no-repeat;
}

.field-validation-valid,
.validation-summary-valid {
    display: none !important;
}

/* Field with an error */
.form-control.input-validation-error,
.form-select.input-validation-error,
select.input-validation-error + .select2-container .select2-selection {
    border-color: var(--bs-danger) !important;
    background-color: rgba(var(--bs-danger-rgb), .04);
}

.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
select.input-validation-error + .select2-container--focus .select2-selection,
select.input-validation-error + .select2-container--open .select2-selection {
    box-shadow: 0 0 0 .1875rem rgba(var(--bs-danger-rgb), .16) !important;
}

.input-group:has(.input-validation-error) .input-group-text {
    border-color: var(--bs-danger) !important;
    color: var(--bs-danger);
}

:has(> .input-validation-error) > .form-label,
:has(> .input-group > .input-validation-error) > .form-label {
    color: var(--bs-danger);
}

/* Summary at the top of a form (asp-validation-summary) */
.validation-summary-errors {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(var(--bs-danger-rgb), .3);
    border-radius: .375rem;
    background-color: rgba(var(--bs-danger-rgb), .08);
    color: var(--bs-danger) !important;
    font-size: .875rem;
    font-weight: 500;
}

.validation-summary-errors::before {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1rem;
}

.validation-summary-errors ul:has(> li:only-child) {
    padding-left: 0;
    list-style: none;
}

@keyframes validation-message-in {
    from {
        opacity: 0;
        transform: translateY(-.25rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .field-validation-error,
    .fv-plugins-message-container [data-validator] {
        animation: none;
    }
}