/* ==========================================================================
   Input
   Figma source: Row / Input populated 3462:17643 (JOHN REVIEW / Tax DS).
   Label: Inter Medium 14, text-primary. Field: white, 1px border, radius 8,
   33px tall, 14px text, placeholder #abacae. Label→field gap 12px.
   Paired inputs (From/To) share one bordered container.
   Error + disabled are PROVISIONAL derived states (CLAUDE.md rule 6).
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: 1;
}

.input {
  width: 100%;
  height: 33px; /* Figma inside-stroke height; border included via box-sizing */
  padding: 0 14px 0 10px; /* Figma 11/15 minus the 1px border */
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Focused input → a clean 1px black border (not the global 2px focus ring). Other controls
   keep the 2px ring; only text fields get the thin black line (Peter, 30 Jun 2026). */
.input:focus { outline: none; border-color: var(--color-text); }

.input::placeholder {
  color: var(--color-border-strong);
}

/* No native number spinners — keep number fields clean across the app, like the rest of the
   inputs / the bank-transactions filter (GLOBAL standard). */
.input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Paired fields (From/To) — one bordered container, two borderless inputs */
.input-pair {
  display: flex;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.input-pair > .input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  height: 31px; /* container border carries the other 2px */
}

/* Focus: single inputs use the base.css ring; for pairs, ring the container */
.input-pair:focus-within {
  outline: 2px solid var(--color-text); /* provisional, mirrors base ring */
  outline-offset: 2px;
}

.input-pair > .input:focus-visible {
  outline: none;
}

/* Search field — 220x33 input with trailing search icon (node 3462:18054) */
.search-field {
  position: relative;
  width: 220px;
  max-width: 100%;
}

.search-field > .input {
  padding-right: 37px; /* room for the icon cell */
}

.search-field > svg {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  color: var(--color-border-strong);
  pointer-events: none;
}

/* Select — same box as .input with a trailing chevron
   (VAT payment schedule, node 3462:18838) */
.select-field,
.icon-field {
  position: relative;
}

.select-field > select.input {
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
}

.select-field > svg,
.icon-field > svg {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  color: var(--color-text);
  pointer-events: none;
}

.icon-field > .input {
  padding-right: 34px;
}

/* Interactive trailing icon button (e.g. the Client "+" that opens the add-client
   drawer) — clickable, unlike the decorative .icon-field > svg. */
.icon-field__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  cursor: pointer;
}
.icon-field__btn:hover { background: var(--color-bg-subtle); }
.icon-field__btn > svg { width: 20px; height: 20px; }

/* Password show/hide toggle — interactive trailing icon (clickable, unlike .icon-field svg) */
.input-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.input-eye:hover { color: var(--color-text); }
.input-eye svg { width: 20px; height: 20px; }

/* provisional - error state derives from the danger tokens */
.input[aria-invalid="true"],
.field--error .input,
.field--error .input-pair {
  border-color: var(--color-danger);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

/* Multiline notes/comments — same box as .input (Invoice detail, 3462:35716) */
textarea.input {
  height: auto;
  min-height: 70px;
  padding: 10px 14px 10px 10px;
  resize: vertical;
  line-height: var(--leading-body);
}

/* provisional */
.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-subtle-light);
}

/* Checkbox — square box + check, label alongside (Export panel, SS1) */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
}

.checkbox > input {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}

.checkbox > input::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  background: var(--color-text);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.checkbox > input:checked::before { transform: scale(1); }

/* Radio — round box + dot, label alongside (Create User role/permissions, SS).
   provisional: legacy uses plain radios; derived to the new design tokens. */
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
}

.radio > input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  flex: none;
}

.radio > input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  background: var(--color-text);
}

.radio > input:checked { border-color: var(--color-text); }
.radio > input:checked::before { transform: scale(1); }

/* Toggle switch — on = brand primary (My Settings notifications, SS).
   provisional: no motion/toggle spec in Figma; derived. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
}

.switch > input {
  appearance: none;
  width: 38px;
  height: 22px;
  margin: 0;
  flex: none;
  border-radius: 999px;
  background: var(--color-border-strong);
  position: relative;
  cursor: pointer;
  transition: background .2s ease;
}

.switch > input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform .2s ease;
}

.switch > input:checked { background: var(--color-text); }
.switch > input:checked::before { transform: translateX(16px); }

/* Disabled + focus for both form controls (provisional derived states) */
.radio > input:disabled,
.checkbox > input:disabled,
.switch > input:disabled { opacity: 0.45; cursor: not-allowed; }

.radio:has(input:disabled),
.checkbox:has(input:disabled),
.switch:has(input:disabled) { color: var(--color-text-muted); cursor: not-allowed; }

.radio > input:focus-visible,
.switch > input:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .switch > input,
  .switch > input::before { transition: none; }
}

@media (max-width: 480px) {
  .field__label { flex-wrap: wrap; }
}

/* € prefix on money fields (auto-wrapped by ui.js) + over-cap flag — GLOBAL (Peter, 7 Jul) */
.amt-eur { position: relative; display: block; }
.amt-eur__sym { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 14px; pointer-events: none; }
.amt-eur > input { padding-left: 24px; }
/* Hit the cap → a brief red flag so it's clear you can't go higher than what's in the invoice. */
@keyframes amtOver { 0%, 60% { border-color: var(--color-danger, #d64545); box-shadow: 0 0 0 3px rgba(214,69,69,.12); } 100% { } }
input.is-amt-over { animation: amtOver .8s ease; }
@media (prefers-reduced-motion: reduce) { input.is-amt-over { animation: none; } }