/* =========================================================================
   Stile "compatto" per le maschere di dettaglio (FormComponent/DynamicFormField).
   Non sostituisce site.css/app.css: si attiva solo quando l'ancestor porta
   la classe .compact-forms (impostazione app.Setting Section='UI' Key='CompactForms').
   File separato di proposito: il cliente può tornare allo stile attuale
   semplicemente non impostando/disattivando quella riga, senza toccare
   nessun altro foglio di stile.
   ========================================================================= */

/* ---- intestazione maschera: meno ingombrante ---- */
.compact-forms .modal-header {
    padding: .5rem 1rem;
}

.compact-forms .modal-header .modal-title {
    font-size: 1.05rem;
}

.compact-forms .modal-body {
    padding: .75rem 1rem;
}

/* ---- spaziatura tra righe di campi ---- */
.compact-forms .row.mb-1 {
    margin-bottom: .25rem !important;
}

/* ---- campi "floating label": il grosso del risparmio verticale ----
   Bootstrap di default: altezza calc(3.5rem + 2px) (~58px), label padding 1rem.
   Qui: altezza calc(2.35rem + 2px) (~40px), label più piccola e più vicina al bordo. */
.compact-forms .form-floating {
    margin-bottom: .35rem !important; /* DynamicFormField.razor.css imposta 1rem di default */
}

.compact-forms .form-floating > .form-control,
.compact-forms .form-floating > .form-select {
    height: calc(2.35rem + 2px);
    min-height: calc(2.35rem + 2px);
    padding: .35rem .65rem;
    font-size: .875rem;
    line-height: 1.25;
}

.compact-forms .form-floating > label {
    padding: .35rem .65rem;
    font-size: .875rem;
}

.compact-forms .form-floating > .form-control:not(:placeholder-shown),
.compact-forms .form-floating > .form-control:focus,
.compact-forms .form-floating > .form-control:-webkit-autofill,
.compact-forms .form-floating > .form-select {
    padding-top: 1rem;
    padding-bottom: .2rem;
}

.compact-forms .form-floating > .form-control:not(:placeholder-shown) ~ label,
.compact-forms .form-floating > .form-control:focus ~ label,
.compact-forms .form-floating > .form-control:-webkit-autofill ~ label,
.compact-forms .form-floating > .form-select ~ label {
    transform: scale(.8) translateY(-.3rem) translateX(.1rem);
}

/* textarea (es. "Note"): l'inline style="height:100%" e l'attributo rows="5"
   nel markup la farebbero comunque alta, quindi qui serve !important per
   vincerli davvero. resize:vertical lascia comunque la possibilità di
   allargarla a mano quando serve scrivere di più. */
.compact-forms .form-floating > textarea.form-control {
    height: calc(2.35rem + 2px) !important;
    min-height: calc(2.35rem + 2px) !important;
    max-height: 12rem;
    resize: vertical;
}

/* ---- checkbox / switch ---- */
.compact-forms .form-check,
.compact-forms .form-check.form-switch {
    padding-top: .1rem;
    margin-bottom: .35rem !important;
}

.compact-forms .form-check-label {
    font-size: .875rem;
}

/* ---- radio "sì/no" custom (DynamicFormField, tipo checkradio) ---- */
.compact-forms .form-control.yesno-control {
    height: calc(2.35rem + 2px) !important;
    line-height: 1.25rem;
}

.compact-forms .yesno-label {
    font-size: .875rem;
    padding: .35rem .65rem;
}

/* ---- selettore colore ---- */
.compact-forms .form-control-color,
.compact-forms .color-ig .form-floating > .form-control.form-control-color {
    height: calc(2.35rem + 2px) !important;
}

.compact-forms .color-ig .color-clear {
    height: calc(2.35rem + 2px) !important;
}

/* ---- "selectdetailed" (input di sola lettura + bottoni cerca/rimuovi, es. Cliente/Tipo/Stato) ---- */
.compact-forms .input-group .form-control {
    height: calc(2.35rem + 2px);
    padding: .35rem .65rem;
    font-size: .875rem;
}

/* Il .form-floating che avvolge l'input dentro l'input-group NON deve
   ereditare il margin-bottom compatto generale (regola più sotto): essendo
   un elemento della riga flex, quel margine si sommava all'altezza della
   riga (e quindi del bottone, che è stretch) senza che si vedesse sul campo
   stesso — risultato: bottone visibilmente più alto dell'input accanto. */
.compact-forms .input-group > .form-floating {
    margin-bottom: 0 !important;
}

/* I bottoni "cerca"/"rimuovi" hanno nel markup uno style inline fisso
   (align-self:center; height:38px; margin-top:2px) pensato per l'altezza
   campo di sempre (~58px): con il campo ridotto a ~40px quei valori fissi
   lo fanno sbordare/disallineare in verticale. Qui si toglie del tutto quel
   posizionamento a misura fissa e si fa allungare il bottone esattamente
   quanto il campo accanto (stessa riga flex dell'input-group), con l'icona
   centrata dentro — così resta allineato qualunque altezza scelga il resto
   del CSS compatto, senza dover inseguire un numero magico. */
.compact-forms .input-group > .btn {
    align-self: stretch !important;
    height: auto !important;
    margin-top: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* il bottone Bootstrap di default ha padding .375rem .75rem e icona a 1rem:
       proporzionato al campo comfortable (~58px), ma abbondante per quello
       compatto (~40px) — qui si riduce così l'icona non sembri più "pesante"
       del testo accanto, ora anch'esso più piccolo (.875rem). */
    padding: .2rem .5rem !important;
    font-size: .8rem;
}

/* ---- combo (Radzen DropDown) — best effort: eredita .form-control ma Radzen
   applica anche le proprie classi interne, verificare a video dopo il deploy ---- */
.compact-forms .rz-dropdown,
.compact-forms .rz-dropdown .rz-dropdown-trigger {
    min-height: calc(2.35rem + 2px) !important;
    height: calc(2.35rem + 2px) !important;
}

.compact-forms .rz-dropdown .rz-inputtext {
    font-size: .875rem;
    padding-top: 1rem;
}

/* ---- tab della maschera ---- */
.compact-forms .nav-tabs .nav-link {
    padding: .35rem .75rem;
    font-size: .9rem;
}

/* ---- messaggi di validazione: un filo più vicini al campo ---- */
.compact-forms .invalid-feedback {
    margin-top: 0;
    font-size: .8rem;
}