/* ==========================================================================
   form-field.css — text inputs, selects, textareas
   States covered: default, hover, focus-visible, filled, placeholder,
                   disabled, readonly, aria-invalid (error)
   Sizes:          .input-sm (40px), default (48px), .input-lg (56px)
   Adornments:     .input-group--leading / --trailing (icon)
                   .input-group--prefix (text e.g. "+1", "$")
   Labels/help:    .field-row, .field-label, .field-help, .field-error
   ========================================================================== */

/* ── Base input (also used for select & textarea) ───────────────────────────
   Default height matches .btn-sm (40px) — secondary buttons are typically
   .btn-ghost.btn-sm in this product, so the field height aligns with them
   when placed side-by-side. Use .input-lg (48px) when the surrounding
   primary CTA is the default .btn (48px), e.g. auth forms / wizards.
   ─────────────────────────────────────────────────────────────────────── */
.input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-12);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--field-text);
  font-family: var(--font-base);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow   var(--dur-fast) var(--ease),
    background   var(--dur-fast) var(--ease),
    color        var(--dur-fast) var(--ease);
}

.input::placeholder { color: var(--field-placeholder); font-weight: var(--fw-regular); }

.input:hover:not(:disabled):not([readonly]):not([aria-disabled="true"]) {
  border-color: var(--field-border-hover);
}

.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: var(--field-shadow-focus);
}

.input:disabled,
.input[aria-disabled="true"] {
  background: var(--field-bg-disabled);
  color: var(--field-text-disabled);
  border-color: var(--field-border-disabled);
  cursor: not-allowed;
  opacity: .7;
}

.input[readonly] {
  background: var(--field-bg);
  color: var(--field-text-readonly);
  cursor: default;
}
.input[readonly]:focus { box-shadow: none; border-color: var(--field-border); }

.input[aria-invalid="true"],
.input.is-invalid {
  border-color: var(--field-border-error);
}
.input[aria-invalid="true"]:focus,
.input.is-invalid:focus {
  box-shadow: var(--field-shadow-error);
}

/* ── Sizes ────────────────────────────────────────────────────────────────
   .input-sm → matches a hypothetical 32px micro-button (chat search).
   .input-lg → matches the default .btn (48px), used when the page CTA is
              .btn-primary at default size (auth, booking-wizards).
   ─────────────────────────────────────────────────────────────────────── */
.input-sm { height: 32px; font-size: var(--fs-label); padding: 0 var(--space-10); }
.input-lg { height: 48px; padding: 0 var(--space-16); font-size: var(--fs-sm); }

/* ── Textarea ───────────────────────────────────────────────────────────── */
textarea.input {
  height: auto;
  min-height: 80px;
  padding: var(--space-10) var(--space-12);
  line-height: var(--lh-body);
  resize: vertical;
}
textarea.input.input-lg { min-height: 120px; padding: var(--space-12) var(--space-16); }
textarea.input.input-sm { min-height: 56px; padding: var(--space-8) var(--space-10); }

/* ── Select — chevron via inline SVG bg-image ───────────────────────────── */
select.input {
  padding-right: var(--space-40);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  cursor: pointer;
}
select.input:disabled { cursor: not-allowed; }
select.input::-ms-expand { display: none; }
select.input.input-sm { padding-right: var(--space-32); }

/* ── Search input — drop the platform-native UI ─────────────────────────── */
input[type="search"].input {
  appearance: none;
  -webkit-appearance: none;
}
input[type="search"].input::-webkit-search-decoration,
input[type="search"].input::-webkit-search-cancel-button,
input[type="search"].input::-webkit-search-results-button,
input[type="search"].input::-webkit-search-results-decoration {
  display: none;
}

/* ── Number input — drop the spinner ────────────────────────────────────── */
input[type="number"].input {
  -moz-appearance: textfield;
}
input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Date / time input — calendar/clock indicator color ─────────────────── */
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="time"].input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(46%) sepia(7%) saturate(425%) hue-rotate(182deg) brightness(95%) contrast(86%);
}

/* ==========================================================================
   Input group — icon adornments + text prefix
   ========================================================================== */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.input-group .input { flex: 1; min-width: 0; }

/* Leading icon (search, mail, phone…) */
.input-group--leading > .input { padding-left: var(--space-40); }
.input-group--leading > .input.input-sm { padding-left: var(--space-32); }
.input-group--leading > .input-group__icon {
  position: absolute;
  left: var(--space-14);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--field-icon);
  pointer-events: none;
  z-index: 1;
}

/* Trailing icon — usually clickable (eye, x, info) */
.input-group--trailing > .input { padding-right: var(--space-40); }
.input-group--trailing > .input.input-sm { padding-right: var(--space-32); }
/* Non-clickable trailing badge (verified email, status flag…). Sits inside
   the input on the right, vertically centered, like the leading icon does. */
.input-group--trailing > .input-group__icon {
  position: absolute;
  right: var(--space-14);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--field-icon);
  pointer-events: none;
  z-index: 1;
}
/* Verified-state recolour — used on `aria-label="verified"` badges so the
   green check reads as confirmation, not just decoration. */
.input-group__icon[aria-label="verified"] { color: var(--accent-live, #16a34a); }
.input-group--trailing > .input-group__icon-btn {
  position: absolute;
  right: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--field-icon);
  border-radius: var(--radius-xs);
  cursor: pointer;
  z-index: 1;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.input-group--trailing > .input-group__icon-btn:hover { color: var(--field-icon-hover); background: var(--field-icon-hover-bg); }
.input-group--trailing > .input-group__icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--field-shadow-focus);
}

/* Both leading and trailing on the same input */
.input-group--leading.input-group--trailing > .input { padding-left: var(--space-40); padding-right: var(--space-40); }

/* Generic icon sizing inside the group — Lucide injects an <svg class="lucide"> */
.input-group__icon svg.lucide,
.input-group__icon [data-lucide],
.input-group__icon-btn svg.lucide,
.input-group__icon-btn [data-lucide] { width: 18px; height: 18px; }

/* Text prefix segment — for "+1", "$", "https://splitmart.com/"
   Default height matches the default .input (40px). */
.input-group--prefix > .input-group__prefix {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-10);
  border: 1px solid var(--field-border);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--field-prefix-bg);
  color: var(--field-prefix-text);
  /* Match the default .input font-size so text reads as one continuous control. */
  font: var(--fw-medium) var(--fs-meta)/1 var(--font-base);
  white-space: nowrap;
  flex-shrink: 0;
}
.input-group--prefix > .input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: 0;
}
.input-group--prefix > .input:focus,
.input-group--prefix > .input:focus-visible {
  /* keep the focus ring tied to the input edge — prefix stays calm */
  position: relative;
  z-index: 1;
}

/* Prefix follows the input it's paired with — match by sibling size class.
   Font-size mirrors the input so adornment + value read at the same scale.
   Use :has() so authors only need to size the .input itself. */
.input-group--prefix:has(> .input.input-sm) > .input-group__prefix { height: 32px; font-size: var(--fs-label); padding: 0 var(--space-8); }
.input-group--prefix:has(> .input.input-lg) > .input-group__prefix { height: 48px; font-size: var(--fs-sm);   padding: 0 var(--space-12); }

/* ==========================================================================
   Field row — label + control + helper/error
   ========================================================================== */
.field-row { display: block; width: 100%; }
/* Canonical vertical rhythm between form fields — every adjacent pair stacks
   with 24px. Single source of truth: do not override per-form. */
.field-row + .field-row { margin-top: var(--space-24); }

.field-label {
  display: block;
  font: var(--fw-semibold) var(--fs-meta)/var(--lh-card) var(--font-base);
  margin-bottom: var(--space-6);
  color: var(--ink);
}
.field-label .req { color: var(--danger); margin-left: 2px; }

.field-help {
  display: block;
  font: var(--fw-regular) var(--fs-meta)/1.4 var(--font-base);
  color: var(--muted);
  margin-top: var(--space-6);
}

.field-error {
  display: block;
  font: var(--fw-medium) var(--fs-meta)/1.4 var(--font-base);
  color: var(--danger);
  margin-top: var(--space-6);
}

/* ==========================================================================
   Form actions — footer row of buttons in any form.
   Rule: every direct .btn child stretches to fill the row evenly.
         1 button → full-width. 2 buttons → equal halves with 24px gap.
   Markup:
     <div class="form-actions">
       <a class="btn btn-ghost">Cancel</a>
       <a class="btn btn-primary">Save</a>
     </div>
   ========================================================================== */
.form-actions {
  display: flex;
  gap: var(--space-24);
  margin-top: var(--space-16);
}
.form-actions > .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Mobile (≤720): every form's action row stacks vertically ─────────────
   Horizontal pairs starve at narrow widths (labels truncate, primary CTA gets
   squeezed to 50% — far below the comfortable ~280px+ thumb target). On
   mobile we reverse the column so the primary button (DOM index 1, i.e.
   second child) renders on top, closest to the thumb, with secondary
   actions (Cancel / Back) underneath. Single source of truth: do not
   override per-form. */
@media (max-width: 720px) {
  .form-actions {
    flex-direction: column-reverse;
    gap: var(--space-10);
  }
  /* Reset the row distribution (flex:1 1 0) used on desktop. In a column it
     would set flex-basis:0 on the MAIN (vertical) axis and collapse the button
     height to its border. Restore natural height (.btn = 48px). */
  .form-actions > .btn { width: 100%; flex: 0 0 auto; }
}