/* Common auth UI utilities: animations, error states, strength meter, loading */

/* Shake animation for input errors */
@keyframes shake-error {
  0% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.shake-error {
  animation: shake-error 0.5s linear;
  border-color: var(--status-danger) !important;
}

/* Generic form-field error state (wrapper driven) */
.form-field.error input,
.form-field.error select,
.form-field.error textarea {
  border-color: var(--status-danger) !important;
  box-shadow: 0 0 0 0.2rem var(--status-danger-bg) !important;
}

/* Inline field error helper */
.field-error {
  color: var(--status-danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* Password strength meter (utility classes) */
.password-strength { margin-top: 0.5rem; }
.password-strength .strength-bar {
  height: 4px;
  background: var(--surface-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.password-strength .strength-fill {
  height: 100%;
  transition: width 0.3s, background-color 0.3s;
}
.password-strength .strength-fill.weak {
  background-color: var(--status-danger);
  width: 33%;
}
.password-strength .strength-fill.medium {
  background-color: var(--status-warning);
  width: 66%;
}
.password-strength .strength-fill.strong {
  background-color: var(--status-success);
  width: 100%;
}

/* Generic loading overlay on auth blocks (optional utility) */
.auth-loading { opacity: 0.6; pointer-events: none; position: relative; }
.auth-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-border);
  border-top: 2px solid var(--brand-blue);
  border-radius: 50%;
  animation: auth-loading-spin 1s linear infinite;
}
@keyframes auth-loading-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }