/* =========================
   VALIDAZIONE (ERROR STATE)
   ========================= */

/* Testo errore */
.validation-error-text{
  color: #ff4c4c;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 6px;
}

/* -------------------------
   1) INPUT / SELECT SINGOLI
   ------------------------- */
.validation-error-field{
  box-sizing: border-box;
  border-color: #ff4c4c !important;      /* sovrascrive bootstrap */
  outline: 0;
  box-shadow: none !important;
  background-clip: padding-box;
}

/* Radius coerente con modal SOLO per input normali (non input-group) */
.form-control.validation-error-field,
.form-select.validation-error-field,
textarea.validation-error-field{
  border-radius: 12px !important;
}

/* Focus su campo in errore (singolo) */
.form-control.validation-error-field:focus,
.form-select.validation-error-field:focus,
textarea.validation-error-field:focus{
  border-color: #ff4c4c !important;
  box-shadow: 0 0 0 2px rgba(255, 76, 76, 0.18) !important;
}

/* Fix specifico per input date: spazio per icona calendario */
input[type="date"].validation-error-field{
  padding-right: 44px;
}

/* -------------------------
   2) INPUT GROUP (icona + input)
   NOTE: qui la classe deve stare sull'input-group
   ------------------------- */

/* wrapper in errore */
.input-group.validation-error-field{
  border-radius: 12px;
}

/* bordo rosso su tutti i pezzi del group */
.input-group.validation-error-field .input-group-text,
.input-group.validation-error-field .form-control,
.input-group.validation-error-field .form-select{
  border-color: #ff4c4c !important;
  box-shadow: none !important;
}

/* elimina la “doppia riga” tra icon e input */
.input-group.validation-error-field .input-group-text{
  border-right: 0 !important;
  border-radius: 12px 0 0 12px !important;
}
.input-group.validation-error-field .form-control,
.input-group.validation-error-field .form-select{
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
}

/* Focus (glow) su tutto l'input-group, senza cambiare layout */
.input-group.validation-error-field:focus-within .input-group-text,
.input-group.validation-error-field:focus-within .form-control,
.input-group.validation-error-field:focus-within .form-select{
  border-color: #ff4c4c !important;
  box-shadow: 0 0 0 2px rgba(255, 76, 76, 0.18) !important;
}

/* Se per qualche motivo la classe finisce anche sull'input dentro group,
   evita radius “pieno” che rompe l'estetica */
.input-group.validation-error-field .validation-error-field.form-control,
.input-group.validation-error-field .validation-error-field.form-select{
  border-radius: 0 12px 12px 0 !important;
}