/* ============================================================
   components/form.css  —  ds-input, ds-select, ds-textarea, ds-label
   ============================================================ */

/* ── Label ────────────────────────────────────────────────── */
.ds-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ds-text, #0f172a);
  margin-bottom: var(--ds-space-2, 0.5rem);
}

.ds-label--optional::after {
  content: " (optional)";
  font-weight: 400;
  color: var(--ds-text-soft);
  font-size: 0.8125rem;
}

/* ── Base input / select / textarea ──────────────────────── */
.ds-input,
.ds-select,
.ds-textarea {
  display: block;
  width: 100%;
  background: var(--ds-input-bg, rgba(255, 255, 255, 0.95));
  border: 1px solid var(--ds-input-border, rgba(148, 163, 184, 0.24));
  border-radius: var(--ds-input-radius, 0.75rem);
  padding: var(--ds-input-py, 0.75rem) var(--ds-input-px, 1rem);
  font-size: var(--ds-body-size, 1rem);
  font-family: var(--ds-font-body, inherit);
  color: var(--ds-input-text, var(--ds-text, #0f172a));
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-text-soft);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ds-accent) 60%, var(--ds-input-border) 40%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 15%, transparent);
}

.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--ds-surface-2);
}

/* ── Textarea ─────────────────────────────────────────────── */
.ds-textarea { resize: vertical; min-height: 7rem; }
.ds-textarea--no-resize { resize: none; }

/* ── Select arrow ─────────────────────────────────────────── */
.ds-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ds-input-px, 1rem) center;
  padding-right: calc(var(--ds-input-px, 1rem) * 2.5);
}

/* ── Input states ─────────────────────────────────────────── */
.ds-input--error,
.ds-select--error,
.ds-textarea--error {
  border-color: rgba(239, 68, 68, 0.6);
}

.ds-input--error:focus,
.ds-select--error:focus,
.ds-textarea--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ds-input--success { border-color: rgba(16, 185, 129, 0.6); }

/* ── Form group (label + input + hint/error) ──────────────── */
.ds-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1, 0.25rem);
}

.ds-form-hint {
  font-size: 0.8125rem;
  color: var(--ds-text-soft);
}

.ds-form-error {
  font-size: 0.8125rem;
  color: #ef4444;
}

/* ── Inline field (label + input side by side) ────────────── */
.ds-form-inline {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3, 0.75rem);
}

.ds-form-inline .ds-label { margin-bottom: 0; white-space: nowrap; }
.ds-form-inline .ds-input { flex: 1; }

/* ── Input with icon ──────────────────────────────────────── */
.ds-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-input-wrapper .ds-input {
  padding-left: calc(var(--ds-input-px, 1rem) + 1.75rem);
}

.ds-input-icon {
  position: absolute;
  left: var(--ds-input-px, 1rem);
  color: var(--ds-text-soft);
  pointer-events: none;
  font-size: 0.9375rem;
}