/* Form field: stacked label + input */

.form-field {

  display: flex;

  flex-direction: column;

  gap: 0.3rem;

  padding: 0.45rem 0;

  border-bottom: 1px solid var(--color-border-subtle);

}



.form-field:last-child {

  border-bottom: none;

}



.form-field__label {

  font-size: 0.8125rem;

  font-weight: 500;

  color: var(--color-text-muted);

}



.form-field__required {

  color: var(--color-reject-text);

  font-weight: 700;

  text-decoration: none;

  margin-left: 0.125rem;

}



.form-field__count {

  align-self: flex-end;

  margin-top: 0.2rem;

  font-size: 0.75rem;

  color: var(--color-text-faint);

}



.form-field__input,

.form-field__select,

.form-field__textarea {

  background: var(--color-bg);

  border: 1px solid var(--color-border);

  border-radius: 4px;

  padding: 0.375rem 0.5rem;

  font-size: 0.875rem;

  color: var(--color-text);

  font-family: inherit;

  width: 100%;

  box-sizing: border-box;

  transition: border-color 0.15s, box-shadow 0.15s;

}



.form-field__input:focus,

.form-field__select:focus,

.form-field__textarea:focus {

  outline: none;

  border-color: var(--color-accent);

  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 15%, transparent);

}



.form-field__textarea {

  resize: vertical;

  line-height: 1.55;

}



/* Side-by-side field pair */

.form-row {

  display: flex;

  gap: 0.75rem;

  padding: 0.45rem 0;

  border-bottom: 1px solid var(--color-border-subtle);

}



.form-row:last-child {

  border-bottom: none;

}



.form-row .form-field {

  flex: 1;

  padding: 0;

  border-bottom: none;

}



/* Checkbox grids — matches .detail-checks on show page */

.form-checks {

  display: inline-grid;

  grid-template-columns: repeat(3, auto);

  gap: 0.375rem 2rem;

  margin: 0.25rem 0 0.5rem;

}



.form-check {

  display: flex;

  align-items: center;

  gap: 0.375rem;

  font-size: 0.875rem;

}



.form-check__input {

  width: 1rem;

  height: 1rem;

  accent-color: var(--color-accent);

  flex-shrink: 0;

  cursor: pointer;

}



.form-check__label {

  color: var(--color-text-secondary);

  cursor: pointer;

}



/* Validation error summary */

.form-errors {

  background: var(--color-reject-bg);

  border: 1px solid var(--color-reject-text);

  border-radius: 6px;

  padding: 0.75rem 1rem;

  margin-bottom: 1.25rem;

  font-size: 0.875rem;

}



.form-errors__title {

  margin: 0 0 0.375rem;

  font-weight: 600;

  color: var(--color-reject-text);

}



.form-errors ul {

  margin: 0;

  padding-left: 1.25rem;

  color: var(--color-text-secondary);

}



/* Rails wraps invalid label+input each in .field_with_errors */

.field_with_errors {

  display: contents;

}



.field_with_errors .form-field__input,

.field_with_errors .form-field__select,

.field_with_errors .form-field__textarea {

  border-color: var(--color-reject-text);

}



/* Submit / cancel row — lives in .page-header right side */

.form-actions {

  display: flex;

  gap: 0.5rem;

  align-items: center;

}



/* Small button variant */

.btn--sm {

  padding: 0.25rem 0.625rem;

  font-size: 0.8125rem;

}



/* Text-style action link */

.btn-link {

  background: none;

  border: none;

  padding: 0;

  font-size: 0.875rem;

  font-weight: 500;

  color: var(--color-accent);

  cursor: pointer;

  font-family: inherit;

  text-decoration: none;

  line-height: 1.25;

}



.btn-link:hover { opacity: 0.75; }



.btn-link--danger { color: var(--color-reject-text); }



/* Nested fields (phones, addresses) */

.nested-fields {

  border: 1px solid var(--color-border-subtle);

  border-radius: 4px;

  padding: 0.625rem 0.75rem;

  margin-bottom: 0.5rem;

  background: var(--color-bg);

}



.nested-fields__row {

  display: flex;

  gap: 0.5rem;

  align-items: flex-end;

  flex-wrap: wrap;

  margin-bottom: 0.25rem;

}



.nested-fields__row:last-child { margin-bottom: 0; }



.nested-fields__row .form-field {

  padding: 0;

  border-bottom: none;

  flex: 1;

  min-width: 5rem;

}



.nested-fields__grow { flex: 2 !important; }

.nested-fields__state { flex: 0 0 3.5rem !important; min-width: 0 !important; }

.nested-fields__zip   { flex: 0 0 5.5rem !important; min-width: 0 !important; }



.nested-fields__inline-check {

  display: flex;

  align-items: center;

  gap: 0.375rem;

  padding-bottom: 0.4rem;

  font-size: 0.875rem;

  white-space: nowrap;

  color: var(--color-text-secondary);

}



.nested-fields__remove {

  padding-bottom: 8px;

  flex-shrink: 0;

}



/* Inline record rows (referrals Turbo Frame display) */

.inline-record {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding: 0.5rem 0;

  border-bottom: 1px solid var(--color-border-subtle);

  font-size: 0.875rem;

  gap: 1rem;

}



.inline-record:last-child { border-bottom: none; }



.inline-record__info {

  display: flex;

  flex-direction: column;

  gap: 0.125rem;

  flex: 1;

}



.inline-record__value { color: var(--color-text-secondary); }



.inline-record__meta {

  font-size: 0.8125rem;

  color: var(--color-text-faint);

}



.inline-record__actions {

  display: flex;

  gap: 0.75rem;

  align-items: center;

  flex-shrink: 0;

}



/* Inline form (referrals Turbo Frame edit/new) */

.inline-form__fields {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

}



.inline-form__fields .form-field {

  flex: 1;

  min-width: 8rem;

  padding: 0;

  border-bottom: none;

}



.inline-form__actions {

  display: flex;

  gap: 0.5rem;

  margin-top: 0.5rem;

}



/* Primary button (submit) */

.btn--primary {

  background-color: var(--color-cta);

  color: #ffffff;

  border: 1px solid transparent;

}



.btn--primary:hover {

  opacity: 0.88;

}