/* Shared field highlighting only; validation copy belongs to the general toast. */
.form-validation-invalid:not(.date-field):not(.app-select) {
  border-color: var(--color-cancel, var(--dl-notice-text)) !important;
  outline: none !important;
  box-shadow: none !important;
}
.form-validation-invalid:not(.date-field):not(.app-select):focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-cancel, var(--dl-notice-text)) 20%, transparent) !important;
}
.date-field.form-validation-invalid::before {
  border-color: var(--color-cancel, var(--dl-notice-text)) !important;
  box-shadow: none !important;
}
/* Standalone driver pages reuse the standard toast without authenticated theme tokens. */
.driver-link-body {
  --color-cancel: var(--dl-notice-text);
  --color-background-secondary: var(--dl-surface);
  --text-color: var(--dl-text);
  --text-color-muted: var(--dl-text-muted);
  --box-shadow: 0 12px 30px rgb(15 23 42 / 18%);
}

/* Reserve the text-control slot before validation, including narrow flex rows.
   This prevents padding from changing their minimum width when an error appears. */
:where(form, [data-validation-scope], .form-group) input:not(.app-date-input):not(.app-select-native):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
:where(form, [data-validation-scope], .form-group) textarea,
:where(form, [data-validation-scope], .form-group) select:not(.app-select-native) {
  padding-right: 2.25rem !important;
}

/* Decorative shape cue: aria-invalid and the general toast carry semantics.
   Paint inside existing controls so validation never inserts field wrappers. */
input.form-validation-invalid:not(.app-date-input):not(.app-select-native):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea.form-validation-invalid,
select.form-validation-invalid:not(.app-select-native) {
  background-image: url("../images/validation-error.svg") !important;
  background-repeat: no-repeat !important;
  background-size: 1.15rem 1.15rem !important;
  background-position: right 0.6rem center !important;
  padding-right: 2.25rem !important;
}

textarea.form-validation-invalid,
select.form-validation-invalid[multiple] {
  background-position: right 0.6rem top 0.6rem !important;
}

/* The calendar keeps its existing right-hand slot. */
.date-field.form-validation-invalid::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 2.3rem;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateY(-50%);
  background: url("../images/validation-error.svg") center / contain no-repeat;
  pointer-events: none;
}

.date-field.form-validation-invalid > .date-field__display {
  right: 3.8rem;
}

/* Flex reserves an icon slot before the chevron, without covering either text
   or the dropdown control. The hidden native select never receives an icon. */
.app-select-trigger.form-validation-invalid::after {
  content: "";
  flex: 0 0 1.15rem;
  height: 1.15rem;
  order: 1;
  background: url("../images/validation-error.svg") center / contain no-repeat;
  pointer-events: none;
}

.app-select-trigger.form-validation-invalid > .app-select-value {
  flex: 1 1 auto;
}

.app-select-trigger.form-validation-invalid > .app-select-chevron {
  order: 2;
}