/* Validation Utility Styles */

/* Accessible green for valid state */
:root {
  --valid-green: #198754; /* Bootstrap 5 success */
  --invalid-red: #dc3545; /* Bootstrap 5 danger */
  --focus-ring: rgba(25, 135, 84, 0.25);
}

/* Controls */
input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: var(--valid-green) !important;
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  /* Preserve existing red styling if present */
  border-color: var(--invalid-red) !important;
}

/* Labels and legends */
label.is-valid,
legend.is-valid {
  color: var(--valid-green) !important;
}

label.is-invalid,
legend.is-invalid {
  color: var(--invalid-red) !important;
}

/* Ensure focus is still clearly visible */
input.is-valid:focus,
select.is-valid:focus,
textarea.is-valid:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

/* Keep invalid focus ring visible as well for accessibility */
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}