/* ============================================================
   ELEGANT MINIMALIST UI KIT — Form Validation System
   form-validation.css

   Covers:
     - Inline field validation (error/success/warning)
     - Password strength indicator
     - Form-level alert banner
     - Form success state
     - Validation message animations (slide + fade)
     - Field highlight effects
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   FIELD ERROR / WARNING / SUCCESS MESSAGES
   Animation: slide down + fade in on appear
   ═══════════════════════════════════════════════════════════ */

.field-error-message,
.field-warning-message,
.field-success-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1-5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  opacity: 0;
  transform: translateY(-4px);
  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
}

@keyframes field-msg-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-error-message.fade-out,
.field-warning-message.fade-out,
.field-success-message.fade-out {
  animation: field-msg-out var(--duration-normal) var(--ease-in-out) forwards;
}

@keyframes field-msg-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.field-error-message svg,
.field-warning-message svg,
.field-success-message svg {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  margin-top: var(--space-0-25);
}

/* Error */
.field-error-message {
  color: var(--color-error);
}

.field-error-message svg {
  color: var(--color-error);
}

/* Warning */
.field-warning-message {
  color: var(--color-warning);
}

.field-warning-message svg {
  color: var(--color-warning);
}

/* Success */
.field-success-message {
  color: var(--color-success);
}

.field-success-message svg {
  color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════
   INPUT VALIDATION STATES
   Applies to .input-wrapper from input.css
   ═══════════════════════════════════════════════════════════ */

/* Error — override input.css defaults */
.input-wrapper.field-error {
  border-color: var(--color-error);
}

.input-wrapper.field-error .input {
  color: var(--input-text-color);
}

.input-wrapper.field-error:focus-within {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

/* Validation icon inside input (trailing position) */
.field-validation-icon {
  display: none;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-3);
  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
}

.input-wrapper.field-error .field-validation-icon.icon-error {
  display: inline-flex;
  color: var(--color-error);
}

.input-wrapper.field-success .field-validation-icon.icon-success {
  display: inline-flex;
  color: var(--color-success);
}

.input-wrapper.field-warning .field-validation-icon.icon-warning {
  display: inline-flex;
  color: var(--color-warning);
}

/* Success state */
.input-wrapper.field-success {
  border-color: var(--color-success);
}

.input-wrapper.field-success:focus-within {
  border-color: var(--color-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
}

/* Warning state */
.input-wrapper.field-warning {
  border-color: var(--color-warning);
}

.input-wrapper.field-warning:focus-within {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
}

/* ═══════════════════════════════════════════════════════════
   SELECT VALIDATION STATES
   ═══════════════════════════════════════════════════════════ */

.select.field-error .select-trigger {
  border-color: var(--color-error);
}

.select.field-error.select-open .select-trigger {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

.select.field-success .select-trigger {
  border-color: var(--color-success);
}

.select.field-success.select-open .select-trigger {
  border-color: var(--color-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
}

.select.field-warning .select-trigger {
  border-color: var(--color-warning);
}

.select.field-warning.select-open .select-trigger {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
}

/* ═══════════════════════════════════════════════════════════
   TEXTAREA VALIDATION STATES
   ═══════════════════════════════════════════════════════════ */

.textarea.field-error {
  border-color: var(--color-error);
}

.textarea.field-error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

.textarea.field-success {
  border-color: var(--color-success);
}

.textarea.field-success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-success-border);
}

.textarea.field-warning {
  border-color: var(--color-warning);
}

.textarea.field-warning:focus {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-warning-border);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX / RADIO VALIDATION
   ═══════════════════════════════════════════════════════════ */

.checkbox.field-error .checkbox-box {
  border-color: var(--color-error);
}

.checkbox.field-error .checkbox-native:checked ~ .checkbox-box {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.checkbox.field-error .checkbox-label {
  color: var(--color-error);
}

.radio.field-error .radio-circle {
  border-color: var(--color-error);
}

.radio.field-error .radio-native:checked ~ .radio-circle {
  border-color: var(--color-error);
  background-color: var(--color-error);
}

.radio.field-error .radio-label {
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════
   TOGGLE / SWITCH VALIDATION
   ═══════════════════════════════════════════════════════════ */

.switch-card.field-error {
  border-color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════
   CHARACTER COUNTER — State colors
   ═══════════════════════════════════════════════════════════ */

.input-counter.limit-near {
  color: var(--color-warning);
  font-weight: var(--font-medium);
}

.input-counter.limit-reached {
  color: var(--color-error);
  font-weight: var(--font-semibold);
}

/* ═══════════════════════════════════════════════════════════
   PASSWORD STRENGTH INDICATOR
   ═══════════════════════════════════════════════════════════ */

.password-strength {
  margin-top: var(--space-2);
}

.password-strength-bar-track {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-1-5);
}

.password-strength-segment {
  flex: 1;
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-200);
  transition: background-color var(--duration-normal) var(--ease-in-out);
}

/* Strength levels */
.password-strength[data-strength="weak"] .password-strength-segment:nth-child(1) {
  background-color: var(--color-error);
}

.password-strength[data-strength="fair"] .password-strength-segment:nth-child(-n+2) {
  background-color: var(--color-warning);
}

.password-strength[data-strength="good"] .password-strength-segment:nth-child(-n+3) {
  background-color: var(--color-accent-500);
}

.password-strength[data-strength="strong"] .password-strength-segment {
  background-color: var(--color-success);
}

/* Strength label */
.password-strength-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  color: var(--color-neutral-500);
  transition: color var(--duration-fast) var(--ease-in-out);
}

.password-strength[data-strength="weak"] .password-strength-label {
  color: var(--color-error);
}

.password-strength[data-strength="fair"] .password-strength-label {
  color: var(--color-warning);
}

.password-strength[data-strength="good"] .password-strength-label {
  color: var(--color-accent-600);
}

.password-strength[data-strength="strong"] .password-strength-label {
  color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════
   FORM-LEVEL ALERT BANNER
   ═══════════════════════════════════════════════════════════ */

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  opacity: 0;
  transform: translateY(-8px);
  animation: form-alert-in var(--duration-normal) var(--ease-out) forwards;
}

@keyframes form-alert-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-alert.fade-out {
  animation: form-alert-out var(--duration-normal) var(--ease-in-out) forwards;
}

@keyframes form-alert-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Error alert */
.form-alert-error {
  background-color: var(--color-error-light);
  border: var(--border-width) solid var(--color-error-border);
}

.form-alert-error .form-alert-icon {
  color: var(--color-error);
}

.form-alert-error .form-alert-title {
  color: var(--color-error-dark);
}

.form-alert-error .form-alert-list li {
  color: var(--color-error-dark);
}

.form-alert-error .form-alert-list a {
  color: var(--color-error);
}

/* Warning alert */
.form-alert-warning {
  background-color: var(--color-warning-light);
  border: var(--border-width) solid var(--color-warning-border);
}

.form-alert-warning .form-alert-icon {
  color: var(--color-warning);
}

.form-alert-warning .form-alert-title {
  color: var(--color-warning-dark);
}

.form-alert-warning .form-alert-list li {
  color: var(--color-warning-dark);
}

.form-alert-warning .form-alert-list a {
  color: var(--color-warning);
}

/* Success alert */
.form-alert-success {
  background-color: var(--color-success-light);
  border: var(--border-width) solid var(--color-success-border);
}

.form-alert-success .form-alert-icon {
  color: var(--color-success);
}

.form-alert-success .form-alert-title {
  color: var(--color-success-dark);
}

.form-alert-success .form-alert-list li {
  color: var(--color-success-dark);
}

/* Alert content */
.form-alert-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  margin-top: var(--space-0-5);
}

.form-alert-body {
  flex: 1;
  min-width: 0;
}

.form-alert-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

.form-alert-list {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.form-alert-list li {
  margin-bottom: var(--space-0-5);
}

.form-alert-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: var(--font-medium);
}

.form-alert-list a:hover {
  text-decoration-thickness: 2px;
}

/* Dismiss button */
.form-alert-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-500);
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
}

.form-alert-dismiss:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--color-neutral-700);
}

.form-alert-dismiss svg {
  width: var(--space-4);
  height: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   FORM SUCCESS STATE
   ═══════════════════════════════════════════════════════════ */

.form-success-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  gap: var(--space-4);
  animation: form-success-in var(--duration-slow) var(--ease-out) forwards;
}

.form-success-state.is-visible {
  display: flex;
}

@keyframes form-success-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.form-success-icon {
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background-color: var(--color-success-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.form-success-icon svg {
  width: var(--space-8);
  height: var(--space-8);
  color: var(--color-success);
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: success-check-draw var(--duration-slow) var(--ease-out) var(--anim-check-draw-delay) forwards;
}

@keyframes success-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.form-success-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  line-height: var(--leading-tight);
}

.form-success-desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  line-height: var(--leading-relaxed);
  max-width: 360px;
}

/* ═══════════════════════════════════════════════════════════
   FORM LOADING / SUBMITTING STATE
   ═══════════════════════════════════════════════════════════ */

.form.is-submitting {
  opacity: 0.6;
  pointer-events: none;
}

.form.is-submitting .btn-submit-text {
  opacity: 0;
}

.form.is-submitting .btn-submit-spinner {
  display: inline-flex;
}

.btn-submit-spinner {
  display: none;
  width: var(--space-4);
  height: var(--space-4);
  position: absolute;
  animation: btn-spin var(--anim-spinner-fast) linear infinite;
}

.btn-submit-spinner .spinner-circle {
  stroke: currentColor;
  stroke-dasharray: 20;
  stroke-dashoffset: 15;
  stroke-linecap: round;
}

@keyframes btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   VALIDATING STATE — Inline indicator
   ═══════════════════════════════════════════════════════════ */

.field-validating-indicator {
  display: none;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
}

.field-validating-indicator.is-visible {
  display: inline-flex;
}

.field-validating-indicator .validating-spinner {
  width: var(--space-3);
  height: var(--space-3);
  animation: btn-spin var(--anim-spin-duration) linear infinite;
}

.field-validating-indicator .validating-spinner .spinner-circle {
  stroke: currentColor;
  stroke-dasharray: 12;
  stroke-dashoffset: 9;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════════════════════
   FORM — Hide/Show transitions
   ═══════════════════════════════════════════════════════════ */

.form-contents {
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

.form-contents.is-hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   UTILITY: Helper for field spacing with validation
   ═══════════════════════════════════════════════════════════ */

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   CONFIRM PASSWORD MATCH INDICATOR
   ═══════════════════════════════════════════════════════════ */

.password-match-message {
  display: none;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1-5);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

.password-match-message.is-visible {
  display: flex;
  animation: field-msg-in var(--duration-normal) var(--ease-out) forwards;
}

.password-match-message.is-error {
  color: var(--color-error);
}

.password-match-message.is-error svg {
  color: var(--color-error);
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
}

.password-match-message.is-success {
  color: var(--color-success);
}

.password-match-message.is-success svg {
  color: var(--color-success);
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
}