/* Reusable text input/textarea control. Kept top-level (like `.btn`) so it
 * can style any standalone field — a labeled `.form-field`, the admin search
 * box, the reset-reason textarea — without needing a wrapping component. */
.input {
  @apply w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:border-heroku-30 focus:ring-1 focus:ring-heroku-30 focus:ring-offset-0 focus-visible:outline-none aria-invalid:border-danger aria-invalid:focus:ring-danger;
}

/* A labeled form field: label + control + optional hint/error, stacked. */
.form-field {
  @apply mb-4 flex flex-col gap-1;

  & .label {
    @apply mb-1 text-sm font-bold;
  }

  & .required-marker {
    @apply ml-0.5 text-danger;
  }

  & .hint {
    @apply text-xs text-slate-700;
  }

  & .error {
    @apply text-xs font-medium text-danger-dark;
  }
}

/* A one-line search/filter form: stacks on mobile, inlines on wider
 * screens with the input flexing to fill the row. */
.search-form {
  @apply flex flex-col gap-3 sm:flex-row sm:items-center;

  & .input {
    @apply sm:flex-1;
  }
}