/* =====================================================================
   draive.sidebar.css — LA colonna di navigazione, tutta qui dentro
   ---------------------------------------------------------------------
   Prima del 2026-08-08 le regole della sidebar stavano in quattro posti:

     draive.core.css  231-611    blocco "05 — SIDEBAR / ASIDE"
     draive.core.css  ~7745      @media (min-width:1025px), la card flottante
     draive.core.css  ~10015     @media (max-width:1024px), il drawer mobile
     skins/aside/dark.css   un TERZO sistema, Metronic 8 (.menu .menu-link)
                            su un markup che non esiste piu' da anni, piu'
                            .kt-aside{background:#1E1E2D!important;
                            width:280px!important} che litigava con le due
                            dichiarazioni di draive.core.css

   Si contraddicevano: #kt_aside{width:272px} contro
   .kt-aside{width:var(--aside-w)!important}, .kt-aside--minimize
   #kt_aside{width:84px} contro body.kt-aside--minimize{--aside-w:60px}.
   Vinceva l'ordine di caricamento, non una decisione. Le tre regole
   morte sono state cancellate, non sovrascritte: questo file e' l'unico
   posto in cui la sidebar ha un aspetto, e il link a skins/aside/dark.css
   e' stato tolto da includes/header.php.

   Si carica DOPO draive.core.css (vedi l'ordine dichiarato in header.php)
   perche' e' un componente condiviso: sta sopra le globali storiche senza
   doverle riscrivere, e quindi senza !important — l'unico rimasto e' sul
   padding di .kt-wrapper, dove il bundle Metronic dichiara gia' a sua
   volta con !important.

   La struttura e' due colonne, e dal 2026-08-09 due SUPERFICI:
     RAIL      64px, sempre visibile, appoggiata NUDA sul fondo pagina
               (#F6F7FB): emblema, macro-aree e — solo a colonna chiusa —
               l'avatar. Nessuno sfondo proprio: e' la card nera che se
               ne e' andata, non un bianco aggiunto.
     PANNELLO  216px, l'area selezionata: LUI e' la card nera, con tutti
               e quattro gli angoli stondati e l'ombra. Chiudersi vuol
               dire ridursi a larghezza zero dietro la rail.
   64 + 216 = 280px, esattamente la larghezza di prima: nessuna pagina si
   sposta per via di questo refactoring.
   ===================================================================== */

/* =====================================================================
   1 — IL GUSCIO
   ===================================================================== */

/* La doppia selezione pareggia ".kt-aside--fixed .kt-aside" (0,2,0) di
   style.bundle.css: senza, il bundle vince sulla posizione e la colonna
   torna incollata al bordo.
   Niente sfondo, niente ombra: il contenitore e' solo GEOMETRIA. La card
   — nero, raggio, ombra — e' .dv-panel, cosi' la rail resta appoggiata
   sul fondo pagina e il pannello ha i suoi quattro angoli. */
.kt-aside,
.kt-aside--fixed .kt-aside {
  position: fixed;
  left: var(--aside-inset);
  top: var(--aside-inset);
  bottom: var(--aside-inset);
  width: var(--aside-w);
  background: transparent;
  border: 0;
  border-radius: var(--aside-radius);
  box-shadow: none;
  /* visible: il pulsante di collapse sporge dal bordo destro, e l'ombra
     della card e' del pannello. */
  overflow: visible;
  padding: 0;
  transition: width var(--aside-motion);
}

/* Nessun overflow:hidden: gli angoli se li ritaglia il pannello, che ha
   gia' il suo (serve all'animazione di larghezza), e qui taglierebbe via
   la SUA ombra. */
.dv-aside {
  display: flex;
  height: 100%;
}

/* Il contenuto principale si allarga INSIEME alla colonna: stessa durata
   e stessa curva, altrimenti si vede la sidebar arrivare prima e il
   contenuto rincorrerla.
   Il rientro e' dichiarato SENZA media query e annullato piu' sotto per
   il mobile: le due @media di prima (min-width:1025px e max-width:1024px)
   lasciavano scoperte le larghezze frazionarie in mezzo, che con lo zoom
   del browser capitano davvero.
   !important: il bundle Metronic dichiara questo padding a sua volta con
   !important, ed e' l'unico punto del file in cui serve. */
.kt-wrapper,
body.kt-aside--minimize .kt-wrapper,
body.kt-aside--minimize-hover .kt-wrapper {
  padding-left: calc(var(--aside-w) + var(--aside-inset) * 2) !important;
  transition: padding-left var(--aside-motion);
}

/* =====================================================================
   2 — RAIL: le macro-aree
   ===================================================================== */

/* I pulsanti della colonna sono <button> veri — servono per la tastiera.
   draive.core.css dichiarava su OGNI <button> dell'applicazione
   "body .btn, body button, body .kt-btn { border-radius:8px!important;
   padding:0 15px!important; margin:0 2px!important }": su un pulsante
   quadrato da 40px quel padding lasciava 10px utili e le iniziali
   dell'avatar, flex item, si comprimevano a 18px invece di 34.
   Quella regola e' stata RIMOSSA il 2026-08-08 (il blocco DRAIVE BUTTONS
   in coda a draive.core.css veste solo .btn): questo pareggio resta come
   cintura di sicurezza a costo zero, non piu' come necessita'. */
.dv-rail__btn,
.dv-collapse {
  padding: 0 !important;
  margin: 0 !important;
}

/* Il raggio di .dv-rail__btn non si dichiara qui: e' asimmetrico
   (blocco 2b) e una cintura con !important lo riappiattirebbe su tutti
   e quattro gli angoli. */
.dv-collapse { border-radius: 0 !important; }

.dv-rail {
  flex: 0 0 var(--aside-rail-w);
  width: var(--aside-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 12px;
  /* nudo sul fondo pagina: la rail non e' una card, e' il margine
     abitato della finestra */
  background: transparent;
}

/* width:100% come .dv-rail__nav, e per lo stesso motivo: la rail centra
   i figli sull'asse trasversale, quindi un figlio senza larghezza si
   stringe sul proprio contenuto. Senza questa riga il "width:100%"
   dell'emblema qui sotto sarebbe circolare e collasserebbe sui 26px
   dell'immagine. */
.dv-rail__brand {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 10px;
}

/* L'emblema si vede SOLO a colonna chiusa: aperta, al suo posto si legge
   il marchio per esteso nell'intestazione del pannello, e logo.svg
   contiene gia' l'emblema come lettera "a". Lo SPAZIO pero' resta
   occupato in tutti e due gli stati — via opacity, non display — se no le
   nove icone scivolerebbero di 50px ad ogni collapse.
   visibility e non solo opacity: un link invisibile ma raggiungibile col
   Tab e' peggio di un link assente. */
/* Largo quanto la rail, come le linguette: a 43px un riquadro da 40
   lascerebbe 1,5px per parte e sembrerebbe incastrato. Non si vede
   niente comunque — l'emblema non ha sfondo, la sua scatola esiste solo
   per l'anello di focus — e cosi' l'immagine da 26px cade sulla stessa
   verticale delle icone di macro-area. */
.dv-rail__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: var(--aside-item-radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}

body.kt-aside--minimize .dv-rail__mark {
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms ease 100ms, visibility 0s;
}

/* durante l'anteprima il pannello e' aperto, quindi si legge il marchio
   per esteso e l'emblema torna a nascondersi: sono la stessa cosa */
body.kt-aside--minimize-hover .dv-rail__mark {
  opacity: 0;
  visibility: hidden;
}

.dv-rail__mark img {
  width: 26px;
  height: auto;
}

.dv-rail__mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dv-rail__nav {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Le icone al centro dell'altezza disponibile, fra l'emblema in alto e
     l'avatar in fondo.
     SAFE center, non center: in un contenitore che puo' scorrere,
     centrare fa traboccare il contenuto anche dalla parte della
     partenza, e le prime icone diventano irraggiungibili perche' lo
     scroll non va sotto zero. Con "safe" il centramento si spegne da
     solo appena lo spazio manca e la rail torna a scorrere dall'alto.
     Se un browser non conoscesse la parola chiave scarterebbe l'intera
     dichiarazione, tornando all'allineamento in alto: si perde il
     centramento, non si rompe niente. */
  justify-content: safe center;
  gap: 4px;
  padding: 2px 0;
  overflow-y: auto;
  /* la barra di scorrimento della rail non si vede mai: sono nove icone,
     scorrono solo su schermi molto bassi */
  scrollbar-width: none;
}

.dv-rail__nav::-webkit-scrollbar { width: 0; height: 0; }

/* Il tablist delle aree (2026-10-05): sta dentro .dv-rail__nav perche'
   sotto Support c'e' la lente della ricerca, che non e' un tab (blocco
   11). Stessa colonna e stesso passo di prima: chi scorre e centra resta
   .dv-rail__nav, qui si ripete solo l'impilamento. */
.dv-rail__tabs {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}


/* 2b — LE LINGUETTE
   ---------------------------------------------------------------------
   Il pulsante di macro-area occupa la rail INTERA: parte a filo del suo
   bordo sinistro — cioe' a --aside-inset dal bordo finestra — e arriva a
   toccare la card nera. Gli angoli di destra restano vivi, quelli di
   sinistra no: e' l'unica differenza fra "un bottone vicino al pannello"
   e "una linguetta attaccata al pannello", e la si legge solo
   sull'area attiva, che e' l'unica piena.

   L'icona non si sposta di un pixel rispetto al bottone da 40px che
   c'era prima: era centrata in una rail di 64, ed e' centrata in una
   linguetta di 64. Emblema e avatar restano 40x40 centrati — sono
   marchi, non linguette, e il loro centro cade sulla stessa verticale. */
.dv-rail__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--aside-item-radius) 0 0 var(--aside-item-radius);
  background: transparent;
  color: var(--rail-icon);
  cursor: pointer;
  transition: background-color var(--motion-base), color var(--motion-base),
              border-radius var(--aside-motion);
}

/* A colonna CHIUSA non c'e' nessuna card a cui agganciarsi: la linguetta
   torna un riquadro con quattro angoli stondati. Il raggio e' in
   transizione con la stessa durata della colonna, quindi l'angolo destro
   si squadra mentre il pannello esce e si arrotonda mentre rientra: la
   linguetta sembra agganciarsi e sganciarsi, non cambiare forma.
   --minimize-hover e' ESCLUSA di proposito: li' il pannello e' aperto
   (in sovrapposizione, ma aperto), quindi la card c'e' e la linguetta
   deve restare attaccata. Metronic scambia le due classi all'ingresso
   del mouse, e la forma cambia esattamente insieme al pannello. */
body.kt-aside--minimize .dv-rail__btn {
  border-radius: var(--aside-item-radius);
}

.dv-rail__btn i { font-size: calc(20px * var(--dv-fs,1)); line-height: 1; }

.dv-rail__btn:hover {
  background: var(--rail-hover);
  color: var(--rail-icon-strong);
}

/* accent, non --nav-focus: quell'azzurro e' tarato per leggersi sul
   nero, e la rail adesso sta sul chiaro.
   L'anello e' INTERNO: la linguetta tocca la card da una parte e il
   bordo finestra dall'altra, quindi un offset positivo finirebbe sotto
   il nero a destra e fuori dalla finestra a sinistra. */
.dv-rail__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Il quadrato nero dell'area selezionata e' lo stesso nero dell'azione:
   sul fondo chiaro e' l'unico pieno della rail, e si vede da lontano. */
.dv-rail__btn--on,
.dv-rail__btn--on:hover {
  background: var(--rail-on-bg);
  color: var(--rail-on-icon);
}

/* Nella rail NON c'e' nessun avatar (2026-08-09). Il profilo si vede
   solo a colonna aperta, nel piede del pannello nero, dove sta accanto
   al nome e al ruolo e si capisce di chi e'. A colonna chiusa non c'e':
   un avatar da solo su una rail di icone non dice niente che l'utente
   non sappia gia', e i suoi 50px di altezza servono di piu' alle
   macro-aree. Il pulsante e il suo #pro4_aside_user sono stati
   cancellati dal markup, non nascosti: nessun JS li cercava. */

/* =====================================================================
   3 — PANNELLO: l'area selezionata
   ===================================================================== */

/* LA card: nero, quattro angoli stondati, ombra. Il bordo di prima era
   la cucitura fra rail e pannello sulla stessa card nera; ora fra i due
   c'e' un cambio di superficie, e una riga sopra ci si vedrebbe.
   overflow:hidden fa due mestieri: ritaglia il contenuto sugli angoli e
   lascia scivolare fuori il pannello intero durante l'animazione di
   larghezza. L'ombra sta in transition perche' a colonna chiusa si
   spegne (§6): un box da 0px l'ombra la proietta lo stesso, e restava
   una lama grigia alla destra della rail. */
.dv-panel {
  flex: 0 0 auto;
  width: var(--aside-panel-w);
  overflow: hidden;
  background: var(--aside-bg);
  border-radius: var(--aside-radius);
  box-shadow: 0 12px 34px rgba(16, 24, 40, .14);
  transition: width var(--aside-motion), box-shadow var(--aside-motion);
}

/* Larghezza FISSA, indipendente da quella del genitore che si sta
   chiudendo: e' cosi' che i testi non vanno a capo ne' si comprimono
   durante l'animazione (§15). Il pannello si accorcia, il contenuto
   scivola fuori intero. */
.dv-panel__inner {
  width: var(--aside-panel-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  visibility: visible;
  /* in APERTURA il testo entra dopo che la colonna ha gia' iniziato ad
     allargarsi: il ritardo e' quello che rende il movimento naturale */
  transition: opacity 160ms ease 100ms, visibility 0s;
}

.dv-panel__head {
  flex: 0 0 auto;
  padding: 12px 14px 8px;
}

/* Allineato alla riga dell'emblema nella rail: le due meta' del marchio
   si scambiano il posto senza spostarsi. */
.dv-panel__logo {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 8px;
}

.dv-panel__logo img {
  display: block;
  height: 22px;   /* 20 + 10% */
  width: auto;
}

.dv-panel__logo:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.dv-panel__area {
  color: var(--color-white);
  font-size: calc(13.5px * var(--dv-fs,1));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.dv-panel__org {
  display: block;
  margin-top: 2px;
  max-width: 100%;
  color: var(--nav-text-faint);
  font-size: calc(11px * var(--dv-fs,1));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Il selettore azienda e' un <select> vero: gli togliamo la cornice, non
   il comportamento. Resta l'unico switcher multi-azienda del prodotto.

   La doppia freccia (2026-08-10) e' l'unica cosa che dice che l'azienda si
   CAMBIA: senza, la ragione sociale era indistinguibile dall'etichetta di
   macro-area che le sta sopra — stesso posto, stesso peso, nessun appiglio.
   Non e' il chevron singolo dei select del prodotto (--draive-chevron in
   draive.core.css): quello annuncia un elenco che si apre, la doppia annuncia
   una commutazione fra pari, che e' il gesto giusto qui.
   Sta a filo destro del pannello e non appesa alla fine del nome: un
   <select> si dimensiona sull'opzione piu' LUNGA, non su quella scelta,
   quindi attaccata al testo ballerebbe a ogni cambio azienda.
   Geometria con la stessa disciplina del chevron singolo: viewBox ritagliata
   sull'inchiostro (0 0 9 11, cioe' i punti rientrati di mezzo tratto), cosi'
   i 9x11 dichiarati in background-size sono davvero quelli disegnati e il
   bordo destro cade dove dice il padding.
   Misura rivista il 2026-08-10: da 10x12 a tratto 1.75 si e' passati a 9x11
   a tratto 1.5. La riduzione e' proporzionale (0.9x) e l'angolo delle due
   punte non cambia, cosi' cambia il peso e non la forma. Anche il vuoto fra
   le due punte resta 2.5px come prima: il varco nominale scende da 4.25 a 4
   ma il tratto si assottiglia di altrettanto, e a occhio la coppia resta
   staccata com'era invece di sembrare saldata.
   La freccia NON tocca .dv-panel__org--static: dove l'azienda e' una sola
   non c'e' niente da commutare e prometterlo sarebbe una bugia. */
select.dv-panel__org {
  --dv-org-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11' fill='none' stroke='%238a8f98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='0.75 3.5 4.5 0.75 8.25 3.5'/%3E%3Cpolyline points='0.75 7.5 4.5 10.25 8.25 7.5'/%3E%3C/svg%3E");
  --dv-org-caret-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11' fill='none' stroke='%23a9b0b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='0.75 3.5 4.5 0.75 8.25 3.5'/%3E%3Cpolyline points='0.75 7.5 4.5 10.25 8.25 7.5'/%3E%3C/svg%3E");
  width: 100%;
  /* 15 = i 9 della freccia piu' 6 d'aria: senza, l'ellissi delle ragioni
     sociali lunghe (e sono quasi tutte lunghe) le finisce sotto. */
  padding: 0 15px 0 0;
  border: 0;
  /* background-color e non il shorthand: il shorthand azzererebbe la
     background-image qui sotto a seconda dell'ordine. */
  background-color: transparent;
  background-image: var(--dv-org-caret);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 9px 11px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Nome e freccia si schiariscono insieme: sono una cosa sola da premere,
   e a riposo il grigio faint e' volutamente basso di contrasto. */
select.dv-panel__org:hover {
  color: var(--nav-text-muted);
  background-image: var(--dv-org-caret-on);
}

select.dv-panel__org:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.dv-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 10px 12px;
  /* discreta fino a sparire: il menu e' gia' corto perche' mostra una
     macro-area alla volta, la barra sarebbe solo rumore */
  scrollbar-width: none;
}

.dv-panel__scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Il piede e' il PROFILO: avatar, nome e ruolo in un'unica riga
   cliccabile che apre lo stesso pannello offcanvas dell'avatar di prima.
   A colonna aperta questo e' l'unico avatar in vista — quello della rail
   compare solo da chiusa (blocco 2). */
.dv-panel__foot {
  flex: 0 0 auto;
  padding: 8px;
  border-top: 1px solid var(--nav-line);
}

/* <button> nudo: niente reset con !important come per i fratelli della
   rail — la regola di draive.core.css che vestiva ogni <button> non esiste
   piu' (blocco DRAIVE BUTTONS, solo .btn) — pero' font, colore e
   allineamento del bottone UA vanno comunque rimessi a posto. */
.dv-panel__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--aside-item-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-base);
}

.dv-panel__profile:hover { background: var(--nav-hover); }

.dv-panel__profile:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: -2px;
}

.dv-panel__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--aside-item-radius);
  overflow: hidden;
}

.dv-panel__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dv-panel__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--nav-avatar-bg);
  color: var(--nav-avatar-text);
  font-size: calc(12px * var(--dv-fs,1));
  font-weight: 600;
  letter-spacing: .02em;
}

.dv-panel__user {
  flex: 1 1 auto;
  min-width: 0;   /* senza, l'ellissi di nome e ruolo smette di funzionare */
}

/* span, non div: stanno dentro un <button> */
.dv-panel__name {
  display: block;
  color: var(--color-white);
  font-size: calc(12.5px * var(--dv-fs,1));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv-panel__role {
  display: block;
  color: var(--nav-text-faint);
  font-size: calc(11px * var(--dv-fs,1));
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
   4 — GRUPPI E VOCI
   ===================================================================== */

.dv-group + .dv-group { margin-top: 2px; }

/* Intestazione di gruppo: separatore fatto di gerarchia e spazio, non di
   righe. Nessun box, nessuna banda, nessun divider — 12px sopra e 4px
   sotto bastano a dire "qui comincia un'altra cosa". */
.dv-group__title {
  margin: 12px 0 4px;
  padding: 0 8px;
  color: var(--nav-text-faint);
  font-size: calc(11px * var(--dv-fs,1));
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}

.dv-item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: var(--aside-item-h);
  margin-bottom: 2px;
  padding: 0 10px;
  border-radius: var(--aside-item-radius);
  color: var(--nav-text-muted);
  font-size: calc(12.5px * var(--dv-fs,1));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--motion-base), color var(--motion-base);
}

.dv-item i {
  flex: 0 0 18px;
  width: 18px;
  font-size: calc(18px * var(--dv-fs,1));
  line-height: 1;
  text-align: center;
  color: inherit;
}

.dv-item__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv-item:hover,
.dv-item:focus {
  background: var(--nav-hover);
  color: var(--color-white);
  text-decoration: none;
}

.dv-item:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: -2px;
}

.dv-item--on,
.dv-item--on:hover,
.dv-item--on:focus {
  background: var(--nav-surface);
  color: var(--color-white);
}

/* --- Voce con SCHEDE (nav.config.php, chiave 'sub') ------------------

   Una voce che apre una pagina a schede, con sotto le schede piu'
   battute. La riga madre resta una .dv-item identica a tutte le altre:
   cambia solo che le sta accanto un caret, e che sotto c'e' un elenco
   che si apre e si chiude.

   Le figlie NON hanno icona e non ne lasciano il posto vuoto: si
   allineano al TESTO della madre — 10 di padding + 18 di icona + 11 di
   divario = 39px — con una guida verticale a 19px, il centro esatto
   dell'icona, che tiene insieme la colonna. E' il rientro a dire di chi
   sono: un secondo giro di simboli in 216px direbbe la stessa cosa
   rubando spazio al testo.

   Aperto/chiuso e' una classe sul contenitore piu' [hidden] sull'elenco,
   come per le macro-aree: la sidebar non anima altezze che non conosce e
   il primo paint e' gia' quello giusto perche' arriva dal server. */

.dv-branch { margin-bottom: 2px; }

.dv-branch__row {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* L'ancora si prende tutto lo spazio che il caret non usa. min-width:0
   perche' senza, l'ellissi di .dv-item__text smette di funzionare: un
   flex item non scende mai sotto la propria larghezza di contenuto. */
.dv-branch__row .dv-item {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

/* <button> nudo, come .dv-panel__profile: la regola di draive.core.css che
   vestiva ogni <button> non esiste piu' (blocco DRAIVE BUTTONS, solo
   .btn), ma i valori di fabbrica del browser — bordo, fondo, font —
   vanno comunque rimessi a posto. */
.dv-branch__caret {
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: var(--aside-item-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--aside-item-radius);
  background: transparent;
  color: var(--nav-text-faint);
  cursor: pointer;
  transition: background-color var(--motion-base), color var(--motion-base);
}

.dv-branch__caret i {
  font-size: calc(11px * var(--dv-fs,1));
  line-height: 1;
  transition: transform var(--motion-base);
}

/* Chiuso il caret guarda in giu' ("c'e' altro"), aperto in su ("richiudi"):
   e' la stessa rotazione di ogni accordion, ed e' l'unica cosa che
   distingue i due stati oltre alla presenza dell'elenco. */
.dv-branch--open .dv-branch__caret i { transform: rotate(180deg); }

.dv-branch__caret:hover {
  background: var(--nav-hover);
  color: var(--color-white);
}

.dv-branch__caret:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: -2px;
}

/* La guida verticale: parte dal centro dell'icona della madre e arriva
   in fondo all'ultima figlia. Non e' decorazione — senza, tre voci
   rientrate su fondo nero si leggono come tre voci qualsiasi scritte
   piu' in dentro. */
.dv-branch__sub {
  position: relative;
  margin-top: 2px;
}

.dv-branch__sub::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 2px;
  bottom: 4px;
  width: 1px;
  background: var(--nav-line);
}

.dv-item--sub {
  height: 30px;
  padding-left: 39px;
  font-size: calc(12px * var(--dv-fs,1));
}

.dv-branch__sub .dv-item:last-child { margin-bottom: 0; }

/* =====================================================================
   5 — IL PULSANTE DI COLLAPSE
   ===================================================================== */

/* Una riga verticale di 2x16 nella fessura fra la card e il contenuto, a
   meta' altezza. Sono due barrette da 2x8 impilate che a riposo formano
   una linea continua; all'hover ruotano di 40 gradi in verso opposto,
   ciascuna attorno all'estremita' che tocca l'altra, e la linea si piega
   a freccia. Il verso lo decide il segno delle due rotazioni, che si
   scambia quando la colonna e' chiusa. Nessun JS, nessuna icona: due
   <span> e due transform.

   L'area cliccabile e' 28x48 — quindici volte la linea. Si prende senza
   mirare, ma quello che si vede resta una riga: la maniglia non deve
   pesare piu' delle voci di menu.

   Padding, margine e raggio glieli azzera il blocco 2 insieme agli altri
   pulsanti della colonna: sono tutti <button> e draive.core.css li veste
   d'ufficio. */
.dv-collapse {
  position: absolute;
  top: 50%;
  /* la linea cade a --aside-grip-inset dal bordo della card: dentro la
     fessura di --aside-inset che separa la colonna dal contenuto */
  right: calc((var(--aside-grip-hit-w) - var(--aside-grip-pad) + var(--aside-grip-inset)) * -1);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--aside-grip-hit-w);
  height: var(--aside-grip-hit-h);
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.dv-collapse__grip {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: var(--aside-grip-pad);
  transition: transform 100ms linear;
}

.dv-collapse__bar {
  display: block;
  width: 2px;
  height: 8px;
  background: var(--nav-grip);
  /* 100ms lineare: la piega deve sembrare istantanea come una risposta,
     non una animazione da guardare */
  transition: transform 100ms linear, background-color 100ms linear;
}

/* ogni barretta ruota attorno all'estremita' che tocca l'altra, cosi' il
   vertice resta fermo e si piega solo la punta */
.dv-collapse__bar--top    { border-radius: 1px 1px 0 0; transform-origin: bottom; }
.dv-collapse__bar--bottom { border-radius: 0 0 1px 1px; transform-origin: top; }

.dv-collapse:hover .dv-collapse__bar,
.dv-collapse:focus-visible .dv-collapse__bar {
  background: var(--nav-grip-strong);
}

/* aperta: la freccia indica dove va a finire la colonna, cioe' a sinistra */
.dv-collapse:hover .dv-collapse__bar--top,
.dv-collapse:focus-visible .dv-collapse__bar--top       { transform: rotate(40deg); }
.dv-collapse:hover .dv-collapse__bar--bottom,
.dv-collapse:focus-visible .dv-collapse__bar--bottom    { transform: rotate(-40deg); }

/* Chiusa: stessa piega, verso opposto.
   kt-aside--minimize-hover NON e' una variante di comodo da poter
   dimenticare: Metronic sostituisce kt-aside--minimize con questa non
   appena il puntatore entra nella colonna (initAside in
   scripts.bundle.js), cioe' ESATTAMENTE quando si sta per usare la
   maniglia. Elencando solo --minimize la freccia si girava dalla parte
   sbagliata proprio nell'unico momento in cui la si guarda. */
body.kt-aside--minimize .dv-collapse:hover .dv-collapse__bar--top,
body.kt-aside--minimize .dv-collapse:focus-visible .dv-collapse__bar--top,
body.kt-aside--minimize-hover .dv-collapse:hover .dv-collapse__bar--top,
body.kt-aside--minimize-hover .dv-collapse:focus-visible .dv-collapse__bar--top    { transform: rotate(-40deg); }
body.kt-aside--minimize .dv-collapse:hover .dv-collapse__bar--bottom,
body.kt-aside--minimize .dv-collapse:focus-visible .dv-collapse__bar--bottom,
body.kt-aside--minimize-hover .dv-collapse:hover .dv-collapse__bar--bottom,
body.kt-aside--minimize-hover .dv-collapse:focus-visible .dv-collapse__bar--bottom { transform: rotate(40deg); }

/* Piegandosi, la figura cresce di lato: 8px di barretta ruotati di 40
   gradi fanno 8·sin(40°) = 5,1px, tutti da UNA parte sola — a destra
   quando la freccia punta a sinistra, a sinistra quando punta a destra.
   Senza compensare, la freccia esce dalla fessura di 12px e va a
   sfiorare la colonna nera da chiusa o la colonna filtri da aperta.
   Spostandola di meta' della crescita nel verso opposto, la figura
   piegata resta centrata nella fessura esattamente come la linea da
   ferma: 2,4px di stacco per parte, che e' il massimo ottenibile in
   12px. */
.dv-collapse:hover .dv-collapse__grip,
.dv-collapse:focus-visible .dv-collapse__grip {
  transform: translateX(calc(var(--aside-grip-swing) * -1));
}

body.kt-aside--minimize .dv-collapse:hover .dv-collapse__grip,
body.kt-aside--minimize .dv-collapse:focus-visible .dv-collapse__grip,
body.kt-aside--minimize-hover .dv-collapse:hover .dv-collapse__grip,
body.kt-aside--minimize-hover .dv-collapse:focus-visible .dv-collapse__grip {
  transform: translateX(var(--aside-grip-swing));
}

/* il focus da tastiera si vede sulla linea, non con un anello attorno a
   un'area invisibile di 28x48 */
.dv-collapse:focus-visible { outline: none; }
.dv-collapse:focus-visible .dv-collapse__bar { box-shadow: 0 0 0 1px var(--nav-focus); }

/* =====================================================================
   6 — STATO CHIUSO (icon rail) E ANTEPRIMA AL PASSAGGIO DEL MOUSE
   ---------------------------------------------------------------------
   Due classi, due cose diverse.

   kt-aside--minimize e' lo stato SALVATO. La mette KTToggle sul <body>,
   ma al primo paint la scrive gia' il server: ogni pagina la stampa nel
   <body> leggendo $_SESSION['settings']['setHideSideNavView']. Per
   questo non c'e' nessun lampo iniziale.

   kt-aside--minimize-hover e' l'ANTEPRIMA: Metronic la scambia a
   minimize appena il puntatore entra nella colonna e la rimette com'era
   quando esce (initAside in scripts.bundle.js). Qui la colonna si apre
   davvero, ma SOPRA il contenuto: --aside-w resta la rail, quindi il
   rientro di .kt-wrapper non cambia e la pagina non si muove per una
   sfiorata di mouse. Solo la card cresce, e l'ombra che ha gia' la fa
   leggere come un pannello sospeso.

   La preferenza salvata NON cambia: finita l'anteprima la colonna torna
   chiusa. Per fissarla aperta si usa la maniglia, che infatti durante
   l'anteprima continua a dire "Espandi" — perche' e' quello che fa.
   ===================================================================== */

/* --aside-w e' la larghezza PERSISTENTE, quella che detta il rientro del
   contenuto. Resta la rail anche durante l'anteprima: e' cosi' che
   l'anteprima diventa una sovrapposizione invece di una spinta. */
body.kt-aside--minimize,
body.kt-aside--minimize-hover {
  --aside-w: var(--aside-rail-w);
}

/* A colonna chiusa la rail torna 43px: e' l'unica cosa a schermo e i 38
   dello stato aperto — dove accanto c'e' la card nera a reggere il peso
   — la farebbero sembrare un residuo. L'anteprima al passaggio del mouse
   tiene lo STESSO valore della chiusa, non quello dell'aperta: il
   rientro del contenuto segue --aside-w, e farlo cambiare di 5px per
   una sfiorata di mouse rimetterebbe in movimento la pagina, che e'
   esattamente cio' che l'anteprima-sovrapposizione evita. */
body.kt-aside--minimize,
body.kt-aside--minimize-hover {
  --aside-rail-w: 43px;
}

/* Tre classi, come il bundle. Non e' vezzo: style.bundle.css dichiara
   ".kt-aside--fixed.kt-aside--minimize-hover .kt-aside { width:265px;
   transition: all .3s ease }" con specificita' (0,3,0) e la regola di
   base ne ha (0,2,0), quindi senza pareggiare vincerebbe la loro — con
   la larghezza sbagliata (265 invece di 280) e una transizione su "all"
   che animerebbe anche colori e sfondi ad ogni passaggio del mouse. */
.kt-aside--fixed.kt-aside--minimize-hover .kt-aside {
  width: calc(var(--aside-rail-w) + var(--aside-panel-w));
  transition: width var(--aside-motion);
}

/* box-shadow:none, non solo width:0 — un box largo zero l'ombra la
   proietta comunque, e alla destra della rail restava una lama grigia
   verticale. La transition del pannello la dissolve insieme alla
   larghezza. */
body.kt-aside--minimize .dv-panel {
  width: 0;
  box-shadow: none;
}

/* In CHIUSURA il testo se ne va per primo e senza ritardo: sparisce
   mentre la colonna e' ancora larga, cosi' non lo si vede schiacciarsi.
   visibility:hidden ritardata di 120ms — il tempo della dissolvenza —
   toglie il pannello anche dall'ordine di tabulazione e dai lettori di
   schermo: con la sola opacity il pannello resta largo 0 ma i suoi
   settantacinque link restano raggiungibili col Tab, invisibili. */
body.kt-aside--minimize .dv-panel__inner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease 0ms, visibility 0s linear 120ms;
}

/* Durante l'anteprima il pannello e' aperto a tutti gli effetti: si
   legge, si clicca, si raggiunge col Tab. L'ombra e' un filo piu' fonda
   di quella a riposo: qui la card sta DAVVERO sopra il contenuto, e la
   profondita' in piu' e' quello che lo dice. */
body.kt-aside--minimize-hover .dv-panel {
  width: var(--aside-panel-w);
  box-shadow: 0 16px 44px rgba(16, 24, 40, .22);
}

body.kt-aside--minimize-hover .dv-panel__inner {
  opacity: 1;
  visibility: visible;
}

/* =====================================================================
   7 — TOOLTIP
   ---------------------------------------------------------------------
   L'elemento lo crea draive-sidebar.js e lo appende al <body>, non alla
   colonna: dentro .dv-panel (overflow:hidden, per gli angoli e per
   l'animazione di larghezza) verrebbe tagliato di netto al primo pixel
   fuori dalla card.
   ===================================================================== */

.dv-tip {
  position: fixed;
  z-index: 1001;
  padding: 5px 9px;
  border: 1px solid var(--nav-line-strong);
  border-radius: var(--radius-sm);
  background: var(--nav-surface-raised);
  color: var(--color-white);
  font-size: calc(11.5px * var(--dv-fs,1));
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.dv-tip--on {
  opacity: 1;
  transform: none;
}

/* =====================================================================
   8 — RESPONSIVE
   ---------------------------------------------------------------------
   Desktop (>=1280)  card flottante, expanded <-> icon rail
   Tablet  (1025-1279) come desktop ma parte in rail: sotto i 1280px il
                     pannello si mangia un quarto della larghezza utile
   Mobile  (<=1024)  drawer in overlay (KTOffcanvas, .kt-aside--on), con
                     rail e pannello entrambi aperti: "chiuso" li' non
                     vuol dire niente, il drawer o c'e' o non c'e'
   ===================================================================== */

@media (min-width: 1025px) and (max-width: 1279.98px) {
  /* Il pannello si stringe, non sparisce: su un 1280 logico 216px sono
     il 17% della larghezza utile, 192 la riportano sotto il 15%. Lo
     stato aperto/chiuso resta quello scelto dall'utente. */
  :root { --aside-panel-w: 192px; }
}

@media (max-width: 1024px) {
  /* style.bundle.css nasconde la colonna a left:-295px e la apre con
     .kt-aside--on: le regole desktop la tenevano inchiodata a schermo. */
  /* La larghezza NON si dichiara: il bundle impone
     "width: 275px !important" al pannello offcanvas (style.bundle.css
     ~36389) e l'unico modo di scavalcarlo sarebbe un altro !important.
     Si lascia decidere a lui e si fa adattare il pannello (sotto): cosi'
     il drawer resta giusto anche se un domani quel valore cambia. */
  .kt-aside,
  .kt-aside--fixed .kt-aside,
  body.kt-aside--minimize .kt-aside,
  body.kt-aside--minimize-hover .kt-aside {
    left: -300px;
    top: 0;
    bottom: 0;
    /* il drawer e' un foglio sopra la pagina oscurata: qui uno sfondo
       pieno SERVE, sul desktop no perche' sotto la rail c'e' gia' il
       fondo pagina */
    background: var(--canvas);
    border-radius: 0;
    box-shadow: none;
    transition: left .3s ease;
  }

  .kt-aside.kt-aside--on,
  body.kt-aside--minimize .kt-aside.kt-aside--on,
  body.kt-aside--minimize-hover .kt-aside.kt-aside--on {
    left: 0;
  }

  .kt-wrapper,
  body.kt-aside--minimize .kt-wrapper {
    padding-left: 0 !important;
  }

  /* Nel drawer il pannello e' sempre aperto, qualunque sia la preferenza
     salvata per il desktop, e prende tutto lo spazio che avanza dopo la
     rail: niente larghezza fissa, cosi' non dipende da quanto e' largo
     l'offcanvas. Resta una card anche qui: stesso raggio, e il margine
     le da' l'aria che sul desktop le da' la finestra — a sinistra no,
     dove c'e' gia' la rail. L'ombra torna esplicita perche' lo stato
     --minimize del desktop l'aveva spenta. */
  .dv-panel,
  body.kt-aside--minimize .dv-panel,
  body.kt-aside--minimize-hover .dv-panel {
    flex: 1 1 auto;
    width: auto;
    margin: var(--aside-inset) var(--aside-inset) var(--aside-inset) 0;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .14);
  }

  /* visibility, non solo opacity: lo stato --minimize del desktop lo
     nasconde con TUTTE E DUE, e senza il ripristino esplicito il drawer
     si apriva con la card nera VUOTA quando la preferenza salvata era
     "chiusa" — la geometria c'era, il menu no. */
  .dv-panel__inner,
  body.kt-aside--minimize .dv-panel__inner,
  body.kt-aside--minimize-hover .dv-panel__inner {
    width: 100%;
    opacity: 1;
    visibility: visible;
  }

  /* chiudere una colonna che e' gia' un overlay non vuol dire nulla */
  .dv-collapse { display: none; }

  /* Nel drawer il pannello e' sempre aperto, quindi il marchio per esteso
     si legge sempre: l'emblema della rail resta nascosto anche se sul
     <body> c'e' la preferenza "chiusa" del desktop. Senza questa regola
     comparirebbero tutti e due, e logo.svg contiene gia' l'emblema. */
  body.kt-aside--minimize .dv-rail__mark,
  body.kt-aside--minimize-hover .dv-rail__mark {
    opacity: 0;
    visibility: hidden;
  }

  /* Stesso motivo per la forma della linguetta: qui la card nera c'e'
     sempre, quindi l'angolo destro resta vivo anche quando sul <body>
     c'e' la preferenza "chiusa" del desktop, che sul telefono non
     descrive niente. */
  body.kt-aside--minimize .dv-rail__btn {
    border-radius: var(--aside-item-radius) 0 0 var(--aside-item-radius);
  }
}

/* =====================================================================
   9 — MOVIMENTO RIDOTTO
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kt-aside,
  .kt-aside--fixed .kt-aside,
  .kt-wrapper,
  .dv-panel,
  .dv-panel__inner,
  .dv-rail__mark,
  .dv-rail__btn,
  .dv-collapse__bar,
  .dv-tip {
    transition: none;
  }
}

/* ============================================================
   "Vedi come" (simulazione perimetro, 2026-08-16): banner sotto
   il selettore azienda. Ambra: e' uno stato anomalo voluto, deve
   restare visibile finche' non lo si spegne dalla X. */
.dv-simula{display:flex;align-items:center;gap:6px;margin-top:6px;padding:5px 8px;border-radius:6px;background:#faeeda;color:#854f0b;font-size:calc(11px * var(--dv-fs,1));line-height:1.3;}
.dv-simula i{font-size:calc(13px * var(--dv-fs,1));color:#854f0b;}
.dv-simula__nome{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
/* Livello simulato (o il motivo per cui i permessi non lo sono). Secondo per
   peso, non secondo per importanza: e' la riga che distingue "sto vestendo un
   Venditore" da "quell'utente qui non entra e infatti non vedo niente".
   flex:0 1 auto con max-width: su un nome lungo si stringe questa, non il nome. */
.dv-simula__lvl{flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75;font-weight:500;}
.dv-simula__lvl::before{content:'·';margin-right:4px;opacity:.6;}
.dv-simula__esci{flex:0 0 auto;color:#854f0b;font-size:calc(14px * var(--dv-fs,1));font-weight:700;text-decoration:none;padding:0 2px;}
.dv-simula__esci:hover{color:#412402;}

/* =====================================================================
   10 — MENU UTENTE (2026-09-04)
   ---------------------------------------------------------------------
   Quello che si apre dal piede della colonna. Prima era
   #kt_offcanvas_toolbar_profile: un offcanvas a tutta altezza, con
   testata fotografica e card del referente, per tre voci. Adesso e' un
   menu piccolo ancorato al bottone — la forma che ReUI da' ai menu
   utente, cioe' lo stesso linguaggio dei bottoni e dei campi di DRAIVE.

   E' CHIARO, non nero come la colonna: e' una superficie in
   sovrimpressione, e in DRAIVE quelle sono bianche (modali, drawer,
   tendine). Nero starebbe bene appoggiato alla card e male ovunque
   altrove — sul telefono, per esempio, dove esce sopra la pagina.

   Il markup sta FUORI da #kt_aside (vedi il commento in
   includes/sideNavigation.php): .dv-panel ha overflow:hidden e
   taglierebbe il menu, ed e' la stessa ragione per cui il tooltip del
   blocco 7 vive appeso al <body>.

   POSIZIONE: la scrive draive-sidebar.js in left/bottom, sul rettangolo
   del bottone. Qui non si dichiara nessuna coordinata perche' non ce
   n'e' una giusta: colonna aperta, anteprima al passaggio del mouse e
   drawer del telefono hanno tre geometrie diverse.
   ===================================================================== */

.dv-usermenu {
  position: fixed;
  /* sopra la colonna, che nel drawer del telefono sta a 1001 (e a 98 sul
     desktop), e sotto tutto cio' che e' davvero modale: il drawer sta a
     3100, i dialoghi piu' su ancora. */
  z-index: 1002;
  width: 276px;
  /* su un telefono stretto il menu si stringe invece di uscire dallo
     schermo: il JS gli lascia 12px per lato e questo tetto li rispetta */
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  /* la stessa profondita' della card in anteprima (blocco 6): e' un
     foglio che sta sopra il contenuto, non una scheda appoggiata */
  box-shadow: 0 12px 34px rgba(16, 24, 40, .16);
  color: var(--ink-body);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  line-height: var(--lh-body);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

/* Aperto. L'attributo [hidden] lo toglie e lo rimette il JS: senza,
   display:none impedirebbe di misurarlo per posizionarlo. */
.dv-usermenu--on {
  opacity: 1;
  transform: none;
}

/* --- Testata: chi sei --------------------------------------------- */

.dv-usermenu__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 8px;
}

.dv-usermenu__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dv-usermenu__avatar--sm {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
}

.dv-usermenu__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le iniziali sono le stesse del piede della colonna — stesso fondo,
   stesso verde — cosi' il menu si legge come la continuazione del
   bottone che lo ha aperto e non come un'altra cosa. */
.dv-usermenu__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--nav-avatar-bg);
  color: var(--nav-avatar-text);
  font-size: calc(12px * var(--dv-fs,1));
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
}

.dv-usermenu__avatar--sm .dv-usermenu__initials { font-size: calc(10px * var(--dv-fs,1)); }

.dv-usermenu__id {
  flex: 1 1 auto;
  min-width: 0;   /* senza, l'ellissi non funziona */
}

.dv-usermenu__name {
  display: block;
  color: var(--ink);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  font-weight: var(--fw-semi);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv-usermenu__meta {
  display: block;
  color: var(--ink-muted);
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
  font-weight: var(--fw-regular);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Separatore ---------------------------------------------------- */

/* A tutta larghezza: i 6px di padding del menu si annullano ai lati,
   se no il filo galleggia in mezzo con due tacche bianche. */
.dv-usermenu__sep {
  height: 1px;
  margin: 5px -6px;
  background: var(--hairline);
}

/* --- Voci ---------------------------------------------------------- */

.dv-usermenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--ink-body);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-base), color var(--motion-base);
}

/* :hover E :focus insieme: il menu si percorre anche con le frecce, e
   li' l'unica cosa che dice "sono qui" e' questa riga accesa. */
.dv-usermenu__item:hover,
.dv-usermenu__item:focus {
  background: var(--surface-alt);
  color: var(--ink);
  text-decoration: none;
}

.dv-usermenu__item i {
  flex: 0 0 auto;
  font-size: calc(16px * var(--dv-fs,1));
  color: var(--ink-faint);
  transition: color var(--motion-base);
}

.dv-usermenu__item:hover i,
.dv-usermenu__item:focus i { color: var(--ink-muted); }

.dv-usermenu__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Riga di preferenza: etichetta a sinistra, comando a destra -----
   Nasce per la dimensione del testo (2026-09-07) ma la classe e'
   generica: se domani il menu ospita un secondo interruttore, la riga
   e' gia' quella.

   NON e' un .dv-usermenu__item: quella e' una voce che si preme e
   porta altrove, questa e' una manopola che si gira restando dove si
   e'. Stessa altezza e stesso rientro, pero', se no le due cose
   sembrerebbero appartenere a due menu diversi.

   TUTTE LE REGOLE PARTONO DA .dv-usermenu, e non e' pignoleria: il
   comando e' .draive-viewswitch, che vive in draive.core.css — e draive.core.css
   veniva RICARICATO PER ULTIMO (fino al 23/10/2026) da includes/bottomScripts.php. A parita'
   di specificita' vincerebbe sempre lui, quindi un `.dv-fsswitch{...}`
   da solo sarebbe codice morto. Con il contenitore davanti si sale a
   (0,2,0) e la geometria di questa riga passa. */

.dv-usermenu__pref {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 8px;
  color: var(--ink-body);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
}

.dv-usermenu__prefname {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;   /* senza, l'ellissi non funziona */
}

/* Stessa misura e stesso grigio dell'icona delle voci: la colonna
   delle icone deve restare una colonna sola. */
.dv-usermenu__prefname i {
  flex: 0 0 auto;
  font-size: calc(16px * var(--dv-fs,1));
  color: var(--ink-faint);
}

.dv-usermenu__prefname > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Il comando: la pista di .draive-viewswitch, un passo piu' bassa
   (28 invece di 34) perche' qui deve stare DENTRO una riga da 34 e
   non essere la riga. */
.dv-usermenu .dv-fsswitch {
  flex: 0 0 auto;
  height: 28px;
}

/* Tre caselle uguali: la larghezza non puo' seguire la lettera, se no
   il segmento "grande" sarebbe piu' largo degli altri e la scelta
   sembrerebbe gia' fatta. */
.dv-usermenu .dv-fsswitch__seg {
  width: 28px;
  height: 22px;
  padding: 0;
  line-height: 1;
}

/* Le tre misure della A. Sono il disegno del comando, non la scala
   della piattaforma: quella sta in draive.tokens.css. Scalano anche
   loro con --dv-fs, cosi' il comando cresce insieme a cio' che
   comanda. */
.dv-usermenu .dv-fsswitch__seg--s { font-size: calc(10px * var(--dv-fs,1)); }
.dv-usermenu .dv-fsswitch__seg--m { font-size: calc(12.5px * var(--dv-fs,1)); }
.dv-usermenu .dv-fsswitch__seg--l { font-size: calc(15.5px * var(--dv-fs,1)); }

/* Uscire e' rosso solo mentre lo si sta per fare: a riposo e' una voce
   come le altre, perche' non e' un pericolo — e' solo l'ultima. */
.dv-usermenu__item--exit:hover,
.dv-usermenu__item--exit:focus {
  background: var(--danger-bg-soft);
  color: var(--danger-text);
}

.dv-usermenu__item--exit:hover i,
.dv-usermenu__item--exit:focus i { color: var(--danger-text); }

/* Il fuoco da tastiera si vede anche dove il fondo acceso non basta
   (contrasto basso, alto contrasto di sistema). */
.dv-usermenu__item:focus-visible,
.dv-usermenu__icon:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -2px;
}

/* --- Il referente --------------------------------------------------- */

.dv-usermenu__group { padding: 0 2px; }

.dv-usermenu__title {
  padding: 2px 6px 4px;
  color: var(--ink-faint);
  font-size: calc(var(--fs-micro) * var(--dv-fs,1));
  font-weight: var(--fw-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dv-usermenu__ref {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 4px;
}

.dv-usermenu__refname {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv-usermenu__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

/* Telefono e mail: due bersagli da 28px, non due link di testo. Il nome
   resta testo perche' non porta da nessuna parte. */
.dv-usermenu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  text-decoration: none;
  transition: background-color var(--motion-base), color var(--motion-base);
}

.dv-usermenu__icon i { font-size: calc(15px * var(--dv-fs,1)); }

.dv-usermenu__icon:hover,
.dv-usermenu__icon:focus {
  background: var(--surface-alt);
  color: var(--ink);
}

/* --- La freccina sul bottone che apre ------------------------------- */

/* Sta nel piede della colonna, quindi vive sui token --nav-*: e' l'unico
   pezzo di questo blocco che sta sulla card nera. */
/* 12px e margine negativo: in 216px di colonna il nome per esteso e la
   freccina se lo giocano, e ogni pixel qui e' un pixel di nome in meno
   sotto l'ellissi. Piu' piccola di cosi' non si legge come una freccia. */
.dv-panel__caret {
  flex: 0 0 auto;
  margin-left: -4px;
  font-size: calc(12px * var(--dv-fs,1));
  color: var(--nav-text-faint);
  transition: color var(--motion-base);
}

.dv-panel__profile:hover .dv-panel__caret,
.dv-panel__profile[aria-expanded="true"] .dv-panel__caret {
  color: var(--nav-text);
}

/* Il bottone resta acceso finche' il menu e' aperto: senza, sembra che
   il pannello sia uscito da nessun posto. */
.dv-panel__profile[aria-expanded="true"] { background: var(--nav-hover); }

/* --- La colonna resta aperta finche' il menu e' aperto --------------- */

/* IL PROBLEMA: a colonna chiusa il pannello si apre solo in anteprima,
   al passaggio del mouse (blocco 6). Per raggiungere il menu il
   puntatore deve uscire dalla colonna, e a quel punto Metronic richiude
   l'anteprima: il menu resterebbe appeso al vuoto, ancorato a un bottone
   che non c'e' piu'.
   LA CURA: draive-sidebar.js mette .dv-usermenu-open sul <body> mentre il
   menu e' aperto, e qui si ridichiara lo stato dell'anteprima. Non si
   litiga col bundle — la sua classe va e viene come sempre — si dice
   soltanto che finche' il menu e' aperto la colonna si vede.

   Solo da 1025px in su: sotto, la colonna e' un drawer sempre aperto e
   queste larghezze la stringerebbero (il pannello li' e' flex:1 1 auto,
   non 216px fissi). */
@media (min-width: 1025px) {
  .kt-aside--fixed.kt-aside--minimize.dv-usermenu-open .kt-aside {
    width: calc(var(--aside-rail-w) + var(--aside-panel-w));
  }

  body.dv-usermenu-open.kt-aside--minimize .dv-panel {
    width: var(--aside-panel-w);
    box-shadow: 0 16px 44px rgba(16, 24, 40, .22);
  }

  body.dv-usermenu-open.kt-aside--minimize .dv-panel__inner {
    opacity: 1;
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dv-usermenu,
  .dv-usermenu__item,
  .dv-usermenu__icon,
  .dv-panel__caret {
    transition: none;
  }
}

/* =====================================================================
   11 — RICERCA MODULI (2026-10-05)
   ---------------------------------------------------------------------
   La lente sotto Support e il lightbox che apre (markup in fondo a
   includes/sideNavigation.php, comportamento in draive-search.js).
   Cerca le PAGINE di DRAIVE, non i dati.

   Le regole della lente stanno QUI e non nel blocco 2 per l'ordine: il
   blocco 8 (responsive) riscrive il raggio di .dv-rail__btn con la stessa
   specificita', e la lente deve restare un riquadro con quattro angoli
   stondati in ogni stato — non e' una linguetta agganciata al pannello,
   perche' non apre nessun pannello.
   ===================================================================== */

/* La lineetta fra le aree e la lente: dice "da qui in giu' non sono
   posti, sono comandi" senza bisogno di un'etichetta. */
.dv-rail__sep {
  flex: 0 0 auto;
  width: 16px;
  height: 1px;
  margin: 6px 0;
  background: var(--grey-soft);
}

.dv-rail__btn--cerca,
body.kt-aside--minimize .dv-rail__btn--cerca {
  border-radius: var(--aside-item-radius);
}

/* L'area DIRETTA (la Home, 13/10/2026): un link che porta alla pagina
   senza aprire il pannello (includes/sideNavigation.php). Come la lente
   non e' una linguetta — non c'e' una card a cui agganciarsi — quindi
   quattro angoli stondati in ogni stato, anche acceso. Sta qui per lo
   stesso motivo della lente: il blocco 8 riscrive il raggio. */
.dv-rail__btn--diretta,
body.kt-aside--minimize .dv-rail__btn--diretta {
  border-radius: var(--aside-item-radius);
  text-decoration: none;
}

/* acceso finche' il lightbox e' aperto, come il profilo col suo menu */
.dv-rail__btn--cerca[aria-expanded="true"] {
  background: var(--rail-hover);
  color: var(--rail-icon-strong);
}

/* --- Il lightbox ---------------------------------------------------- */

/* Pagina ferma sotto il velo: la rotellina scorre l'elenco, non quello
   che c'e' dietro. */
html.dv-cerca-aperto { overflow: hidden; }

/* Sopra la colonna (1001 nel drawer del telefono) e sopra i drawer a
   schede (3100); i dialoghi veri non si aprono mentre questo e' aperto
   e, viceversa, ⌘K non lo apre sopra a loro (draive-search.js).
   In alto e non al centro esatto: l'elenco cresce verso il basso mentre
   si scrive, e un riquadro centrato salterebbe su e giu' a ogni lettera. */
.dv-cerca {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}

.dv-cerca__velo {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 11, .42);
  opacity: 0;
  transition: opacity 150ms ease;
}

.dv-cerca__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: min(76vh, 640px);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-modal);
  background: var(--canvas);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .24), 0 2px 8px rgba(16, 24, 40, .08);
  color: var(--ink-body);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  line-height: var(--lh-body);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: 50% 0;
  transition: opacity 150ms ease, transform 150ms cubic-bezier(.2, .8, .2, 1);
}

.dv-cerca--on .dv-cerca__velo { opacity: 1; }
.dv-cerca--on .dv-cerca__box  { opacity: 1; transform: none; }

/* Il campo. Niente bordo ne' anello: e' l'unico campo del dialogo e il
   cursore che lampeggia basta a dire dov'e' il fuoco. La specificita'
   doppia batte gli stili globali dei campi di draive.core.css. */
.dv-cerca__campo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--hairline);
}

.dv-cerca__campo > i {
  flex: 0 0 auto;
  font-size: calc(20px * var(--dv-fs,1));
  color: var(--ink-muted);
}

.dv-cerca .dv-cerca__input {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(56px * var(--dv-fs,1));
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--ink);
  font-size: calc(17px * var(--dv-fs,1));
  font-weight: var(--fw-regular);
}

.dv-cerca .dv-cerca__input::placeholder { color: var(--draive-placeholder); }

.dv-cerca__esc {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-sm) !important;
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: calc(var(--fs-badge) * var(--dv-fs,1));
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-base), border-color var(--motion-base);
}

.dv-cerca__esc:hover { color: var(--ink); border-color: var(--grey-mid); }
.dv-cerca__esc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* «… è in arrivo»: c'e' sempre nel DOM (una regione live che nasce
   nascosta non viene letta), da vuota non occupa spazio. */
.dv-cerca__nota {
  flex: 0 0 auto;
  padding: 8px 18px;
  background: var(--info-bg);
  color: var(--info-text);
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
}

.dv-cerca__nota:empty { padding: 0; }

.dv-cerca__lista {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 6px;
}

.dv-cerca__sezione + .dv-cerca__sezione { margin-top: 4px; }

.dv-cerca__titolo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 4px;
  color: var(--ink-muted-soft);
  font-size: calc(var(--fs-caption) * var(--dv-fs,1));
  font-weight: var(--fw-semi);
}

.dv-cerca__titolo i { font-size: calc(14px * var(--dv-fs,1)); }

/* Una voce. L'icona nel riquadro grigio e' la stessa del menu; sulla
   voce scelta diventa il quadrato nero della rail: e' lo stesso segno
   di "questa", e si legge senza guardare il colore della riga. */
.dv-cerca__opz {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.dv-cerca__opz > i {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--ink-body);
  font-size: calc(17px * var(--dv-fs,1));
  transition: background-color var(--motion-base), color var(--motion-base);
}

.dv-cerca__opz--on { background: var(--surface-tint); }

.dv-cerca__opz--on > i {
  background: var(--action);
  color: var(--on-action);
}

.dv-cerca__testo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dv-cerca__nome,
.dv-cerca__percorso {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dv-cerca__nome {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

/* le lettere trovate: evidenziatore, non grassetto — il grassetto
   cambierebbe la larghezza del nome a ogni lettera digitata */
.dv-cerca__nome mark {
  padding: 0;
  border-radius: 2px;
  background: rgba(255, 184, 34, .32);
  color: inherit;
}

.dv-cerca__percorso {
  color: var(--ink-muted);
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
}

.dv-cerca__per { color: var(--ink-muted-soft); }

.dv-cerca__segno {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: calc(var(--fs-badge) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.dv-cerca__segno--qui {
  background: var(--success-bg);
  color: var(--success-text);
}

.dv-cerca__invio {
  flex: 0 0 auto;
  width: 14px;
  color: var(--ink-muted);
  opacity: 0;
}

.dv-cerca__opz--on .dv-cerca__invio { opacity: 1; }

/* In arrivo: si vede, si sceglie, non si apre. Tutto in grigio, e niente
   "invio" sulla voce scelta perche' Invio non porta da nessuna parte. */
.dv-cerca__opz--arrivo { cursor: default; }
.dv-cerca__opz--arrivo .dv-cerca__nome { color: var(--ink-faint); }
.dv-cerca__opz--arrivo > i,
.dv-cerca__opz--arrivo.dv-cerca__opz--on > i {
  background: var(--surface-soft);
  color: var(--grey-icon);
}
.dv-cerca__opz--arrivo .dv-cerca__invio { visibility: hidden; }

.dv-cerca__vuoto {
  padding: 36px 24px 40px;
  text-align: center;
}

.dv-cerca__vuoto > i {
  font-size: var(--fs-icon-empty);
  color: var(--grey-icon);
}

.dv-cerca__vuoto-titolo {
  margin-top: 10px;
  color: var(--ink);
  font-weight: var(--fw-medium);
  word-break: break-word;
}

.dv-cerca__vuoto-testo {
  margin-top: 4px;
  color: var(--ink-muted);
}

.dv-cerca__piede {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: calc(var(--fs-caption) * var(--dv-fs,1));
}

.dv-cerca__piede-fine { margin-left: auto; }

/* kbd di Bootstrap e' un'etichetta nera piena: qui serve un tasto */
.dv-cerca kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-right: 3px;
  padding: 0 4px;
  border: 1px solid var(--grey-line);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--canvas);
  box-shadow: none;
  color: var(--ink-body);
  font-family: inherit;
  font-size: calc(var(--fs-micro) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
}

/* Senza tastiera fisica i tasti non dicono niente. */
@media (hover: none) {
  .dv-cerca__piede,
  .dv-cerca__invio { display: none; }
}

@media (max-width: 767.98px) {
  .dv-cerca { padding: 10px 8px; }
  .dv-cerca__box {
    max-width: none;
    max-height: calc(100dvh - 20px);
    border-radius: var(--radius-lg);
  }
  .dv-cerca__opz { padding: 9px 8px; }
}

/* La lente nell'intestazione del telefono, accanto all'hamburger: li' la
   rail sta dentro il drawer, due gesti piu' in la'. Compare solo se il
   lightbox c'e' davvero (la classe la mette draive-search.js), cosi' le
   poche pagine con l'intestazione ma senza colonna non mostrano un
   pulsante morto. */
.kt-header-mobile__cerca { display: none; }

html.dv-cerca-pronta .kt-header-mobile__cerca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
}

.kt-header-mobile__cerca:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* La topbar della pagina (campanella, «+», menu pagina) sul telefono e'
   fissa sopra l'intestazione e lascia libero solo lo spazio
   dell'hamburger (draive.core.css, HEADER MOBILE: right 54px, tetto 100vw -
   152px). Con la lente accanto all'hamburger servono altri 44px, se no
   la topbar ci si dipinge sopra e la lente non si puo' toccare.
   html.dv-cerca-pronta + #kt_header battono quella regola senza
   !important, e valgono solo dove la lente c'e' davvero. */
@media (max-width: 1024px) {
  html.dv-cerca-pronta .kt-header__topbar,
  html.dv-cerca-pronta #kt_header .kt-header__topbar {
    right: 98px;
    max-width: calc(100vw - 196px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dv-cerca__velo,
  .dv-cerca__box,
  .dv-cerca__opz > i,
  .dv-cerca__esc {
    transition: none;
  }
  .dv-cerca__box { transform: none; }
}