/* CSS dei componenti <x-ui.…> (piano generale, G8). Nessun colore scritto a mano: si usano le variabili di Bootstrap */

/*
 * Checkbox <x-ui.forms.inputs.checkbox>
 *
 * Lo switch e la casella sono disegnati in em: la grandezza si sceglie con la font-size dell'input,
 * mentre la label resta della grandezza del testo. Le regole annullano il Bootstrap 4 di SB Admin 2
 * (input in position absolute).
 */

.ui-checkbox {
  --ui-checkbox-size: 1.25rem;
  --ui-checkbox-line: 1.5rem;
  --ui-checkbox-gap: 0.5rem;
  --ui-checkbox-field-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}

.ui-checkbox-sm {
  --ui-checkbox-size: 1rem;
}

.ui-checkbox-xs {
  --ui-checkbox-size: 0.875rem;
}

.ui-checkbox .form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-checkbox-gap);
  min-height: 0;
  margin: 0;
  padding: 0;
}

/*
 * Alto quanto un campo floating, con la prima riga della label centrata: sta in riga con gli altri campi.
 * La misura xs (elenchi, filtri, tabelle) tiene l'altezza naturale
 */
.ui-checkbox:not(.ui-checkbox-top, .ui-checkbox-bare, .ui-checkbox-xs) .form-check {
  min-height: var(--ui-checkbox-field-height);
  padding: calc((var(--ui-checkbox-field-height) - var(--ui-checkbox-line)) / 2) 0;
}

.ui-checkbox .form-check .form-check-input,
.ui-checkbox .form-check.form-switch .form-check-input {
  position: static;
  flex-shrink: 0;
  float: none;
  width: 1em;
  height: 1em;
  margin: calc((var(--ui-checkbox-line) - 1em) / 2) 0 0;
  font-size: var(--ui-checkbox-size);
}

.ui-checkbox .form-check.form-switch .form-check-input {
  width: 2em;
}

.ui-checkbox-bare .form-check .form-check-input,
.ui-checkbox-bare .form-check.form-switch .form-check-input {
  margin: 0;
}

.ui-checkbox .form-check .form-check-label,
.ui-checkbox .form-check.form-switch .form-check-label {
  margin: 0;
  line-height: var(--ui-checkbox-line);
}

/* Label sopra: diventa rossa con l'errore, anche quando l'errore lo mette il JS */
.ui-checkbox:has(.form-check-input.is-invalid) > .form-label {
  color: var(--bs-form-invalid-color);
}

/*
 * Gruppi di opzioni <x-ui.forms.groups.radios> e <x-ui.forms.groups.checkboxes>
 *
 * fieldset e legend senza lo stile di Bootstrap per i titoli; il legend ha lo stile della label sopra
 * dei campi. Le altre regole correggono il Bootstrap 4 di SB Admin 2 sui pulsanti.
 */

.ui-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-options > legend {
  float: none;
  width: auto;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: 1rem;
}

/* Con i pulsanti piccoli la domanda sta più vicina */
.ui-options.ui-options-sm > legend {
  margin-bottom: 0.2rem;
}

/* La domanda diventa rossa con l'errore, anche quando l'errore lo mette il JS */
.ui-options:has(.is-invalid) > legend {
  color: var(--bs-form-invalid-color);
}

/* I pulsanti sono <label>: SB Admin 2 dà a ogni label un margine sotto */
.ui-options .btn {
  margin-bottom: 0;
}

/* Il gruppo è inline-flex: sotto resterebbe lo spazio della riga di testo, che sposta il fondo */
.ui-options .btn-group,
.ui-options .btn-group-vertical {
  display: flex;
}

/* …e da blocco occuperebbe tutta la colonna: senza w-100 (full-width="false") resta largo quanto i pulsanti */
.ui-options .btn-group:not(.w-100),
.ui-options .btn-group-vertical:not(.w-100) {
  width: fit-content;
}

/* SB Admin 2 toglie l'arrotondatura a ogni pulsante che non è il primo figlio, e qui il primo è l'input */
.ui-options .btn-group > .btn-check:first-child + .btn {
  margin-left: 0;
  border-top-left-radius: var(--bs-btn-border-radius);
  border-bottom-left-radius: var(--bs-btn-border-radius);
}

.ui-options .btn-group-vertical > .btn-check:first-child + .btn {
  margin-top: 0;
  border-top-left-radius: var(--bs-btn-border-radius);
  border-top-right-radius: var(--bs-btn-border-radius);
}

/* Pulsanti con errore: bordo rosso su tutte le opzioni, testo rosso su quelle non scelte */
.ui-options .btn-check.is-invalid + .btn {
  border-color: var(--bs-form-invalid-border-color);
}

.ui-options .btn-check.is-invalid:not(:checked) + .btn {
  color: var(--bs-form-invalid-color);
}

/* Elenchi di checkbox del gruppo: in colonna, oppure in riga che va a capo */
.ui-checkbox-list {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.ui-checkbox-list.ui-checkbox-inline {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1.5rem;
}

/*
 * Radio tradizionali <x-ui.forms.groups.radios :buttons="false"> e radio singolo <x-ui.forms.inputs.radio>
 *
 * Come il checkbox: il radio è disegnato in em, la grandezza si sceglie con la font-size dell'input e la
 * label resta della grandezza del testo. Le regole annullano il Bootstrap 4 di SB Admin 2.
 */

.ui-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-radio-list.ui-radio-inline {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1.5rem;
}

.ui-radio-item {
  --ui-radio-size: 1.25rem;
  --ui-radio-line: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.ui-radio-item.ui-radio-sm {
  --ui-radio-size: 1rem;
}

.ui-radio-item.ui-radio-xs {
  --ui-radio-size: 0.875rem;
}

.ui-radio-item .form-check-input {
  position: static;
  flex-shrink: 0;
  float: none;
  width: 1em;
  height: 1em;
  margin: calc((var(--ui-radio-line) - 1em) / 2) 0 0;
  font-size: var(--ui-radio-size);
}

.ui-radio-item.ui-radio-bare .form-check-input {
  margin: 0;
}

.ui-radio-item .form-check-label {
  margin: 0;
  line-height: var(--ui-radio-line);
}

/*
 * Telefono <x-ui.forms.inputs.phone>
 *
 * Prefisso (select2) e numero uniti in un input-group. select2 nasconde il <select> e disegna un suo
 * elemento: qui prende la larghezza fissa, l'altezza di un campo floating, gli angoli a destra
 * squadrati, il focus e il bordo rosso dei campi di Bootstrap. La label «Prefisso» resta alzata come
 * una label floating, e il testo scelto scende sotto di lei
 */

.ui-phone .ui-phone-prefix {
  position: relative;
  display: flex;
  flex: 0 0 6.5rem;
}

.ui-phone .ui-phone-prefix > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin-bottom: 0;
  padding: 1rem 0.75rem;
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  transform-origin: 0 0;
  pointer-events: none;
}

.ui-phone .select2-container {
  width: 100%;
}

.ui-phone .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  padding: 0 0.25rem;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.ui-phone .select2-container .select2-selection__rendered {
  padding-top: 1.1rem;
  padding-left: 0.25rem;
  line-height: 1.25;
}

.ui-phone .select2-container .select2-selection__arrow {
  top: 0;
  height: 100%;
}

.ui-phone .select2-container--focus .select2-selection--single,
.ui-phone .select2-container--open .select2-selection--single {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.ui-phone .is-invalid + .select2-container .select2-selection--single {
  border-color: var(--bs-form-invalid-border-color);
}

/*
 * File <x-ui.forms.inputs.file>
 *
 * Il pulsante «Sfoglia…»/«Scegli file» alto quanto il campo: l'input non ha padding verticale, il
 * pulsante prende tutta l'altezza interna e il nome del file si centra con la line-height.
 * L'altezza la decide size, come nel checkbox, anche nella forma compatta (bare): di default alto
 * quanto un campo floating, così sta in riga con gli altri; sm l'altezza normale di Bootstrap, xs
 * quella piccola
 */

.ui-file-input {
  --ui-file-height: 3.5rem;
  height: calc(var(--ui-file-height) + calc(var(--bs-border-width) * 2));
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--ui-file-height);
}

.ui-file-input.ui-file-input-sm {
  --ui-file-height: calc(1.5em + 0.75rem);
}

.ui-file-input.form-control-sm {
  --ui-file-height: calc(1.5em + 0.5rem);
}

.ui-file-input::file-selector-button {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* SB Admin 2 dà un margine sotto alle label */
.ui-file .input-group-text {
  margin-bottom: 0;
}

/*
 * Immagine <x-ui.forms.inputs.image>
 *
 * Miniatura a sinistra del campo file, alta quanto il campo, con l'immagine intera (contain: i loghi
 * sono rettangolari) e un pulsante tondo sull'angolo. Grigia quando è segnata per l'eliminazione,
 * con il bordo azzurro quando è la nuova immagine scelta. Un clic la apre grande in un <dialog>
 */

.ui-image-thumb {
  position: relative;
  flex: 0 0 auto;
  width: calc(3.5rem + calc(var(--bs-border-width) * 2));
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}

.ui-image-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: zoom-in;
}

.ui-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.ui-image-thumb .ui-image-action {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  font-size: 0.7rem;
  border-radius: 50%;
}

.ui-image-thumb.ui-image-deleted img {
  opacity: 0.35;
  filter: grayscale(1);
}

.ui-image-thumb.ui-image-new img {
  border: 2px solid var(--bs-info);
}

.ui-image-dialog {
  max-width: min(90vw, 60rem);
  padding: 0;
  border: 0;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-lg);
}

.ui-image-dialog::backdrop {
  background: rgba(var(--bs-black-rgb), 0.6);
}

.ui-image-dialog img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
}

.ui-image-dialog .ui-image-dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/*
 * Textarea <x-ui.forms.texts.textarea>
 *
 * Con la label floating Bootstrap dà alla textarea l'altezza fissa di un input: height auto
 * lascia decidere a rows, e min-height di Bootstrap resta come minimo.
 */
.form-floating > textarea.ui-textarea {
  height: auto;
}

/*
 * Summernote <x-ui.forms.texts.summernote>
 *
 * Grafica «paper»: angoli arrotondati, ombra leggera e bordo azzurro al focus; toolbar e barra in
 * basso grigie, pulsanti bianchi in rilievo. L'area di scrittura è alta --ui-summernote-rows righe
 * (dalla proprietà rows), poi il testo scorre.
 */
.ui-summernote .note-editor.note-frame {
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-sm);
  transition:
    box-shadow 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

.ui-summernote .note-editor.note-frame:focus-within {
  border-color: rgba(var(--bs-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.ui-summernote.ui-summernote-invalid .note-editor.note-frame {
  border-color: var(--bs-form-invalid-border-color);
}

.ui-summernote.ui-summernote-invalid .note-editor.note-frame:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.ui-summernote .note-toolbar {
  background: var(--bs-secondary-bg);
  border-bottom: var(--bs-border-width) solid transparent;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  padding: 0.25rem 0.5rem;
}

.ui-summernote .note-toolbar .note-btn {
  border: 0;
  background: var(--bs-body-bg);
  box-shadow: 1px 1px 4px rgba(var(--bs-black-rgb), 0.4);
  color: var(--bs-secondary-color);
}

.ui-summernote .note-toolbar .note-btn:hover,
.ui-summernote .note-toolbar .note-btn.active {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.ui-summernote .note-statusbar {
  background: var(--bs-secondary-bg);
  border-top: 0;
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.ui-summernote .note-editable {
  height: calc(var(--ui-summernote-rows) * 1.5em + 20px);
  overflow-y: auto;
}

/*
 * Select2 <x-ui.forms.selects.select2>
 *
 * Alto quanto un campo floating, bordo e focus come i form-control di Bootstrap; nel singolo il testo
 * è centrato in verticale, nel multiplo le scelte sono pillole grigie.
 */
.ui-select2 .select2-container {
  width: 100%;
}

.ui-select2 .select2-container .select2-selection {
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.ui-select2 .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  padding: 0;
}

.ui-select2 .select2-container .select2-selection--single .select2-selection__rendered {
  flex: 1;
  padding: 0 2.25rem 0 0.75rem;
  line-height: 1.5;
  color: var(--bs-body-color);
}

.ui-select2 .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
}

.ui-select2 .select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}

.ui-select2 .select2-container .select2-selection--multiple .select2-selection__rendered {
  padding: 0.6rem 0.5rem 0.25rem;
}

.ui-select2 .select2-container .select2-selection--multiple .select2-selection__choice {
  border: 0;
  border-radius: var(--bs-border-radius-pill);
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  padding: 0.15rem 0.6rem;
}

.ui-select2 .select2-container--focus .select2-selection,
.ui-select2 .select2-container--open .select2-selection {
  border-color: rgba(var(--bs-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.ui-select2 .is-invalid + .select2-container .select2-selection {
  border-color: var(--bs-form-invalid-border-color);
}

.ui-select2 .select2-container--disabled .select2-selection {
  background-color: var(--bs-secondary-bg);
}

/* La tendina sta in fondo alla pagina (o nel modale): si aggancia con la classe che le dà il JS */
.select2-dropdown.ui-select2-dropdown {
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-sm);
}

.select2-dropdown.ui-select2-dropdown .select2-results__option[aria-selected='true'] {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.select2-dropdown.ui-select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

.ui-select2-image {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  object-fit: cover;
}

/*
 * Step <x-ui.forms.steps>
 *
 * Cerchi numerati con il titolo sotto, uniti da una linea (grafica B). Fatto: cerchio pieno e
 * linea del colore principale; corrente: bordo e numero del colore principale con l'anello di
 * focus; con errori: rosso; da fare: grigio. Senza JS si vede solo il primo step.
 */
.ui-steps-header {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-steps-header li {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
}

.ui-steps-header li::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: calc(50% + 1.25rem);
  width: calc(100% - 2.5rem);
  height: 2px;
  background-color: var(--bs-border-color);
}

.ui-steps-header li:last-child::after {
  display: none;
}

.ui-steps-dot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--bs-border-color);
  border-radius: 50%;
  background-color: var(--bs-body-bg);
  font-weight: 600;
}

.ui-steps-header li.ui-steps-done .ui-steps-dot {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
  color: #fff;
}

.ui-steps-header li.ui-steps-done::after {
  background-color: var(--bs-primary);
}

.ui-steps-header li.ui-steps-active {
  color: var(--bs-body-color);
  font-weight: 600;
}

.ui-steps-header li.ui-steps-active .ui-steps-dot {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.ui-steps-header li.ui-steps-error {
  color: var(--bs-danger);
}

.ui-steps-header li.ui-steps-error .ui-steps-dot {
  border-color: var(--bs-danger);
  background-color: var(--bs-danger);
  color: #fff;
}

.ui-steps-header li.ui-steps-error.ui-steps-active .ui-steps-dot {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Prima del JS si vede solo il primo step; poi decide il JS con hidden */
.ui-steps:not(.ui-steps-ready) .ui-step ~ .ui-step {
  display: none;
}