/**
 * Enhanced Validation CSS
 * Real-time validation feedback with visual indicators
 */

/* Validation states */
input.valid,
select.valid,
textarea.valid {
  border-color: #10b981 !important;
  background-color: #f0fdf4;
}

input.invalid,
select.invalid,
textarea.invalid {
  border-color: #ef4444 !important;
  background-color: #fef2f2;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

input.validating,
select.validating,
textarea.validating {
  border-color: #f59e0b !important;
  background-color: #fffbeb;
}

/* Validation icons */
.validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

.validation-icon.valid {
  color: #10b981;
}

.validation-icon.invalid {
  color: #ef4444;
}

.validation-icon.validating {
  color: #f59e0b;
  animation: spin 1s linear infinite;
}

/* Validation messages */
.validation-message {
  font-size: 0.75rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.validation-message.success {
  color: #10b981;
}

.validation-message.warning {
  color: #f59e0b;
}

.validation-message.info {
  color: #3b82f6;
}

/* Field wrapper with validation */
.field-with-validation {
  position: relative;
}

.field-with-validation input,
.field-with-validation select,
.field-with-validation textarea {
  padding-right: 36px; /* Space for icon */
}

/* Real-time validation feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

input.invalid.shake,
select.invalid.shake,
textarea.invalid.shake {
  animation: shake 0.5s;
}

/* Focus states with validation */
input:focus.invalid,
select:focus.invalid,
textarea:focus.invalid {
  ring-color: #ef4444;
  ring-width: 2px;
}

input:focus.valid,
select:focus.valid,
textarea:focus.valid {
  ring-color: #10b981;
  ring-width: 2px;
}

/* Required field indicator */
.required-field::after {
  content: '*';
  color: #ef4444;
  margin-left: 2px;
}

/* Optional field indicator */
.optional-field::after {
  content: '({% trans "optional" %})';
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: normal;
  margin-left: 4px;
}

/* Loading validation state */
.field-validating {
  position: relative;
}

.field-validating::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #f59e0b;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Form-level validation summary */
.validation-summary {
  background-color: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.validation-summary.error {
  background-color: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.validation-summary.warning {
  background-color: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}

.validation-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.validation-summary li {
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.validation-summary li::before {
  content: '⚠';
  font-size: 1rem;
}

/* Success state */
.form-success {
  background-color: #f0fdf4;
  border: 1px solid #10b981;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  color: #065f46;
}

.form-success::before {
  content: '✓';
  color: #10b981;
  font-weight: bold;
  margin-right: 8px;
}