/**
 * Real-time validation styles
 * Bootstrap 5 compatible validation feedback
 */

/* =====================================================
   Field Validation States
   ===================================================== */
.field-valid {
  border-color: #198754 !important;
  background-color: rgba(25, 135, 84, 0.05) !important;
}

.field-valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

.field-invalid {
  border-color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.05) !important;
}

.field-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.field-validating {
  border-color: #ffc107 !important;
}

/* =====================================================
   Validation Messages
   ===================================================== */
.validation-message {
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.validation-message.error {
  color: #dc3545;
}

.validation-message.success {
  color: #198754;
}

/* =====================================================
   Input Group Validation
   ===================================================== */
.input-group .field-valid,
.input-group .field-invalid {
  z-index: 3;
}

/* =====================================================
   Form Floating Label Support
   ===================================================== */
.form-floating .field-valid ~ label,
.form-floating .field-invalid ~ label {
  color: inherit;
}