/*
 * Inputs
 *
 * BEM-style component classes for AppFormBuilder inputs plus legacy
 * `input_class`, `select_class`, and `date_class` helper call sites.
 *
 * Usage:
 *   <input  class="input">                         <- text/email/password/number/date/time/file
 *   <textarea class="input input--textarea">       <- multi-line text
 *   <select class="input input--select">           <- dropdown (used by collection_select_input,
 *                                                    country_input, collection_time_select)
 *   <input  class="input input--with-prefix">      <- when a leading icon is rendered absolutely
 *                                                    by .form-field__prefix
 *   <input  class="input input--range" type=range> <- slider
 *
 * Cascade order: base first, then modifiers.
 *
 * Neutral chrome and common focus shadows use foundation tokens. Range accents
 * keep the palette token that matches the existing visual treatment.
 */

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */

.input {
  display: block;
  inline-size: 100%;
  /* Native <select> ignores the inherited line-height (rendered content
   * sits 3px shorter than text inputs), so anchor every .input to the same
   * visible height. Textarea overrides with its own larger min-block-size. */
  min-block-size: calc(1lh + 1.25rem + 2px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-medium);
  background-color: oklch(var(--lch-white) / 90%);
  padding-block: 0.625rem;
  padding-inline: 0.75rem;
  box-shadow: var(--shadow-inset-sm);
  font-size: max(16px, 1em); /* Prevents iOS zoom */
  color: var(--color-ink);
}

.input::placeholder {
  color: var(--color-ink-lighter);
}

.input:focus,
.input:focus-visible {
  outline: none;
  border-color: rgb(var(--palette-indigo-400));
  box-shadow:
    var(--shadow-inset-sm),
    var(--shadow-focus-soft);
}

.input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Modifiers                                                          */
/* ------------------------------------------------------------------ */
.input--textarea {
  resize: vertical;
  min-block-size: calc(3lh + 1.25rem);
}

@supports (field-sizing: content) {
  .input--textarea {
    field-sizing: content;
    resize: none;
  }
}

/* Native <select>. Keeps platform chrome but matches input border.
 * `background-image: none` overrides the baseline chevron SVG on `select`,
 * which would otherwise sit alongside the native chevron and double up. */
.input--select {
  appearance: auto;
  cursor: pointer;
  background-image: none;
}

/* Inline size variant. For controls that must sit beside other content
 * (e.g. the hour / minute pair emitted by Rails' time_select, separated by
 * a literal " : "). Drops the block layout + 100% width that .input enforces
 * by default and matches the previous `min-w-20` behaviour. */
.input--inline {
  display: inline-block;
  inline-size: auto;
  min-inline-size: 5rem;
}

/* When a .form-field__prefix is absolutely-positioned over the input. */
.input--with-prefix {
  padding-inline-start: 2.5rem;
}

.input--below-label {
  margin-block-start: 0.5rem;
}

.input--range {
  appearance: none;
  block-size: 0.5rem;
  margin-block-start: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background-color: rgb(var(--palette-blue-100));
  box-shadow: none;
  cursor: pointer;
}

.input--range:focus,
.input--range:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-soft);
}

/* Card-style radio used by fancy_radio_input. The radio input itself is
 * visually hidden; the surrounding <label> renders the card. */
.input--fancy-radio {
  display: flex;
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  background-color: var(--color-surface);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.input--fancy-radio:has(input[type="radio"]:checked) {
  border-color: var(--color-brand); /* indigo-500 */
  box-shadow: var(--shadow-brand-outline);
}

.input--fancy-radio input[type="radio"] {
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 1rem;
}

.input--fancy-radio__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
}

.input--fancy-radio__description {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-ink-light);
}

.input--fancy-radio__extra {
  display: block;
  margin-block-start: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
}

/* ------------------------------------------------------------------ */
/* Legacy .time-input (used by Ui::Form::TimePicker)                  */
/* Kept verbatim so the picker continues to render unchanged.         */
/* ------------------------------------------------------------------ */

.time-input {
  inline-size: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-medium);
  background-color: var(--color-surface);
  padding-block: 0.625rem;
  padding-inline: 0.75rem;
  box-shadow: var(--shadow-inset-sm);
}

.time-input:focus {
  outline: none;
  border-color: rgb(var(--palette-indigo-400));
  box-shadow:
    var(--shadow-inset-sm),
    var(--shadow-focus-soft);
}