.bold-text {
    font-weight: 700;
}

#brand-main-image {
    height: 40px;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: transparent !important;
}

.form-control:read-only {
    background-color: #e9ecef;
}

.main-link-custom {
    font-weight: bold;
}

.select2-selection.select2-selection--multiple .select2-search__field {
    width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.8 !important;
}

.select2-selection.select2-selection--single {
    height: 100% !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
}

    .select2-selection.select2-selection--single .select2-selection__rendered {
        margin-top: 0.25rem !important;
        word-wrap: break-word !important;
        text-overflow: inherit !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .select2-selection.select2-selection--single .select2-selection__arrow {
        height: calc(1.5em + 0.75rem + 2px) !important;
    }

/* --- Modale ANOMALIA: select ORA / MINUTI (data-width 70px) -------------------
   Il blocco select2-single qui sopra forza white-space:normal + word-break su
   TUTTI i select2 single (serve per i nomi lunghi). Nei box stretti da 2 cifre,
   però, il valore ("14", "42") va a capo. Per questi 4 campi riportiamo il
   valore su UNA sola riga e riduciamo il padding interno così entra comodo.
   Il container select2 è il sibling immediato del <select> → uso "id + .select2-container". */
#ora-registrazione-anomalia-field + .select2-container .select2-selection__rendered,
#minuti-registrazione-anomalia-field + .select2-container .select2-selection__rendered,
#ora-prevista-risoluzione-anomalia-field + .select2-container .select2-selection__rendered,
#minuti-prevista-risoluzione-anomalia-field + .select2-container .select2-selection__rendered {
    white-space: nowrap !important;
    word-break: normal !important;
    word-wrap: normal !important;
    overflow: hidden;
    text-overflow: clip !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
}

/* --- Modale DATI BANCARI: bottone "+" aggiungi firmatario (#firmatario-add-button) ---
   È un <a class="flex-shrink-0 btn main-bg-button"> dentro una riga .d-flex
   (default align-items:stretch): si stirava in verticale diventando un OVALE.
   Lo fissiamo a bottone-icona QUADRATO, della stessa altezza del campo accanto
   e con l'icona centrata, così è coerente con tutti gli altri "+". */
#firmatario-add-button {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.large-tippy,
.large-tippy #dialog-confirm-button,
.large-tippy .custom-dialog-confirm-button {
    font-size: 1.25rem;
}

#dialog-confirm-button.btn-danger.btn:hover {
    background-color: #c63b3b !important;
}

.pac-container {
    z-index: 100000 !important;
}

#notizie-list {
    max-height: 500px;
    min-width: 20px;
    min-height: 20px;
    overflow-y: auto;
}

#notizie-navbar-count {
    background-color: var(--notizie-navbar-count-bg-color) !important;
    border: 1px solid var(--notizie-navbar-count-border-color) !important;
    color: var(--notizie-navbar-count-font-color) !important;
}

.notizie-popover {
    max-width: none !important;
}

.toSummernote {
    display: block !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.validation-tippy-field.error {
    border-color: var(--main-error-color) !important;
}

.disabled-check-funzionalita {
    pointer-events: none !important;
}

/* Bottone "elimina" allegato: pill rosso outline coerente con il look di
   .vhm-flat-table (gli altri bottoni d'azione usano .main-bg-button e
   diventano pill via Tables.css:101). */
.vhm-flat-table .allegato-remove-button.btn,
.vhm-flat-table .allegato-remove-button.btn.btn-outline-danger {
    padding: 4px 12px !important;
    font-size: 12px;
    border-radius: 999px !important;
}

/* Bottoni "+ Aggiungi" di tutti i moduli VeicoloDetail: pill outline mandante,
   stesso look dei bottoni "Estrai Excel / Cerca / Svuota filtri"
   (.al-search-secondary). Selettori specifici per ogni modulo (no wildcard).
   Moduli JS (con classe .add-X-button): allegati, accessori, gomme, richieste,
   richieste-assegnazioni. Moduli JS (con id): allestimenti, multe, sinistri,
   movimenti. Moduli inline in VeicoloDetail.aspx (id): optional,
   approvvigionamento, documento-in-veicolo, perizia, manutenzione, scadenza,
   tessera, assicurazione, fattura, bollo, andamento, valutazione.
   Modulo inline con classe: assegnazionecliente. */
.add-allegato-button.btn.main-bg-button,
.add-accessorio-button.btn.main-bg-button,
.add-richiestaassegnazione-button.btn.main-bg-button,
.add-richieste-button.btn.main-bg-button,
.add-assegnazionecliente.btn.main-bg-button,
.add-anomalia-button.btn.main-bg-button,
.add-indirizzo-button.btn.main-bg-button,
.add-comunicazioniTelefoniche-button.btn.main-bg-button,
#analisi-add-button.btn.main-bg-button,
#cribis-add-button.btn.main-bg-button,
#add-allestimento.btn.main-bg-button,
#add-multa.btn.main-bg-button,
#add-sinistro.btn.main-bg-button,
#add-movimento.btn.main-bg-button,
#add-optional.btn.main-bg-button,
#add-approvvigionamento.btn.main-bg-button,
#add-documento-in-veicolo.btn.main-bg-button,
#add-perizia.btn.main-bg-button,
#add-assegnazionedriver.btn.main-bg-button,
#add-manutenzione.btn.main-bg-button,
#add-scadenza.btn.main-bg-button,
#add-tessera.btn.main-bg-button,
#add-assicurazione.btn.main-bg-button,
#add-fattura.btn.main-bg-button,
.add-gomma-button.btn.main-bg-button,
#add-bollo.btn.main-bg-button,
#add-andamento.btn.main-bg-button,
#add-valutazione.btn.main-bg-button,
#add-driver-button.btn.main-bg-button,
#add-indirizzo-button.btn.main-bg-button,
#add-blacklist-button.btn.main-bg-button,
#add-contatto-button.btn.main-bg-button,
#add-documento-button.btn.main-bg-button,
#add-ndg-button.btn.main-bg-button,
#add-datibancari-button.btn.main-bg-button,
#add-legame-button.btn.main-bg-button,
#add-contrattoquadro-button.btn.main-bg-button,
#add-mail-button.btn.main-bg-button,
#reset-filtri-approvvigionamento.btn.main-bg-button,
.ricerca-assegnazioni-button.btn.main-bg-button,
.cespite-detail-app #new-subalterno-button.btn.main-bg-button,
.cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: auto !important;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    font-weight: 500;
    font-size: 14px;
    background-color: transparent !important;
    color: var(--main-bg-color, #006384) !important;
    border: 1.5px solid var(--main-bg-color, #006384) !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

    .add-allegato-button.btn.main-bg-button:hover,
    .add-accessorio-button.btn.main-bg-button:hover,
    .add-richiestaassegnazione-button.btn.main-bg-button:hover,
    .add-richieste-button.btn.main-bg-button:hover,
    .add-assegnazionecliente.btn.main-bg-button:hover,
    #add-allestimento.btn.main-bg-button:hover,
    #add-multa.btn.main-bg-button:hover,
    #add-sinistro.btn.main-bg-button:hover,
    #add-movimento.btn.main-bg-button:hover,
    #add-optional.btn.main-bg-button:hover,
    #add-approvvigionamento.btn.main-bg-button:hover,
    #add-documento-in-veicolo.btn.main-bg-button:hover,
    #add-perizia.btn.main-bg-button:hover,
    #add-assegnazionedriver.btn.main-bg-button:hover,
    #add-manutenzione.btn.main-bg-button:hover,
    #add-scadenza.btn.main-bg-button:hover,
    #add-tessera.btn.main-bg-button:hover,
    #add-assicurazione.btn.main-bg-button:hover,
    #add-fattura.btn.main-bg-button:hover,
    .add-gomma-button.btn.main-bg-button:hover,
    #add-bollo.btn.main-bg-button:hover,
    #add-andamento.btn.main-bg-button:hover,
    #add-valutazione.btn.main-bg-button:hover,
    .add-anomalia-button.btn.main-bg-button:hover,
    .add-indirizzo-button.btn.main-bg-button:hover,
    .add-comunicazioniTelefoniche-button.btn.main-bg-button:hover,
    #analisi-add-button.btn.main-bg-button:hover,
    #cribis-add-button.btn.main-bg-button:hover,
    #add-driver-button.btn.main-bg-button:hover,
    #add-indirizzo-button.btn.main-bg-button:hover,
    #add-blacklist-button.btn.main-bg-button:hover,
    #add-contatto-button.btn.main-bg-button:hover,
    #add-documento-button.btn.main-bg-button:hover,
    #add-ndg-button.btn.main-bg-button:hover,
    #add-datibancari-button.btn.main-bg-button:hover,
    #add-legame-button.btn.main-bg-button:hover,
    #add-contrattoquadro-button.btn.main-bg-button:hover,
    #add-mail-button.btn.main-bg-button:hover,
    #reset-filtri-approvvigionamento.btn.main-bg-button:hover,
    .ricerca-assegnazioni-button.btn.main-bg-button:hover,
    .cespite-detail-app #new-subalterno-button.btn.main-bg-button:hover,
    .cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button:hover {
        background-color: var(--main-button-hover-bg-color, var(--main-bg-color, #006384)) !important;
        color: var(--main-button-hover-font-color, #ffffff) !important;
        border-color: var(--main-button-hover-border-color, var(--main-bg-color, #006384)) !important;
        transform: translateY(-1px);
    }

    .add-allegato-button.btn.main-bg-button:active,
    .add-accessorio-button.btn.main-bg-button:active,
    .add-richiestaassegnazione-button.btn.main-bg-button:active,
    .add-richieste-button.btn.main-bg-button:active,
    .add-assegnazionecliente.btn.main-bg-button:active,
    #add-allestimento.btn.main-bg-button:active,
    #add-multa.btn.main-bg-button:active,
    #add-sinistro.btn.main-bg-button:active,
    #add-movimento.btn.main-bg-button:active,
    #add-optional.btn.main-bg-button:active,
    #add-approvvigionamento.btn.main-bg-button:active,
    #add-documento-in-veicolo.btn.main-bg-button:active,
    #add-perizia.btn.main-bg-button:active,
    #add-assegnazionedriver.btn.main-bg-button:active,
    #add-manutenzione.btn.main-bg-button:active,
    #add-scadenza.btn.main-bg-button:active,
    #add-tessera.btn.main-bg-button:active,
    #add-assicurazione.btn.main-bg-button:active,
    #add-fattura.btn.main-bg-button:active,
    .add-gomma-button.btn.main-bg-button:active,
    #add-bollo.btn.main-bg-button:active,
    #add-andamento.btn.main-bg-button:active,
    #add-valutazione.btn.main-bg-button:active,
    .add-anomalia-button.btn.main-bg-button:active,
    .add-indirizzo-button.btn.main-bg-button:active,
    .add-comunicazioniTelefoniche-button.btn.main-bg-button:active,
    #analisi-add-button.btn.main-bg-button:active,
    #cribis-add-button.btn.main-bg-button:active,
    #add-driver-button.btn.main-bg-button:active,
    #add-indirizzo-button.btn.main-bg-button:active,
    #add-blacklist-button.btn.main-bg-button:active,
    #add-contatto-button.btn.main-bg-button:active,
    #add-documento-button.btn.main-bg-button:active,
    #add-ndg-button.btn.main-bg-button:active,
    #add-datibancari-button.btn.main-bg-button:active,
    #add-legame-button.btn.main-bg-button:active,
    #add-contrattoquadro-button.btn.main-bg-button:active,
    #add-mail-button.btn.main-bg-button:active,
    #reset-filtri-approvvigionamento.btn.main-bg-button:active,
    .ricerca-assegnazioni-button.btn.main-bg-button:active,
    .cespite-detail-app #new-subalterno-button.btn.main-bg-button:active,
    .cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button:active {
        transform: translateY(0);
    }

    .add-allegato-button.btn.main-bg-button > i,
    .add-accessorio-button.btn.main-bg-button > i,
    .add-richiestaassegnazione-button.btn.main-bg-button > i,
    .add-richieste-button.btn.main-bg-button > i,
    .add-assegnazionecliente.btn.main-bg-button > i,
    #add-allestimento.btn.main-bg-button > i,
    #add-multa.btn.main-bg-button > i,
    #add-sinistro.btn.main-bg-button > i,
    #add-movimento.btn.main-bg-button > i,
    #add-optional.btn.main-bg-button > i,
    #add-approvvigionamento.btn.main-bg-button > i,
    #add-documento-in-veicolo.btn.main-bg-button > i,
    #add-perizia.btn.main-bg-button > i,
    #add-assegnazionedriver.btn.main-bg-button > i,
    #add-manutenzione.btn.main-bg-button > i,
    #add-scadenza.btn.main-bg-button > i,
    #add-tessera.btn.main-bg-button > i,
    #add-assicurazione.btn.main-bg-button > i,
    #add-fattura.btn.main-bg-button > i,
    .add-gomma-button.btn.main-bg-button > i,
    #add-bollo.btn.main-bg-button > i,
    #add-andamento.btn.main-bg-button > i,
    #add-valutazione.btn.main-bg-button > i,
    .add-anomalia-button.btn.main-bg-button > i,
    .add-indirizzo-button.btn.main-bg-button > i,
    .add-comunicazioniTelefoniche-button.btn.main-bg-button > i,
    #analisi-add-button.btn.main-bg-button > i,
    #cribis-add-button.btn.main-bg-button > i,
    #add-driver-button.btn.main-bg-button > i,
    #add-indirizzo-button.btn.main-bg-button > i,
    #add-blacklist-button.btn.main-bg-button > i,
    #add-contatto-button.btn.main-bg-button > i,
    #add-documento-button.btn.main-bg-button > i,
    #add-ndg-button.btn.main-bg-button > i,
    #add-datibancari-button.btn.main-bg-button > i,
    #add-legame-button.btn.main-bg-button > i,
    #add-contrattoquadro-button.btn.main-bg-button > i,
    #add-mail-button.btn.main-bg-button > i,
    #reset-filtri-approvvigionamento.btn.main-bg-button > i,
    .ricerca-assegnazioni-button.btn.main-bg-button > i,
    .cespite-detail-app #new-subalterno-button.btn.main-bg-button > i,
    .cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button > i {
        margin-right: 6px;
    }

/* Pattern "icon-only pill button con rotate" — applicato ai bottoni
   "+ Aggiungi" dei moduli condivisi (Anomalia/Allegato/Data/Nota/Ticket
   nei Detail). Trasforma il bottone testo+icona in cerchio 40x40 con
   solo "+" centrato; hover anima lift+rotate90+fill mandante 300ms;
   active resetta con snap istantaneo (duration 0).
   Self-contained (include tutte le proprieta' base) per coprire anche
   i bottoni .add-data-button / .add-nota-button / .add-ticket-button
   che NON ereditano dal blocco condiviso fuori dal contesto cespite.
   Note tecniche:
   - FontAwesome 6 JS sostituisce <i> con <svg> a runtime → i selettori
     per l'icona coprono entrambi (> i, > svg).
   - font-size: 0 collassa la text-node " <Nome>" senza toccare il JS.
   - Icona centrata via absolute positioning (FA6 inietta
     vertical-align: -0.125em + viewBox 448x512 → flex/inline centering
     lasciava offset; absolute con translate(-50%,-50%) e' bulletproof).
   - transform translate(-50%,-50%) dell'icona e' relativo al button e
     ruota con esso, restando centrata durante tutta la rotazione. */
.add-anomalia-button.btn.main-bg-button,
.add-allegato-button.btn.main-bg-button,
.add-data-button.btn.main-bg-button,
.add-nota-button.btn.main-bg-button,
.add-ticket-button.btn.main-bg-button,
.add-accessorio-button.btn.main-bg-button,
.add-assegnazionecliente.btn.main-bg-button,
.add-richieste-button.btn.main-bg-button,
.add-comunicazioniTelefoniche-button.btn.main-bg-button,
#add-approvvigionamento.btn.main-bg-button,
#add-documento-in-veicolo.btn.main-bg-button,
#add-assicurazione.btn.main-bg-button,
#add-bollo.btn.main-bg-button,
.add-gomma-button.btn.main-bg-button,
#add-allestimento.btn.main-bg-button,
#add-tessera.btn.main-bg-button,
#add-assegnazionedriver.btn.main-bg-button,
#add-scadenza.btn.main-bg-button,
#add-perizia.btn.main-bg-button,
#add-andamento.btn.main-bg-button,
#add-movimento.btn.main-bg-button,
#add-manutenzione.btn.main-bg-button,
#add-multa.btn.main-bg-button,
#add-sinistro.btn.main-bg-button,
#add-fattura.btn.main-bg-button,
#add-valutazione.btn.main-bg-button,
#analisi-add-button.btn.main-bg-button,
#add-blacklist-button.btn.main-bg-button,
#add-contatto-button.btn.main-bg-button,
#add-mail-button.btn.main-bg-button,
#add-indirizzo-button.btn.main-bg-button,
#add-legame-button.btn.main-bg-button,
#add-documento-button.btn.main-bg-button,
#add-ndg-button.btn.main-bg-button,
#add-contrattoquadro-button.btn.main-bg-button,
#add-datibancari-button.btn.main-bg-button,
#legame-add-button.btn.main-bg-button,
#add-garanzia-button.btn.main-bg-button,
#new-wolfee-modal-button.btn.main-bg-button,
#add-driver-button.btn.main-bg-button,
#notizia-add-button.btn.main-bg-button,
#nuovo-ordine-button.btn.main-bg-button,
#new-workflow.btn.main-bg-button,
#nuovo-cespite-button.btn.main-bg-button,
.vhm-header-add-pill.btn.main-bg-button,
#add-optional.btn.main-bg-button,
#new-subalterno-button.btn.main-bg-button,
#add-new-vincolo-button > .btn.main-bg-button {
    /* [2026-07-21] "+" di modulo leggermente più piccolo e uniforme su TUTTI i
       moduli (tab orizzontali e verticali): 32px (era 40). */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    /* Top/right/left a 0 (kill default <p> margin per il bottone Vincolo che
       e' un <p>, top default 1em rovinerebbe il centramento). Bottom a 18px
       per dare respiro tra il pill 40x40 e l'header sabbia della tabella
       sottostante (era l'unica cosa che dava il "troppo vicino" segnalato
       dall'utente sui tab Indirizzo/Legami/etc. di CespitiDetail). */
    margin: 0 0 18px 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    text-align: center !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    color: var(--main-bg-color, #006384) !important;
    border: 1.5px solid var(--main-bg-color, #006384) !important;
    box-shadow: none !important;
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease !important;
}

    .add-anomalia-button.btn.main-bg-button > i,
    .add-anomalia-button.btn.main-bg-button > svg,
    .add-allegato-button.btn.main-bg-button > i,
    .add-allegato-button.btn.main-bg-button > svg,
    .add-data-button.btn.main-bg-button > i,
    .add-data-button.btn.main-bg-button > svg,
    .add-nota-button.btn.main-bg-button > i,
    .add-nota-button.btn.main-bg-button > svg,
    .add-ticket-button.btn.main-bg-button > i,
    .add-ticket-button.btn.main-bg-button > svg,
    .add-accessorio-button.btn.main-bg-button > i,
    .add-accessorio-button.btn.main-bg-button > svg,
    .add-assegnazionecliente.btn.main-bg-button > i,
    .add-assegnazionecliente.btn.main-bg-button > svg,
    .add-richieste-button.btn.main-bg-button > i,
    .add-richieste-button.btn.main-bg-button > svg,
    #add-approvvigionamento.btn.main-bg-button > i,
    #add-approvvigionamento.btn.main-bg-button > svg,
    #add-documento-in-veicolo.btn.main-bg-button > i,
    #add-documento-in-veicolo.btn.main-bg-button > svg,
    #add-assicurazione.btn.main-bg-button > i,
    #add-assicurazione.btn.main-bg-button > svg,
    #add-bollo.btn.main-bg-button > i,
    #add-bollo.btn.main-bg-button > svg,
    .add-gomma-button.btn.main-bg-button > i,
    .add-gomma-button.btn.main-bg-button > svg,
    #add-allestimento.btn.main-bg-button > i,
    #add-allestimento.btn.main-bg-button > svg,
    #add-tessera.btn.main-bg-button > i,
    #add-tessera.btn.main-bg-button > svg,
    #add-assegnazionedriver.btn.main-bg-button > i,
    #add-assegnazionedriver.btn.main-bg-button > svg,
    #add-scadenza.btn.main-bg-button > i,
    #add-scadenza.btn.main-bg-button > svg,
    #add-perizia.btn.main-bg-button > i,
    #add-perizia.btn.main-bg-button > svg,
    #add-andamento.btn.main-bg-button > i,
    #add-andamento.btn.main-bg-button > svg,
    #add-movimento.btn.main-bg-button > i,
    #add-movimento.btn.main-bg-button > svg,
    #add-manutenzione.btn.main-bg-button > i,
    #add-manutenzione.btn.main-bg-button > svg,
    #add-multa.btn.main-bg-button > i,
    #add-multa.btn.main-bg-button > svg,
    #add-sinistro.btn.main-bg-button > i,
    #add-sinistro.btn.main-bg-button > svg,
    #add-fattura.btn.main-bg-button > i,
    #add-fattura.btn.main-bg-button > svg,
    #add-valutazione.btn.main-bg-button > i,
    #add-valutazione.btn.main-bg-button > svg,
    .add-comunicazioniTelefoniche-button.btn.main-bg-button > i,
    .add-comunicazioniTelefoniche-button.btn.main-bg-button > svg,
    #analisi-add-button.btn.main-bg-button > i,
    #analisi-add-button.btn.main-bg-button > svg,
    #add-blacklist-button.btn.main-bg-button > i,
    #add-blacklist-button.btn.main-bg-button > svg,
    #add-contatto-button.btn.main-bg-button > i,
    #add-contatto-button.btn.main-bg-button > svg,
    #add-mail-button.btn.main-bg-button > i,
    #add-mail-button.btn.main-bg-button > svg,
    #add-indirizzo-button.btn.main-bg-button > i,
    #add-indirizzo-button.btn.main-bg-button > svg,
    #add-legame-button.btn.main-bg-button > i,
    #add-legame-button.btn.main-bg-button > svg,
    #add-documento-button.btn.main-bg-button > i,
    #add-documento-button.btn.main-bg-button > svg,
    #add-ndg-button.btn.main-bg-button > i,
    #add-ndg-button.btn.main-bg-button > svg,
    #add-contrattoquadro-button.btn.main-bg-button > i,
    #add-contrattoquadro-button.btn.main-bg-button > svg,
    #add-datibancari-button.btn.main-bg-button > i,
    #add-datibancari-button.btn.main-bg-button > svg,
    #legame-add-button.btn.main-bg-button > i,
    #legame-add-button.btn.main-bg-button > svg,
    #add-garanzia-button.btn.main-bg-button > i,
    #add-garanzia-button.btn.main-bg-button > svg,
    #new-wolfee-modal-button.btn.main-bg-button > i,
    #new-wolfee-modal-button.btn.main-bg-button > svg,
    #add-driver-button.btn.main-bg-button > i,
    #add-driver-button.btn.main-bg-button > svg,
    #notizia-add-button.btn.main-bg-button > i,
    #notizia-add-button.btn.main-bg-button > svg,
    #nuovo-ordine-button.btn.main-bg-button > i,
    #nuovo-ordine-button.btn.main-bg-button > svg,
    #new-workflow.btn.main-bg-button > i,
    #new-workflow.btn.main-bg-button > svg,
    #nuovo-cespite-button.btn.main-bg-button > i,
    #nuovo-cespite-button.btn.main-bg-button > svg,
    .vhm-header-add-pill.btn.main-bg-button > i,
    .vhm-header-add-pill.btn.main-bg-button > svg,
    #add-optional.btn.main-bg-button > i,
    #add-optional.btn.main-bg-button > svg,
    #new-subalterno-button.btn.main-bg-button > i,
    #new-subalterno-button.btn.main-bg-button > svg,
    #add-new-vincolo-button > .btn.main-bg-button > i,
    #add-new-vincolo-button > .btn.main-bg-button > svg {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 13px !important; /* [2026-07-21] icona "+" proporzionata al cerchio 32px (era 16px) */
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .add-anomalia-button.btn.main-bg-button:hover,
    .add-allegato-button.btn.main-bg-button:hover,
    .add-data-button.btn.main-bg-button:hover,
    .add-nota-button.btn.main-bg-button:hover,
    .add-ticket-button.btn.main-bg-button:hover,
    .add-accessorio-button.btn.main-bg-button:hover,
    .add-assegnazionecliente.btn.main-bg-button:hover,
    .add-richieste-button.btn.main-bg-button:hover,
    #add-approvvigionamento.btn.main-bg-button:hover,
    #add-documento-in-veicolo.btn.main-bg-button:hover,
    #add-assicurazione.btn.main-bg-button:hover,
    #add-bollo.btn.main-bg-button:hover,
    .add-gomma-button.btn.main-bg-button:hover,
    #add-allestimento.btn.main-bg-button:hover,
    #add-tessera.btn.main-bg-button:hover,
    #add-assegnazionedriver.btn.main-bg-button:hover,
    #add-scadenza.btn.main-bg-button:hover,
    #add-perizia.btn.main-bg-button:hover,
    #add-andamento.btn.main-bg-button:hover,
    #add-movimento.btn.main-bg-button:hover,
    #add-manutenzione.btn.main-bg-button:hover,
    #add-multa.btn.main-bg-button:hover,
    #add-sinistro.btn.main-bg-button:hover,
    #add-fattura.btn.main-bg-button:hover,
    #add-valutazione.btn.main-bg-button:hover,
    .add-comunicazioniTelefoniche-button.btn.main-bg-button:hover,
    #analisi-add-button.btn.main-bg-button:hover,
    #add-blacklist-button.btn.main-bg-button:hover,
    #add-contatto-button.btn.main-bg-button:hover,
    #add-mail-button.btn.main-bg-button:hover,
    #add-indirizzo-button.btn.main-bg-button:hover,
    #add-legame-button.btn.main-bg-button:hover,
    #add-documento-button.btn.main-bg-button:hover,
    #add-ndg-button.btn.main-bg-button:hover,
    #add-contrattoquadro-button.btn.main-bg-button:hover,
    #add-datibancari-button.btn.main-bg-button:hover,
    #legame-add-button.btn.main-bg-button:hover,
    #add-garanzia-button.btn.main-bg-button:hover,
    #new-wolfee-modal-button.btn.main-bg-button:hover,
    #add-driver-button.btn.main-bg-button:hover,
    #notizia-add-button.btn.main-bg-button:hover,
    #nuovo-ordine-button.btn.main-bg-button:hover,
    #new-workflow.btn.main-bg-button:hover,
    #nuovo-cespite-button.btn.main-bg-button:hover,
    .vhm-header-add-pill.btn.main-bg-button:hover,
    #add-optional.btn.main-bg-button:hover,
    #new-subalterno-button.btn.main-bg-button:hover,
    #add-new-vincolo-button > .btn.main-bg-button:hover {
        transform: translateY(-1px) rotate(90deg) !important;
        background-color: var(--main-button-hover-bg-color, var(--main-bg-color, #006384)) !important;
        color: var(--main-button-hover-font-color, #ffffff) !important;
        border-color: var(--main-button-hover-border-color, var(--main-bg-color, #006384)) !important;
    }

    .add-anomalia-button.btn.main-bg-button:active,
    .add-allegato-button.btn.main-bg-button:active,
    .add-data-button.btn.main-bg-button:active,
    .add-nota-button.btn.main-bg-button:active,
    .add-ticket-button.btn.main-bg-button:active,
    .add-accessorio-button.btn.main-bg-button:active,
    .add-assegnazionecliente.btn.main-bg-button:active,
    .add-richieste-button.btn.main-bg-button:active,
    #add-approvvigionamento.btn.main-bg-button:active,
    #add-documento-in-veicolo.btn.main-bg-button:active,
    #add-assicurazione.btn.main-bg-button:active,
    #add-bollo.btn.main-bg-button:active,
    .add-gomma-button.btn.main-bg-button:active,
    #add-allestimento.btn.main-bg-button:active,
    #add-tessera.btn.main-bg-button:active,
    #add-assegnazionedriver.btn.main-bg-button:active,
    #add-scadenza.btn.main-bg-button:active,
    #add-perizia.btn.main-bg-button:active,
    #add-andamento.btn.main-bg-button:active,
    #add-movimento.btn.main-bg-button:active,
    #add-manutenzione.btn.main-bg-button:active,
    #add-multa.btn.main-bg-button:active,
    #add-sinistro.btn.main-bg-button:active,
    #add-fattura.btn.main-bg-button:active,
    #add-valutazione.btn.main-bg-button:active,
    .add-comunicazioniTelefoniche-button.btn.main-bg-button:active,
    #analisi-add-button.btn.main-bg-button:active,
    #add-blacklist-button.btn.main-bg-button:active,
    #add-contatto-button.btn.main-bg-button:active,
    #add-mail-button.btn.main-bg-button:active,
    #add-indirizzo-button.btn.main-bg-button:active,
    #add-legame-button.btn.main-bg-button:active,
    #add-documento-button.btn.main-bg-button:active,
    #add-ndg-button.btn.main-bg-button:active,
    #add-contrattoquadro-button.btn.main-bg-button:active,
    #add-datibancari-button.btn.main-bg-button:active,
    #legame-add-button.btn.main-bg-button:active,
    #add-garanzia-button.btn.main-bg-button:active,
    #new-wolfee-modal-button.btn.main-bg-button:active,
    #add-driver-button.btn.main-bg-button:active,
    #notizia-add-button.btn.main-bg-button:active,
    #nuovo-ordine-button.btn.main-bg-button:active,
    #new-workflow.btn.main-bg-button:active,
    #nuovo-cespite-button.btn.main-bg-button:active,
    .vhm-header-add-pill.btn.main-bg-button:active,
    #add-optional.btn.main-bg-button:active,
    #new-subalterno-button.btn.main-bg-button:active,
    #add-new-vincolo-button > .btn.main-bg-button:active {
        transform: translateY(0) rotate(0deg) !important;
        transition-duration: 0ms !important;
    }

/* =========================================================
   SPECIFICITY BUMP — Override icon-only ridichiarato con .cespite-detail-app
   prefix per i bottoni del cespite. Necessario perche' apparentemente
   un'altra regola CSS scoped al cespite (probabilmente lato Bootstrap o
   un CSS generato) sta intercettando font-size: 0 / icon positioning.
   Stesse property dell'override globale, specificita' (0, 0, 4) vs (0, 0, 3)
   → vince in contesto cespite. ========================================= */
.cespite-detail-app .add-data-button.btn.main-bg-button,
.cespite-detail-app .add-nota-button.btn.main-bg-button,
.cespite-detail-app .add-allegato-button.btn.main-bg-button,
.cespite-detail-app .add-richieste-button.btn.main-bg-button,
.cespite-detail-app #legame-add-button.btn.main-bg-button,
.cespite-detail-app #add-garanzia-button.btn.main-bg-button,
.cespite-detail-app .add-anomalia-button.btn.main-bg-button,
.cespite-detail-app .add-ticket-button.btn.main-bg-button,
.cespite-detail-app #new-subalterno-button.btn.main-bg-button,
.cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button {
    /* [2026-07-21] "+" di modulo uniforme a 32px (era 40), come il blocco globale. */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    /* Vedi nota nel blocco icon-only globale: 0 0 18px 0 per dare respiro
       tra il pill e la tabella sottostante senza spezzare il centramento
       sul bottone Vincolo che e' un <p>. */
    margin: 0 0 18px 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    text-align: center !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    color: var(--main-bg-color, #006384) !important;
    border: 1.5px solid var(--main-bg-color, #006384) !important;
    box-shadow: none !important;
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease !important;
}

    .cespite-detail-app .add-data-button.btn.main-bg-button > i,
    .cespite-detail-app .add-data-button.btn.main-bg-button > svg,
    .cespite-detail-app .add-nota-button.btn.main-bg-button > i,
    .cespite-detail-app .add-nota-button.btn.main-bg-button > svg,
    .cespite-detail-app .add-allegato-button.btn.main-bg-button > i,
    .cespite-detail-app .add-allegato-button.btn.main-bg-button > svg,
    .cespite-detail-app .add-richieste-button.btn.main-bg-button > i,
    .cespite-detail-app .add-richieste-button.btn.main-bg-button > svg,
    .cespite-detail-app #legame-add-button.btn.main-bg-button > i,
    .cespite-detail-app #legame-add-button.btn.main-bg-button > svg,
    .cespite-detail-app #add-garanzia-button.btn.main-bg-button > i,
    .cespite-detail-app #add-garanzia-button.btn.main-bg-button > svg,
    .cespite-detail-app .add-anomalia-button.btn.main-bg-button > i,
    .cespite-detail-app .add-anomalia-button.btn.main-bg-button > svg,
    .cespite-detail-app .add-ticket-button.btn.main-bg-button > i,
    .cespite-detail-app .add-ticket-button.btn.main-bg-button > svg,
    .cespite-detail-app #new-subalterno-button.btn.main-bg-button > i,
    .cespite-detail-app #new-subalterno-button.btn.main-bg-button > svg,
    .cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button > i,
    .cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button > svg {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 13px !important; /* [2026-07-21] icona "+" proporzionata al cerchio 32px (era 16px) */
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

/* Prefix "body" sui :hover/:active per bumpare la specificita' da (0,5,0)
   a (0,5,1) e battere il blocker in CespitiDetail.css:1293
   `.cespite-detail-app .cs-tab-content .btn:not(:disabled):hover {
       transform: none !important; }`
   che (essendo CespitiDetail.css caricato DOPO custom.css) vinceva su
   pari specificita' e killava la nostra rotate(90deg). */
body .cespite-detail-app .add-data-button.btn.main-bg-button:hover,
body .cespite-detail-app .add-nota-button.btn.main-bg-button:hover,
body .cespite-detail-app .add-allegato-button.btn.main-bg-button:hover,
body .cespite-detail-app .add-richieste-button.btn.main-bg-button:hover,
body .cespite-detail-app #legame-add-button.btn.main-bg-button:hover,
body .cespite-detail-app #add-garanzia-button.btn.main-bg-button:hover,
body .cespite-detail-app .add-anomalia-button.btn.main-bg-button:hover,
body .cespite-detail-app .add-ticket-button.btn.main-bg-button:hover,
body .cespite-detail-app #new-subalterno-button.btn.main-bg-button:hover,
body .cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button:hover {
    transform: translateY(-1px) rotate(90deg) !important;
    background-color: var(--main-button-hover-bg-color, var(--main-bg-color, #006384)) !important;
    color: var(--main-button-hover-font-color, #ffffff) !important;
    border-color: var(--main-button-hover-border-color, var(--main-bg-color, #006384)) !important;
}

body .cespite-detail-app .add-data-button.btn.main-bg-button:active,
body .cespite-detail-app .add-nota-button.btn.main-bg-button:active,
body .cespite-detail-app .add-allegato-button.btn.main-bg-button:active,
body .cespite-detail-app .add-richieste-button.btn.main-bg-button:active,
body .cespite-detail-app #legame-add-button.btn.main-bg-button:active,
body .cespite-detail-app #add-garanzia-button.btn.main-bg-button:active,
body .cespite-detail-app .add-anomalia-button.btn.main-bg-button:active,
body .cespite-detail-app .add-ticket-button.btn.main-bg-button:active,
body .cespite-detail-app #new-subalterno-button.btn.main-bg-button:active,
body .cespite-detail-app #add-new-vincolo-button > .btn.main-bg-button:active {
    transform: translateY(0) rotate(0deg) !important;
    transition-duration: 0ms !important;
}

/* Spaziatura tra bottone "+ Aggiungi" e tabella per i moduli AnagraficaDetail
   (analisi, esclusione, contatti, mail, indirizzi, legami, documenti, ndg,
   contratti quadro, dati bancari). Il bottone va distanziato dall'header
   sabbia della .vhm-flat-table sottostante. */
#analisi-add-button.btn.main-bg-button,
#cribis-add-button.btn.main-bg-button,
#add-driver-button.btn.main-bg-button,
#add-indirizzo-button.btn.main-bg-button,
#add-blacklist-button.btn.main-bg-button,
#add-contatto-button.btn.main-bg-button,
#add-documento-button.btn.main-bg-button,
#add-ndg-button.btn.main-bg-button,
#add-datibancari-button.btn.main-bg-button,
#add-legame-button.btn.main-bg-button,
#add-contrattoquadro-button.btn.main-bg-button,
#add-mail-button.btn.main-bg-button {
    margin-bottom: 18px;
}

/* Bottone "Cerca" primario dei moduli: pill bianco con icona in tinta
   mandante (look distintivo dal pill outline standard). */
#search-optional-button.btn.main-bg-button,
#search-filtri-approvvigionamento.btn.main-bg-button,
#search-pratiche-anagrafica-button.btn.main-bg-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: auto !important;
    gap: 8px;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    font-weight: 500;
    font-size: 14px;
    background-color: #ffffff !important;
    color: #1b1a17 !important;
    border: 1.5px solid #e7e4dc !important;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04) !important;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

    #search-optional-button.btn.main-bg-button:hover,
    #search-filtri-approvvigionamento.btn.main-bg-button:hover,
    #search-pratiche-anagrafica-button.btn.main-bg-button:hover {
        background-color: #ffffff !important;
        color: #1b1a17 !important;
        border-color: var(--main-bg-color, #006384) !important;
        box-shadow: 0 2px 8px rgba(20, 18, 14, 0.08) !important;
        transform: translateY(-1px);
    }

    #search-optional-button.btn.main-bg-button:active,
    #search-filtri-approvvigionamento.btn.main-bg-button:active,
    #search-pratiche-anagrafica-button.btn.main-bg-button:active {
        transform: translateY(0);
    }

    #search-optional-button.btn.main-bg-button > i,
    #search-filtri-approvvigionamento.btn.main-bg-button > i,
    #search-pratiche-anagrafica-button.btn.main-bg-button > i {
        color: var(--main-bg-color, #006384) !important;
        margin-right: 0;
    }

/* ── Bottoni "Cerca" delle pagine di ricerca record (List / Elenco / Search) ──
   Classe ADDITIVA .vhm-search-cta: uniforma tutti i bottoni Cerca al look
   "pill" bianco del modello #search-optional-button (definito qui sopra).
   Non rimuove le classi esistenti (bold-text, main-bg-button, form-submit-button):
   ne sovrascrive solo l'aspetto via CSS (font-weight 500 annulla visivamente
   il grassetto senza toglierlo dal markup).

   .vhm-pill-btn: STESSO identico aspetto, riusabile sui bottoni secondari della
   stessa riga d'azione (Estrai Excel, Svuota/Reset filtri, upload Tessere/Fatture).
   Scelta utente: "pill uguale al Cerca". Selettore .btn.vhm-pill-btn (senza
   dipendere da main-bg-button) così vince anche su btn-danger (es. "Azzera filtri"). */
/* ── Bottoni "Salva" delle pagine di DETTAGLIO custom ──────────────────────────
   Scelta utente (2026-07-17): il Salva deve avere lo STESSO pill bianco del Cerca.
   Ambito: solo pagine custom (PagesCustom/*, PagesPublic/*), NON le schede CRUD
   auto-generate. Aggancio via id/classe (nessuna modifica al markup, nessun ID/classe
   rimosso, no JS): tutti i Salva custom hanno "btn main-bg-button" + id/classe con
   "save"/"salva" (es. save-button, contratto-main-save-button, salva-vincolo-button,
   salva-checklist-*-button).
   ESCLUSIONE dei CRUD auto-generati: i loro Salva usano id "save-and-view/close/add"
   → :not([id^="save-and-"]) li tiene fuori (nessuna pagina custom usa quel prefisso).
   Il bottone "Annulla" (id="undo-button", classe .save-button ma .btn-outline-secondary)
   NON viene toccato: non è .main-bg-button e il suo id non contiene "save". */
.btn.main-bg-button.vhm-search-cta,
.btn.vhm-pill-btn,
button.main-bg-button[id*="save"]:not([id^="save-and-"]),
button.main-bg-button[id*="salva"],
button.main-bg-button[class*="salva-"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: auto !important;
    gap: 8px;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    font-weight: 500 !important;
    font-size: 14px;
    background-color: #ffffff !important;
    color: #1b1a17 !important;
    border: 1.5px solid #e7e4dc !important;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04) !important;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

    /* FIX bug "doppio Cerca" (2026-07-17): la regola qui sopra usa display:inline-flex !important
   con specificita' di 3 classi (.btn.main-bg-button.vhm-search-cta), superiore al .d-none di
   Bootstrap (1 classe). Con due !important vince la piu' specifica -> i bottoni restavano VISIBILI
   anche con la classe .d-none (due "Cerca" sempre a video + "Esporta Excel" mostrato prima ancora
   di cercare). Questo override ripristina il nascondimento: aggiungendo .d-none al selettore la
   specificita' sale a 4/3 classi e display:none !important torna a vincere. Regola ADDITIVA:
   nessuna classe rimossa dal markup, nessuna modifica al JS. */
    .btn.main-bg-button.vhm-search-cta.d-none,
    .btn.vhm-pill-btn.d-none {
        display: none !important;
    }

    .btn.main-bg-button.vhm-search-cta:hover,
    .btn.vhm-pill-btn:hover,
    button.main-bg-button[id*="save"]:not([id^="save-and-"]):hover,
    button.main-bg-button[id*="salva"]:hover,
    button.main-bg-button[class*="salva-"]:hover {
        background-color: #ffffff !important;
        color: #1b1a17 !important;
        border-color: var(--main-bg-color, #006384) !important;
        box-shadow: 0 2px 8px rgba(20, 18, 14, 0.08) !important;
        transform: translateY(-1px);
    }

    .btn.main-bg-button.vhm-search-cta:active,
    .btn.vhm-pill-btn:active,
    button.main-bg-button[id*="save"]:not([id^="save-and-"]):active,
    button.main-bg-button[id*="salva"]:active,
    button.main-bg-button[class*="salva-"]:active {
        transform: translateY(0);
    }

    /* Icona colorata col colore mandante, sia come figlia diretta del bottone
       sia annidata dentro <span class="btn-text"> (Cespiti / Collettori) */
    .btn.main-bg-button.vhm-search-cta > i,
    .btn.main-bg-button.vhm-search-cta .btn-text > i,
    .btn.vhm-pill-btn > i,
    .btn.vhm-pill-btn .btn-text > i,
    button.main-bg-button[id*="save"]:not([id^="save-and-"]) > i,
    button.main-bg-button[id*="salva"] > i,
    button.main-bg-button[class*="salva-"] > i,
    button.main-bg-button[id*="save"]:not([id^="save-and-"]) .btn-text > i,
    button.main-bg-button[id*="salva"] .btn-text > i,
    button.main-bg-button[class*="salva-"] .btn-text > i {
        color: var(--main-bg-color, #006384) !important;
    }

/* PagesListCustom (.al-search-card): la regola storica
       ".al-search-card .al-search-cta.btn.main-bg-button" (pill pieno mandante,
       padding 28px, letter-spacing) ha specificita' MAGGIORE di .vhm-search-cta
       e vincerebbe su padding/letter-spacing. Override piu' specifico per
       uniformare anche questi Cerca al pill bianco standard; la classe
       al-search-cta resta nel markup (regola: mai rimuovere classi esistenti). */
.al-search-card .al-search-cta.vhm-search-cta.btn.main-bg-button {
    padding: 9px 22px !important;
    font-weight: 500 !important;
    letter-spacing: normal;
}

/* Spaziatura icona-testo quando l'icona è dentro .btn-text (il gap del flex
       non si applica dentro lo span) */
.btn.main-bg-button.vhm-search-cta .btn-text > i,
.btn.vhm-pill-btn .btn-text > i {
    margin-right: 8px;
}

/* Checkbox "Equipaggiamento" del modulo Approvvigionamento: look moderno
   con bordo sabbia, sfondo mandante quando checked, dimensione consona. */
#equipaggiamento-approvvigionamento-filter-field[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: 1.5px solid #cfccc1;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04);
}

    #equipaggiamento-approvvigionamento-filter-field[type="checkbox"]:hover {
        border-color: var(--main-bg-color, #006384);
    }

    #equipaggiamento-approvvigionamento-filter-field[type="checkbox"]:focus {
        outline: none;
        border-color: var(--main-bg-color, #006384);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-bg-color, #006384) 18%, transparent);
    }

    #equipaggiamento-approvvigionamento-filter-field[type="checkbox"]:checked {
        background-color: var(--main-bg-color, #006384);
        border-color: var(--main-bg-color, #006384);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M3.5 8.5l3 3 6-7'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70% 70%;
    }

    #equipaggiamento-approvvigionamento-filter-field[type="checkbox"]:disabled {
        background-color: #f5f4f0;
        border-color: #e7e4dc;
        cursor: not-allowed;
        opacity: 0.7;
    }

#main-navbar #brand-main-image-block {
    padding: 0 8px;
}

#main-navbar #brand-main-image {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

#main-navbar #welcome-navbar-label {
    font-size: 12.5px;
    opacity: 0.85;
    margin-right: 4px;
}

/* 2026-07-28: la parte tra parentesi dopo "Benvenuto NOME" e' diventata un link al
   dettaglio dell'anagrafica di riferimento dell'utente (nodo <a> iniettato dentro
   #welcome-navbar-label da checkUserRole, in login-registration.js).
   Classe NUOVA di proposito: #welcome-navbar-label ha gia' le sue regole qui sopra e
   altre due piu' avanti nel file (font-family nel blocco @media e align-self sul <li>),
   che NON vanno toccate.
   color: inherit -> il link prende il colore del testo navbar del tema mandante attivo,
   quindi resta leggibile su tutti i temi senza override per-mandante.

   ATTENZIONE agli alpha: il genitore #welcome-navbar-label ha opacity 0.85 (regola qui
   sopra, preesistente) e in CSS l'opacita' si applica a TUTTO il sottoalbero come gruppo,
   quindi NON e' annullabile da una regola sul discendente. Ogni percentuale scritta qui
   viene di fatto moltiplicata per 0.85. Con i valori della prima stesura (underline 45%,
   hover 12%, focus 60%) sulle mandanti con navbar chiara e font bianco - es. Rent2Go
   #97c225, EsMobility #C1B49B - l'underline scendeva a 1.34:1 e l'hover a 1.08:1: il link
   sembrava testo piatto e passandoci sopra non cambiava nulla, cioe' l'utente non scopriva
   che e' cliccabile. Percio' underline a colore PIENO, hover al 22% e anello di focus pieno.
   Se si tocca l'opacita' del genitore, questi valori vanno rivisti. */
/* 2026-07-29 - RESTYLE: da link sottolineato a etichetta contornata.
   Prima l'elemento aveva l'aspetto del link di default del browser (testo sottolineato) e si
   portava dietro le parentesi, che erano un residuo del vecchio formato stringa
   "NOME (RAGIONE SOCIALE)" e non una scelta grafica.
   Le due scelte che contano, entrambe dettate dai vincoli e non decorative:
   - CONTORNO E NON FONDO PIENO a riposo. E' la differenza che fa reggere i 26 temi mandante:
     un fill traslucido, dentro l'opacity 0.85 del genitore #welcome-navbar-label, diventa una
     macchia slavata sulle navbar chiare (caso peggiore Rent2Go #97c225 con font bianco), mentre
     bordo e testo restano nitidi sia su navbar chiare sia su scure. Il fondo compare SOLO
     all'hover, dove il suo compito e' proprio segnalare il cambio di stato.
   - MICRO-LABEL UPPERCASE. E' gia' il vocabolario tipografico del progetto (.form-label qui
     nello stesso file e' uppercase/bold/11px). Il nome resta contenuto, l'etichetta e' metadato
     cliccabile: la gerarchia si legge senza introdurre un secondo colore, che con una sola
     variabile disponibile non sarebbe comunque possibile.
   Nota su un tentativo scartato: la prima stesura di questo restyle aveva una forma a
   "linguetta da schedario" (spigolo vivo a sinistra con dorso a 2px, raggio asimmetrico).
   All'anteprima non si leggeva: a 10,5px il dorso non si distingue da un bordo normale e
   l'asimmetria sembrava una pastiglia incompleta. Forma simmetrica, piu' onesta.
   Le percentuali di color-mix qui sotto tengono conto dell'opacity 0.85 del genitore: se
   quella cambia, vanno ritarate. */
#main-navbar .vhm-welcome-anagrafica-link {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    padding: 3px 10px;
    color: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 55%, transparent);
    border-radius: 999px;
    transition: background-color 140ms ease, border-color 140ms ease;
}

    #main-navbar .vhm-welcome-anagrafica-link:hover,
    #main-navbar .vhm-welcome-anagrafica-link:focus {
        color: inherit;
        text-decoration: none;
        background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 16%, transparent);
        border-color: var(--main-navbar-font-color, #ffffff);
    }

    /* Anello di focus a colore pieno: con un color-mix al 60% l'alpha effettivo scendeva a
       0.51 e restava sotto il 3:1 su piu' temi, sostituendo pero' l'anello di default del
       browser (che sarebbe stato ad alto contrasto) con uno praticamente invisibile. */
    #main-navbar .vhm-welcome-anagrafica-link:focus-visible {
        outline: 2px solid var(--main-navbar-font-color, #ffffff);
        outline-offset: 2px;
    }

#main-navbar #notizie-navbar-button.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 600;
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ffffff !important;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
}

    #main-navbar #notizie-navbar-button.btn:hover,
    #main-navbar #notizie-navbar-button.btn:focus,
    #main-navbar #notizie-navbar-button.btn:active,
    #main-navbar #notizie-navbar-button.btn.active {
        background-color: var(--main-navbar-bg-color, #212529) !important;
        color: var(--main-navbar-font-color, #ffffff) !important;
        border-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 65%, transparent) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important;
        filter: none;
    }

/* Badge contatore campanella: assicura visibilità sempre quando contiene testo */
#main-navbar #notizie-navbar-count:not(:empty) {
    display: inline-block !important;
    min-width: 18px;
    line-height: 1;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 700;
}

/*@media (max-width: 991px) {
    #main-navbar .navbar-collapse .navbar-nav {
        width: 100%;
    }*/
/*    #main-navbar #navbar-public-links {
        padding: 6px 0;
        overflow-x: visible;
        flex-wrap: wrap;
    }*/
/*}*/

/* =============================================================
   Navbar menu di navigazione principale (categorie + dropdown)
   Stile flat-moderno, hover-driven, colori del mandante.
   ============================================================= */

/* IMPORTANT: nessun overflow su #navbar-left-list / .navbar-collapse: i dropdown
   sono position:absolute e l'overflow:hidden|auto creerebbe un nuovo contesto
   che li clipperebbe dentro la navbar. Lasciamo che gli item della navbar
   wrappino su due righe quando lo spazio non basta. */
#main-navbar #navbar-left-list {
    flex-wrap: wrap;
    gap: 2px;
    row-gap: 4px;
}

#main-navbar .navbar-menu-category {
    position: relative;
}

/* Toggle dei dropdown della navbar: pill bianca di default (override di .main-bg-button
   tramite specificita' #main-navbar + classe). On hover/open il pill prende il colore
   della mandante e il testo il colore relativo del tema. */
#main-navbar .navbar-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    margin: 0 2px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px !important;
    text-decoration: none;
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ffffff !important;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
    cursor: pointer;
}

    /* Nasconde la freccia di default dei dropdown Bootstrap su desktop. */
    #main-navbar .navbar-menu-toggle::after {
        display: none;
    }

    /* Hover/focus/click (aria-expanded) + categoria attiva (.show) + pagina corrente
   (.navbar-menu-active): tutti questi stati usano lo STESSO stile (bg mandante,
   testo nel colore di contrasto della navbar, bordo bianco trasparente, ombra).
   .navbar-menu-active e' applicato da highlightActiveNavbarCategory() in
   navbar-menu.js quando l'URL corrente appartiene a una sottocategoria della
   navbar -> il pulsante padre resta "premuto" anche dopo la navigazione. */
    #main-navbar .navbar-menu-toggle:hover,
    #main-navbar .navbar-menu-toggle:focus,
    #main-navbar .navbar-menu-toggle.show,
    #main-navbar .navbar-menu-toggle[aria-expanded="true"],
    #main-navbar .navbar-menu-category.show > .navbar-menu-toggle,
    #main-navbar .navbar-menu-category:hover > .navbar-menu-toggle,
    #main-navbar .navbar-menu-category.navbar-menu-active > .navbar-menu-toggle {
        background-color: var(--main-navbar-bg-color, #212529) !important;
        color: var(--main-navbar-font-color, #ffffff) !important;
        border-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 65%, transparent) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
    }

/* Anche Dashboard: stessa logica - hover, focus, e pagina corrente usano lo
   stesso stile mandante. */
#main-navbar .navbar-dashboard-link.navbar-menu-active,
#main-navbar .navbar-dashboard-link:hover,
#main-navbar .navbar-dashboard-link:focus {
    background-color: var(--main-navbar-bg-color, #212529) !important;
    color: var(--main-navbar-font-color, #ffffff) !important;
    border-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 65%, transparent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}

/* Aprire il dropdown al hover SOLO su desktop (>= 768px, sopra il breakpoint md).
   Su mobile il dropdown si apre esclusivamente al click (gestito da Bootstrap via .show). */
/* 2026-07-27 — FIX "le sezioni del menu si vedono ma non si aprono".
   PROBLEMA: le due regole di questo blocco nascono per il VECCHIO menu
   orizzontale, che si apriva al passaggio del mouse e quindi disattivava i
   click sui titoli di sezione (pointer-events:none). La sidebar verticale
   invece si apre al CLICK, e la regola che riabilita i click
   ("#main-navbar.al-navbar-sidebar .navbar-menu-toggle { pointer-events:auto }")
   vive dentro @media (min-width: 1200px). Ma la classe .al-navbar-sidebar viene
   messa da navbar-menu.js SENZA controllare la larghezza della finestra.
   Risultato: fra 768px e 1199.98px la sidebar era attiva, il CSS che le ridà i
   click era spento, e restava in vigore il pointer-events:none -> TUTTI i titoli
   di sezione risultavano inerti (si vedono, il click non arriva). Capitava anche
   a finestra massimizzata con lo zoom del browser al 125%, che riduce la
   larghezza effettiva sotto i 1200px: da qui l'impressione che dipendesse dalla
   mandante.
   SOLUZIONE: entrambe le regole valgono ora solo QUANDO LA SIDEBAR NON E' ATTIVA
   (:not(.al-navbar-sidebar)). Su login/pre-mandante, dove la classe non c'e',
   il comportamento storico resta identico; con la sidebar attiva subentra a ogni
   larghezza il normale apri/chiudi al click di Bootstrap.
   Escludo anche la regola dell'hover (e non solo quella dei pointer-events)
   perche' le due modalita' in contemporanea si pestano i piedi: l'hover apre, il
   click aggiunge .show, e allontanando il mouse il pannello resta aperto — cioe'
   esattamente il difetto descritto nel commento originale qui sotto.
   Righe originali conservate, non eliminate. */
@media (min-width: 768px) {
    /*#main-navbar .navbar-menu-category:hover > .navbar-menu-dropdown {
        display: block;
    }*/
    #main-navbar:not(.al-navbar-sidebar) .navbar-menu-category:hover > .navbar-menu-dropdown {
        display: block;
    }

    /* Su desktop il toggle delle categorie navbar NON deve essere cliccabile:
       l'apertura del dropdown avviene esclusivamente via hover (regola sopra).
       Disabilitando i click impediamo a Bootstrap di aggiungere .show /
       aria-expanded="true", evitando che il menu rimanga "premuto" dopo il
       click e che piu' dropdown coesistano (uno aperto via click + altri
       aperti via hover). pointer-events: none sul toggle NON blocca il
       :hover del parent .navbar-menu-category, quindi l'apertura su hover
       continua a funzionare correttamente. */
    /*#main-navbar .navbar-menu-toggle {
        pointer-events: none;
    }*/
    #main-navbar:not(.al-navbar-sidebar) .navbar-menu-toggle {
        pointer-events: none;
    }
}

/* Stile del menu dropdown: sfondo del tooltip = colore della navbar (cambia
   per mandante via --main-navbar-bg-color). I pulsanti dentro hanno la
   classe .main-bg-button quindi prendono i colori del tema da soli. */
#main-navbar .navbar-menu-dropdown {
    margin-top: 0 !important;
    border: 1px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 15%, transparent);
    border-radius: 10px;
    padding: 6px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    background-color: var(--main-navbar-bg-color, #006384) !important;
}

    /* Pulsanti dentro al dropdown: STILE FISSO "Menu Generale" (sfondo bianco, testo
   e bordo nel colore del mandante). Usiamo le variabili --main-button-hover-*
   (che nei temi mandante coincidono col loro accent color) cosi' il look si
   adatta automaticamente al tema selezionato. Forziamo il bg a #ffffff perche'
   il pannello dropdown e' gia' colorato come la navbar e i pulsanti devono
   spiccarci sopra. */
    #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 8px 12px !important;
        margin-bottom: 4px;
        border-radius: 8px !important;
        font-size: 13px;
        font-weight: 500;
        background-color: #ffffff !important;
        color: var(--main-button-hover-font-color, #006384) !important;
        border: 1px solid var(--main-button-hover-border-color, #006384) !important;
        transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    }

        #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:last-child {
            margin-bottom: 0;
        }

        /* Hover/focus: replichiamo l'aspetto di Menu Generale (light teal bg, teal text/border).
   Le variabili tema --main-button-hover-bg-color sono RGBA semi-trasparenti, quindi
   sopra il pannello dropdown (gia' mandante-color) si compongono fino a diventare
   pieno mandante e nascondere il testo. Usiamo color-mix per ottenere un colore
   SOLIDO che mescola il mandante (--main-bg-color) col bianco: cosi' il bg appare
   sempre come uno "sfondo bianco lievemente tinto", indipendentemente dal pannello. */
        #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover,
        #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:focus {
            background-color: #e8eef0 !important; /* fallback per browser senza color-mix */
            background-color: color-mix(in srgb, var(--main-bg-color, #006384) 12%, #ffffff 88%) !important;
            color: var(--main-button-hover-font-color, #006384) !important;
            border-color: var(--main-button-hover-border-color, #006384) !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
            transform: translateX(2px);
        }

    /* Bottoni <button> dentro al dropdown si comportano come link */
    #main-navbar .navbar-menu-dropdown button.dropdown-item.navbar-menu-link {
        text-align: left;
        width: 100%;
        cursor: pointer;
    }

/* Pulsante Dashboard a sinistra: pill bianca, hover = colore mandante.
   Stesso pattern dei toggle di categoria (override di .main-bg-button via specificita'). */
#main-navbar .navbar-dashboard-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ffffff !important;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}

    #main-navbar .navbar-dashboard-link .navbar-dashboard-label {
        display: inline-block;
    }
/* Hover/focus/active per Dashboard sono gestiti dal blocco unificato in alto
   (#main-navbar .navbar-dashboard-link.navbar-menu-active, :hover, :focus). */

/* Language picker — pill come gli altri bottoni della navbar. Mantiene la classe
   main-bg-button in HTML (richiesta esplicita): il colore di default lo decide il
   tema mandante via le variabili --main-button-*. Hover/click invece e' identico
   ai .navbar-menu-toggle (sfondo mandante navbar). */
#main-navbar #language-picker-button.btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

#main-navbar #language-picker-button.dropdown-toggle::after {
    margin-left: 4px;
}

#main-navbar #language-picker-button.btn:hover,
#main-navbar #language-picker-button.btn:focus,
#main-navbar #language-picker-button.btn.show,
#main-navbar #language-picker-button.btn[aria-expanded="true"] {
    background-color: var(--main-navbar-bg-color, #212529) !important;
    color: var(--main-navbar-font-color, #ffffff) !important;
    border-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 65%, transparent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important;
    filter: none;
}
/* =============================================================
   Menu Generale: accordion singolo "Menu Generale" su
   PagesListCustom.aspx, stesso pattern di Storico Workflow.
   - Centrato sulla pagina (max-width + margin auto).
   - Header = .btn.main-bg-button.bold-text (look dei bottoni di
     ordinamento di Storico Workflow).
   - Stato APERTO (.accordion-button:not(.collapsed)): colori
     --main-button-hover-* per coerenza con .activeButton in
     WolfeeInstance.css.
   - Reset dello chrome di default dell'accordion Bootstrap (sfondo,
     bordo, box-shadow) cosi' che lo stile sia tutto delegato al .btn.
   - Toolbar interna .mg-section-toolbar e bottoni .mg-section-btn
     replicano il pattern .od-sort-toolbar / .activeButton: click su
     un filtro -> Bootstrap aggiunge .active -> stesso look "premuto".
   ============================================================= */
#menu-generale-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: inherit;
    border: 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

    /* Outer item = card bianca con bordo + ombra (replica della card "Storico Workflow").
   Applicato a Menu Generale e a ogni card autonoma "Altre liste" (.al-card-accordion). */
    #menu-generale-accordion .accordion-item,
    .al-card-accordion .accordion-item {
        background: #ffffff !important;
        border: 1px solid var(--bs-border-color, #dee2e6) !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }

    /* Header dell'accordion: trasparente, testo+icona in mandante color (come "Storico Workflow"). */
    #menu-generale-accordion .accordion-button,
    .al-card-accordion .accordion-button {
        background-color: transparent !important;
        background-image: none !important; /* rimuove la freccia SVG di default di Bootstrap */
        color: var(--main-bg-color, #006384) !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 14px 20px !important;
        font-size: 15px;
        font-weight: 600;
    }

        #menu-generale-accordion .accordion-button.collapsed,
        .al-card-accordion .accordion-button.collapsed {
            background-color: transparent !important;
            color: var(--main-bg-color, #006384) !important;
        }

        /* APERTO: stesso testo mandante + linea teal sotto (separator stile Storico Workflow). */
        #menu-generale-accordion .accordion-button:not(.collapsed),
        .al-card-accordion .accordion-button:not(.collapsed) {
            background-color: transparent !important;
            color: var(--main-bg-color, #006384) !important;
            border-bottom: 2px solid var(--main-bg-color, #006384) !important;
        }

/* Stack contenitore delle card "Altre liste" autonome: stessa larghezza max del
   Menu Generale, centrato. Se tutte le card sono d-none (utente senza permessi),
   il flex container non occupa spazio (gap-3 si applica solo tra figli visibili). */
#altre-liste-stack {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Toolbar piccola dentro l'accordion-body, stile "Ordina:" di Storico Workflow. */
#menu-generale-accordion .mg-section-toolbar {
    border-color: var(--bs-border-color, #dee2e6) !important;
}

/* Hover/focus/active dei .list-group-item-action DENTRO il Menu Generale e
   le card autonome (Liste estese mantiene la griglia con list-group classici):
   il colore deve corrispondere al colore del tab attivo (--main-button-hover-bg-color)
   per coerenza visuale tra categoria selezionata e sottocategoria su cui si passa sopra.
   NOTA: NON sovrascriviamo border-color in hover - la variabile mandante puo' coincidere
   col bg hover e far sparire il divider tra item adiacenti. Manteniamo il border default
   (--bs-list-group-border-color) cosi' il bordo grigio resta sempre visibile. */
#menu-generale-accordion .list-group-item-action:hover,
#menu-generale-accordion .list-group-item-action:focus,
#menu-generale-accordion .list-group-item-action.active,
.al-card-accordion .list-group-item-action:hover,
.al-card-accordion .list-group-item-action:focus,
.al-card-accordion .list-group-item-action.active {
    background-color: var(--main-button-hover-bg-color) !important;
    color: var(--main-button-hover-font-color) !important;
}

/* Pulsanti filtro stile button-group "attaccato" come i bottoni "Ordina:" di
   Storico Workflow: nessun gap, bordi adiacenti sovrapposti.
   Gli angoli arrotondati esterni sono applicati SOLO al primo e ultimo bottone
   VISIBILE di OGNI riga (classi .mg-edge-first / .mg-edge-last gestite dalla
   funzione updateMenuGeneraleEdges in PagesListCustom.js); cosi' anche con
   flex-wrap il group si comporta come se ogni riga fosse un mini button-group.
   Scoped al solo Menu Generale (le card autonome non hanno toolbar). */
#menu-generale-accordion .mg-section-tablist {
    gap: 0 !important;
}

#menu-generale-accordion .mg-section-btn {
    border-radius: 0 !important;
    padding: 6px 12px !important;
    font-size: 13px;
    margin: 0 -1px 0 0 !important; /* sovrappone il bordo destro col bordo sinistro del prossimo */
    position: relative;
}

    /* Primo pulsante visibile di OGNI riga: angoli sinistri arrotondati */
    #menu-generale-accordion .mg-section-btn.mg-edge-first {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }

    /* Ultimo pulsante visibile di OGNI riga: angoli destri arrotondati +
   nessuna sovrapposizione a destra (e' fine riga) */
    #menu-generale-accordion .mg-section-btn.mg-edge-last {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        margin-right: 0 !important;
    }

    /* Il pulsante attivo (e in hover) sale sopra i fratelli per non far coprire il suo bordo */
    #menu-generale-accordion .mg-section-btn:hover,
    #menu-generale-accordion .mg-section-btn:focus,
    #menu-generale-accordion .mg-section-btn.active {
        z-index: 1;
    }

/* Freccia rotante custom dell'outer accordion */
#menu-generale-accordion > .accordion-item > .accordion-header > .accordion-button::after,
.al-card-accordion > .accordion-item > .accordion-header > .accordion-button::after {
    content: "";
    width: 0;
    height: 0;
    background-image: none;
    border-top: 0.35em solid currentColor;
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    transition: transform 150ms ease;
    transform: rotate(0deg);
    margin-left: auto;
}

#menu-generale-accordion > .accordion-item > .accordion-header > .accordion-button:not(.collapsed)::after,
.al-card-accordion > .accordion-item > .accordion-header > .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* Stato ATTIVO dei pulsanti filtro di sezione (Bootstrap aggiunge .active al
   tab cliccato). Stesso look di .activeButton (Storico Workflow / Wolfee).
   Scoped al solo Menu Generale. */
#menu-generale-accordion .mg-section-btn.active {
    background-color: var(--main-button-hover-bg-color) !important;
    color: var(--main-button-hover-font-color) !important;
    border-color: var(--main-button-hover-border-color) !important;
}

/* =============================================================
   Sub-card NON collassabili da usare dentro un .al-card-accordion
   (es. blocchi "Filtri principali / veicolo / driver / stato /
   fornitore" su OrdiniList). Replica visiva dell'header di
   .al-card-accordion ma sempre aperta - nessun toggle, solo styling.
   ============================================================= */
.al-subcard {
    background: #ffffff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    height: 100%; /* card sorelle nella stessa row hanno la stessa altezza */
}

.al-subcard-header {
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-bg-color, #006384);
    border-bottom: 2px solid var(--main-bg-color, #006384);
    display: flex;
    align-items: center;
    gap: 6px;
}

.al-subcard-body {
    padding: 16px 18px;
}

    /* Spaziatura uniforme dei label dentro le sub-card */
    .al-subcard-body .form-label {
        font-weight: 500;
        margin-bottom: 4px;
    }

/* =============================================================
   Anagrafica detail (AnagraficaDetail.aspx): card principale
   "#anagrafica-block" + sub-card togglabili tramite checkbox
   (Indirizzo, Contatto telefonico, Mail/SDI, Documento, NDG).
   Stile coordinato con le al-subcard dei filtri OrdiniList /
   AnagraficheList. Le classi sono ADDITIVE: il JS continua a
   usare gli ID e classi originali (.new-block, .connected-list-checkbox,
   .form-check, .d-none, .row).
   ============================================================= */

/* Container esterno: stesso look delle al-subcard ma piu' "card"
   (mantiene .card.shadow di Bootstrap come fallback). */
.al-anagrafica-card.card {
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.al-anagrafica-card > .card-body {
    padding: 20px;
}

/* Sub-card togglabile (es. Indirizzo): l'header e' un form-check
   con la checkbox di apertura, il body si mostra/nasconde via
   .d-none gestita dal JS (showHideConnectedListBlock). */
.al-toggle-card {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.al-toggle-header {
    padding: 14px 18px;
}

/* Body: combinato con .row, azzeriamo i margini negativi del row
   cosi' il padding di .al-subcard-body resta visivamente corretto. */
.al-toggle-body.row,
#indirizzo-responsabile-block.row {
    margin-left: 0;
    margin-right: 0;
}

    .al-toggle-body.row > [class*="col-"],
    #indirizzo-responsabile-block.row > [class*="col-"] {
        padding-left: calc(var(--bs-gutter-x, 1rem) * .5);
        padding-right: calc(var(--bs-gutter-x, 1rem) * .5);
    }

/* Form-check moderno: checkbox piu' grande, allineata verticalmente
   con la label, cursore pointer sull'intero blocco. */
.al-form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    min-height: 0;
    margin-bottom: 0;
}

    .al-form-check .al-toggle-input.form-check-input {
        margin-left: 0;
        margin-top: 0;
        width: 1.15em;
        height: 1.15em;
        flex-shrink: 0;
        cursor: pointer;
        border-color: var(--checkbox-border-color, #ced4da);
    }

        .al-form-check .al-toggle-input.form-check-input:checked {
            background-color: var(--checkbox-checked-bg-color, var(--main-bg-color, #006384));
            border-color: var(--checkbox-checked-bg-color, var(--main-bg-color, #006384));
        }

        .al-form-check .al-toggle-input.form-check-input:focus {
            box-shadow: 0 0 0 .2rem var(--checkbox-focus-boxshadow-color, rgba(0, 99, 132, .25));
        }

    .al-form-check .al-toggle-label {
        cursor: pointer;
        margin-bottom: 0;
        font-size: 15px;
        color: var(--main-bg-color, #006384);
    }

.al-subtoggle {
    padding: 10px 14px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 8px;
}

    .al-subtoggle .al-toggle-label {
        color: var(--main-bg-color, #006384);
    }

/* Input testuali, textarea, file, date */
.al-subcard-body .form-control,
.al-subcard-body .form-select {
    border-radius: 8px;
    padding: 8px 12px;
    border-color: var(--bs-border-color, #dee2e6);
    background-color: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

    .al-subcard-body .form-control:hover:not(:disabled):not(:read-only),
    .al-subcard-body .form-select:hover:not(:disabled) {
        border-color: var(--form-control-border-color, #adb5bd);
    }

    .al-subcard-body .form-control:focus,
    .al-subcard-body .form-select:focus {
        border-color: var(--form-control-border-color, #86b7fe);
        box-shadow: 0 0 0 .2rem var(--form-control-boxshadow-color, rgba(13, 110, 253, .15));
    }

    .al-subcard-body .form-control:disabled,
    .al-subcard-body .form-control[disabled],
    .al-subcard-body .form-select:disabled {
        background-color: var(--bs-tertiary-bg, #f8f9fa);
        cursor: not-allowed;
    }

    /* Placeholder piu' soft per coerenza con lo screen */
    .al-subcard-body .form-control::placeholder {
        color: #9aa4ad;
        opacity: 1;
    }

/* Select2 single: portiamo l'altezza e i bordi in linea con .form-control */
.al-subcard-body .select2-container--default .select2-selection--single {
    height: calc(1.5em + 16px + 2px);
    border-radius: 8px;
    border-color: var(--bs-border-color, #dee2e6);
    background-color: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.al-subcard-body .select2-container--default.select2-container--focus .select2-selection--single,
.al-subcard-body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--form-control-border-color, #86b7fe);
    box-shadow: 0 0 0 .2rem var(--select2-focus-boxshadow-color, var(--form-control-boxshadow-color, rgba(13, 110, 253, .15)));
}

.al-subcard-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 14px) !important;
    padding-left: 12px;
    padding-right: 28px;
    margin-top: 0 !important;
    color: #495057;
}

.al-subcard-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0;
    right: 6px;
}

.al-subcard-body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9aa4ad;
}

/* Select2 disabled (es. Modello quando Marca non selezionata) */
.al-subcard-body .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    cursor: not-allowed;
}

/* Input-group (es. Codice Fiscale + Calcola, date + icona calendario) */
.al-subcard-body .input-group > .form-control:not(:last-child),
.al-subcard-body .input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.al-subcard-body .input-group > .form-control:not(:first-child),
.al-subcard-body .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.al-subcard-body .input-group > .input-group-text {
    border-radius: 0 8px 8px 0;
    border-color: var(--bs-border-color, #dee2e6);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--main-bg-color, #006384);
}

    .al-subcard-body .input-group > .input-group-text:first-child {
        border-radius: 8px 0 0 8px;
    }

.al-subcard-body .input-group > .btn {
    border-radius: 0 8px 8px 0;
}

/* Label coerenti dentro le al-subcard (regola gia' esistente per
   .al-subcard-body .form-label - qui aggiungiamo lo stesso look per
   le label legacy che usano .bold-text invece di .form-label) */
.al-subcard-body label.bold-text {
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 14px;
    color: #495057;
}

/* =============================================================
   Select2 dropdown moderno (option list che si apre cliccando una
   select). Il dropdown viene appeso al <body>, quindi questa regola
   e' globale e migliora TUTTE le select dell'app. I colori restano
   guidati dalle custom-variables di mandante (--main-button-hover-*,
   --select2-selected-option-*).
   ============================================================= */

.select2-container--default .select2-dropdown {
    border-radius: 10px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-top: 4px;
    /* 01/09/2026 — Larghezza minima per i dropdown dei picker ora/minuti.
       select2 copia sul dropdown la larghezza del campo (inline style), e
       quei campi nascono a 70px (data-width="70px", 46 occorrenze nel
       progetto: ora/minuti/ore/perizia-*). Fra il padding di
       .select2-results__options (6+6), quello della singola option (12+12)
       e la scrollbar verticale (~15px), al testo restano ~17px: due cifre
       ne misurano ~16, quindi basta una metrica di font leggermente diversa
       (tema mandante, zoom, DPI) perche' "20" vada a capo in "2"/"0". Con
       l'option che raddoppia in altezza le voci della lista non sono piu'
       allineate fra loro.
       Il minimo di 96px lascia ~43px al testo e NON tocca nessun altro
       dropdown: tutti gli altri campi del progetto sono piu' larghi, quindi
       la loro width inline resta piu' grande del minimo. */
    min-width: 96px;
}

/* Dropdown che si apre verso l'alto: stessa cura per gli angoli */
.select2-container--default .select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Container interno dei risultati: padding laterale piccolo cosi'
   le option arrotondate "respirano" rispetto al bordo del dropdown */
.select2-container--default .select2-results > .select2-results__options {
    padding: 6px;
    max-height: 260px;
}

/* Singola option: padding generoso, bordi arrotondati, transizione
   morbida. Ispirata a .main-bg-button (border-radius simile, hover
   con i colori del mandante). */
.select2-container--default .select2-results__option {
    padding: 8px 12px;
    border-radius: 6px;
    margin: 2px 0;
    color: #495057;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

/* Hover / tastiera (highlighted): look del main-bg-button hover -
   sfondo colore mandante + testo bianco/font di hover */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--main-button-hover-bg-color, #0d6efd) !important;
    color: var(--main-button-hover-font-color, #ffffff) !important;
}

/* Option attualmente selezionata: usa le variabili gia' presenti
   nel tema (--select2-selected-option-bg-color / -font-color). */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"]:hover {
    background-color: var(--select2-selected-option-bg-color, var(--main-bg-color, #006384)) !important;
    color: var(--select2-selected-option-font-color, #ffffff) !important;
    font-weight: 500;
}

/* Gruppo di option (header non cliccabile, es. categorie): non
   ereditare l'hover, look discreto */
.select2-container--default .select2-results__option[role="group"] {
    padding: 6px 8px;
    background: transparent !important;
    color: #6c757d;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: default;
}

.select2-container--default .select2-results__message {
    color: #9aa4ad;
    cursor: default;
}

.select2-container--default .select2-search--dropdown {
    padding: 8px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

    .select2-container--default .select2-search--dropdown .select2-search__field {
        border-radius: 6px;
        border-color: var(--bs-border-color, #dee2e6);
        padding: 6px 10px;
        outline: none;
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: var(--form-control-border-color, #86b7fe);
            box-shadow: 0 0 0 .2rem var(--form-control-boxshadow-color, rgba(13, 110, 253, .15));
        }


/* Container multiple: altezza minima coerente con form-control,
   bordo arrotondato, padding interno per accomodare le pill */
.select2-container--default .select2-selection--multiple {
    border-radius: 8px;
    border-color: var(--bs-border-color, #dee2e6);
    background-color: #ffffff;
    min-height: calc(1.5em + 16px + 2px);
    padding: 3px 6px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--form-control-border-color, #86b7fe);
    box-shadow: 0 0 0 .2rem var(--select2-focus-boxshadow-color, var(--form-control-boxshadow-color, rgba(13, 110, 253, .15)));
}

/* UL interno: niente padding extra (lo abbiamo gia' sul container) */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Singola pill: stessa logica di .main-bg-button ma in formato compatto */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--main-button-bg-color, #006384) !important;
    border: 1px solid var(--main-button-border-color, var(--main-bg-color, #006384)) !important;
    color: var(--main-button-font-color, #ffffff) !important;
    border-radius: 6px;
    padding: 2px 8px 2px 4px;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    text-decoration: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--main-button-font-color, #ffffff) !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    transition: opacity 120ms ease, color 120ms ease;
    order: -1; /* la x prima del testo, come nello screen */
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
        opacity: 1;
        background-color: transparent !important;
        color: var(--main-button-font-color, #ffffff) !important;
    }

/* Pill: hover dell'intera pill - look del main-bg-button hover */
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background-color: var(--main-button-hover-bg-color, #084298) !important;
    border-color: var(--main-button-hover-border-color, var(--main-button-hover-bg-color, #084298)) !important;
    color: var(--main-button-hover-font-color, #ffffff) !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice:hover .select2-selection__choice__remove {
        color: var(--main-button-hover-font-color, #ffffff) !important;
    }

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 2px 4px;
    font-size: 14px;
    color: #495057;
}

    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
        color: #9aa4ad;
    }

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    cursor: not-allowed;
}

    .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
        opacity: .65;
        cursor: not-allowed;
    }

.al-workflow-row {
    /* g-3 e' gia' sulla row inline; gap orizzontale gestito da Bootstrap */
}

.al-workflow-card.card {
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    /* NIENTE overflow:hidden qui: il badge .workflow-badge appeso dal JS
       (WolfeeInstance.js updateBadgeWorkflow) altrimenti viene tagliato.
       Gli angoli arrotondati restano coerenti perche' il bottone interno
       e' trasparente e non sporge visivamente oltre i bordi della card. */
}

.al-workflow-card > .card-body.al-workflow-body {
    padding: 0;
}

/* Il bottone collasso si trasforma in HEADER della card: full-width,
   trasparente, testo colore mandante, niente bordo, freccia a destra.
   Sovrascrive .btn.main-bg-button via specificita' + !important.
   Padding orizzontale 44px su entrambi i lati per riservare spazio alla
   freccia ::after (assoluta a right:18px) e mantenere il testo+badge
   centrati simmetricamente. */
.al-workflow-toggle.btn.main-bg-button {
    width: 100%;
    margin: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--main-bg-color, #006384) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 44px !important;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    box-shadow: none !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: visible;
    transition: background-color 150ms ease;
}

    .al-workflow-toggle.btn.main-bg-button:hover,
    .al-workflow-toggle.btn.main-bg-button:focus,
    .al-workflow-toggle.btn.main-bg-button:active {
        background-color: rgba(0, 0, 0, 0.02) !important;
        color: var(--main-bg-color, #006384) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

/* Icona davanti al testo del bottone via ::before (FontAwesome 6).
   Workflow attivo = saetta, Storico = orologio "tornato indietro". */
.al-workflow-toggle::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
}

.al-workflow-toggle-history::before {
    content: "\f1da"; /* fa-clock-rotate-left equiv (fa-history) */
}

.al-workflow-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 0.35em solid currentColor;
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    transition: transform 150ms ease;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}

.al-workflow-toggle:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Linea separatrice sotto il header SOLO quando il collapse e' aperto */
.al-workflow-toggle:not(.collapsed) {
    border-bottom: 2px solid var(--main-bg-color, #006384) !important;
}

/* Contenuto del collapse: padding interno coerente */
.al-workflow-content {
    padding: 16px 18px;
}

    .al-workflow-content > #wolfee-module-active-container,
    .al-workflow-content > #wolfee-module-history-container {
        width: 100%;
    }

/* Badge .workflow-badge appeso dinamicamente dal JS dentro
   #wolfee-module-active-tab (WolfeeInstance.js updateBadgeWorkflow).
   Il JS lo posiziona con classi Bootstrap "position-absolute top-0
   start-100 translate-middle" - lo neutralizziamo via CSS in modo che
   diventi un elemento INLINE dentro il flex del header, accanto al
   testo "Workflow", completamente visibile e non sovrapposto alla
   freccia ::after. Specificita' alta per battere le utility BS5. */
.al-workflow-toggle .workflow-badge.badge.rounded-pill {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* Override scoped per gli accordion "Filtri" centrati (OrdiniList e
   AnagraficheList): la freccia diventa absolute cosi' il contenuto del
   button puo' essere centrato davvero (senza il margin-left:auto del
   ::after che lo spinge a sinistra). */
#filters-content-tab,
#anagrafiche-filters-content-tab {
    position: relative;
}

    #filters-content-tab::after,
    #anagrafiche-filters-content-tab::after {
        position: absolute;
        right: 20px;
        top: 50%;
        margin-left: 0 !important;
        transform: translateY(-50%) rotate(0deg);
    }

    #filters-content-tab:not(.collapsed)::after,
    #anagrafiche-filters-content-tab:not(.collapsed)::after {
        transform: translateY(-50%) rotate(180deg);
    }

/* =============================================================
   Dashboard tab strip (PagesListCustom.aspx) — DISMESSO 2026-07-27.
   Il vecchio stile "strip orizzontale" (replica degli .od-tab-strip
   di OrdineDetail) e' sostituito dallo stile CARD in
   PagesListCustom.css (sezione "Tab orizzontali -> card").
   Restava attivo su proprieta' NON ridichiarate dal nuovo stile
   (overflow:hidden che TAGLIAVA sopra/sotto l'hover translateY delle
   card, sfondo grigio, border-radius) e con regole hover a
   specificita' maggiore che sporcavano sfondo/bordo: per questo il
   blocco e' commentato (non cancellato, regola progetto).
   UNICA regola ancora attiva: il nascondi-wrapper .d-none qui sotto,
   che serve anche allo stile card (item "Scrivanie").
   ============================================================= */
/* #pages-list-tab.od-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
}

#pages-list-tab .od-tab-item {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}

    #pages-list-tab .od-tab-item:last-child {
        border-right: 0;
    } */
/* Hide the column wrapper when its anchor child has .d-none (JS legacy
   continua ad agire sull'anchor; il wrapper si nasconde di conseguenza).
   ANCORA ATTIVA: usata anche dallo stile card di PagesListCustom.css. */
#pages-list-tab .od-tab-item.d-none,
#pages-list-tab .od-tab-item:has(> .d-none) {
    display: none !important;
}

/* Bottone tab: trasparente, testo mutato, underline trasparente di default */
/* #pages-list-tab .od-tab-btn {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 14px 16px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d) !important;
    letter-spacing: 0.01em;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.2;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    flex: 1;
    width: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

    #pages-list-tab .od-tab-btn > i {
        font-size: 14px;
        color: var(--bs-secondary-color, #6c757d);
    } */

/* Hover (tab non attiva) */
/* #pages-list-tab .od-tab-btn:not(.active):hover {
        color: var(--bs-emphasis-color, #212529) !important;
        background: rgba(0, 0, 0, 0.03) !important;
        border-bottom-color: var(--bs-border-color, #dee2e6) !important;
    }

        #pages-list-tab .od-tab-btn:not(.active):hover > i {
            color: var(--bs-emphasis-color, #212529) !important;
        } */

/* Stato ATTIVO (Bootstrap pills aggiunge .active al .nav-link cliccato) */
/* #pages-list-tab .od-tab-btn.active {
        color: var(--main-button-hover-font-color) !important;
        background: #ffffff !important;
        border-bottom-color: var(--main-button-hover-border-color) !important;
        font-weight: 700;
    }

        #pages-list-tab .od-tab-btn.active > i {
            color: var(--main-button-hover-font-color) !important;
        } */

/* Primo/ultimo tab attivo: arrotondamento spigolo superiore per seguire la
   curvatura del contenitore (stesso trick di OrdineDetail) */
/* #pages-list-tab .od-tab-item:first-child .od-tab-btn.active {
    border-top-left-radius: 12px;
}

#pages-list-tab .od-tab-item:not(.d-none):has(.od-tab-btn.active):not(:has(~ .od-tab-item:not(.d-none))) .od-tab-btn.active {
    border-top-right-radius: 12px;
} */

/* Input campo data: stile coerente fra .toDateField e type="date" nativi.
   Le regole di .al-subcard-body .form-control gestiscono gia' i contesti
   delle al-subcard; qui copriamo TUTTI gli input data ovunque siano. */
input[type="date"].form-control,
input.toDateField.form-control,
input[type="date"] {
    border-radius: 8px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

    input[type="date"]:focus,
    input.toDateField:focus {
        border-color: var(--form-control-border-color, #86b7fe);
        box-shadow: 0 0 0 .2rem var(--form-control-boxshadow-color, rgba(13, 110, 253, .15));
        outline: none;
    }

    /* Nascondiamo l'icona-calendario nativa di Chrome/Edge sui campi
   gestiti da jQuery UI: altrimenti convive con il popup custom. */
    input[type="date"].toDateField::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

    input[type="date"].toDateField::-webkit-inner-spin-button,
    input[type="date"].toDateField::-webkit-clear-button {
        display: none;
        -webkit-appearance: none;
    }

/* Aggiunge un'icona calendario propria a destra del campo, solo per i
   campi convertiti dal nostro JS (data-native-date-input="true").
   I .toDateField "classici" sono gia' dentro un .input-group con
   <i class="fa fa-calendar"> esplicito - lasciamo invariati. */
input.toDateField[data-native-date-input="true"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%236c757d'><path d='M152 64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v32H0V128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64zM0 192H448V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    padding-right: 34px;
    cursor: pointer;
}

/* Popup jQuery UI: container principale. Sfondo bianco, bordi
   arrotondati 12px, ombra soft, padding interno generoso. */
.ui-datepicker {
    width: auto !important;
    min-width: 280px;
    padding: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    font-family: inherit;
    font-size: 14px;
    color: #495057;
}

/* Z-index alto cosi' il datepicker appare sopra i modali Bootstrap */
#ui-datepicker-div {
    z-index: 9999 !important;
}

/* Header del calendario: trasparente, padding inferiore + bordo bottom
   colore mandante (replica dello stile .al-subcard-header) */
.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--main-bg-color, #006384) !important;
    border-radius: 0 !important;
    padding: 4px 0 10px 0 !important;
    margin-bottom: 8px;
    font-weight: 600;
    position: relative;
}

/* Titolo (mese / anno o select mese+anno) centrato e colorato */
.ui-datepicker .ui-datepicker-title {
    margin: 0 36px !important;
    line-height: 1.8;
    color: var(--main-bg-color, #006384);
    font-weight: 600;
    text-align: center;
}

    .ui-datepicker .ui-datepicker-title select {
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 6px;
        padding: 3px 6px;
        font-size: 13px;
        background: #ffffff;
        color: #495057;
        margin: 0 2px;
        transition: border-color 120ms ease, box-shadow 120ms ease;
    }

        .ui-datepicker .ui-datepicker-title select:focus {
            border-color: var(--form-control-border-color, var(--main-bg-color, #006384));
            box-shadow: 0 0 0 .15rem var(--form-control-boxshadow-color, rgba(13, 110, 253, .15));
            outline: none;
        }

/* Frecce prev/next: trasparenti con hover soft, icone Unicode pulite */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 2px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-datepicker .ui-datepicker-prev {
    left: 4px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 4px !important;
}

    .ui-datepicker .ui-datepicker-prev:hover,
    .ui-datepicker .ui-datepicker-next:hover {
        background-color: rgba(0, 0, 0, 0.04) !important;
        border: 0 !important;
        top: 2px !important;
        cursor: pointer;
    }
    /* Sostituiamo lo span jQuery UI con icone unicode pulite via ::before */
    .ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
        display: none !important;
    }

    .ui-datepicker .ui-datepicker-prev::before,
    .ui-datepicker .ui-datepicker-next::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-style: solid;
        border-color: var(--main-bg-color, #006384);
        transform: translate(-50%, -50%) rotate(45deg);
    }

.ui-datepicker .ui-datepicker-prev::before {
    border-width: 0 0 2px 2px;
    margin-left: 2px;
}

.ui-datepicker .ui-datepicker-next::before {
    border-width: 2px 2px 0 0;
    margin-left: -2px;
}

/* Tabella della griglia giorni */
.ui-datepicker table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0;
    font-size: 14px;
}

/* Intestazione giorni della settimana */
.ui-datepicker th {
    padding: 6px 0 !important;
    color: #6c757d;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 0;
}

/* Celle dei giorni */
.ui-datepicker td {
    padding: 1px !important;
    border: 0;
}

    /* Singolo giorno (link <a> dentro la cella) */
    .ui-datepicker td .ui-state-default {
        display: block;
        padding: 7px 0 !important;
        text-align: center;
        background: transparent !important;
        background-image: none !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        color: #495057 !important;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    }

        /* Hover su giorno */
        .ui-datepicker td .ui-state-default:hover,
        .ui-datepicker td .ui-state-hover {
            background-color: rgba(0, 0, 0, 0.06) !important;
            color: var(--main-bg-color, #006384) !important;
            border-color: transparent !important;
            cursor: pointer;
        }

    /* Giorno selezionato (ui-state-active) - usa le custom-variables di mandante */
    .ui-datepicker td.ui-datepicker-current-day .ui-state-active,
    .ui-datepicker td .ui-state-active {
        background-color: var(--datepicker-selected-day-bg-color, var(--main-bg-color, #006384)) !important;
        color: var(--datepicker-selected-day-font-color, #ffffff) !important;
        border-color: var(--datepicker-selected-day-bg-color, var(--main-bg-color, #006384)) !important;
        font-weight: 600;
    }

    /* Giorno odierno (ui-state-highlight) */
    .ui-datepicker td.ui-datepicker-today .ui-state-highlight {
        background-color: var(--datepicker-current-day-bg-color, #fff3cd) !important;
        color: var(--datepicker-current-day-font-color, #856404) !important;
        border-color: var(--main-bg-color, #006384) !important;
    }
    /* Quando "oggi" e' anche il giorno selezionato, vince selezionato */
    .ui-datepicker td.ui-datepicker-today.ui-datepicker-current-day .ui-state-active {
        background-color: var(--datepicker-selected-day-bg-color, var(--main-bg-color, #006384)) !important;
        color: var(--datepicker-selected-day-font-color, #ffffff) !important;
        border-color: var(--datepicker-selected-day-bg-color, var(--main-bg-color, #006384)) !important;
    }

    /* Giorni di altri mesi (grigi e poco prominenti) */
    .ui-datepicker td.ui-datepicker-other-month .ui-state-default {
        opacity: .35;
        cursor: default;
    }

    /* Giorni disabilitati (fuori da min/max) */
    .ui-datepicker td.ui-state-disabled .ui-state-default,
    .ui-datepicker td.ui-datepicker-unselectable .ui-state-default {
        opacity: .35;
        cursor: not-allowed;
        background: transparent !important;
    }

/* Button pane (Oggi / Cancella) */
.ui-datepicker .ui-datepicker-buttonpane {
    margin-top: 8px !important;
    padding: 8px 0 0 0 !important;
    border-top: 1px solid var(--bs-border-color, #dee2e6) !important;
    background: transparent !important;
}

    .ui-datepicker .ui-datepicker-buttonpane button {
        margin: 0 4px !important;
        padding: 4px 12px !important;
        border-radius: 6px !important;
        border: 1px solid var(--main-bg-color, #006384) !important;
        background: transparent !important;
        color: var(--main-bg-color, #006384) !important;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 120ms ease, color 120ms ease;
    }

        .ui-datepicker .ui-datepicker-buttonpane button:hover {
            background-color: var(--main-button-hover-bg-color, var(--main-bg-color, #006384)) !important;
            color: var(--main-button-hover-font-color, #ffffff) !important;
        }

        .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
            /* "Oggi" come bottone primario */
            background-color: var(--main-button-bg-color, var(--main-bg-color, #006384)) !important;
            color: var(--main-button-font-color, #ffffff) !important;
            border-color: var(--main-button-border-color, var(--main-bg-color, #006384)) !important;
        }

            .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
                background-color: var(--main-button-hover-bg-color, var(--main-bg-color, #006384)) !important;
                color: var(--main-button-hover-font-color, #ffffff) !important;
            }

/* =============================================================
   Rework filtri delle card .al-search-card (PagesListCustom.aspx
   tab "Dashboard", "Anomalie", "Ticket", "Custom Report" e
   #ricerca-assegnazioni-card). Stile premium: banda intro
   uppercase con tinge soft mandante, sfondo card bianco, label
   uppercase, bordi soft tinge mandante, bottoni pill (Cerca
   pieno + secondari outline). Tutto SCOPATO alla classe
   additiva .al-search-card per non influenzare altre pagine.
   Colori 100% da --main-bg-color / --main-button-* per mandante
   via color-mix.
   ============================================================= */

/* Card esterna: bordi morbidi, ombra soft. Sfondo BIANCO; l'accento
   colore mandante e' applicato solo all'header e ai bordi degli input.
   Il bordo della card riprende il mandante a basso alpha (color-mix). */
.al-search-card.card {
    border: 1px solid color-mix(in srgb, var(--main-bg-color, #006384) 18%, #ffffff) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    background-color: #ffffff;
}

.al-search-card > .card-body {
    padding: 22px 26px;
    background-color: #ffffff;
}

/* Nasconde l'H3 originale "Assegnazioni" (sostituito visivamente dal
   nuovo card-header) senza rimuoverlo dal markup */
.al-search-card .al-search-original-title {
    display: none !important;
}

/* Banda header (unica): eyebrow uppercase + sottotitolo italic.
   Sfondo tinge soft del colore mandante (via color-mix), esteso ai
   bordi della card via margin negativi che annullano il padding del
   card-body. Linea sottile in basso colore mandante a basso alpha. */
.al-search-card .al-search-intro {
    background-color: color-mix(in srgb, var(--main-bg-color, #006384) 8%, #ffffff);
    margin: -22px -26px 22px -26px;
    padding: 18px 26px;
    border-bottom: 1px solid color-mix(in srgb, var(--main-bg-color, #006384) 25%, #ffffff);
}

.al-search-card .al-search-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    color: var(--main-bg-color, #006384);
}

.al-search-card .al-search-subtitle {
    font-style: italic;
    font-size: 13px;
    color: color-mix(in srgb, var(--main-bg-color, #006384) 60%, #6c757d);
    margin-top: 4px;
    line-height: 1.4;
}

/* Label dei campi: UPPERCASE soft, letter-spaced */
.al-search-card .form-container label:not(.form-check-label) {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11.5px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 6px;
}

/* Input / textarea: bordo soft con tinge mandante, focus pieno mandante */
.al-search-card .form-control {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #ffffff;
    border-color: color-mix(in srgb, var(--main-bg-color, #006384) 25%, #ffffff);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

    .al-search-card .form-control:hover:not(:disabled):not(:read-only) {
        border-color: color-mix(in srgb, var(--main-bg-color, #006384) 45%, #ffffff);
    }

    .al-search-card .form-control:focus {
        border-color: var(--form-control-border-color, var(--main-bg-color, #006384));
        box-shadow: 0 0 0 .2rem var(--form-control-boxshadow-color, rgba(13, 110, 253, .15));
        outline: none;
    }

/* Select2 single: bordo soft con tinge mandante, focus colore mandante */
.al-search-card .select2-container--default .select2-selection--single {
    height: calc(1.5em + 16px + 2px);
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--main-bg-color, #006384) 25%, #ffffff);
    background-color: #ffffff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

    .al-search-card .select2-container--default .select2-selection--single:hover {
        border-color: color-mix(in srgb, var(--main-bg-color, #006384) 45%, #ffffff);
    }

.al-search-card .select2-container--default.select2-container--focus .select2-selection--single,
.al-search-card .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--form-control-border-color, var(--main-bg-color, #006384));
    box-shadow: 0 0 0 .2rem var(--select2-focus-boxshadow-color, var(--form-control-boxshadow-color, rgba(13, 110, 253, .15)));
}

.al-search-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 14px) !important;
    padding-left: 12px;
    padding-right: 28px;
    margin-top: 0 !important;
    color: #495057;
}

.al-search-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0;
    right: 6px;
}

/* Checkbox "Filtra solo fermo tecnico": pill outline inline */
.al-search-card .al-search-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--main-bg-color, #006384) 25%, #ffffff);
    border-radius: 999px;
    background-color: #ffffff;
    transition: border-color 150ms ease, background-color 150ms ease;
    padding-left: 14px;
    min-height: 0;
    margin: 0;
}

    .al-search-card .al-search-check:hover {
        border-color: var(--main-bg-color, #006384);
        background-color: color-mix(in srgb, var(--main-bg-color, #006384) 5%, #ffffff);
    }

    .al-search-card .al-search-check .form-check-input {
        margin-left: 0;
        margin-top: 0;
        width: 1.05em;
        height: 1.05em;
        flex-shrink: 0;
        cursor: pointer;
        border-color: var(--checkbox-border-color, #ced4da);
    }

        .al-search-card .al-search-check .form-check-input:checked {
            background-color: var(--checkbox-checked-bg-color, var(--main-bg-color, #006384));
            border-color: var(--checkbox-checked-bg-color, var(--main-bg-color, #006384));
        }

    .al-search-card .al-search-check .form-check-label {
        cursor: pointer;
        margin-bottom: 0;
        font-size: 13px;
        color: #495057;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
    }

/* Empty-filter-button (Svuota) sui textarea telaio/targa/commissione:
   rimane outline danger ma con border-radius coerente */
.al-search-card .empty-filter-button {
    border-radius: 999px !important;
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Info block (icona info + span descrizione) per la tab "Scrivanie":
   pill compatto soft tinge mandante. Override del col-lg-8 di Bootstrap
   per non occupare l'intero 66.6% della row: width fit-content,
   flex: none, allineato alla base della select accanto. */
.al-search-card .al-info-block {
    padding: 9px 14px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--main-bg-color, #006384) 6%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--main-bg-color, #006384) 18%, #ffffff);
    color: #495057;
    font-size: 13.5px;
    line-height: 1.4;
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto !important;
    gap: 8px;
}

    .al-search-card .al-info-block .toTippyInner {
        color: var(--main-bg-color, #006384);
        font-size: 14px;
        flex-shrink: 0;
    }

    .al-search-card .al-info-block #custom-dashboard-info-text {
        color: #495057;
    }

    /* Quando .d-none e' rimosso dal JS, il blocco usa la classe
   align-items-center di Bootstrap. Forziamo display inline-flex
   cosi' il pill resta compatto e non si espande. */
    .al-search-card .al-info-block:not(.d-none) {
        display: inline-flex !important;
        align-items: center;
    }

/* DataTables search ("Cerca:") sotto la tabella dentro al-search-card:
   stessa cura degli input dei filtri (border-radius soft + tinge mandante) */
.al-search-card .dataTables_filter {
    margin-top: 6px;
    margin-bottom: 10px;
    color: #495057;
    font-size: 13px;
}

    .al-search-card .dataTables_filter label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 11.5px;
        font-weight: 600;
        color: #6c757d;
    }

    .al-search-card .dataTables_filter input,
    .al-search-card .dataTables_filter input[type="search"] {
        border-radius: 10px;
        padding: 6px 12px;
        border: 1px solid color-mix(in srgb, var(--main-bg-color, #006384) 25%, #ffffff);
        background-color: #ffffff;
        color: #495057;
        transition: border-color 150ms ease, box-shadow 150ms ease;
        margin-left: 4px;
        min-width: 220px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
        font-size: 13px;
    }

        .al-search-card .dataTables_filter input:hover {
            border-color: color-mix(in srgb, var(--main-bg-color, #006384) 45%, #ffffff);
        }

        .al-search-card .dataTables_filter input:focus {
            border-color: var(--form-control-border-color, var(--main-bg-color, #006384));
            box-shadow: 0 0 0 .2rem var(--form-control-boxshadow-color, rgba(13, 110, 253, .15));
            outline: none;
        }

/* Toolbar bottoni in fondo: gap e wrap eleganti */
.al-search-card .al-search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px !important;
}

/* Bottone Cerca primario: pill pieno mandante con icona lente */
.al-search-card .al-search-cta.btn.main-bg-button {
    border-radius: 999px !important;
    padding: 9px 28px !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

    .al-search-card .al-search-cta.btn.main-bg-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .al-search-card .al-search-cta.btn.main-bg-button:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

/* Bottoni "Ricerca avanzata" e "Legenda": pill outline mandante */
.al-search-card .al-search-secondary.btn.main-bg-button {
    border-radius: 999px !important;
    padding: 9px 22px !important;
    font-weight: 500;
    font-size: 14px;
    background-color: transparent !important;
    color: var(--main-bg-color, #006384) !important;
    border: 1.5px solid var(--main-bg-color, #006384) !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

    .al-search-card .al-search-secondary.btn.main-bg-button:hover {
        background-color: var(--main-button-hover-bg-color, var(--main-bg-color, #006384)) !important;
        color: var(--main-button-hover-font-color, #ffffff) !important;
        border-color: var(--main-button-hover-border-color, var(--main-bg-color, #006384)) !important;
        transform: translateY(-1px);
    }

    .al-search-card .al-search-secondary.btn.main-bg-button:active {
        transform: translateY(0);
    }

/* =============================================================
   Refactor filtri pagine di lista (VHM)
   Look "flat moderno" coerente con il restyling delle tabelle.
   - Override SOLO di .search-filters-container .al-card-accordion
     (pagine di lista) e .al-subcard* (filtri).
   - La dashboard #menu-generale-accordion e le card "Altre liste"
     (.al-card-accordion dentro #altre-liste-stack, non dentro
     .search-filters-container) restano intatte.
   - I CTA continuano a usare .main-bg-button (regola fondamentale
     [[main-bg-button-rule]]).
   ============================================================= */

/* Container filtri: max-width come .ordine-detail-app per coerenza editoriale */
.search-filters-container {
    max-width: 1640px;
    margin: 0 auto;
    padding: 18px 22px 0;
}

    /* Accordion outer: card neutra grigia chiara, niente accent forte.
   Scopato a .search-filters-container .al-card-accordion -> NON colpisce
   le card "Altre liste" della dashboard (ORDINI FORNITORE, AGICOR ecc.)
   che vivono in #altre-liste-stack senza .search-filters-container. */
    .search-filters-container .al-card-accordion .accordion-item {
        border: 1px solid #e7e4dc !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04), 0 4px 14px rgba(20, 18, 14, 0.05) !important;
    }

    /* Bottone accordion "Filtri": sabbia + testo neutro, allineato a sinistra */
    .search-filters-container .al-card-accordion .accordion-button {
        background-color: #efeee8 !important;
        background-image: none !important;
        color: #43413c !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 12px !important;
        padding: 12px 18px !important;
        border-bottom: 1px solid #e7e4dc !important;
        box-shadow: none !important;
        justify-content: flex-start !important;
    }

        .search-filters-container .al-card-accordion .accordion-button.collapsed {
            background-color: #efeee8 !important;
            color: #43413c !important;
            border-bottom: 1px solid #e7e4dc !important;
        }

        .search-filters-container .al-card-accordion .accordion-button:not(.collapsed) {
            background-color: #efeee8 !important;
            color: #43413c !important;
            border-bottom: 1px solid #e7e4dc !important;
        }

        .search-filters-container .al-card-accordion .accordion-button:focus {
            box-shadow: none !important;
            outline: none;
        }

    /* Body dell'accordion */
    .search-filters-container .al-card-accordion .accordion-body {
        padding: 18px !important;
        background: #ffffff;
    }

/* Sub-card filtri: card neutra, niente ombra ridondante dentro l'accordion */
.al-subcard {
    border: 1px solid #e7e4dc !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #ffffff;
}

.al-subcard-header {
    background: #ffffff;
    color: var(--main-bg-color, #3b4f7a) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e7e4dc !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
}

    .al-subcard-header > i {
        color: var(--main-bg-color, #3b4f7a);
        font-size: 14px;
    }

    /* Sottotitolo descrittivo agganciato all'icona FA della header.
   Va a capo grazie al flex-wrap + width:100% sullo pseudo. */
    .al-subcard-header::after {
        flex-basis: 100%;
        width: 100%;
        margin-top: 4px;
        font-size: 11.5px;
        font-weight: 400;
        color: #797668;
        text-transform: none;
        letter-spacing: 0;
        font-style: normal;
    }

    /* Quando la header e' centrata (es. .al-subcard-header.justify-content-center),
   anche il sottotitolo va centrato per allinearsi al titolo. */
    .al-subcard-header.justify-content-center::after {
        text-align: center !important;
    }

.al-subcard-header-cespite:has(.fa-magnifying-glass)::after {
    content: "Cerca per codice, telaio, targa, cliente";
}

.al-subcard-header-cespite:has(.fa-list-ul)::after {
    content: "Filtra per tipo, contratto, cliente, canale";
}

.al-subcard-header-cespite:has(.fa-car)::after {
    content: "Filtra per marca, modello, telaio, targa";
}

.al-subcard-header-cespite:has(.fa-user)::after {
    content: "Filtra per descrizione driver";
}

.al-subcard-header-cespite:has(.fa-flag)::after {
    content: "Filtra per stato, anomalia, data tassativa";
}

.al-subcard-header-cespite:has(.fa-handshake)::after {
    content: "Filtra per NDG, denominazione, partita IVA";
}

.al-subcard-header-cespite:has(.fa-id-card)::after {
    content: "Filtra per codice fiscale, partita IVA, denominazione";
}

.al-subcard-header-cespite:has(.fa-filter)::after {
    content: "Seleziona il tipo di cespite da visualizzare";
}

.al-subcard-header-cespite:has(.fa-circle-info)::after {
    content: "Filtra per i dati generali del cespite";
}

.al-subcard-header-cespite:has(.fa-building)::after {
    content: "Filtra per indirizzo, dati catastali, tipologia immobile";
}

.al-subcard-body {
    padding: 16px !important;
}

    /* Label uppercase grigio piccolo */
    .al-subcard-body .form-label {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #797668 !important;
        margin-bottom: 6px !important;
    }

/* =========================================================
   Label campi form - stile canonico UNIFICATO (progetto-wide)
   Uppercase + grigio muted #797668 + bold ~11px. Prima questo
   look esisteva solo dentro container specifici (.al-subcard-body,
   .modal .modal-body, .<app>-detail-app .od-acc-body, .gf-label):
   ogni label fuori da quei container restava con lo stile di
   default della sua classe (form-label default BS, bold-text/
   fw-bold solo bold, control-label BS3 non stilata). Questa
   regola globale allinea TUTTE le label dei campi.
   NB: le regole scoped sopra citate hanno specificita' maggiore
   e continuano a vincere dove presenti (stesso identico look) =>
   nessuna regressione e le eccezioni intenzionali (checkbox non
   uppercase, quotazione/importi, dark-mode, Wolfee) restano.
   Escluse qui le label di checkbox/radio (.form-check-label).
   ========================================================= */
.form-label:not(.form-check-label),
.control-label:not(.form-check-label),
label.bold-text:not(.form-check-label),
label.fw-bold:not(.form-check-label) {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #797668 !important;
    margin-bottom: 6px !important;
}

/* Form controls neutri, focus in colore mandante */
.al-subcard-body .form-control,
.al-subcard-body .form-select,
.al-subcard-body .select2-container--default .select2-selection--single {
    border-radius: 8px !important;
    border-color: #e7e4dc !important;
    background-color: #ffffff !important;
    font-size: 13px;
    box-shadow: none !important;
}

    .al-subcard-body .form-control:hover:not(:disabled):not(:read-only),
    .al-subcard-body .form-select:hover:not(:disabled) {
        border-color: #cfccc1 !important;
    }

    .al-subcard-body .form-control:focus,
    .al-subcard-body .form-select:focus,
    .al-subcard-body .select2-container--default.select2-container--focus .select2-selection--single,
    .al-subcard-body .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--main-bg-color, #3b4f7a) !important;
        box-shadow: 0 0 0 3px var(--form-control-boxshadow-color, rgba(59, 79, 122, 0.15)) !important;
    }

    .al-subcard-body .form-control:disabled,
    .al-subcard-body .form-control[readonly],
    .al-subcard-body .form-select:disabled {
        background-color: #faf9f5 !important;
        color: #797668 !important;
    }

/* Filtri rapidi checkbox come pill */
.al-subcard-body .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid #e7e4dc;
    border-radius: 999px;
    background: #ffffff;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .al-subcard-body .form-check:hover {
        border-color: #cfccc1;
        background: #faf9f5;
    }

.al-subcard-body .form-check-input {
    margin-top: 0 !important;
    margin-left: 0 !important;
    float: none !important;
}

.al-subcard-body .form-check-label {
    font-size: 13px;
    color: #43413c;
    margin-bottom: 0 !important;
    cursor: pointer;
}


@media (min-width: 768px) {
    /* CSS variables supportive — derivate dalle vars mandante via color-mix */
    .al-navbar-always-collapsed {
        --nav-bg-softer: color-mix( in srgb, var(--main-navbar-bg-color, #212529) 88%, #000 );
        --mandante-accent: var(--main-bg-color, #006384);
        --mandante-accent-soft: color-mix( in srgb, var(--main-bg-color, #006384) 18%, transparent );
        --mandante-accent-strong: color-mix( in srgb, var(--main-bg-color, #006384) 32%, transparent );
        --nav-radius-btn: 14px;
        --nav-radius-panel: 18px;
        --nav-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    }

        /* Hamburger toggler 44×44 outlined */
        .al-navbar-always-collapsed .navbar-toggler {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            padding: 0 !important;
            border-radius: 12px !important;
            border: 1.5px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 28%, transparent) !important;
            background: transparent !important;
            margin-right: 8px;
            transition: background-color 0.2s var(--nav-easing), border-color 0.2s var(--nav-easing);
        }

            /* .navbar-toggler.d-none (pagine pubbliche anonime, Site.Master.cs
           NascondiHamburgerPaginePubbliche) deve vincere sulla regola sopra: qui la
           specificità è più alta (3 classi contro 2) quindi basta questo, nessun !important extra. */
            .al-navbar-always-collapsed .navbar-toggler.d-none {
                display: none !important;
            }

            .al-navbar-always-collapsed .navbar-toggler:hover {
                background: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 8%, transparent) !important;
            }

            .al-navbar-always-collapsed .navbar-toggler[aria-expanded="true"] {
                border-color: var(--mandante-accent) !important;
                background: var(--mandante-accent-soft) !important;
            }

            .al-navbar-always-collapsed .navbar-toggler:focus {
                box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 18%, transparent) !important;
            }

        .al-navbar-always-collapsed .navbar-toggler-icon {
            width: auto;
            height: auto;
            background-image: none !important;
            color: var(--main-navbar-font-color, #ffffff);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

            .al-navbar-always-collapsed .navbar-toggler-icon i {
                color: var(--main-navbar-font-color, #ffffff);
                font-size: 18px;
            }

        /* navbar-left-list nascosta finché .show non è applicato */
        .al-navbar-always-collapsed .navbar-collapse:not(.show) #navbar-left-list {
            display: none !important;
        }

        /* Overlay full-width quando aperto */
        .al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list {
            display: flex !important;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            /* MOD: prima il pannello era full-width (right: 0) e lo sfondo teal
               riempiva tutto lo spazio vuoto a destra/sotto la colonna.
               Ora il pannello è largo quanto la colonna delle sezioni, così
               il celeste finisce dove finiscono le voci del menu.
               I fly-out di hover sono posizionati rispetto alla singola voce
               (left: calc(100% + 12px)) quindi restano invariati. */
            right: auto;
            width: -moz-fit-content;
            width: fit-content;
            z-index: 1040;
            background-color: var(--main-navbar-bg-color, #212529);
            /* MOD: angoli arrotondati come la card fly-out di hover (border-radius: 18px) */
            border-radius: 18px;
            /* MOD: navbar leggermente più stretta (richiesta "restringi appena"):
               ridotti padding destro e sinistro. Valore originale: 14px 28px 22px 116px */
            padding: 14px 24px 22px 96px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
            gap: 4px;
            margin: 0;
            max-width: 100%;
            flex-wrap: nowrap;
        }

            /* Items colonna 300px */
            .al-navbar-always-collapsed
            .navbar-collapse.show
            #navbar-left-list > li:not(.d-none) {
                width: 100%;
                /* MOD: navbar leggermente più stretta (richiesta "restringi appena").
                   Valore originale: max-width: 300px */
                max-width: 270px;
                display: flex !important;
                align-items: center;
                justify-content: flex-start;
                margin: 0 !important;
            }

        /* Categoria wrapper relative per fly-out absolute */
        .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category {
            width: 100%;
            position: relative !important;
            margin-bottom: 0;
        }

        /* Voci categoria — stile menu-item del design Anthropic */
        .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle {
            width: 100%;
            justify-content: flex-start !important;
            background-color: transparent !important;
            color: var(--main-navbar-font-color, #ffffff) !important;
            border: 0 !important;
            border-radius: var(--nav-radius-btn) !important;
            padding: 12px 14px !important;
            font-size: 14.5px !important;
            font-weight: 500 !important;
            pointer-events: auto !important;
            box-shadow: none !important;
            transition: background-color 0.18s var(--nav-easing), color 0.18s var(--nav-easing), box-shadow 0.18s var(--nav-easing);
        }

            /* Separatore tra voci rimosso: gli screen non mostrano linee tra le pill */

            /* Hover soft mandante */
            .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle:hover,
            .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle:focus {
                background-color: var(--mandante-accent-soft) !important;
                color: var(--main-navbar-font-color, #ffffff) !important;
                border-radius: var(--nav-radius-btn) !important;
                border-top-color: transparent !important;
            }

            /* Active (submenu aperto): pill fully rounded + teal pieno */
            .al-navbar-always-collapsed
            .navbar-collapse.show
            .navbar-menu-category.show > .navbar-menu-toggle,
            .al-navbar-always-collapsed
            .navbar-collapse.show
            .navbar-menu-toggle[aria-expanded="true"] {
                background-color: var(--mandante-accent, #2ec5e0) !important;
                /* NON --main-navbar-font-color: nelle mandanti a navbar chiara
                   (Alphabet, Athlon, Ayvens, FIH, Program) coincide con
                   --main-bg-color e il testo sparirebbe sulla pill accent.
                   La coppia select2-selected-option garantisce il contrasto. */
                color: var(--select2-selected-option-font-color, #ffffff) !important;
                border-radius: 999px !important;
                border-top-color: transparent !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
            }

            /* Freccia ▶ a destra (ruota 90° quando aperto) */
            .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle::after {
                display: inline-block;
                margin-left: auto;
                content: "";
                width: 0;
                height: 0;
                vertical-align: middle;
                border-top: 0.32em solid transparent;
                border-bottom: 0.32em solid transparent;
                border-left: 0.32em solid currentColor;
                border-right: 0;
                transition: transform 150ms ease, opacity 150ms ease;
            }

            .al-navbar-always-collapsed
            .navbar-collapse.show
            .navbar-menu-category.show > .navbar-menu-toggle::after,
            .al-navbar-always-collapsed
            .navbar-collapse.show
            .navbar-menu-toggle[aria-expanded="true"]::after {
                transform: rotate(90deg);
            }

        /* Sub-menu fly-out a destra del bottone categoria */
        .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown {
            display: block !important;
            visibility: hidden;
            opacity: 0;
            position: absolute !important;
            left: calc(100% + 12px) !important;
            top: 0 !important;
            right: auto !important;
            bottom: auto !important;
            float: none;
            width: 320px;
            min-width: 240px;
            max-width: none;
            margin: 0 !important;
            border-radius: var(--nav-radius-panel);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
            background-color: var(--nav-bg-softer);
            border: 1px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 8%, transparent);
            padding: 10px;
            transform: translateX(-6px);
            inset: auto !important;
            z-index: 1050;
            transition: opacity 0.25s var(--nav-easing), transform 0.25s var(--nav-easing), visibility 0s linear 0.25s;
        }

            .al-navbar-always-collapsed
            .navbar-collapse.show
            .navbar-menu-category.show > .navbar-menu-dropdown,
            .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown.show {
                display: flex !important;
                flex-direction: column !important;
                gap: 4px !important;
                visibility: visible;
                opacity: 1;
                transform: translateX(0);
                transition: opacity 0.25s var(--nav-easing), transform 0.25s var(--nav-easing), visibility 0s;
            }

            /* Counter-rule hover-open rimosso: ora il dropdown si apre solo via
     .show (click Bootstrap), quindi non serve sopprimere l'hover. */

            /* Sub-items del dropdown — dot indicator + padding-left shift su hover */
            .al-navbar-always-collapsed
            .navbar-collapse.show
            .navbar-menu-dropdown
            .dropdown-item.navbar-menu-link {
                display: flex !important;
                align-items: center;
                gap: 10px;
                width: 100%;
                margin-bottom: 0;
                padding: 10px 12px !important;
                color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 92%, transparent) !important;
                background-color: transparent !important;
                border: 0 !important;
                border-radius: 10px;
                font-size: 13.5px !important;
                font-weight: 500;
                transform: none !important;
                transition: background-color 0.18s var(--nav-easing), color 0.18s var(--nav-easing), padding-left 0.18s var(--nav-easing);
            }

                .al-navbar-always-collapsed
                .navbar-collapse.show
                .navbar-menu-dropdown
                .dropdown-item.navbar-menu-link::before {
                    content: "";
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 35%, transparent);
                    flex-shrink: 0;
                    transition: background-color 0.18s var(--nav-easing), transform 0.18s var(--nav-easing);
                }

                .al-navbar-always-collapsed
                .navbar-collapse.show
                .navbar-menu-dropdown
                .dropdown-item.navbar-menu-link:hover,
                .al-navbar-always-collapsed
                .navbar-collapse.show
                .navbar-menu-dropdown
                .dropdown-item.navbar-menu-link:focus {
                    background-color: var(--mandante-accent-soft) !important;
                    color: var(--main-navbar-font-color, #ffffff) !important;
                    padding-left: 16px !important;
                    transform: none !important;
                    box-shadow: none;
                }

                    .al-navbar-always-collapsed
                    .navbar-collapse.show
                    .navbar-menu-dropdown
                    .dropdown-item.navbar-menu-link:hover::before {
                        background: var(--mandante-accent) !important;
                        transform: scale(1.6);
                    }

        /* Container relative per ancorare l'overlay */
        .al-navbar-always-collapsed > .container-fluid {
            position: relative;
        }
}

@media (min-width: 768px) {
    .al-navbar-always-collapsed > .container-fluid {
        min-height: 68px;
        padding: 0 20px 0 28px;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* Dashboard pill trasparente + bordo bianco */
    #main-navbar .navbar-dashboard-link {
        height: 40px !important;
        padding: 0 16px !important;
        background-color: transparent !important;
        color: var(--main-navbar-font-color, #fff) !important;
        border: 1.5px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 28%, transparent) !important;
        box-shadow: none !important;
    }

        #main-navbar .navbar-dashboard-link:hover,
        #main-navbar .navbar-dashboard-link:focus,
        #main-navbar .navbar-dashboard-link.navbar-menu-active {
            background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 8%, transparent) !important;
            color: var(--main-navbar-font-color, #fff) !important;
            border-color: var(--mandante-accent, rgba(255, 255, 255, 0.55)) !important;
            box-shadow: none !important;
        }

    /* Language pill trasparente */
    #main-navbar #language-picker-button.btn {
        height: 40px !important;
        padding: 0 16px !important;
        background-color: transparent !important;
        color: var(--main-navbar-font-color, #fff) !important;
        border: 1.5px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 28%, transparent) !important;
        box-shadow: none !important;
    }

        #main-navbar #language-picker-button.btn:hover,
        #main-navbar #language-picker-button.btn:focus,
        #main-navbar #language-picker-button.btn.show,
        #main-navbar #language-picker-button.btn[aria-expanded="true"] {
            background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 8%, transparent) !important;
            color: var(--main-navbar-font-color, #fff) !important;
            border-color: var(--mandante-accent, rgba(255, 255, 255, 0.55)) !important;
            box-shadow: none !important;
        }

    /* Notifiche tondo 40x40 */
    #main-navbar #notizie-navbar-button.btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background-color: transparent !important;
        color: var(--main-navbar-font-color, #fff) !important;
        border: 1.5px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 28%, transparent) !important;
        box-shadow: none !important;
    }

        #main-navbar #notizie-navbar-button.btn:hover,
        #main-navbar #notizie-navbar-button.btn:focus,
        #main-navbar #notizie-navbar-button.btn:active,
        #main-navbar #notizie-navbar-button.btn.active {
            background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 8%, transparent) !important;
            color: var(--main-navbar-font-color, #fff) !important;
            border-color: var(--mandante-accent, rgba(255, 255, 255, 0.55)) !important;
            box-shadow: none !important;
            filter: none !important;
        }

    /* Badge notifiche pop-out top-right */
    #main-navbar #notizie-navbar-count:not(:empty) {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        left: auto !important;
        transform: none !important;
        min-width: 18px;
        height: 18px;
        padding: 0 5px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        background-color: var(--mandante-accent, #2ec5e0) !important;
        color: #fff !important;
        border: 2px solid var(--main-navbar-bg-color, #212529) !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* Logout — solo testo + icona, no bordo */
    #main-navbar #logout-button {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        background-color: transparent !important;
        color: var(--main-navbar-font-color, #fff) !important;
        border: 0 !important;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s var(--nav-easing, ease);
    }

        #main-navbar #logout-button:hover,
        #main-navbar #logout-button:focus {
            background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 8%, transparent) !important;
            color: var(--main-navbar-font-color, #fff) !important;
        }

    /* Cluster destro gap + centering */
    #main-navbar #navbar-right-list {
        align-items: center !important;
        gap: 10px;
    }

        #main-navbar #navbar-right-list > li {
            margin: 0 !important;
        }

    #main-navbar #notizie-navbar-button-block {
        position: relative;
    }

    #main-navbar #welcome-navbar-label {
        font-family: inherit;
    }
}

/* =============================================================
   §6 — ITER. 2 — Sub-panel titoli, card panel, icone 24x24, X morph
   ============================================================= */

@media (min-width: 768px) {
    /* Stile base titolo sub-panel — icona FA + titolo uppercase
     Font-family: FA Free per il glifo icona, fallback a Inter per il testo
     (FA Free copre solo Private Use Area, quindi i caratteri del titolo
     ricadono automaticamente su Inter). Font-weight: 900 per le icone solid;
     override a 400 per fa-regular (es. notizie). */
    .al-navbar-always-collapsed
    .navbar-collapse.show
    .navbar-menu-dropdown[data-section-title]::before {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px 12px;
        color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 70%, transparent);
        font-size: 13px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        font-weight: 900;
        border-bottom: 1px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 8%, transparent);
        margin-bottom: 8px;
        pointer-events: none;
        font-family: "Font Awesome 6 Free", "Inter", "Helvetica Neue", Arial, sans-serif;
    }

    /* Card panel rimosso: gli screen non mostrano un box attorno alle voci */
    .al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list > li {
        position: relative;
        z-index: 1;
    }

    /* Icone menu item — box 24x24 + gap 12px */
    .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle {
        gap: 12px !important;
    }

        .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle > i {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 !important;
            font-size: 15px;
            color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 85%, transparent);
            flex-shrink: 0;
            transition: color 0.18s var(--nav-easing, ease);
        }

        .al-navbar-always-collapsed
        .navbar-collapse.show
        .navbar-menu-toggle:hover > i,
        .al-navbar-always-collapsed
        .navbar-collapse.show
        .navbar-menu-category.navbar-menu-active > .navbar-menu-toggle > i {
            color: var(--main-navbar-font-color, #ffffff);
        }

        /* Pill accent aperta: icona a contrasto col colore mandante
           (su navbar chiare navbar-font == main-bg e sparirebbe) */
        .al-navbar-always-collapsed
        .navbar-collapse.show
        .navbar-menu-category.show > .navbar-menu-toggle > i,
        .al-navbar-always-collapsed
        .navbar-collapse.show
        .navbar-menu-toggle[aria-expanded="true"] > i {
            color: var(--select2-selected-option-font-color, #ffffff);
        }

    /* Hamburger morph in icona X */
    .al-navbar-always-collapsed
    .navbar-toggler[aria-expanded="true"]
    .navbar-toggler-icon
    i.fa-bars::before {
        content: "\f00d";
    }
}

/* =============================================================
   §7 — ITER. 3 — Fly-out a destra robusto (Popper OFF)
   I toggle nel markup hanno data-bs-display="static" → Popper
   disabilitato → posizionamento 100% CSS-driven.
   I dropdown hanno data-section-title="..." → titolo via attr().
   ============================================================= */

@media (min-width: 768px) {
    /* Posizionamento fly-out a destra del bottone categoria */
    .al-navbar-always-collapsed
    .navbar-collapse.show
    .navbar-menu-category > .navbar-menu-dropdown {
        position: absolute !important;
        top: 0 !important;
        left: calc(100% + 12px) !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        margin: 0 !important;
        transform: translateX(-6px) !important;
        transition: opacity 0.25s var(--nav-easing, ease), transform 0.25s var(--nav-easing, ease), visibility 0s linear 0.25s !important;
    }

    .al-navbar-always-collapsed
    .navbar-collapse.show
    .navbar-menu-category.show > .navbar-menu-dropdown,
    .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown.show {
        transform: translateX(0) !important;
        transition: opacity 0.25s var(--nav-easing, ease), transform 0.25s var(--nav-easing, ease), visibility 0s !important;
    }

    /* Categoria attiva sopra il card panel pseudo */
    .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category {
        position: relative !important;
        z-index: 2;
    }

        .al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category.show {
            z-index: 3;
        }

    /* Titolo sub-panel via attr(data-section-title) + icona FA per-categoria.
     Ogni override imposta l'Unicode FA corrispondente all'icona del toggle. */
    #navbar-cat-ordini .navbar-menu-dropdown::before {
        content: "\f570  " attr(data-section-title); /* fa-file-invoice */
    }

    #navbar-cat-veicoli .navbar-menu-dropdown::before {
        content: "\f1b9  " attr(data-section-title); /* fa-car */
    }

    #navbar-cat-richieste .navbar-menu-dropdown::before {
        content: "\f46d  " attr(data-section-title); /* fa-clipboard-list */
    }

    #navbar-cat-anagrafiche .navbar-menu-dropdown::before {
        content: "\f2b9  " attr(data-section-title); /* fa-address-book */
    }

    #navbar-cat-contratti .navbar-menu-dropdown::before {
        content: "\f56c  " attr(data-section-title); /* fa-file-contract */
    }

    /* [2026-08-05] Regola RIPRISTINATA. Era stata commentata il 30/07 quando la
       sezione "Cespiti" era diventata una voce dentro "Anagrafiche" (nessun
       sub-panel da decorare), poi il "clean del css morto" del 03/08 l'ha
       cancellata del tutto — ma nello stesso giorno la sezione di primo livello
       #navbar-cat-cespiti e' tornata in Site.Master, quindi il bersaglio esiste
       di nuovo e senza questa regola il fly-out sotto i 1200px mostra il titolo
       senza glifo. */
    #navbar-cat-cespiti .navbar-menu-dropdown::before {
        content: "\f468  " attr(data-section-title); /* fa-boxes-stacked */
    }

    /* [2026-08-05] Regola NUOVA: la sezione "Fatturazione"
       (#navbar-cat-fatturazione) e' nata il 03/08 senza la sua regola, quindi
       nel fly-out sotto i 1200px il pannello usciva senza glifo. Il codepoint
       corrisponde all'icona del toggle in Site.Master. */
    #navbar-cat-fatturazione .navbar-menu-dropdown::before {
        content: "\f571  " attr(data-section-title); /* fa-file-invoice-dollar */
    }

    #navbar-cat-faq .navbar-menu-dropdown::before {
        content: "\f059  " attr(data-section-title); /* fa-circle-question */
    }

    #navbar-cat-notizie .navbar-menu-dropdown::before {
        content: "\f1ea  " attr(data-section-title); /* fa-regular fa-newspaper */
        font-weight: 400;
    }

    #navbar-cat-wolfee .navbar-menu-dropdown::before {
        content: "\f3ed  " attr(data-section-title); /* fa-shield-halved */
    }

    #navbar-cat-gommisti .navbar-menu-dropdown::before {
        content: "\f1ce  " attr(data-section-title); /* fa-circle-notch */
    }

    #navbar-cat-agicor-admin .navbar-menu-dropdown::before {
        content: "\f1ad  " attr(data-section-title); /* fa-building */
    }

    #navbar-movimenti .navbar-menu-dropdown::before {
        content: "\f362  " attr(data-section-title); /* fa-right-left */
    }

    #navbar-cat-mobility .navbar-menu-dropdown::before {
        content: "\f4d7  " attr(data-section-title); /* fa-route */
    }

    #navbar-cat-aggiornamenti-massivi .navbar-menu-dropdown::before {
        content: "\f5fd  " attr(data-section-title); /* fa-layer-group */
    }

    #navbar-cat-manuali .navbar-menu-dropdown::before {
        content: "\f518  " attr(data-section-title); /* fa-book-open */
    }

    #navbar-cat-coc-online .navbar-menu-dropdown::before {
        content: "\f0a3  " attr(data-section-title); /* fa-certificate */
    }

    #navbar-cat-configurazioni .navbar-menu-dropdown::before {
        content: "\f1de  " attr(data-section-title); /* fa-sliders */
    }

    /* Hamburger X morph robusto — FA Solid weight 900 */
    .al-navbar-always-collapsed
    .navbar-toggler[aria-expanded="true"]
    .navbar-toggler-icon
    i.fa-bars,
    .al-navbar-always-collapsed
    .navbar-toggler[aria-expanded="true"]
    .navbar-toggler-icon
    i.fa-bars::before {
        font-weight: 900 !important;
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
    }
}

@media (min-width: 768px) {

    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category {
        position: relative !important;
        z-index: 2;
    }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category.show {
            z-index: 3;
        }

        /* Dropdown card: posizione fly-out a destra, sfondo teal scuro,
   nascosto di default, visibile solo con .show. */
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category > .navbar-menu-dropdown {
            position: absolute !important;
            top: 0 !important;
            left: calc(100% + 12px) !important;
            right: auto !important;
            bottom: auto !important;
            inset: auto !important;
            margin: 0 !important;
            float: none !important;
            width: 320px !important;
            min-width: 240px !important;
            max-width: none !important;
            padding: 10px !important;
            border: 1px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 10%, transparent) !important;
            border-radius: 18px !important;
            background-color: color-mix( in srgb, var(--main-navbar-bg-color, #0e6a7c) 78%, #000 22% ) !important;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
            display: none !important;
            visibility: hidden;
            opacity: 0;
            transform: translateX(-6px);
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 1050 !important;
        }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category.show > .navbar-menu-dropdown,
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown.show {
            display: flex !important;
            flex-direction: column !important;
            gap: 4px !important;
            visibility: visible !important;
            opacity: 1 !important;
            transform: translateX(0) !important;
        }

    /* Sub-item: pill trasparente con testo bianco (override del bianco base §2) */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown .dropdown-item.navbar-menu-link {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0 !important;
        padding: 10px 12px !important;
        background-color: transparent !important;
        color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 92%, transparent) !important;
        border: 0 !important;
        border-radius: 10px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        transform: none !important;
        box-shadow: none !important;
    }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown .dropdown-item.navbar-menu-link::before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 40%, transparent);
            flex-shrink: 0;
            transition: background-color 0.18s ease, transform 0.18s ease;
        }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover,
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown .dropdown-item.navbar-menu-link:focus {
            background-color: color-mix( in srgb, var(--main-bg-color, #2ec5e0) 22%, transparent ) !important;
            color: var(--main-navbar-font-color, #ffffff) !important;
            padding-left: 16px !important;
            transform: none !important;
            box-shadow: none !important;
        }

            #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover::before,
            #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown .dropdown-item.navbar-menu-link:focus::before {
                background: var(--main-bg-color, #2ec5e0);
                transform: scale(1.6);
            }

    /* =============================================================
   §9 — LAYOUT ROBUSTO + CHEVRON SU TUTTI I VIEWPORT
   Risolve l'overlap del dropdown sulla colonna:
   - Colonna ridotta a padding-left: 28px (era 116px per il card-panel rimosso)
   - LI con larghezza fissa 280px su tutti i viewport (no flex stretch)
   - Chevron Font Awesome (fa-chevron-right) sempre visibile vicino alla label,
     sostituisce il caret triangolare di Bootstrap
   ============================================================= */

    /* Colonna ridotta (no padding-left grande) — più spazio per il dropdown a destra */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list {
        padding: 14px 28px 22px 28px !important;
    }

        /* LI con larghezza fissa 280px sempre (forza il calc del fly-out).
   NB: NON usare `flex: 0 0 280px` in flex-column — verrebbe interpretato
   come flex-basis sull'asse main verticale (LI alti 280px). Usare solo
   width/max-width/min-width + flex: 0 0 auto per non vincolare l'altezza. */
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list > li:not(.d-none) {
            width: 280px !important;
            max-width: 280px !important;
            min-width: 280px !important;
            flex: 0 0 auto !important;
            height: auto !important;
            display: flex !important;
            align-items: center;
            margin: 0 !important;
        }

    /* Gap minimo tra categorie + niente padding-vertical eccessivo sulla colonna */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list {
        gap: 2px !important;
    }

    /* Look overlay (pill trasparente + testo bianco + icona visibile) anche
   sotto i 768px — §4 originale era dentro @media min-width: 768px, qui
   replichiamo le regole essenziali su ogni viewport. */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle {
        width: 100% !important;
        justify-content: flex-start !important;
        background-color: transparent !important;
        color: var(--main-navbar-font-color, #ffffff) !important;
        border: 0 !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        gap: 12px !important;
    }

        /* 2026-07-30 FIX "non si vede piu' l'hover sulle sezioni col menu aperto".
           Questa regola (1 id + 5 classi) e' quella che VINCE su tutte le altre
           dell'hover del titolo di sezione nel drawer, e tingeva la pillola con
           --main-bg-color al 18%. Ma il pannello del drawer ha come sfondo
           --main-navbar-bg-color e su parecchie mandanti le due variabili sono
           LO STESSO colore (Agita #00ad4e/#00ad4e, Arval #00885B/#00885B...):
           il 18% di un colore steso sopra lo stesso colore non si vede, quindi
           l'hover risultava del tutto assente. Misurato su tutti i temi in
           Content/GWTheme: 13 mandanti su 26 avevano hover invisibile (delta di
           colore ZERO rispetto al fondo) — Agita, AgosRenting, Arval, BIP, BMW,
           BPER, DarkRed, EsMobility, ItalRent, Kinto, Rent2Go, Unipol,
           Volkswagen. Le altre 13 (navbar chiara o accent diverso dalla navbar)
           lo vedevano gia' e NON regrediscono: il delta resta uguale o migliora.
           Ora la tinta si ricava da --main-navbar-font-color, cioe' dal colore
           del TESTO del pannello: per costruzione contrasta sempre con lo sfondo
           del pannello, quindi l'hover e' visibile su OGNI mandante senza
           override per-mandante. E' la stessa tecnica gia' usata piu' su per
           l'hover delle sotto-voci dei dropdown.
           Riga originale conservata, non eliminata:
           background-color: color-mix( in srgb, var(--main-bg-color, #2ec5e0) 18%, transparent ) !important; */
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle:hover,
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle:focus {
            background-color: color-mix( in srgb, var(--main-navbar-font-color, #ffffff) 18%, transparent ) !important;
            color: var(--main-navbar-font-color, #ffffff) !important;
        }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category.show > .navbar-menu-toggle,
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle[aria-expanded="true"] {
            background-color: var(--main-bg-color, #2ec5e0) !important;
            /* contrasto garantito anche dove navbar-font == main-bg (navbar chiare) */
            color: var(--select2-selected-option-font-color, #ffffff) !important;
            border-radius: 999px !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        }

        /* Icona a sinistra (24x24 box, bianca, sempre visibile) */
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle > i {
            width: 24px;
            height: 24px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            margin: 0 !important;
            font-size: 15px;
            color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 85%, transparent) !important;
            flex-shrink: 0;
        }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle:hover > i {
            color: var(--main-navbar-font-color, #ffffff) !important;
        }

        /* Pill accent aperta: icona a contrasto col colore mandante */
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category.show > .navbar-menu-toggle > i,
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle[aria-expanded="true"] > i {
            color: var(--select2-selected-option-font-color, #ffffff) !important;
        }

    /* Categoria position: relative su tutti i viewport (per ancorare il dropdown absolute) */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category {
        position: relative !important;
        width: 100%;
        margin-bottom: 0;
    }

    /* Chevron Font Awesome sul toggle — sostituisce il caret default Bootstrap.
   Indica all'utente che cliccando la categoria si aprirà il sotto-menu a destra. */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle::after {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-left: auto !important;
        width: auto !important;
        height: auto !important;
        border: 0 !important;
        vertical-align: baseline !important;
        content: "\f054" !important; /* fa-chevron-right */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 11px !important;
        color: currentColor !important;
        opacity: 0.65;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    /* Chevron più visibile sulla categoria attiva */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category.show > .navbar-menu-toggle::after,
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-toggle[aria-expanded="true"]::after {
        opacity: 1;
    }

    /* =============================================================
   §10 — POSIZIONAMENTO ESPLICITO DROPDOWN (final override)
   Usa valori pixel diretti invece di calc(100% + 12px). Il calc
   dipende dalla width del LI parent: se per qualunque motivo la
   width: 280px non risultasse applicata a runtime (override
   Bootstrap, flex stretch, ecc.) il fly-out cadrebbe a left:0.
   Con left:292px assoluto (=280px LI width + 12px gap) il dropdown
   sta sempre fuori dalla colonna a destra.
   ============================================================= */

    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category {
        position: relative !important;
    }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category > .navbar-menu-dropdown {
            left: 292px !important;
            top: 0 !important;
            right: auto !important;
            bottom: auto !important;
            inset: auto !important;
            margin: 0 !important;
            transform: none !important;
        }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-category.show > .navbar-menu-dropdown,
        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .navbar-menu-dropdown.show {
            left: 292px !important;
            top: 0 !important;
            transform: none !important;
        }

    /* =============================================================
       §11 — CAMPO "Cerca funzionalita'" DENTRO IL DRAWER (2026-07-30)
       ---------------------------------------------------------------
       Il campo di ricerca aveva stile SOLO in due posti: dentro
       @media (max-width: 767.98px) (drawer del telefono) e dentro
       @media (min-width: 1200px) (sidebar fissa). Nella fascia
       768-1199.98px — cioe' proprio il drawer che si apre con
       l'hamburger su tablet e a finestra ridotta/zoom 125% — non
       c'era NESSUNA regola: l'input restava il box grigio di
       default del browser e la lente, che e' position:absolute,
       non trovava un antenato posizionato nel proprio <li> (in
       questa modalita' position:relative e' messo solo sulle
       .navbar-menu-category) e finiva ancorata al pannello, cioe'
       FUORI dall'input, a sinistra. E' quello che si vede nello
       screenshot della segnalazione.
       Qui si replica il look della sidebar adattato al pannello
       scuro: colori derivati da --main-navbar-font-color, quindi
       validi sia sulle mandanti a navbar tinta sia su quelle a
       navbar bianca, senza override per-mandante.
       Specificita' 2 id + 4/5 classi: batte la regola generica
       "> li:not(.d-none) { display:flex !important }" di §9 (che
       resta a gestire larghezza e allineamento della riga).
       ============================================================= */

    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list > li.vhm-nav-search {
        position: relative;
    }

    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .vhm-nav-search input {
        width: 100%;
        height: 36px;
        padding: 0 14px 0 36px;
        border: 1px solid color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 26%, transparent);
        border-radius: 999px;
        background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 10%, transparent);
        color: var(--main-navbar-font-color, #ffffff);
        font-size: 13px;
        transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
    }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .vhm-nav-search input::placeholder {
            color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 60%, transparent);
        }

        #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .vhm-nav-search input:focus {
            outline: none;
            background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 16%, transparent);
            border-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 55%, transparent);
            box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 14%, transparent);
        }

    /* Lente dentro l'input (ora il <li> e' relative, vedi sopra) */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .vhm-nav-search .vhm-nav-search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 65%, transparent);
        font-size: 12px;
        pointer-events: none;
    }

    /* Messaggio "Nessuna funzionalita' trovata": nel drawer non aveva
       colore ne' spaziatura (le regole esistenti stanno nei due media
       agli estremi), quindi restava testo nudo. La sua VISIBILITA' e'
       gestita in fondo al file (blocco FIX 2026-07-30). */
    #main-navbar.al-navbar-always-collapsed .navbar-collapse.show .vhm-nav-search-empty {
        padding: 8px 14px;
        font-size: 12.5px;
        font-style: italic;
        color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 70%, transparent);
    }
}
/* end @media (min-width: 768px) - chiude §8+§9+§10+§11 OVERRIDE FINALE */


/* =============================================================
   Mobile: il navbar collassa sotto il breakpoint md (768px) di
   Bootstrap. In quella modalita' i dropdown devono diventare
   sezioni espandibili IN LINEA (position: static) per non
   sovrapporsi tra loro - non piu' position: absolute / hover.
   ============================================================= */
@media (max-width: 767.98px) {

    #main-navbar #navbar-left-list,
    #main-navbar #navbar-right-list {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        gap: 10px;
        margin: 0 !important;
    }

    /* Margin esplicito di backup tra le categorie: alcune regole legacy in
       main.css forzano i <li> a display:inline-block !important, e in alcuni
       browser/cache il `gap` del flex container puo' essere ignorato. Il
       margin-bottom diretto sull'item garantisce lo spazio in ogni caso. */
    #main-navbar .navbar-menu-category {
        width: 100%;
        position: static;
        margin-bottom: 10px !important;
    }

        #main-navbar .navbar-menu-category:last-child {
            margin-bottom: 0 !important;
        }

    /* Riga della Dashboard (unico <li> nella lista sinistra che NON e' una
       .navbar-menu-category): centriamo il pill orizzontalmente e aggiungiamo
       lo stesso margin-bottom delle categorie per uniformare la spaziatura.
       NOTA: main.css forza `.navbar-nav li:not(.d-none) { display: inline-block
       !important }` (specificita' 0,2,1 + !important) che vince sulla d-flex
       di Bootstrap. Forziamo display:flex con specificita' (2,1,1) per far
       funzionare justify-content. */
    #main-navbar #navbar-left-list > li:not(.navbar-menu-category) {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        width: 100%;
        margin-bottom: 10px !important;
    }

    /* === PILLOLA: stato default (bianca con bordo mandante) ===
       Stile applicato sia ai toggle delle categorie sia al link Dashboard
       (.navbar-dashboard-link) per coerenza visiva con lo screen di
       riferimento (pillole verticali full-width). */
    #main-navbar .navbar-menu-toggle,
    #main-navbar .navbar-dashboard-link {
        width: 100%;
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 10px 16px !important;
        border-radius: 999px !important;
        background-color: #ffffff !important;
        color: var(--main-button-hover-font-color, #006384) !important;
        border: 1px solid var(--main-button-hover-border-color, #006384) !important;
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

        /* === PILLOLA ATTIVA (pagina corrente) ===
       .navbar-menu-active e' settata da highlightActiveNavbarCategory()
       in ScriptsCustom/navbar-menu.js: rappresenta la pagina corrente. */
        #main-navbar .navbar-menu-category.navbar-menu-active > .navbar-menu-toggle,
        #main-navbar .navbar-dashboard-link.navbar-menu-active {
            background-color: var(--main-navbar-bg-color, #006384) !important;
            color: var(--main-navbar-font-color, #ffffff) !important;
            border-color: var(--main-navbar-bg-color, #006384) !important;
        }

        /* Dashboard: niente caret e ordinata come prima pillola in cima
       (order: -1 sul <li> parent dentro #navbar-right-list). */
        #main-navbar .navbar-dashboard-link::after {
            display: none !important;
        }

    #main-navbar #navbar-right-list > li:has(.navbar-dashboard-link) {
        order: -1;
    }

    /* Mostra una piccola freccia alla fine del toggle in versione mobile */
    #main-navbar .navbar-menu-toggle::after {
        display: inline-block;
        margin-left: auto;
        content: "";
        width: 0;
        height: 0;
        vertical-align: middle;
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-left: 0.3em solid transparent;
        transition: transform 150ms ease;
    }

    /* Freccia ruotata quando la categoria e' espansa */
    #main-navbar .navbar-menu-category.show > .navbar-menu-toggle::after,
    #main-navbar .navbar-menu-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Dropdown in linea, posizione statica, full-width, non assoluti.
       NOTA SPECIFICITA': main.css ha la regola `.navbar-collapse ul { display:
       inline-block !important }` in `@media (max-width: 768px)` (riga 516) che
       forzerebbe TUTTI i <ul> della navbar (incluse le nostre dropdown-menu) a
       essere visibili come inline-block - rompendo il collapse di default.
       Usiamo un selettore PIU' specifico (`#main-navbar .navbar-collapse
       ul.navbar-menu-dropdown` -> 121 punti vs 11 di main.css) per vincere. */
    #main-navbar .navbar-collapse ul.navbar-menu-dropdown {
        display: none !important;
        position: static !important;
        float: none !important;
        width: 100%;
        min-width: 0;
        margin-top: 6px !important;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        background-color: var(--main-navbar-bg-color, #006384) !important;
        border: 0;
        padding: 8px;
        transform: none !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

        /* Dropdown espanso: Bootstrap 5 aggiunge .show DIRETTAMENTE al .dropdown-menu
       (NON al <li>.dropdown padre). Targetiamo quindi il menu stesso e forziamo
       layout colonna verticale (una sotto-voce per riga). */
        #main-navbar .navbar-collapse ul.navbar-menu-dropdown.show {
            display: flex !important;
            flex-direction: column !important;
            gap: 4px !important;
        }

    /* Sub-items del dropdown: testo bianco su sfondo trasparente (il colore
       mandante e' sul container .navbar-menu-dropdown). Hover soft. */
    #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link {
        color: var(--main-navbar-font-color, #ffffff) !important;
        background-color: transparent !important;
        width: 100%;
        margin-bottom: 4px;
        border: 0 !important;
        border-radius: 8px !important;
    }

        #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover,
        #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:focus {
            background-color: color-mix(in srgb, var(--main-navbar-font-color, #ffffff) 12%, transparent) !important;
            color: var(--main-navbar-font-color, #ffffff) !important;
            transform: none !important;
        }

    /* Allineamento dei pulsanti laterali destri sotto la lista verticale */
    #main-navbar #welcome-navbar-button-block,
    #main-navbar #brand-main-image-block,
    #main-navbar #language-picker-block,
    #main-navbar #notizie-navbar-button-block {
        align-self: flex-start;
    }

    /* =========================================================
       COMPATTAZIONE MOBILE (2026-07-27)
       Sul telefono il drawer risultava troppo "grosso": le
       pillole ereditavano padding/font della versione desktop e
       il campo "Cerca funzionalita'" era un input senza stile.
       Le regole qui sotto NON sostituiscono quelle sopra: stanno
       DOPO nello stesso blocco @media, quindi vincono per ordine
       di cascata (stessa specificita' + stesso !important) e
       riducono solo le dimensioni. Nessuna classe/ID nuova.
       ========================================================= */

    /* Meno aria tra le voci: gap del flex container e margin di
       backup (vedi nota main.css piu' su) ridotti 10px -> 6px. */
    #main-navbar #navbar-left-list,
    #main-navbar #navbar-right-list {
        gap: 6px;
    }

    #main-navbar .navbar-menu-category {
        margin-bottom: 6px !important;
    }

    #main-navbar #navbar-left-list > li:not(.navbar-menu-category) {
        margin-bottom: 6px !important;
    }

    /* Pillole piu' basse e testo/icone piu' piccoli: padding
       10px 16px -> 6px 14px, font 13px -> 12.5px, icona a 12px. */
    #main-navbar .navbar-menu-toggle,
    #main-navbar .navbar-dashboard-link {
        padding: 6px 14px !important;
        gap: 6px;
        font-size: 12.5px;
        line-height: 1.3;
    }

        #main-navbar .navbar-menu-toggle i,
        #main-navbar .navbar-dashboard-link i {
            font-size: 12px;
        }

    /* Sotto-voci dei dropdown piu' compatte (base: 8px 12px / 13px). */
    #main-navbar .navbar-menu-dropdown .dropdown-item.navbar-menu-link {
        padding: 6px 10px !important;
        font-size: 12.5px;
    }

    /* ---- Campo "Cerca funzionalita'" nel drawer telefono ----
       Fuori dalla sidebar (>=1200px) l'input non aveva ALCUNO
       stile: box di default del browser con icona sganciata.
       Replichiamo in piccolo il look della sidebar (input pieno
       con lente dentro a sinistra). display:block !important con
       specificita' (2,1,1) per battere la regola display:flex
       !important dei li generici qui sopra e ottenere il
       posizionamento relativo dell'icona. */
    #main-navbar #navbar-left-list > li.vhm-nav-search {
        display: block !important;
        position: relative;
        width: 100%;
        margin-bottom: 8px !important;
    }

    #main-navbar .vhm-nav-search input {
        width: 100%;
        height: 34px;
        border: 1px solid #e0ddd2;
        border-radius: 999px;
        padding: 0 12px 0 34px;
        font-size: 12.5px;
        color: #43413c;
        background: #f7f5ef;
        transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
    }

        #main-navbar .vhm-nav-search input:focus {
            outline: none;
            background: #fff;
            border-color: var(--main-bg-color);
            box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--main-bg-color) 16%, transparent);
        }

    #main-navbar .vhm-nav-search .vhm-nav-search-icon {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #9b978a;
        font-size: 12px;
        pointer-events: none;
    }

    /* Messaggio "nessun risultato": dimensioni coerenti col resto. */
    #main-navbar .vhm-nav-search-empty.vhm-nav-search-empty-show {
        padding: 6px 12px;
        font-size: 12px;
        color: #9b978a;
    }
}

/* =============================================================
   TIPPY REWORK — tema soft per-mandante (solo grafica).
   Prefisso [data-tippy-root] per battere in specificità il CSS
   di default iniettato a runtime dal bundle tippy (senza
   !important); i temi page-scoped già esistenti
   (GestioneFAQ.css / GestioneCategorie.css) usano body:has() +
   !important e restano quindi prioritari sulle loro pagine.
   La tinta deriva da --main-bg-color (custom-variables.css del
   mandante): cambia mandante -> cambia tinta, senza JS.
   ============================================================= */
[data-tippy-root] .tippy-box {
    background-color: #ffffff;
    background-color: color-mix(in srgb, var(--main-bg-color, #595959) 6%, #ffffff);
    color: var(--main-font-color, #212529);
    border: 1px solid color-mix(in srgb, var(--main-bg-color, #595959) 22%, #ffffff);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(33, 37, 41, 0.05), 0 14px 36px rgba(33, 37, 41, 0.16);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

[data-tippy-root] .tippy-content {
    padding: 8px 12px;
}

/* Freccia dello stesso colore della superficie, per ogni placement
   (la prima dichiarazione è il fallback senza color-mix) */
[data-tippy-root] .tippy-box[data-placement^="top"] > .tippy-arrow::before {
    border-top-color: #ffffff;
    border-top-color: color-mix(in srgb, var(--main-bg-color, #595959) 6%, #ffffff);
}

[data-tippy-root] .tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
    border-bottom-color: #ffffff;
    border-bottom-color: color-mix(in srgb, var(--main-bg-color, #595959) 6%, #ffffff);
}

[data-tippy-root] .tippy-box[data-placement^="left"] > .tippy-arrow::before {
    border-left-color: #ffffff;
    border-left-color: color-mix(in srgb, var(--main-bg-color, #595959) 6%, #ffffff);
}

[data-tippy-root] .tippy-box[data-placement^="right"] > .tippy-arrow::before {
    border-right-color: #ffffff;
    border-right-color: color-mix(in srgb, var(--main-bg-color, #595959) 6%, #ffffff);
}

/* Confirm dialog (tippyConfirmDialog): bottone pill soft */
[data-tippy-root] .tippy-box .confirm-button-container {
    margin-top: 8px;
}

    [data-tippy-root] .tippy-box .confirm-button-container .btn {
        border-radius: 50rem;
        padding: 0.25rem 1.1rem;
        font-size: 12.5px;
        font-weight: 600;
        transition: all 140ms ease;
    }

    /* Conferme di eliminazione: rosso tenue che si riempie all'hover */
    [data-tippy-root] .tippy-box .confirm-button-container .btn-danger {
        background-color: #f8e2e2;
        border-color: #f8e2e2;
        color: #c63b3b;
    }

        [data-tippy-root] .tippy-box .confirm-button-container .btn-danger:hover {
            background-color: #c63b3b;
            border-color: #c63b3b;
            color: #ffffff;
        }

/* Rete di sicurezza anti-sbordamento (il posizionamento e' gia' vincolato al
   viewport da vhmTippyPopperOptions() in main-Functions.js): qui si copre
   quello che il solo posizionamento non puo' fare. */

/* Contenuti che non possono forzare la larghezza oltre la finestra:
   il testo va a capo anche su parole/URL senza spazi. */
[data-tippy-root] .tippy-box {
    overflow-wrap: anywhere;
}

/* Guardia sull'altezza: un tooltip molto lungo si limita al viewport invece
   di sbordare sopra/sotto. Sta su .tippy-content e non su .tippy-box perche'
   .tippy-arrow e' figlia di .tippy-box e un overflow li' la taglierebbe.
   Nei tooltip interactive (confirm dialog) lo scroll e' anche usabile. */
[data-tippy-root] .tippy-content {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* =============================================================
   SVUOTA REWORK — bottoni "Svuota" dei filtri veicolo (classe
   .empty-filter-button: VeicoliList.aspx + PagesListCustom.aspx).
   Pill soft danger con icona gomma (fa-eraser) aggiunta via
   ::before in puro CSS: markup, ID e JS (handler
   onClickEmptyFilterButton) restano intatti.
   I colori ridefiniscono le CSS vars --bs-btn-* di Bootstrap 5.3
   così hover/active/focus/disabled restano coerenti senza
   !important; solo il padding lo richiede perché nel markup ci
   sono le utility py-0/px-1 (che usano !important).
   ============================================================= */
.btn.empty-filter-button {
    --bs-btn-color: #c63b3b;
    --bs-btn-bg: #fdf0f0;
    --bs-btn-border-color: #f5d8d8;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #c63b3b;
    --bs-btn-hover-border-color: #c63b3b;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #b23333;
    --bs-btn-active-border-color: #b23333;
    --bs-btn-focus-shadow-rgb: 198, 59, 59;
    --bs-btn-disabled-color: #d8a0a0;
    --bs-btn-disabled-bg: #fdf0f0;
    --bs-btn-disabled-border-color: #f5d8d8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 10px !important;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.6;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

    /* Icona "gomma" (fa-eraser), coerente con i bottoni "Svuota filtri"
       già presenti nelle altre liste */
    .btn.empty-filter-button::before {
        content: "\f12d";
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
        font-weight: 900;
        font-size: 10px;
        line-height: 1;
    }

    .btn.empty-filter-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(198, 59, 59, 0.25);
    }

    .btn.empty-filter-button:active {
        transform: translateY(0);
        box-shadow: none;
    }

/* =============================================================
   MICRO-ANIMAZIONI bottoni "indietro" (freccia) e "aggiungi" (+)
   delle testate pagina (es. AnagraficheList: a.btn-outline-secondary
   + #new-anagrafica-button). Solo CSS sulle ICONE interne e sul
   feedback di pressione: aspetto a riposo, posizione nel layout,
   ID e funzionamento invariati. I bottoni .disabled non animano
   (Bootstrap mette pointer-events: none).
   ============================================================= */
.btn > .fa-arrow-left,
.btn > .fa-plus {
    display: inline-block;
    transition: transform 180ms ease;
}

/* hover: la freccia "torna indietro", il + ruota con un leggero pop */
.btn:hover > .fa-arrow-left {
    transform: translateX(-3px);
}

.btn:hover > .fa-plus {
    transform: rotate(90deg) scale(1.15);
}

/* pressione: il bottone si comprime appena e rimbalza al rilascio
   (transform: non sposta il layout, la posizione resta identica) */
.btn:has(> .fa-arrow-left),
.btn:has(> .fa-plus) {
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:active:has(> .fa-arrow-left),
.btn:active:has(> .fa-plus) {
    transform: scale(0.92);
}

/* accessibilità: nessuna animazione per chi la disattiva da OS */
@media (prefers-reduced-motion: reduce) {
    .btn > .fa-arrow-left,
    .btn > .fa-plus,
    .btn:has(> .fa-arrow-left),
    .btn:has(> .fa-plus) {
        transition: none;
    }

    .btn:hover > .fa-arrow-left,
    .btn:hover > .fa-plus,
    .btn:active:has(> .fa-arrow-left),
    .btn:active:has(> .fa-plus) {
        transform: none;
    }
}

/* =====================================================================
   SIDEBAR FISSA A SINISTRA (Parte A — 2026-07-24)
   ---------------------------------------------------------------------
   Trasforma il menu di navigazione (#navbar-left-list) da pannello
   flottante (aperto dall'hamburger) a SIDEBAR fissa, chiara, sempre
   visibile a sinistra su desktop (>= 768px). Le categorie diventano
   ACCORDION IN-PLACE (i sotto-menu si aprono sotto, non piu' come
   fly-out a destra). In alto un campo "Cerca funzionalita'".

   Attivazione: la classe .al-navbar-sidebar viene aggiunta a #main-navbar
   via JS (checkNavbarVisibility in navbar-menu.js) SOLO quando l'utente e'
   loggato e ha scelto una mandante. Cosi' su login / pre-mandante resta il
   comportamento vecchio (solo top bar) e non compare una colonna vuota.

   La barra in alto resta invariata graficamente: aggiungiamo solo
   position:sticky (per tenerla allineata alla sidebar durante lo scroll)
   e nascondiamo l'hamburger su desktop (la sidebar e' sempre aperta).

   NB: il vecchio blocco "pannello flottante" (.al-navbar-always-collapsed
   .navbar-collapse.show ...) resta piu' su NON modificato: su schermi sotto
   il breakpoint la sidebar non si attiva, quindi il menu TORNA ad hamburger
   dall'alto (comportamento originale) su tablet e schermi piccoli.

   BREAKPOINT: la sidebar fissa parte da >= 1200px (desktop/laptop). Sotto
   (tablet portrait/landscape fino a ~1180px e mobile) resta l'hamburger.
   ===================================================================== */

/* Regole base (a ogni larghezza) per il filtro di ricerca, cosi' funziona
   anche nel drawer hamburger su tablet/mobile. */
.vhm-nav-hidden {
    display: none !important;
}

.vhm-nav-search-empty {
    display: none;
}

/* 2026-07-27: su mobile (<=768px) main.css forza
   ".navbar-nav li:not(.d-none) { display: inline-block !important }"
   (specificita' 0,2,1 + !important): vinceva sia sul display:none qui sopra
   sia sullo stile inline di jQuery .toggle(), quindi "Nessuna funzionalita'
   trovata" restava SEMPRE visibile nel drawer anche a ricerca vuota (e le
   voci filtrate con .vhm-nav-hidden non si nascondevano). L'ID #main-navbar
   (1,1,x) batte quella regola a qualsiasi larghezza. La visibilita' del
   messaggio ora e' gestita a classe (.vhm-nav-search-empty-show, applicata
   da navbar-menu.js) e non piu' con jQuery .toggle(). */
#main-navbar li.vhm-nav-hidden {
    display: none !important;
}

#main-navbar .vhm-nav-search-empty {
    display: none !important;
}

    #main-navbar .vhm-nav-search-empty.vhm-nav-search-empty-show {
        display: block !important;
    }

/* 2026-07-27 (riordino menu generale): separatori di gruppo (.vhm-nav-divider)
   tra i blocchi di sezioni. Di default NASCOSTI ovunque (drawer hamburger su
   tablet/mobile compreso): l'ID #main-navbar batte la regola di main.css
   ".navbar-nav li:not(.d-none) { display:inline-block !important }". Vengono
   mostrati solo in modalita' sidebar (regola nel blocco @media qui sotto). */
#main-navbar li.vhm-nav-divider {
    display: none !important;
}

@media (min-width: 1200px) {

    :root {
        --vhm-sidebar-w: 274px; /* larghezza sidebar */
        --vhm-topbar-h: 68px; /* altezza barra in alto (min-height esistente) */
    }

    /* Niente scrollbar orizzontale DI PAGINA in modalita' sidebar: l'overflow
       sul body si propaga al viewport e la elimina alla radice. La classe
       vhm-has-sidebar e' gestita da navbar-menu.js insieme ad al-navbar-sidebar.
       Le tabelle continuano a scrollare nel proprio wrapper (Tables.css). */
    body.vhm-has-sidebar {
        overflow-x: hidden;
    }

    /* 2026-07-29 — FIX "dislivello tra sidebar e navbar AL PRIMO CARICAMENTO".
       SINTOMO: fascia vuota di 14px (colore pagina) tra il bordo inferiore della
       barra in alto e la cima del pannello bianco della sidebar; spariva
       ridimensionando la finestra o cambiando lo zoom.
       CAUSA: la sidebar e' fixed con top/height presi da --vhm-topbar-h, che
       navbar-menu.js scrive MISURANDO la barra al DOM-ready
       (vhmSyncNavbarHeightVar). Ma il padding verticale della barra veniva
       azzerato solo dalla classe .al-navbar-sidebar, che arriva molto dopo
       (checkNavbarVisibility(), chiamata dopo l'AJAX dei permessi in
       login-registration.js). Quindi la misura valeva 82px = 68 (min-height del
       .container-fluid) + 7+7 di --bs-navbar-padding-y (0.5rem con
       "html { font-size: 14px }" di main.css), mentre la barra finiva a 68px:
       14px di scarto. E non si autocorreggeva perche' un cambio di SOLO padding
       non fa scattare il ResizeObserver (verificato in Chrome: nessun callback,
       ne' osservando il content-box ne' il border-box) -> la variabile restava
       a 82px finche' non si ridimensionava la finestra.
       FIX: il padding verticale va azzerato SUBITO, senza aspettare la classe.
       Cosi' la barra e' 68px dal primo paint, la misura non puo' piu' divergere
       e anche il fallback CSS --vhm-topbar-h: 68px qui sopra e' corretto se il
       JS non gira. 1 id: batte .navbar di Bootstrap senza !important.
       padding-x non si tocca (in Bootstrap 5 --bs-navbar-padding-x e' gia' 0,
       quindi il vecchio "padding: 0px 0px" era equivalente a questo).
       NB: dentro @media (min-width: 1200px) -> sotto i 1200px (hamburger +
       drawer) la barra resta com'era. Su login/pre-mandante la barra passa da
       84 a 68px, cioe' alla stessa altezza delle pagine loggate. */
    #main-navbar {
        padding-top: 0;
        padding-bottom: 0;
    }

        /* Barra in alto: la rendiamo sticky solo in modalita' sidebar, cosi'
       resta ancorata e allineata alla colonna fissa anche scrollando.
       Nessun cambiamento di colore/contenuto. */
        #main-navbar.al-navbar-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1030;
            /* 2026-07-29: spostato sulla regola #main-navbar qui sopra (non piu'
           condizionato alla classe), vedi il commento del fix. Riga originale
           conservata: */
            /* padding: 0px 0px; */
        }

            /* Su desktop la sidebar e' sempre visibile => hamburger inutile */
            #main-navbar.al-navbar-sidebar .navbar-toggler {
                display: none !important;
            }

            /* #navbar-left-list diventa la colonna fissa chiara.
       IMPORTANTE: il selettore include #main-navbar + .navbar-collapse per
       avere specificita' (2 id) MAGGIORE della regola preesistente
       ".al-navbar-always-collapsed .navbar-collapse:not(.show) #navbar-left-list
       { display:none !important }" (1 id), altrimenti la lista resterebbe
       nascosta perche' su desktop il collapse non ha .show. */
            #main-navbar.al-navbar-sidebar .navbar-collapse #navbar-left-list {
                position: fixed;
                top: var(--vhm-topbar-h);
                left: 0;
                width: var(--vhm-sidebar-w);
                height: calc(100vh - var(--vhm-topbar-h));
                overflow-y: auto;
                overflow-x: hidden;
                display: flex !important;
                flex-direction: column;
                /* nowrap: la regola generica "#main-navbar #navbar-left-list
           { flex-wrap: wrap }" farebbe andare le voci su una seconda
           colonna invece di scrollare */
                flex-wrap: nowrap !important;
                gap: 2px;
                margin: 0;
                padding: 14px 12px 24px;
                background: #ffffff;
                border-right: 1px solid #e7e4da;
                box-shadow: 2px 0 10px rgba(0, 0, 0, 0.04);
                z-index: 1029;
                list-style: none;
            }

            /* Scrollbar sottile */
            #main-navbar.al-navbar-sidebar #navbar-left-list::-webkit-scrollbar {
                width: 8px;
            }

            #main-navbar.al-navbar-sidebar #navbar-left-list::-webkit-scrollbar-thumb {
                background: #d8d4c8;
                border-radius: 8px;
            }

            /* Il contenuto pagina (.body-content e' sibling di #main-navbar) si
       sposta a destra della sidebar. width:auto evita l'overflow
       orizzontale di .container-fluid (che sarebbe width:100% + margin). */
            #main-navbar.al-navbar-sidebar ~ .body-content {
                margin-left: var(--vhm-sidebar-w);
                width: auto !important;
                /* niente scrollbar orizzontale della pagina: eventuali sfori
           (canvas, righe negative) restano clippati; le tabelle hanno gia'
           lo scroll interno sul proprio wrapper (standard Tables.css).
           "clip" non crea un nuovo scroll-container (fallback: hidden). */
                overflow-x: hidden;
                overflow-x: clip;
            }

            /* ---- Campo "Cerca funzionalita'" (in alto nella sidebar) ---- */
            #main-navbar.al-navbar-sidebar .vhm-nav-search {
                position: relative;
                margin: 2px 4px 10px;
            }

                #main-navbar.al-navbar-sidebar .vhm-nav-search input {
                    width: 100%;
                    height: 40px;
                    border: 1px solid #e0ddd2;
                    border-radius: 12px;
                    padding: 0 12px 0 38px;
                    font-size: 13.5px;
                    color: #43413c;
                    background: #f7f5ef;
                    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
                }

                    #main-navbar.al-navbar-sidebar .vhm-nav-search input:focus {
                        outline: none;
                        background: #fff;
                        border-color: var(--main-bg-color);
                        box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--main-bg-color) 16%, transparent);
                    }

                #main-navbar.al-navbar-sidebar .vhm-nav-search .vhm-nav-search-icon {
                    position: absolute;
                    left: 13px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #9b978a;
                    font-size: 13px;
                    pointer-events: none;
                }

            /* Messaggio "nessun risultato" della ricerca */
            #main-navbar.al-navbar-sidebar .vhm-nav-search-empty {
                display: none;
                padding: 8px 12px;
                font-size: 12.5px;
                color: #9b978a;
            }

            /* ---- Voce categoria (header dell'accordion) ---- */
            /* display:block !important: main.css forza
       ".navbar-nav li:not(.d-none) { display:inline-block !important }";
       serve il nostro !important per vincere e impilare le voci. */
            /* 2026-07-29 — AGGIUNTO :not(.d-none). Il selettore originale era
       "#main-navbar.al-navbar-sidebar #navbar-left-list > li" e, avendo 2 id, con
       !important batteva ".d-none { display:none !important }" di Bootstrap, che di
       classi ne ha una: in modalita' sidebar (>= 1200px) le sezioni nascoste dal
       filtro di ruolo/permesso restavano quindi VISIBILI a schermo. Il calcolo di
       checkNavbarVisibility era corretto, non lo era il rendering — difetto
       preesistente, misurato: sezione con d-none e computed display:block, alta 41px.
       Le regole sorelle di questo stesso file (righe ~3312 e ~4002) usano gia'
       ":not(.d-none)": qui era stato dimenticato.
       ATTENZIONE a non aggiungere altri :not(): ogni :not(.classe) alza la
       specificita' di una classe, e la regola della riga di ricerca piu' in basso
       ("> li.vhm-nav-search { display:flex !important }", 2 id + 2 classi) conta
       proprio sul fatto di batterla. Con un secondo :not() questa regola vinceva e
       la riga di ricerca perdeva il flex: input e bottone comprimi andavano a capo.
       Verificato a schermo. */
            #main-navbar.al-navbar-sidebar #navbar-left-list > li:not(.d-none) {
                width: 100%;
                position: relative;
                display: block !important;
            }

            /* 2026-07-29 — il messaggio "Nessuna funzionalita' trovata" si vedeva in
       fondo alla sidebar anche senza ricerca in corso: la regola che lo nasconde
       (piu' su, ".al-navbar-sidebar .vhm-nav-search-empty { display:none }", senza
       !important) perdeva contro il display:block !important della regola generica
       qui sopra. Difetto preesistente, visto a schermo. Si chiude qui con una regola
       di pari specificita' ma successiva nell'ordine del file, senza toccare la
       regola generica. La variante "-show", con una classe in piu', continua a
       vincere quando il filtro di ricerca la applica. */
            #main-navbar.al-navbar-sidebar #navbar-left-list > li.vhm-nav-search-empty {
                display: none !important;
            }

                #main-navbar.al-navbar-sidebar #navbar-left-list > li.vhm-nav-search-empty.vhm-nav-search-empty-show {
                    display: block !important;
                }

            /* 2026-07-27 (riordino menu generale): separatore di gruppo, linea sottile
       tra i blocchi di sezioni della sidebar. Specificita' (2 id + classe)
       superiore sia alla regola "> li" qui sopra sia a main.css. */
            #main-navbar.al-navbar-sidebar #navbar-left-list > li.vhm-nav-divider {
                display: block !important;
                /* 2026-07-27 FIX "linee non visibili su alcune mandanti":
           #navbar-left-list e' un flex column ad altezza fissa
           (height: calc(100vh - topbar)); quando le voci sfondano l'altezza dello
           schermo il flex-shrink di DEFAULT (flex: 0 1 auto) comprime gli elementi.
           Le voci di categoria sono protette dal proprio testo (min-height:auto =
           altezza del contenuto), ma questo li e' VUOTO: altezza minima 0, quindi
           veniva schiacciato da 1px a 0 e la linea spariva. I margini invece non si
           comprimono -> restava lo spazio fra i gruppi ma senza riga. Succedeva solo
           sulle mandanti con molte sezioni visibili (lista in overflow/scroll), non
           su quelle con poche voci. flex:0 0 auto disattiva la compressione. */
                flex: 0 0 auto;
                width: auto;
                height: 1px;
                margin: 9px 6px;
                padding: 0;
                background: #e7e4da;
            }

                /* 2026-07-29 (riordino per famiglie): separatore SPENTO perche' il gruppo
       che dovrebbe delimitare e' vuoto per questo utente. Lo decide
       vhmSpegniSeparatoriOrfani in navbar-menu.js, dopo il calcolo dei permessi.
       Serve una classe dedicata e non .d-none: la regola del separatore qui sopra
       ha 2 id + classe e batterebbe .d-none, che di classi ne ha una. */
                #main-navbar.al-navbar-sidebar #navbar-left-list > li.vhm-nav-divider.vhm-nav-divider-vuoto {
                    display: none !important;
                }

            /* Con una ricerca attiva nel campo "Cerca funzionalita'" i separatori
       spariscono (le categorie filtrate si nascondono e le linee resterebbero
       orfane). Solo sui browser che supportano :has(); altrove restano
       visibili durante la ricerca, senza altri effetti. */
            #main-navbar.al-navbar-sidebar:has(#navbar-feature-search:not(:placeholder-shown)) #navbar-left-list > li.vhm-nav-divider {
                display: none !important;
            }

            #main-navbar.al-navbar-sidebar .navbar-menu-toggle {
                /* CRUCIALE: il vecchio menu desktop apriva su HOVER e disabilitava i
           click con "#main-navbar .navbar-menu-toggle { pointer-events:none }".
           Nella sidebar le sezioni si aprono al CLICK (accordion), quindi i
           click vanno riabilitati, altrimenti le categorie sono morte. */
                pointer-events: auto !important;
                display: flex !important;
                align-items: center;
                gap: 11px;
                width: 100%;
                justify-content: flex-start !important;
                background: transparent !important;
                color: #43413c !important;
                border: 0 !important;
                border-radius: 11px !important;
                padding: 10px 12px !important;
                font-size: 14px !important;
                font-weight: 600 !important;
                box-shadow: none !important;
                transition: background-color 0.16s, color 0.16s;
            }

                /* Icona della categoria (prima <i> dentro il toggle) */
                #main-navbar.al-navbar-sidebar .navbar-menu-toggle > i:first-child {
                    width: 20px;
                    text-align: center;
                    font-size: 15px;
                    color: #7d7a6f;
                    flex-shrink: 0;
                    transition: color 0.16s;
                }

                #main-navbar.al-navbar-sidebar .navbar-menu-toggle:hover,
                #main-navbar.al-navbar-sidebar .navbar-menu-toggle:focus {
                    background: #f1efe7 !important;
                    color: #1f1e1a !important;
                }

                    #main-navbar.al-navbar-sidebar .navbar-menu-toggle:hover > i:first-child {
                        color: var(--main-bg-color);
                    }

                /* Categoria aperta (.show) o attiva (pagina corrente): tinta mandante */
                #main-navbar.al-navbar-sidebar .navbar-menu-category.show > .navbar-menu-toggle,
                #main-navbar.al-navbar-sidebar .navbar-menu-toggle[aria-expanded="true"],
                #main-navbar.al-navbar-sidebar .navbar-menu-category.navbar-menu-active > .navbar-menu-toggle {
                    background: color-mix(in srgb, var(--main-bg-color) 12%, transparent) !important;
                    color: var(--main-bg-color) !important;
                }

                    #main-navbar.al-navbar-sidebar .navbar-menu-category.show > .navbar-menu-toggle > i:first-child,
                    #main-navbar.al-navbar-sidebar .navbar-menu-toggle[aria-expanded="true"] > i:first-child,
                    #main-navbar.al-navbar-sidebar .navbar-menu-category.navbar-menu-active > .navbar-menu-toggle > i:first-child {
                        color: var(--main-bg-color);
                    }

                /* Chevron a destra: triangolo che ruota 90 gradi in apertura */
                #main-navbar.al-navbar-sidebar .navbar-menu-toggle::after {
                    display: inline-block;
                    margin-left: auto;
                    content: "";
                    width: 0;
                    height: 0;
                    border-top: 0.3em solid transparent;
                    border-bottom: 0.3em solid transparent;
                    border-left: 0.34em solid currentColor;
                    border-right: 0;
                    opacity: 0.55;
                    transition: transform 0.16s ease;
                }

                #main-navbar.al-navbar-sidebar .navbar-menu-category.show > .navbar-menu-toggle::after,
                #main-navbar.al-navbar-sidebar .navbar-menu-toggle[aria-expanded="true"]::after {
                    transform: rotate(90deg);
                }

            /* ---- Sotto-menu: ACCORDION IN-PLACE (non fly-out a destra) ----
       Forziamo position:static cosi' il dropdown scorre nel flusso e
       "spinge" le voci sotto (effetto accordion). Neutralizziamo il
       posizionamento inline di Bootstrap/Popper (transform/inset). */
            #main-navbar.al-navbar-sidebar .navbar-menu-dropdown {
                position: static !important;
                float: none !important;
                transform: none !important;
                inset: auto !important;
                display: none !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: none !important;
                border: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
                margin: 2px 0 4px 22px !important;
                padding: 0 0 2px 0 !important;
                border-left: 2px solid #ece9df !important;
                list-style: none;
            }

                #main-navbar.al-navbar-sidebar .navbar-menu-category.show > .navbar-menu-dropdown,
                #main-navbar.al-navbar-sidebar .navbar-menu-dropdown.show {
                    display: block !important;
                }

                /* Il vecchio fly-out stampava il TITOLO della sezione dentro il pannello
       via ::before (regole "#navbar-cat-* .navbar-menu-dropdown::before
       { content: '\fXXX' attr(data-section-title) }", §7). Nell'accordion
       della sidebar il titolo e' gia' l'header cliccabile: il ::before
       duplicava il nome ("[] Ordini"). Lo spegniamo per tutte le categorie. */
                #main-navbar.al-navbar-sidebar .navbar-menu-dropdown::before {
                    content: none !important;
                    display: none !important;
                }

                /* Sotto-voci: indentate, con pallino guida a sinistra */
                #main-navbar.al-navbar-sidebar .navbar-menu-dropdown .dropdown-item.navbar-menu-link {
                    display: flex !important;
                    align-items: center;
                    gap: 9px;
                    width: 100%;
                    padding: 8px 12px !important;
                    color: #605d54 !important;
                    background: transparent !important;
                    border: 0 !important;
                    border-radius: 9px;
                    font-size: 13px !important;
                    font-weight: 500;
                    white-space: normal;
                    transition: background-color 0.16s, color 0.16s, padding-left 0.16s;
                }

                    #main-navbar.al-navbar-sidebar .navbar-menu-dropdown .dropdown-item.navbar-menu-link::before {
                        content: "";
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background: #cdc9bc;
                        flex-shrink: 0;
                        transition: background-color 0.16s, transform 0.16s;
                    }

                    #main-navbar.al-navbar-sidebar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover,
                    #main-navbar.al-navbar-sidebar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:focus {
                        background: color-mix(in srgb, var(--main-bg-color) 10%, transparent) !important;
                        color: var(--main-bg-color) !important;
                        padding-left: 16px !important;
                    }

                        #main-navbar.al-navbar-sidebar .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover::before {
                            background: var(--main-bg-color);
                            transform: scale(1.5);
                        }

            /* ==============================================================
       2026-07-27 — FIX "clicco la sezione e il pannello non compare".
       RETE DI SICUREZZA: la causa vera e' tolta lato JS (vedi
       vhmCloseCollapseInSidebarMode in navbar-menu.js).

       Lo stato che rompeva tutto: l'utente apre l'hamburger sotto i
       1200px (fra 768 e 1199px e' l'unico modo di vedere il menu) e poi
       allarga la finestra o riporta lo zoom da 125% a 100%. Bootstrap
       NON chiude il collapse al resize, quindi la classe .show resta
       appiccicata a .navbar-collapse anche in modalita' sidebar — e
       sopra i 1200px l'hamburger e' display:none, quindi non lo si puo'
       nemmeno richiudere a mano.
       Da li' in poi i selettori del vecchio drawer fly-out (§8, riga
       ~3818: "#main-navbar.al-navbar-always-collapsed
       .navbar-collapse.show ...", 1 id + 5 classi) battono per
       specificita' le regole della sidebar (1 id + 2/3 classi) e
       rispediscono il pannello a "position:absolute; left: calc(100% +
       12px)", cioe' FUORI da #navbar-left-list, che ha
       overflow-x:hidden: il titolo si illumina, il chevron ruota, ma il
       pannello e' clippato e non si vede niente. Si "auto-riparava" al
       primo click nella pagina (navbar-menu.js chiude il collapse), da
       cui l'impressione di un difetto intermittente.

       Qui ripetiamo le regole della sidebar facendo passare il
       selettore dentro #navbar-left-list: 2 id, quindi vincono sul
       drawer qualunque sia l'ordine nel file.
       ============================================================== */
            #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown {
                position: static !important;
                float: none !important;
                transform: none !important;
                inset: auto !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                display: none !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: none !important;
                border: 0 !important;
                border-left: 2px solid #ece9df !important;
                border-radius: 0 !important;
                background: transparent !important;
                background-color: transparent !important;
                box-shadow: none !important;
                margin: 2px 0 4px 22px !important;
                padding: 0 0 2px 0 !important;
            }

                #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-category.show > .navbar-menu-dropdown,
                #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown.show {
                    display: block !important;
                }

                /* Senza queste il drawer lascerebbe le sotto-voci col testo BIANCO
       (color: var(--main-navbar-font-color, #ffffff), riga ~3862) su
       sfondo chiaro: pannello visibile ma illeggibile. */
                #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown .dropdown-item.navbar-menu-link {
                    padding: 8px 12px !important;
                    margin: 0 !important;
                    color: #605d54 !important;
                    background: transparent !important;
                    background-color: transparent !important;
                    border-radius: 9px !important;
                    font-size: 13px !important;
                }

                    #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown .dropdown-item.navbar-menu-link::before {
                        background: #cdc9bc;
                    }

                    #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover,
                    #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown .dropdown-item.navbar-menu-link:focus {
                        background-color: color-mix(in srgb, var(--main-bg-color) 10%, transparent) !important;
                        color: var(--main-bg-color) !important;
                        padding-left: 16px !important;
                    }

                        #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown .dropdown-item.navbar-menu-link:hover::before,
                        #main-navbar.al-navbar-sidebar .navbar-collapse.show #navbar-left-list .navbar-menu-dropdown .dropdown-item.navbar-menu-link:focus::before {
                            background: var(--main-bg-color);
                        }

            #main-navbar.al-navbar-sidebar .vhm-nav-hidden {
                display: none !important;
            }
}

#main-navbar .vhm-sidebar-collapse-btn {
    display: none !important;
}

@media (min-width: 1200px) {

    :root {
        --vhm-sidebar-w-collapsed: 68px; /* larghezza sidebar a sole icone */
    }

    /* Transizione morbida di larghezza sidebar / margine contenuto
       (regole additive: si sommano a quelle della Parte A qui sopra). */
    #main-navbar.al-navbar-sidebar .navbar-collapse #navbar-left-list {
        transition: width 0.18s ease, padding 0.18s ease;
    }

    #main-navbar.al-navbar-sidebar ~ .body-content {
        transition: margin-left 0.18s ease;
    }

    /* La riga .vhm-nav-search diventa flex: input (che si restringe) +
       bottone a destra, alla stessa altezza. Specificita' 2 id + 2 classi:
       batte il display:block !important della regola generica "> li". */
    #main-navbar.al-navbar-sidebar #navbar-left-list > li.vhm-nav-search {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

        /* In flex l'input cede spazio al bottone (il width:100% della
           regola della Parte A resta come base ma puo' restringersi) */
        #main-navbar.al-navbar-sidebar #navbar-left-list > li.vhm-nav-search input {
            flex: 1 1 auto;
            min-width: 0;
        }

    #main-navbar.al-navbar-sidebar .vhm-sidebar-collapse-btn {
        display: flex !important; /* !important: batte il none di base qui sopra */
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 1px solid #e0ddd2;
        border-radius: 10px;
        background: #f7f5ef;
        color: #7d7a6f;
        font-size: 13px;
        cursor: pointer;
        transition: background-color 0.16s, color 0.16s, border-color 0.16s;
    }

        #main-navbar.al-navbar-sidebar .vhm-sidebar-collapse-btn:hover,
        #main-navbar.al-navbar-sidebar .vhm-sidebar-collapse-btn:focus {
            background: #f1efe7;
            color: var(--main-bg-color);
            border-color: color-mix(in srgb, var(--main-bg-color) 35%, #e0ddd2);
            outline: none;
        }

        /* La doppia freccia "<<" ruota e diventa ">>" quando compressa */
        #main-navbar.al-navbar-sidebar .vhm-sidebar-collapse-btn > i {
            transition: transform 0.18s ease;
        }

    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .vhm-sidebar-collapse-btn > i {
        transform: rotate(180deg);
    }

    /* ---- Stato COMPRESSO: colonna stretta, solo icone ---- */
    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .navbar-collapse #navbar-left-list {
        width: var(--vhm-sidebar-w-collapsed);
        padding-left: 8px;
        padding-right: 8px;
    }

    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed ~ .body-content {
        margin-left: var(--vhm-sidebar-w-collapsed);
    }

    /* Riga ricerca da compressa: colonna centrata con bottone comprimi
       SOPRA e lente sotto; l'input sparisce (non c'e' spazio). */
    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed #navbar-left-list > li.vhm-nav-search {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        margin: 2px 0 10px;
    }

        #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed #navbar-left-list > li.vhm-nav-search input {
            display: none;
        }

    /* Il bottone resta in cima alla colonna (nel sorgente e' DOPO
           l'input: order lo riporta sopra la lente) */
    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .vhm-sidebar-collapse-btn {
        order: -1;
    }

    /* La lente diventa un bottone-tile cliccabile (stesso look del bottone
       comprimi): il click riapre il menu' completo e mette il focus sulla
       ricerca (handler in navbar-menu.js). Da espansa resta la piccola
       icona decorativa dentro l'input (pointer-events:none, position
       absolute della Parte A). */
    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .vhm-nav-search .vhm-nav-search-icon {
        position: static;
        transform: none;
        pointer-events: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 1px solid #e0ddd2;
        border-radius: 10px;
        background: #f7f5ef;
        color: #7d7a6f;
        font-size: 13px;
        transition: background-color 0.16s, color 0.16s, border-color 0.16s;
    }

        #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .vhm-nav-search .vhm-nav-search-icon:hover {
            background: #f1efe7;
            color: var(--main-bg-color);
            border-color: color-mix(in srgb, var(--main-bg-color) 35%, #e0ddd2);
        }

    /* Header categoria a sola icona: font-size 0 nasconde il testo (e' un
       nodo testo puro dentro l'<a>, non selezionabile via CSS) e azzera
       anche il chevron ::after (dimensionato in em); l'icona riprende la
       sua dimensione con la regola sotto. */
    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .navbar-menu-toggle {
        font-size: 0 !important;
        justify-content: center !important;
        gap: 0;
        padding: 11px 0 !important;
    }

        #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .navbar-menu-toggle > i:first-child {
            font-size: 16px;
            width: auto;
            margin: 0 !important; /* annulla il me-1 di Bootstrap */
        }

        #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed .navbar-menu-toggle::after {
            display: none;
        }

    /* Da compressa nessun accordion puo' restare aperto (navbar-menu.js li
       chiude gia' al click sul bottone; questa regola e' la cintura di
       sicurezza per stati .show residui). */
    #main-navbar.al-navbar-sidebar.vhm-sidebar-collapsed #navbar-left-list .navbar-menu-dropdown {
        display: none !important;
    }
}

/* 2026-07-27 FIX (scoperto validando il bottone comprimi): in modalita'
   sidebar la regola "#main-navbar.al-navbar-sidebar #navbar-left-list > li
   { display:block !important }" (2 id) BATTE le regole di nascondimento
   "#main-navbar li.vhm-nav-hidden" / "#main-navbar .vhm-nav-search-empty"
   (1 id): su desktop >=1200px le categorie filtrate dalla ricerca restavano
   visibili e "Nessuna funzionalita' trovata" era SEMPRE visibile. Queste
   regole hanno 2 id e vengono DOPO nel file, quindi vincono; fuori dalla
   sidebar duplicano solo i default gia' corretti (innocue). */
#main-navbar #navbar-left-list > li.vhm-nav-hidden {
    display: none !important;
}

#main-navbar #navbar-left-list > li.vhm-nav-search-empty {
    display: none !important;
}

    #main-navbar #navbar-left-list > li.vhm-nav-search-empty.vhm-nav-search-empty-show {
        display: block !important;
    }

/* =====================================================================
   2026-07-30 FIX — "cercando appare 'Nessuna funzionalita' trovata' ma le
   altre sezioni non spariscono".
   ---------------------------------------------------------------------
   Le regole di nascondimento qui sopra (2 id + 1 classe = 2,1,1) sono
   state scavalcate da DUE regole di layout, e in entrambe le modalita'
   del menu il filtro di ricerca aveva quindi smesso di nascondere le
   sezioni:

   1) SIDEBAR FISSA (>= 1200px) — regola "…al-navbar-sidebar
      #navbar-left-list > li:not(.d-none) { display:block !important }".
      Il 29/07 le e' stato aggiunto ":not(.d-none)" (per far valere il
      d-none dei permessi) e cosi' e' passata da (2,0,1) a (2,2,1),
      superando le regole di nascondimento che prima batteva di poco.
      Effetto collaterale non previsto: da quel commit, digitando nel
      campo di ricerca le sezioni filtrate restavano tutte al loro posto
      mentre in fondo compariva "Nessuna funzionalita' trovata".

   2) DRAWER HAMBURGER (768-1199.98px) — regola §9
      "…al-navbar-always-collapsed .navbar-collapse.show
      #navbar-left-list > li:not(.d-none) { display:flex !important }",
      che con (2,4,1) le batteva da sempre: nel drawer il difetto e'
      quindi precedente al 29/07 (ed e' la modalita' dello screenshot
      della segnalazione, riconoscibile dal chevron ">" a destra).

   Si chiude alzando la specificita' delle sole regole di nascondimento,
   una per modalita', senza toccare le due regole di layout (che servono
   e sono richiamate da altri commenti in questo file):
     - ramo sidebar: (2,3,1) contro (2,2,1);
     - ramo drawer:  (2,5,1) contro (2,4,1).
   ":not(.d-none)" serve solo ad alzare di una classe la specificita': le
   voci con d-none sono gia' escluse dalle regole di layout, quindi
   restano nascoste dal .d-none di Bootstrap come prima.

   Nello stesso giro vengono riportati sotto controllo nel drawer anche
   il messaggio di ricerca vuota (era SEMPRE visibile in fondo al
   pannello, anche senza ricerca in corso, per lo stesso motivo) e i
   separatori di gruppo, che fuori dalla sidebar non vanno mostrati
   (vedi la regola "#main-navbar li.vhm-nav-divider" piu' su).
   ===================================================================== */

/* --- Sezioni/voci filtrate dalla ricerca --- */
#main-navbar.al-navbar-sidebar #navbar-left-list > li.vhm-nav-hidden:not(.d-none),
#main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list > li.vhm-nav-hidden:not(.d-none) {
    display: none !important;
}

/* --- "Nessuna funzionalita' trovata" nel drawer: spento di default,
       acceso solo dalla classe che applica navbar-menu.js --- */
#main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list > li.vhm-nav-search-empty:not(.d-none) {
    display: none !important;
}

#main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list > li.vhm-nav-search-empty.vhm-nav-search-empty-show:not(.d-none) {
    display: block !important;
}

/* --- Separatori di gruppo: solo sidebar, mai nel drawer --- */
#main-navbar.al-navbar-always-collapsed .navbar-collapse.show #navbar-left-list > li.vhm-nav-divider:not(.d-none) {
    display: none !important;
}