.field { margin-bottom: var(--space-4); }
.field label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.field .error { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--danger); }

/* Forms are for reading, not for spanning a 32-inch monitor. A single column of
   inputs stretched edge to edge is hard to scan and hard to fill in accurately. */
.form-card {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-card.wide { max-width: 52rem; }

.form-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.field-hint { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }

/* A read-only value shown where an input would otherwise be - e.g. a
   contract's number on its edit form, fixed at creation. */
.field-static {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* Two-up rows for short related fields (first/last name, code/commission). */
.field-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.field-row .field { flex: 1 1 12rem; }

/* Inside a narrowed column the card fills it, so the page heading and the card
   share a left edge. A 34rem card inside a 40rem column left the heading
   sitting 3rem outside it, which read as misalignment. */
.content-narrow .form-card { max-width: none; }

/* Checkboxes and radios must escape the width:100% rule above, which is meant
   for text inputs. Stretched to full width, a checkbox sits marooned in the
   middle of the column with its label stranded to one side. */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  min-width: 0;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

/* A checkbox and its label are one control: they sit on one line, share a
   baseline, and the whole thing is clickable. */
.field-check { margin-bottom: var(--space-4); }
.field-check label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  font-size: var(--text-base);
  color: var(--text);
  cursor: pointer;
}
.field-check .error { display: block; margin-top: var(--space-1); }

/* A tel: link sitting after a phone number in a read-only field. */
.call-link { margin-left: var(--space-2); font-size: var(--text-sm); color: var(--accent); }

/* A hex text field with a native colour picker beside it (Companies form).
   The text field keeps the full width it would have had; the swatch is a
   fixed square to its right. */
.colour-field { display: flex; align-items: stretch; gap: var(--space-2); }
.colour-field input { flex: 1 1 auto; }
.colour-field input[type="color"] {
  flex: 0 0 auto;
  width: 2.75rem;
  padding: 2px;
  cursor: pointer;
}

/* The Verify-email button and its result line, under the email field. */
.verify-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.verify-result { font-size: var(--text-sm); color: var(--text-muted); }

/* "The confirmer sent this back" callout on the booking view and edit form. */
.confirmer-feedback {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.confirmer-feedback strong { color: var(--danger); }
.confirmer-feedback p { margin: var(--space-1) 0 0; }
.confirmer-feedback-hint { font-size: var(--text-sm); color: var(--text-muted); }

/* "Schedule a call back" modal on the booking form (native <dialog>). */
.callback-dialog {
  width: min(30rem, 92vw);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.callback-dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
}
.callback-dialog .form-section-heading { margin-top: 0; }

/* A horizontal set of radio options (e.g. Confirm sale: Yes / No), each
   option label sitting inline with its button like .field-check does. */
.radio-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  font-size: var(--text-base);
  color: var(--text);
  cursor: pointer;
}

/* The grey section bars from the legacy Booking form (Customer Details /
   Information to go on Advert / For Admin Purposes Only), reworked to use
   theme tokens instead of a hardcoded grey - see the note's screenshots for
   the original look this is standing in for. */
.form-section-heading {
  margin: var(--space-5) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
}
.form-section-heading:first-child { margin-top: 0; }