/* Form Validation Styles */

/* Show red border after user has interacted with invalid field */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: #f14668 !important;
}

/* Show validation state when form submit was attempted (class added by JS) */
form.was-validated input:invalid,
form.was-validated select:invalid,
form.was-validated textarea:invalid {
  border-color: #f14668 !important;
}

/* Focus state for invalid fields */
input:user-invalid:focus,
select:user-invalid:focus,
textarea:user-invalid:focus,
form.was-validated input:invalid:focus,
form.was-validated select:invalid:focus,
form.was-validated textarea:invalid:focus {
  border-color: #f14668 !important;
  box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25) !important;
}

/* Dark mode */
[data-theme="dark"] input:user-invalid,
[data-theme="dark"] select:user-invalid,
[data-theme="dark"] textarea:user-invalid,
[data-theme="dark"] form.was-validated input:invalid,
[data-theme="dark"] form.was-validated select:invalid,
[data-theme="dark"] form.was-validated textarea:invalid {
  border-color: #f14668 !important;
}

[data-theme="dark"] input:user-invalid:focus,
[data-theme="dark"] select:user-invalid:focus,
[data-theme="dark"] textarea:user-invalid:focus,
[data-theme="dark"] form.was-validated input:invalid:focus,
[data-theme="dark"] form.was-validated select:invalid:focus,
[data-theme="dark"] form.was-validated textarea:invalid:focus {
  border-color: #f14668 !important;
  box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25) !important;
}

/* Multi-select styling */
select.multi-select {
  width: 100%;
  font-size: 1rem;
  padding: 0.5rem;
}