/* components/forms.css — Campi form, label, messaggi di errore. */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field__label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d8ded9;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s;
}
.input:focus { border-color: var(--green); }

.field__req { color: var(--danger); margin-left: 3px; }

/* Select: stesso guscio dell'input, con freccia disegnata in CSS. */
.select {
  width: 100%;
  padding: 11px 34px 11px 13px;
  border: 1px solid #d8ded9;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background-color: var(--surface);
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-2) 50%),
                    linear-gradient(135deg, var(--muted-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s;
}
.select:focus { outline: none; border-color: var(--green); }
.select--compact { width: auto; padding-top: 8px; padding-bottom: 8px; font-size: 13px; }

.checkbox {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--green);
  cursor: pointer;
  margin: 0;
}

/* Campo booleano: controllo e testo sulla stessa riga. */
.field--check { margin-bottom: 12px; }
.field__check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.field__check-text { font-size: 13.5px; color: var(--ink-2); }

.field__group-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 4px 0 10px;
}

.field__help { font-size: 12px; color: var(--muted-2); margin-top: 6px; }

.field--error .input,
.field--error .select { border-color: var(--danger); }

/* Campo disabilitato: lo stato in cui una risposta della scheda ha reso senza
   oggetto il campo che la segue (cfr. VincoloSezione). Deve leggersi come
   «non si compila», non come «guasto»: il campo resta visibile e allineato
   agli altri, con il fondo spento e il cursore che dice che non si tocca. */
.input:disabled,
.select:disabled {
  background-color: var(--surface-mut);
  color: var(--faint);
  cursor: not-allowed;
}
.select:disabled { background-image: none; }

.field__errors {
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger);
}
.field__errors ul { margin: 0; padding-left: 16px; }

.form-alert {
  background: var(--warn-panel-bg);
  border: 1px solid var(--warn-panel-border);
  color: var(--warn-fg);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Barra di ricerca (input decorato con icona) */
.searchbox {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--faint);
  transition: border-color .15s;
}
.searchbox:focus-within { border-color: var(--green-border); }
.searchbox svg { display: block; flex: none; }
.searchbox__input {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.searchbox__input::placeholder { color: var(--faint); }
.searchbox--wide { width: 260px; }

/* Layout dei form lunghi: sezioni impilate, campi a due colonne. */
.form-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 20px;
}

.form-checks {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

/* Azioni di un form: sempre a destra, con la primaria all'estrema destra.
   I template scrivono la primaria per prima (è l'azione della pagina):
   row-reverse la porta in fondo alla riga senza toccare il markup. */
.form-actions {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}


/* Le textarea partono basse e crescono con quello che ci scrivi dentro
   (field-sizing, dove il browser lo supporta); in ogni caso l'angolo si
   trascina per allargarle a mano. */
textarea.input { resize: vertical; }
@supports (field-sizing: content) {
  textarea.input {
    field-sizing: content;
    max-height: 60vh;
  }
}