/* Form controls */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.form-field__label .required { color: var(--accent-600); margin-left: 2px; }
.form-field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.form-field__error {
  font-size: var(--fs-xs);
  color: var(--danger-500);
}

.input, .textarea, .select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  line-height: var(--lh-snug);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 20%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.textarea { resize: vertical; min-height: 120px; line-height: var(--lh-relaxed); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-7);
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--danger-500);
}

.checkbox, .radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.checkbox input, .radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-600);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.alert--success { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
.alert--error   { background: var(--accent-50); color: var(--accent-700); border-color: #FECACA; }
.alert--warning { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.alert--info    { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
[data-theme='dark'] .alert--success { background: rgba(22, 163, 74, 0.12); color: #4ADE80; border-color: rgba(22, 163, 74, 0.3); }
[data-theme='dark'] .alert--error   { background: rgba(220, 38, 38, 0.12); color: #F87171; border-color: rgba(220, 38, 38, 0.3); }
[data-theme='dark'] .alert--warning { background: rgba(217, 119, 6, 0.12); color: #FBBF24; border-color: rgba(217, 119, 6, 0.3); }
[data-theme='dark'] .alert--info    { background: rgba(37, 99, 235, 0.12); color: #60A5FA; border-color: rgba(37, 99, 235, 0.3); }