/* ============================================================================
   Client-side validation messages (jQuery Validate)
   ----------------------------------------------------------------------------
   jQuery Validate renders its messages as <label class="error" for="...">.
   The Metronic/Bootstrap 4 bundle has no rule for `label.error`, so until now
   every validation message ("This field is required", "Please enter the same
   value again", ...) rendered as ordinary black body text. Testers reported
   this against PROF-006, PROF-013 and FRM-006.

   These rules are the single place validation feedback is styled, so every
   form in the app picks them up. `--np-danger` matches the KTAppSettings
   `colors.theme.base.danger` value used by the rest of the theme.
   ========================================================================== */

:root {
    --np-danger: #F64E60;
}

/* The message itself. `display: block` puts it on its own line under the
   control instead of inline next to it, which is what the .form-group /
   .input-group layouts in this app expect. */
label.error,
span.field-validation-error,
.field-validation-error {
    display: block;
    width: 100%;
    margin-top: .25rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--np-danger) !important;
}

/* Inside an .input-group the control is wrapped, so the message would
   otherwise be laid out as a flex item beside the input. */
.input-group label.error {
    flex-basis: 100%;
    order: 99;
}

/* Highlight the offending control itself. Applied by the `highlight` /
   `unhighlight` hooks in Scripts/Global/validation-defaults.js. */
.form-control.is-invalid,
.form-control.error {
    border-color: var(--np-danger);
}

/* select2 hides the real <select>, so the border has to go on the rendered
   widget instead of the (invisible) original element. */
select.is-invalid + .select2-container .select2-selection,
select.error + .select2-container .select2-selection {
    border-color: var(--np-danger) !important;
}

/* Required-field asterisks already use .text-danger; keep them consistent
   with the message colour rather than Bootstrap's default red. */
.form-group .text-danger {
    color: var(--np-danger) !important;
}