/* =====================================================
   Validation & Required Fields (global)
   Used by Flask (WTForms) and React
   ===================================================== */

:root {
  --validation-required-symbol: "*";
  --validation-required-color: #dc3545; /* Bootstrap danger */
  --validation-required-size: 0.75em;
}

/* Required label indicator */
label.required::after {
  content: " " var(--validation-required-symbol);
  color: var(--validation-required-color);
  font-weight: bold;
  vertical-align: super;
  font-size: var(--validation-required-size);
}


/* Validation error message */
.form-error-message {
  display: block;
  margin-top: 0.25rem;
  color: #dc3545;
  font-size: 0.875rem;
}

/* Optional: input error state (Bootstrap-compatible) */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #dc3545;
}

.validation-legend {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #6c757d; /* Bootstrap secondary */
}

.validation-required-symbol {
  content: " " var(--validation-required-symbol);
  color: var(--validation-required-color);
  font-weight: bold;
  vertical-align: super;
  font-size: var(--validation-required-size);
}