/**
 * Validation CSS - Input Validation Visual States
 * Part of SEC-P1-1: Input Validation Layer
 * 
 * @version 1.0.0
 */

/* ================================
   VALIDATION STATE CLASSES
   ================================ */

/* Error state for inputs */
.validation-error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15) !important;
  background-color: #fff5f5 !important;
}

.validation-error:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Success state for inputs */
.validation-success {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1) !important;
}

.validation-success:focus {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15) !important;
}

/* Warning state for inputs */
.validation-warning {
  border-color: #ffc107 !important;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.15) !important;
  background-color: #fffef5 !important;
}

/* ================================
   ERROR MESSAGE STYLING
   ================================ */

.validation-error-message {
  display: none;
  color: #dc3545;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  padding: 4px 8px;
  background: #fff5f5;
  border-radius: 4px;
  border-left: 3px solid #dc3545;
}

.validation-error-message::before {
  content: '⚠ ';
}

/* Warning message variant */
.validation-warning-message {
  display: none;
  color: #856404;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  padding: 4px 8px;
  background: #fff3cd;
  border-radius: 4px;
  border-left: 3px solid #ffc107;
}

/* Success message variant */
.validation-success-message {
  display: none;
  color: #28a745;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  padding: 4px 8px;
  background: #d4edda;
  border-radius: 4px;
  border-left: 3px solid #28a745;
}

.validation-success-message::before {
  content: '✓ ';
}

/* ================================
   FORM GROUP STYLING
   ================================ */

.form-group {
  position: relative;
  margin-bottom: 16px;
}

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

.form-group label.required::after {
  content: ' *';
  color: #dc3545;
}

/* ================================
   INPUT FIELD ENHANCEMENTS
   ================================ */

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-size: 14px;
  color: #1d1d1f;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* Checkbox and radio inputs should NOT stretch to 100% */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  flex-shrink: 0;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background-color: #f5f5f7;
  color: #86868b;
  cursor: not-allowed;
}

/* ================================
   PASSWORD STRENGTH INDICATOR
   ================================ */

.password-strength {
  margin-top: 8px;
}

.password-strength-bar {
  height: 4px;
  background: #e5e5ea;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.password-strength-fill {
  height: 100%;
  transition: width 0.3s, background-color 0.3s;
  border-radius: 2px;
}

.password-strength-fill.weak {
  width: 25%;
  background-color: #dc3545;
}

.password-strength-fill.fair {
  width: 50%;
  background-color: #ffc107;
}

.password-strength-fill.good {
  width: 75%;
  background-color: #17a2b8;
}

.password-strength-fill.strong {
  width: 100%;
  background-color: #28a745;
}

.password-strength-text {
  font-size: 11px;
  font-weight: 500;
}

.password-strength-text.weak { color: #dc3545; }
.password-strength-text.fair { color: #856404; }
.password-strength-text.good { color: #0c5460; }
.password-strength-text.strong { color: #155724; }

/* ================================
   INLINE VALIDATION ICONS
   ================================ */

.validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

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

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

/* ================================
   ACCESSIBILITY ENHANCEMENTS
   ================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .validation-error {
    border-width: 2px;
  }
  
  .validation-error-message {
    border-left-width: 4px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  .password-strength-fill {
    transition: none;
  }
}

/* Focus visible for keyboard navigation */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
}