/* Form Validation Styles - Consistent Feedback */

/* ========== INPUT STATES ========== */

/* Valid state */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid,
input.is-valid,
select.is-valid,
textarea.is-valid,
input:valid:not(:placeholder-shown),
select:valid:not([value=""]) {
  border-color: var(--accent-success, #23a55a);
}

.form-input.is-valid:focus,
input.is-valid:focus {
  border-color: var(--accent-success, #23a55a);
  box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.15);
}

/* Invalid state */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input:invalid:not(:placeholder-shown),
select:invalid {
  border-color: var(--accent-error, #ed4245);
}

.form-input.is-invalid:focus,
input.is-invalid:focus {
  border-color: var(--accent-error, #ed4245);
  box-shadow: 0 0 0 3px rgba(237, 66, 69, 0.15);
}

/* Warning state */
.form-input.is-warning,
input.is-warning {
  border-color: var(--accent-warning, #faa61a);
}

.form-input.is-warning:focus,
input.is-warning:focus {
  border-color: var(--accent-warning, #faa61a);
  box-shadow: 0 0 0 3px rgba(250, 166, 26, 0.15);
}

/* ========== VALIDATION MESSAGES ========== */

.form-feedback,
.validation-message {
  font-size: 0.75rem;
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.form-feedback-valid,
.validation-message.is-valid {
  color: var(--accent-success, #23a55a);
}

.form-feedback-valid::before,
.validation-message.is-valid::before {
  content: '✓';
  font-weight: bold;
}

.form-feedback-invalid,
.validation-message.is-invalid,
.form-error {
  color: var(--accent-error, #ed4245);
}

.form-feedback-invalid::before,
.validation-message.is-invalid::before,
.form-error::before {
  content: '✗';
  font-weight: bold;
}

.form-feedback-warning,
.validation-message.is-warning {
  color: var(--accent-warning, #faa61a);
}

.form-feedback-warning::before,
.validation-message.is-warning::before {
  content: '⚠';
}

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

.input-with-validation {
  position: relative;
}

.input-with-validation input,
.input-with-validation select {
  padding-right: 2.5rem;
}

.input-validation-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
}

.input-validation-icon.valid {
  color: var(--accent-success, #23a55a);
}

.input-validation-icon.valid::after {
  content: '✓';
}

.input-validation-icon.invalid {
  color: var(--accent-error, #ed4245);
}

.input-validation-icon.invalid::after {
  content: '✗';
}

/* ========== REQUIRED FIELD INDICATOR ========== */

.form-label.required::after,
label.required::after {
  content: ' *';
  color: var(--accent-error, #ed4245);
}

.form-required-hint {
  font-size: 0.6875rem;
  color: var(--text-muted, #80848e);
  margin-bottom: 0.5rem;
}

.form-required-hint::before {
  content: '* ';
  color: var(--accent-error, #ed4245);
}

/* ========== CHARACTER COUNT ========== */

.char-count {
  font-size: 0.6875rem;
  color: var(--text-muted, #80848e);
  text-align: right;
  margin-top: 0.25rem;
}

.char-count.near-limit {
  color: var(--accent-warning, #faa61a);
}

.char-count.at-limit {
  color: var(--accent-error, #ed4245);
}

/* ========== FORM GROUP STATES ========== */

.form-group.has-error .form-input,
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--accent-error, #ed4245);
}

.form-group.has-error .form-label,
.form-group.has-error label {
  color: var(--accent-error, #ed4245);
}

.form-group.has-success .form-input,
.form-group.has-success input {
  border-color: var(--accent-success, #23a55a);
}

/* ========== DISABLED STATES ========== */

.form-input:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.form-input.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.2);
}

/* ========== SHAKE ANIMATION FOR ERRORS ========== */

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

.shake,
.form-input.shake,
input.shake {
  animation: shake 0.5s ease-in-out;
}

/* ========== TOOLTIP VALIDATION ========== */

.validation-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated, #2b2d31);
  border: 1px solid var(--accent-error, #ed4245);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--accent-error, #ed4245);
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.validation-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--accent-error, #ed4245);
}

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

.password-strength {
  display: flex;
  gap: 4px;
  margin-top: 0.5rem;
}

.password-strength-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transition: background 0.3s ease;
}

.password-strength.weak .password-strength-bar:nth-child(1) {
  background: var(--accent-error, #ed4245);
}

.password-strength.fair .password-strength-bar:nth-child(-n+2) {
  background: var(--accent-warning, #faa61a);
}

.password-strength.good .password-strength-bar:nth-child(-n+3) {
  background: #90c53f;
}

.password-strength.strong .password-strength-bar {
  background: var(--accent-success, #23a55a);
}

.password-strength-text {
  font-size: 0.6875rem;
  margin-top: 0.25rem;
}