/**
 * Enhanced Form Validation Styles
 * Tražilica Posla v0.3.0
 */

/* Field States */
input.field-valid,
textarea.field-valid,
select.field-valid {
  border-color: #28a745;
  background-color: #f8fff9;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.1);
}

input.field-valid:focus,
textarea.field-valid:focus,
select.field-valid:focus {
  border-color: #218838;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

input.field-invalid,
textarea.field-invalid,
select.field-invalid {
  border-color: #dc3545;
  background-color: #fff8f8;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.1);
}

input.field-invalid:focus,
textarea.field-invalid:focus,
select.field-invalid:focus {
  border-color: #c82333;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

input.field-warning,
textarea.field-warning,
select.field-warning {
  border-color: #ffc107;
  background-color: #fffbf0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.1);
}

/* Dark Mode Field States */
[data-theme="dark"] input.field-valid,
[data-theme="dark"] textarea.field-valid,
[data-theme="dark"] select.field-valid {
  background-color: #1a2f1f;
}

[data-theme="dark"] input.field-invalid,
[data-theme="dark"] textarea.field-invalid,
[data-theme="dark"] select.field-invalid {
  background-color: #2f1a1a;
}

[data-theme="dark"] input.field-warning,
[data-theme="dark"] textarea.field-warning,
[data-theme="dark"] select.field-warning {
  background-color: #2f2c1a;
}

/* Field Feedback */
.field-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #f8d7da;
  border-radius: 4px;
  font-size: 13px;
  color: #721c24;
  animation: feedback-slide 0.3s ease;
}

@keyframes feedback-slide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-feedback .feedback-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.field-feedback .feedback-text {
  flex: 1;
}

/* Success Feedback */
.field-feedback-success {
  background: #d4edda;
  color: #155724;
}

.field-feedback-success .feedback-icon {
  color: #28a745;
}

/* Warning Feedback */
.field-feedback-warning {
  background: #fff3cd;
  color: #856404;
}

.field-feedback-warning .feedback-icon {
  color: #ffc107;
}

/* Info Feedback */
.field-feedback-info {
  background: #d1ecf1;
  color: #0c5460;
}

.field-feedback-info .feedback-icon {
  color: #17a2b8;
}

/* Dark Mode Feedback */
[data-theme="dark"] .field-feedback {
  background: #3d2d2d;
  color: #f8d7da;
}

[data-theme="dark"] .field-feedback-success {
  background: #1a2f1f;
  color: #d4edda;
}

[data-theme="dark"] .field-feedback-warning {
  background: #2f2c1a;
  color: #fff3cd;
}

[data-theme="dark"] .field-feedback-info {
  background: #1a2f33;
  color: #d1ecf1;
}

/* Field Icons (inline) */
.field-icon-wrapper {
  position: relative;
}

.field-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.2s;
}

.field-icon-valid {
  color: #28a745;
}

.field-icon-invalid {
  color: #dc3545;
}

.field-icon-warning {
  color: #ffc107;
}

/* Input with icon padding */
.input-with-icon {
  padding-right: 40px;
}

/* Required field indicator */
label.required::after {
  content: ' *';
  color: #dc3545;
}

/* Character counter */
.char-counter {
  font-size: 12px;
  color: #6c757d;
  text-align: right;
  margin-top: 4px;
}

.char-counter.warning {
  color: #ffc107;
}

.char-counter.error {
  color: #dc3545;
}

[data-theme="dark"] .char-counter {
  color: #adb5bd;
}

/* Form group spacing */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

[data-theme="dark"] .form-group label {
  color: #f0f0f0;
}

/* Helper text */
.form-helper {
  font-size: 13px;
  color: #6c757d;
  margin-top: 4px;
}

[data-theme="dark"] .form-helper {
  color: #adb5bd;
}

/* Responsive */
@media (max-width: 480px) {
  .field-feedback {
    font-size: 12px;
    padding: 6px 8px;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
}