/* ==========================================================================
   Form guidance styling — required markers, validation feedback.

   Two things live here:

   1. Semantic colour utilities the views already use but this Metronic v9
      Tailwind build never shipped. `text-danger`, `text-success` and
      `text-warning` are Bootstrap-era names that survived the port; nothing
      defined them, so every inline validation message in the app was
      rendering in ordinary body colour. Same story for `kt-alert-danger`
      (Metronic v9 calls it `kt-alert-destructive`), which left the "please
      fix these errors" summary box completely unstyled.

      Defined here as aliases onto Metronic's own theme tokens rather than
      renamed across ~90 view files: one definition, no risk of a partial
      rename leaving some screens silently uncoloured, and it stays correct
      in dark mode because the tokens do.

   2. The required-field affordances themselves.
   ========================================================================== */

/* --- missing semantic utilities ------------------------------------------ */
.text-danger  { color: var(--destructive); }
.text-success { color: var(--color-green-600); }
.text-warning { color: var(--color-yellow-600); }

.kt-alert-danger {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
}

/* --- required field marker ------------------------------------------------
   Rendered by RequiredLabelTagHelper. The asterisk is decorative: screen
   readers get the word "required" from the visually-hidden span instead,
   because a lone "*" is read out as "star" or skipped entirely.            */
.kt-required-marker,
.req {   /* .req is the older hand-written convention, used in 41 views and
            defined in dark-mode-fix.css as a literal #dc2626. Re-pointed at the
            theme token here so both markers are governed by one value and stay
            identical — they sit side by side on the same forms. */
    color: var(--destructive);
    font-weight: 700;
    margin-inline-start: 0.15rem;
}

.kt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- the legend shown at the top of every data-entry form ---------------- */
.kt-required-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

/* --- invalid field feedback ----------------------------------------------
   jquery-validation-unobtrusive puts `input-validation-error` on the field
   and `field-validation-error` on its message span. Neither carried any
   styling before, so a rejected field looked identical to an accepted one. */
.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: var(--destructive) !important;
    background-color: color-mix(in oklch, var(--destructive) 6%, transparent);
}

.input-validation-error:focus {
    outline-color: var(--destructive) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 25%, transparent) !important;
}

/* Select2 renders its own box over the native <select>; colour that too or
   the dropdowns are the only fields that give no feedback. */
.input-validation-error + .select2-container .select2-selection {
    border-color: var(--destructive) !important;
}

.field-validation-error {
    color: var(--destructive);
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Field the user is being sent to after a failed submit. */
.kt-field-focus {
    scroll-margin-top: 6rem;
}