/* Custom styles goes here */

/* =====================================================================
   Bootstrap 5 validation classes alias per ASP.NET MVC

   MVC 5 usa di default "input-validation-error" e "field-validation-error"
   non styled da Bootstrap. Queste classi sono static readonly e non
   modificabili a runtime (errore CS0198 in Global.asax). Aliasing CSS
   replica lo stile di .is-invalid / .invalid-feedback Bootstrap 5.

   Sorgente di verita: src/scss/_custom-styles.scss (usa @extend).
   Questo CSS e' la versione espansa per uso immediato senza yarn build.
   Colore danger Vuexy: #ff4c51 (definito come --bs-form-invalid-color
   in vendor/css/core.css).
   ===================================================================== */

/* Input invalido (form-control, form-select, ecc.) */
.input-validation-error,
.form-control.input-validation-error,
.form-select.input-validation-error {
  border-color: var(--bs-form-invalid-border-color, #ff4c51) !important;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff4c51'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff4c51' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.input-validation-error:focus {
  border-color: var(--bs-form-invalid-border-color, #ff4c51) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb, 255, 76, 81), 0.25);
}

/* Form-select: posizione background diversa per la freccia dropdown */
.form-select.input-validation-error {
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Input-group con .has-validation: input invalido sopra il sibling */
.input-group .input-validation-error {
  z-index: 4;
}

/* Messaggio errore: visibile sempre quando MVC lo emette in stato error */
span.field-validation-error,
.field-validation-error {
  display: block !important;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-invalid-color, #ff4c51) !important;
}

/* Span vuoto quando il campo e' valido: nascondi (MVC lo emette comunque) */
.field-validation-valid {
  display: none !important;
}

/* =====================================================================
   Pulsanti azione di riga (Dettagli/Modifica/Elimina nelle tabelle)

   Vuexy applica a .btn-icon.btn-sm un'icona da 0.8125rem (13px), troppo
   piccola da leggere/cliccare per le azioni di riga (es. l'occhio
   "Dettagli"). Le riportiamo a ~20px (come l'icona dei .btn-icon normali)
   mantenendo il bottone piccolo. site.css e' caricato dopo core.css, quindi
   questa regola vince senza !important.
   ===================================================================== */
.btn-icon.btn-sm .icon-base,
.btn-group-sm > .btn-icon.btn .icon-base {
  block-size: 1.25rem;
  font-size: 1.25rem;
  inline-size: 1.25rem;
}

/* =====================================================================
   Campi password: una sola icona "mostra password"

   Edge (e IE prima di lui) disegna DENTRO ogni input[type=password] un
   proprio pulsante a forma di occhio, lo pseudo-elemento ::-ms-reveal.
   Non compare nel markup, quindi non lo si trova guardando la view: si
   vede solo a video, affiancato all'occhio di Vuexy, e il campo finisce
   per avere due occhi che fanno la stessa cosa.

   Si tiene quello di Vuexy (lo <span class="input-group-text"> dentro
   .form-password-toggle) perche' e' l'unico dei due che sta a destra del
   campo, coerente col template, e che il nostro JS sa commutare in
   coppia con l'icona eye/eye-off.

   Regola globale e non limitata alle due form che oggi hanno una
   password (Home/Login e Credenziali/CambioPassword): ogni campo
   password del portale usa il toggle Vuexy, quindi anche quelli futuri
   devono nascere con un occhio solo.
   ===================================================================== */
input[type="password"]::-ms-reveal {
  display: none;
}