/* ============================================================
   Field component — Qiscus DS 2026
   ============================================================ */

.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  width: 100%;
  font-family: var(--font-sans);
}

.ds-field__label-row { display: flex; align-items: center; gap: var(--space-2xs); }
.ds-field__label { font: var(--fw-medium) 14px/20px var(--font-sans); color: var(--text-primary); }
.ds-field__subtitle { font: var(--fw-regular) 12px/18px var(--font-sans); color: var(--text-tertiary); }

/* ---------- Input ---------- */
.ds-field__input {
  display: flex; align-items: center;
  gap: var(--space-2xs);
  padding: 0 var(--space-xs);
  height: 44px;
  background: var(--bg-primary);
  border: var(--border-xs) solid var(--border-secondary);
  border-radius: var(--radius-md);
  margin-top: var(--space-3xs);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.ds-field__input input,
.ds-field__input textarea {
  all: unset;
  width: 100%;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--text-primary);
}
.ds-field__input input::placeholder,
.ds-field__input textarea::placeholder { color: var(--text-placeholder); }

.ds-field__leading,
.ds-field__trailing {
  display: inline-flex; align-items: center;
  color: var(--icon-secondary);
  flex-shrink: 0;
  cursor: pointer;
}
.ds-field__leading svg,
.ds-field__trailing svg { width: 20px; height: 20px; }
.ds-field__leading .ic,
.ds-field__trailing .ic { width: 20px; height: 20px; }

/* ---------- States ---------- */
.ds-field:not([data-state="disabled"]):not([data-state="readonly"]):not([data-state="focused"]):not(:focus-within) .ds-field__input:hover,
.ds-field[data-state="hover"]    .ds-field__input { border-color: var(--border-tertiary); }

.ds-field:focus-within          .ds-field__input,
.ds-field[data-state="focused"] .ds-field__input { border-color: var(--border-brand-secondary); }

html[data-focus-mode="keyboard"] .ds-field:focus-within .ds-field__input,
.ds-field[data-state="keyboard"] .ds-field__input {
  border-color: var(--border-focus-ring);
  box-shadow: inset 0 0 0 1px var(--border-focus-ring);
}
.ds-field[data-state="validated"] .ds-field__input { border-color: var(--border-success-secondary); }
.ds-field[data-state="error"]    .ds-field__input { border-color: var(--border-error-secondary); background: var(--bg-primary); }
.ds-field[data-state="disabled"] .ds-field__input { background: var(--bg-disabled); color: var(--text-disabled); cursor: not-allowed; }
.ds-field[data-state="disabled"] .ds-field__input input { color: var(--text-disabled); }
.ds-field[data-state="disabled"] .ds-field__leading,
.ds-field[data-state="disabled"] .ds-field__trailing { cursor: not-allowed; color: var(--icon-disabled); }
.ds-field[data-state="readonly"] .ds-field__input { background: var(--bg-secondary); }

/* ---------- Hint row ---------- */
.ds-field__hint-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-3xs);
  font: var(--fw-regular) 12px/18px var(--font-sans);
}
.ds-field__hint { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--text-tertiary); }
.ds-field__hint .ic { flex-shrink: 0; }
.ds-field[data-state="validated"] .ds-field__hint { color: var(--text-success-primary); }
.ds-field[data-state="error"]     .ds-field__hint { color: var(--text-error-primary); }

@media (prefers-reduced-motion: reduce) {
  .ds-field__input { transition: none; }
}