/* =====================================================================
   draive.topnav.css — la BARRA ORIZZONTALE (14/10/2026)
   ---------------------------------------------------------------------
   La seconda disposizione del menu di DRAIVE. La prima — la colonna a
   sinistra, rail + pannello nero — resta quella di serie e sta tutta in
   draive.sidebar.css; questa la sceglie l'utente dal menu del profilo
   («Menu: colonna | barra», preferenza uiNavLayout in users.settings).

   COME SI ACCENDE. header.php scrive data-dv-nav="v|h" sul <html> prima
   di qualunque foglio. OGNI regola di questo file che cambia qualcosa
   parte da html[data-dv-nav="h"]: con la colonna questo foglio non tocca
   niente, e cambiare disposizione dal menu e' un attributo, senza
   ricaricare.

   SOLO DESKTOP (>=1025px). Sotto c'e' il drawer del telefono (#kt_aside
   con KTOffcanvas), che funziona gia' e non c'entra con la scelta.

   IL MARKUP sta in includes/sideNavigation.php (#dv_topnav), il
   comportamento in assets/js/draive-sidebar.js (blocco 9).

   LA PAGINA SCENDE. Tutte le pagine di DRAIVE hanno in cima una banda
   di 64px fatta di pezzi in position:fixed a top:0 — la testata
   (#kt_header), il titolo con Filtro (#kt_subheader), la testata della
   lista, la colonna dei filtri a tutta altezza. Con la barra sopra, ognuno
   di quei pezzi deve partire --dv-top piu' in basso. Non c'e' un modo
   generale di spostare il "viewport" dei fixed senza rompere lo scroll
   della finestra (che e' cio' che usano le liste infinite), quindi qui
   sotto, nel blocco 3, i pezzi sono elencati uno per uno.
   Per la LARGHEZZA invece il lavoro e' gia' fatto: tutto cio' che sta a
   destra della colonna si misura su --aside-w, e qui --aside-w vale 0.
   ===================================================================== */

/* Fuori dal desktop, o con la colonna, la barra non esiste. */
.dv-topnav { display: none; }

@media (min-width: 1025px) {

/* =====================================================================
   1 — LE MISURE
   ===================================================================== */

html[data-dv-nav="h"] {
  --dv-topnav-h: 52px;
  /* quanto scende la banda della pagina: lo stacco dal bordo finestra
     (lo stesso della colonna) piu' la barra */
  --dv-top: calc(var(--aside-inset) + var(--dv-topnav-h));
}

/* La colonna se ne va, e con lei il suo rientro. --aside-w e' la misura
   su cui si allineano il contenuto, la testata, i pannelli dei filtri:
   portarla a zero li sposta tutti insieme. Le due classi di Metronic
   ridichiarano --aside-w sul <body>, quindi vanno ripetute qui. */
html[data-dv-nav="h"] body,
html[data-dv-nav="h"] body.kt-aside--minimize,
html[data-dv-nav="h"] body.kt-aside--minimize-hover {
  --aside-w: 0px;
}
/* L'id: #kt_aside resta nel DOM (contratto con Metronic, vedi
   sideNavigation.php) e qui sparisce soltanto. */
html[data-dv-nav="h"] #kt_aside { display: none; }

/* =====================================================================
   2 — LA BARRA
   ===================================================================== */

html[data-dv-nav="h"] .dv-topnav {
  display: block;
  position: fixed;
  top: var(--aside-inset);
  left: var(--aside-inset);
  right: var(--aside-inset);
  height: var(--dv-topnav-h);
  /* sopra la testata della pagina (97, style.bundle.css) e i suoi
     elementi; sotto il menu utente (1002), i tooltip (1001) e tutto
     cio' che e' modale */
  z-index: 99;
}

/* Il fondo dietro la barra: una striscia del colore della pagina dal
   bordo finestra fino a --dv-top. Senza, nelle fessure di --aside-inset
   intorno alla card si vedrebbero passare le righe che scorrono sotto.
   z-index -1 dentro il contesto della barra: sotto la card, sopra la
   pagina. */
html[data-dv-nav="h"] .dv-topnav::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--dv-top);
  background: var(--surface-tint);
  z-index: -1;
  pointer-events: none;
}

.dv-topnav__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 8px 0 16px;
  background: var(--aside-bg);
  border-radius: var(--aside-radius);
  box-shadow: 0 12px 34px rgba(16, 24, 40, .14);
}

/* --- Logo ------------------------------------------------------------ */
.dv-topnav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 36px;
  margin-right: 14px;
  border-radius: var(--radius-xs);
}
.dv-topnav__logo img {
  display: block;
  height: 22px;   /* come .dv-panel__logo img */
  width: auto;
}
.dv-topnav__logo:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: 3px;
}

/* --- Le aree --------------------------------------------------------
   overflow:hidden e min-width:0 non sono estetica: e' cosi' che il JS
   (adatta(), blocco 9) si accorge che le linguette non ci stanno —
   scrollWidth > clientWidth — e stringe la barra. */
.dv-topnav__aree {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}

/* button E a: la Home e' un link, le altre aree aprono una tendina.
   I valori di fabbrica del <button> (bordo, fondo, font, margini) e il
   ring globale di draive.core.css vanno azzerati qui, come fa la rail. */
.dv-topnav__area,
.dv-topnav__area:focus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: var(--aside-item-radius);
  background: transparent;
  box-shadow: none;
  color: var(--nav-text-muted);
  font: inherit;
  font-size: calc(12.5px * var(--dv-fs,1));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-base), color var(--motion-base);
}
.dv-topnav__area > i:first-child {
  font-size: calc(18px * var(--dv-fs,1));
  line-height: 1;
  color: inherit;
}
.dv-topnav__caret {
  margin-left: -2px;
  font-size: calc(10px * var(--dv-fs,1));
  line-height: 1;
  color: var(--nav-text-faint);
  transition: transform var(--motion-base);
}
.dv-topnav__area:hover,
.dv-topnav__area--aperta,
.dv-topnav__area--aperta:focus {
  background: var(--nav-hover);
  color: var(--color-white);
  text-decoration: none;
}
.dv-topnav__area--aperta .dv-topnav__caret { transform: rotate(180deg); }

/* L'area della pagina a schermo: la stessa superficie della voce attiva
   nella colonna, cosi' "sei qui" si legge allo stesso modo nelle due
   disposizioni. */
.dv-topnav__area--on,
.dv-topnav__area--on:hover,
.dv-topnav__area--on:focus {
  background: var(--nav-surface);
  color: var(--color-white);
}
body .dv-topnav__area:focus-visible {
  outline: 2px solid var(--nav-focus) !important;
  outline-offset: -2px;
  box-shadow: none !important;
}

/* --- A destra: simulazione, ricerca, azienda, profilo ---------------- */
.dv-topnav__fine {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

.dv-topnav__simula {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 30px;
  padding: 0 6px 0 9px;
  border-radius: var(--radius-sm);
  background: #faeeda;   /* come .dv-simula: e' lo stesso avviso */
  color: #854f0b;
  font-size: calc(11.5px * var(--dv-fs,1));
  font-weight: 600;
}
.dv-topnav__simula i { font-size: calc(14px * var(--dv-fs,1)); color: inherit; }
.dv-topnav__simula-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-topnav__simula-esci {
  flex: 0 0 auto;
  padding: 0 3px;
  color: #854f0b;
  font-size: calc(15px * var(--dv-fs,1));
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.dv-topnav__simula-esci:hover { color: #412402; text-decoration: none; }

/* La ricerca moduli: un campo finto, perche' e' cosi' che una barra in
   alto dice "qui si cerca". Apre lo stesso lightbox della lente
   ([data-dv-cerca-apri], draive-search.js). */
.dv-topnav__cerca,
.dv-topnav__cerca:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 150px;
  margin: 0;
  padding: 0 6px 0 10px;
  border: 1px solid var(--nav-line-strong, rgba(255,255,255,.1));
  border-radius: var(--aside-item-radius);
  background: rgba(255, 255, 255, .03);
  box-shadow: none;
  color: var(--nav-text-faint);
  font: inherit;
  font-size: calc(12.5px * var(--dv-fs,1));
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--motion-base), color var(--motion-base), border-color var(--motion-base);
}
.dv-topnav__cerca i { font-size: calc(16px * var(--dv-fs,1)); line-height: 1; color: inherit; }
.dv-topnav__cerca:hover {
  background: var(--nav-hover);
  color: var(--nav-text-muted);
}
.dv-topnav__kbd {
  margin-left: auto;
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
  color: var(--nav-text-faint);
  font-family: inherit;
  font-size: calc(10.5px * var(--dv-fs,1));
  font-weight: 500;
  line-height: 1.2;
}
body .dv-topnav__cerca:focus-visible {
  outline: 2px solid var(--nav-focus) !important;
  outline-offset: -2px;
  box-shadow: none !important;
}

/* L'azienda: stessa voce e stessa doppia freccia della colonna
   (select.dv-panel__org in draive.sidebar.css), su una riga sola. */
.dv-topnav__org {
  display: block;
  max-width: 170px;
  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;
}
.dv-topnav__org--static { padding: 0 6px; }
select.dv-topnav__org {
  height: 34px;
  margin: 0;
  padding: 0 24px 0 10px;
  border: 0;
  border-radius: var(--aside-item-radius);
  background-color: transparent;
  background-image: 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");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 11px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--motion-base), color var(--motion-base);
}
select.dv-topnav__org:hover {
  background-color: var(--nav-hover);
  color: var(--nav-text-muted);
}
select.dv-topnav__org:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: -2px;
}
/* Le opzioni le disegna il sistema su fondo chiaro: il testo grigio
   chiaro della barra li' non si leggerebbe. */
select.dv-topnav__org option {
  color: var(--ink-body, #1f2328);
  text-transform: none;
  letter-spacing: 0;
}

/* Il profilo: l'avatar e una freccina, apre il menu utente (blocco 7 del
   JS, ancorato sotto). Il nome non c'e': nel menu e' la prima riga. */
.dv-topnav__profilo,
.dv-topnav__profilo:focus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  margin: 0 0 0 2px;
  padding: 3px 7px 3px 3px;
  border: 0;
  border-radius: var(--aside-item-radius);
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--motion-base);
}
.dv-topnav__profilo:hover,
.dv-topnav__profilo[aria-expanded="true"] { background: var(--nav-hover); }
body .dv-topnav__profilo:focus-visible {
  outline: 2px solid var(--nav-focus) !important;
  outline-offset: -2px;
  box-shadow: none !important;
}
.dv-topnav__profilo[aria-expanded="true"] .dv-topnav__caret { transform: rotate(180deg); }
.dv-topnav__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--aside-item-radius);
  overflow: hidden;
}
.dv-topnav__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dv-topnav__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;
}

/* --- Quando non ci sta ----------------------------------------------
   Tre passi, li mette il JS misurando (adatta()), uno sopra l'altro.
   Primo: via le freccine delle tendine. Secondo: le aree non accese
   restano icona sola (il nome lo dice il tooltip). Terzo: anche l'area
   accesa, e la ricerca diventa la sola lente. */
.dv-topnav--senza-frecce .dv-topnav__area .dv-topnav__caret { display: none; }
.dv-topnav--stretta .dv-topnav__area:not(.dv-topnav__area--on) .dv-topnav__label { display: none; }
.dv-topnav--strettissima .dv-topnav__label,
.dv-topnav--strettissima .dv-topnav__cerca-testo,
.dv-topnav--strettissima .dv-topnav__kbd { display: none; }
.dv-topnav--strettissima .dv-topnav__cerca { min-width: 0; padding: 0 9px; }
.dv-topnav--strettissima .dv-topnav__org { max-width: 130px; }

/* --- Le tendine -----------------------------------------------------
   Una card nera come il pannello della colonna, sotto la barra. I gruppi
   dell'area in colonne, con le stesse voci della colonna (.dv-item,
   .dv-group__title, le schede .dv-item--sub di draive.sidebar.css): qui
   si dichiara solo la geometria. La posizione orizzontale la scrive il
   JS sul bottone che la apre. */
.dv-topnav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 6px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--dv-top) - 24px);
  overflow-y: auto;
  padding: 6px 10px 10px;
  background: var(--aside-bg);
  border-radius: var(--aside-radius);
  box-shadow: 0 16px 44px rgba(16, 24, 40, .22);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms cubic-bezier(.22, 1, .36, 1), transform 200ms cubic-bezier(.22, 1, .36, 1);
  scrollbar-width: none;
}
.dv-topnav__menu::-webkit-scrollbar { width: 0; height: 0; }
.dv-topnav__menu[hidden] { display: none; }
.dv-topnav__menu--on {
  opacity: 1;
  transform: none;
}
.dv-topnav__col {
  flex: 0 0 auto;
  min-width: 190px;
  max-width: 250px;
}
.dv-topnav__col .dv-group__title { margin: 10px 0 6px; }
.dv-topnav__menu .dv-branch__sub { margin: 0 0 4px; }

/* =====================================================================
   3 — LA PAGINA SCENDE SOTTO LA BARRA
   ---------------------------------------------------------------------
   Il contenuto nel flusso scende tutto insieme con un margine sul
   wrapper: ogni pagina ha il suo padding-top (53, 64, 76...) e non serve
   conoscerlo. I pezzi FISSI o INCOLLATI (sticky) alla banda alta invece
   vanno presi uno per uno, e hanno quasi tutti scritto 64px — l'altezza
   della banda — a mano. L'elenco viene da due fonti, 14/10/2026: il giro
   di tutte le pagine del menu con la barra accesa (fixed/sticky sopra i
   121px, a pagina ferma e scorsa) e la ricerca di "top: 64px" / 100vh nei
   fogli di piattaforma e di modulo.

   html:where([data-dv-nav="h"]) e non html[data-dv-nav="h"]: aggiunge al
   selettore originale UN SOLO elemento (0,0,1). Basta a passare davanti
   alla regola che si corregge (draive.core.css veniva ricaricato per ultimo (fino al 23/10/2026) da
   bottomScripts.php, e a pari peso vincerebbe lui), ma non scavalca i
   moduli che quella regola la riscrivono gia' piu' pesante: li' resta la
   loro scelta, come con la colonna.
   ===================================================================== */
html[data-dv-nav="h"] .kt-wrapper {
  margin-top: var(--dv-top);
}

/* --- 3a. Fissi a top:0 ---------------------------------------------- */
html[data-dv-nav="h"] #kt_header,
html[data-dv-nav="h"] #kt_subheader,
html[data-dv-nav="h"] #kt_inbox_list .kt-portlet__head,
html:where([data-dv-nav="h"]) body.kt-pipeline #pl_meta:not(:empty) {
  top: var(--dv-top);
}
/* L'anteprima della colonna filtri chiusa (hover-peek): fissa, alta
   quanto la finestra, col contenuto a 76px (64 di banda + 12). */
html:where([data-dv-nav="h"]) body.kt-inbox-aside--hidden .kt-inbox .kt-inbox__aside.kt-portlet.kt-inbox-aside--hover {
  height: calc(100vh - var(--dv-top)) !important;
}
html:where([data-dv-nav="h"]) body.kt-inbox-aside--hidden .kt-inbox #kt_inbox_aside.kt-inbox__aside.kt-inbox-aside--hover {
  top: var(--dv-top);
}

/* --- 3b. Lo "sheet" grigio delle liste e del profilo -----------------
   Uno pseudo-elemento sticky a top:0, alto 100vh, che non occupa posto
   (margin-top -64, margin-bottom -100vh+64). Scende anche lui: parte da
   --dv-top, e' piu' corto di altrettanto, e il margine sotto ripaga la
   differenza perche' il contenuto resti dov'e'. */
html:where([data-dv-nav="h"]) .kt-inbox .kt-inbox__list::before,
html:where([data-dv-nav="h"]) .kt-profilo .kt-app .kt-portlet--tabs::before {
  top: var(--dv-top);
  height: calc(100vh - var(--dv-top));
  margin-bottom: calc(-100vh + 64px + var(--dv-top));
}
html:where([data-dv-nav="h"]) body.kt-veicoli.sr-testata-a-capo:not(.sr-filter-horizontal) .kt-inbox .kt-inbox__list::before,
html:where([data-dv-nav="h"]) body.kt-veicoli.sr-testata-a-capo.sr-filter-horizontal.kt-inbox-aside--hidden .kt-inbox .kt-inbox__list::before {
  margin-bottom: calc(-100vh + 64px + var(--sr-testata-riga2) + var(--dv-top));
}

/* --- 3c. Incollati sotto la banda (sticky a top:64px) --------------- */
html:where([data-dv-nav="h"]) .kt-datatable > .kt-datatable__table > .kt-datatable__head,
html:where([data-dv-nav="h"]) .kt-inbox .kt-inbox__aside.kt-portlet,
html:where([data-dv-nav="h"]) body.kt-veicoli .kt-inbox #kt_inbox_aside.kt-portlet,
html:where([data-dv-nav="h"]) .kt-profilo .kt-app #kt_user_profile_aside.kt-portlet,
html:where([data-dv-nav="h"]) #kt_inbox_list .kt-portlet--tabs.dv-schede > .kt-portlet__head,
html:where([data-dv-nav="h"]) .ag-alto {
  top: calc(64px + var(--dv-top));
}
/* ...e alti quanto resta della finestra sotto la banda */
html:where([data-dv-nav="h"]) .kt-inbox .kt-inbox__aside.kt-portlet,
html:where([data-dv-nav="h"]) body.kt-veicoli .kt-inbox #kt_inbox_aside.kt-portlet {
  height: calc(100vh - 64px - var(--dv-top));
}
html:where([data-dv-nav="h"]) .kt-profilo .kt-app #kt_user_profile_aside.kt-portlet {
  max-height: calc(100vh - 64px - var(--dv-top));
}

/* Showroom: la barra dei filtri «Orizzontale» e le sue varianti, che
   ridichiarano 64px con !important o con le misure della testata. */
html:where([data-dv-nav="h"]) body.sr-filter-horizontal:not(.kt-inbox-aside--hidden) #kt_inbox_aside.kt-inbox__aside.kt-portlet {
  top: calc(64px + var(--dv-top)) !important;
}
html:where([data-dv-nav="h"]) body.kt-veicoli.sr-testata-a-capo.sr-filter-horizontal:not(.kt-inbox-aside--hidden) #kt_inbox_aside.kt-inbox__aside.kt-portlet {
  top: calc(64px + var(--sr-testata-riga2) + var(--dv-top)) !important;
}
html:where([data-dv-nav="h"]) body.sr-filter-horizontal #kt_inbox_list .kt-datatable > .kt-datatable__table > .kt-datatable__head {
  top: calc(64px + var(--sr-bar-h, 0px) + var(--dv-top));
}
html:where([data-dv-nav="h"]) body.kt-veicoli.sr-testata-a-capo #kt_inbox_list .kt-datatable > .kt-datatable__table > .kt-datatable__head {
  top: calc(64px + var(--sr-testata-riga2) + var(--sr-bar-h, 0px) + var(--dv-top));
}
html:where([data-dv-nav="h"]) body.sr-filter-horizontal {
  --sr-peek-t: calc(64px + var(--dv-top));
}
html:where([data-dv-nav="h"]) body.kt-veicoli.sr-testata-a-capo.sr-filter-horizontal {
  --sr-peek-t: calc(64px + var(--sr-testata-riga2) + var(--dv-top));
}

/* Planning logistica (anche nella Bacheca, «I miei»): la colonna dei
   viaggi da assegnare, incollata a 90px. */
html:where([data-dv-nav="h"]) .lgp-backlog {
  top: calc(90px + var(--dv-top));
  max-height: calc(100vh - 120px - var(--dv-top));
}

/* Agenda: la testata del calendario e le righe incollate sotto ag-alto. */
html:where([data-dv-nav="h"]) .kt-agenda .fc thead.fc-head,
html:where([data-dv-nav="h"]) .ag-sq-r--h,
html:where([data-dv-nav="h"]) .ag-el-g {
  top: calc(64px + var(--ag-alto-h, 0px) + var(--dv-top));
}
html:where([data-dv-nav="h"]) .ag-dg {
  max-height: calc(100vh - 64px - var(--ag-alto-h, 0px) - 40px - var(--dv-top));
}

} /* @media (min-width: 1025px) */

/* =====================================================================
   4 — LA BARRA «A FUOCO» (14/10/2026)
   ---------------------------------------------------------------------
   La terza disposizione: html[data-dv-fuoco], sempre insieme a
   data-dv-nav="h" (header.php), quindi tutto quello che sta sopra vale
   anche qui — la barra, le tendine, la pagina che scende (blocco 3).
   Qui sotto c'e' solo cio' che cambia:

     - l'area dove si e' apre le sue PAGINE dentro la barra, la pagina
       aperta e' la pillola bianca; le altre aree sono solo icona e un click
       le apre li' (draive-sidebar.js, blocco 9b). Aprirsi e chiudersi e'
       una griglia da 0fr a 1fr: si anima la larghezza vera, senza misure
       scritte a mano;
     - «Altre N» apre la tendina di sempre;
     - il filo sotto la barra e il quadratino col nome hanno il colore
       dell'azienda (--dv-az, scritto dal PHP sul <nav>);
     - la campanella della testata viene a stare nella barra;
     - scorrendo una lista la barra si RITIRA (data-dv-ritirata): esce in
       alto, la testata della pagina sale a top 0 (--dv-top: 0), il wrapper
       NO — il contenuto non deve saltare mentre lo si scorre.

   Con la barra semplice ('h') i contenitori nuovi del markup non devono
   esistere: display:contents li toglie dal layout lasciando i figli, e
   cio' che e' solo della barra a fuoco e' spento.
   ===================================================================== */
@media (min-width: 1025px) {

.dv-topnav__grp,
.dv-topnav__nome,
.dv-topnav__az { display: contents; }
.dv-topnav__pagine,
.dv-topnav__dot,
.dv-topnav__az-sigla,
.dv-topnav__cerca-vai,
.dv-topnav__campanella,
.dv-barra-linguetta,
.dv-barra-filo { display: none; }

html[data-dv-fuoco] {
  --dv-fuoco-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- le aree ---------------------------------------------------------- */
html[data-dv-fuoco] .dv-topnav__aree { gap: 2px; }
html[data-dv-fuoco] .dv-topnav__grp {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 40px;
  border-radius: 12px;
  transition: background-color 300ms var(--dv-fuoco-ease);
}
html[data-dv-fuoco] .dv-topnav__grp--aperto { background: var(--nav-surface); }

html[data-dv-fuoco] .dv-topnav__area,
html[data-dv-fuoco] .dv-topnav__area:focus {
  position: relative;
  gap: 0;
  height: 40px;
  padding: 0 9px;
  border-radius: 12px;
}
/* chiusa: un'icona di 38px (il JS conta su questa misura, blocco 9b) */
html[data-dv-fuoco] .dv-topnav__grp:not(.dv-topnav__grp--aperto) .dv-topnav__area {
  width: 38px;
  padding: 0;
  justify-content: center;
}
/* la superficie «sei qui» ora e' del gruppo intero, non del bottone */
html[data-dv-fuoco] .dv-topnav__area--on,
html[data-dv-fuoco] .dv-topnav__area--on:focus { background: transparent; }
html[data-dv-fuoco] .dv-topnav__grp--aperto .dv-topnav__area { color: var(--color-white); }
html[data-dv-fuoco] .dv-topnav__grp--aperto .dv-topnav__area:hover { background: transparent; }
html[data-dv-fuoco] .dv-topnav__area .dv-topnav__caret { display: none; }

/* il nome dell'area: c'e' solo quando l'area e' aperta */
html[data-dv-fuoco] .dv-topnav__nome {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns 340ms var(--dv-fuoco-ease);
}
html[data-dv-fuoco] .dv-topnav__nome > .dv-topnav__label {
  min-width: 0;
  overflow: hidden;
  padding-left: 0;
  transition: padding 340ms var(--dv-fuoco-ease);
}
html[data-dv-fuoco] .dv-topnav__grp--aperto .dv-topnav__nome { grid-template-columns: 1fr; }
html[data-dv-fuoco] .dv-topnav__grp--aperto .dv-topnav__nome > .dv-topnav__label { padding-left: 7px; }

/* il numero della campanella sull'icona di un'area chiusa */
html[data-dv-fuoco] .dv-topnav__dot {
  display: block;
  position: absolute;
  top: 3px;
  left: 20px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid var(--aside-bg);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html[data-dv-fuoco] .dv-topnav__dot[hidden],
html[data-dv-fuoco] .dv-topnav__grp--aperto .dv-topnav__dot { display: none; }

/* --- le pagine dell'area aperta ---------------------------------------
   visibility con ritardo: chiuse non si devono poter raggiungere col Tab,
   ma devono restare visibili finche' la griglia si richiude. */
html[data-dv-fuoco] .dv-topnav__pagine {
  display: grid;
  grid-template-columns: 0fr;
  visibility: hidden;
  transition: grid-template-columns 380ms var(--dv-fuoco-ease), visibility 0s linear 380ms;
}
html[data-dv-fuoco] .dv-topnav__grp--aperto .dv-topnav__pagine {
  grid-template-columns: 1fr;
  visibility: visible;
  transition: grid-template-columns 380ms var(--dv-fuoco-ease), visibility 0s;
}
.dv-topnav__pagine-in {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
/* il margine in fondo solo da aperta: da chiusa, anche 5px di padding
   resterebbero (la griglia a 0fr non scende sotto il padding) e ogni icona
   sarebbe piu' larga di quanto il JS conta */
html[data-dv-fuoco] .dv-topnav__grp--aperto .dv-topnav__pagine-in { padding-right: 5px; }
.dv-topnav__pagine-in::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 6px 0 0;
  background: var(--nav-line-strong);
}
.dv-topnav__pg,
.dv-topnav__altre,
.dv-topnav__altre:focus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--nav-text-muted);
  font: inherit;
  font-size: calc(12.5px * var(--dv-fs,1));
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-base), color var(--motion-base);
}
.dv-topnav__pg[hidden] { display: none; }
.dv-topnav__pg:hover,
.dv-topnav__altre:hover,
.dv-topnav__altre[aria-expanded="true"] {
  background: var(--nav-hover);
  color: var(--color-white);
  text-decoration: none;
}
/* la pagina a schermo: la pillola bianca */
.dv-topnav__pg--on,
.dv-topnav__pg--on:hover,
.dv-topnav__pg--on:focus {
  background: var(--color-white);
  color: var(--aside-bg);
}
.dv-topnav__altre { gap: 4px; padding: 0 8px; color: var(--nav-text-faint); }
.dv-topnav__altre i { font-size: calc(10px * var(--dv-fs,1)); transition: transform var(--motion-base); }
.dv-topnav__altre[aria-expanded="true"] i { transform: rotate(180deg); }
body .dv-topnav__pg:focus-visible,
body .dv-topnav__altre:focus-visible {
  outline: 2px solid var(--nav-focus) !important;
  outline-offset: -2px;
  box-shadow: none !important;
}
.dv-topnav__n {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dv-topnav__n[hidden] { display: none; }

/* --- la ricerca: «Vai a…» ----------------------------------------------- */
html[data-dv-fuoco] .dv-topnav__cerca { min-width: 196px; }
html[data-dv-fuoco] .dv-topnav__cerca-testo { display: none; }
html[data-dv-fuoco] .dv-topnav__cerca-vai { display: inline; white-space: nowrap; }

/* --- l'azienda: quadratino col colore e nome ------------------------- */
html[data-dv-fuoco] .dv-topnav__bar { position: relative; }
html[data-dv-fuoco] .dv-topnav__bar::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--dv-az, transparent);
  pointer-events: none;
}
html[data-dv-fuoco] .dv-topnav__az {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-left: 6px;
  border-radius: var(--aside-item-radius);
  background: rgba(255, 255, 255, .05);
}
html[data-dv-fuoco] .dv-topnav__az-sigla {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--dv-az);
  color: #fff;
  font-size: calc(11px * var(--dv-fs,1));
  font-weight: 700;
  line-height: 1;
}
html[data-dv-fuoco] .dv-topnav__az .dv-topnav__org { max-width: 140px; }
html[data-dv-fuoco] .dv-topnav__az .dv-topnav__org--static { padding: 0 10px 0 8px; }

/* non ci sta nemmeno l'essenziale (finestre strette, dai 1025px): il terzo
   passo della barra semplice, piu' la ricerca a sola lente e il nome
   dell'azienda corto (il quadratino col colore resta) */
html[data-dv-fuoco] .dv-topnav--strettissima .dv-topnav__cerca { min-width: 0; padding: 0 9px; }
html[data-dv-fuoco] .dv-topnav--strettissima .dv-topnav__cerca-vai { display: none; }
html[data-dv-fuoco] .dv-topnav--strettissima .dv-topnav__az .dv-topnav__org { max-width: 76px; }

/* --- la campanella, portata qui dal JS ------------------------------- */
html[data-dv-fuoco] .dv-topnav__campanella { display: flex; align-items: center; }
html[data-dv-fuoco] .dv-topnav__campanella .drv-campanella { display: flex; }
html[data-dv-fuoco] .dv-topnav__campanella .drv-campanella-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: var(--aside-item-radius) !important;
}
html[data-dv-fuoco] .dv-topnav__campanella .drv-campanella-n { border-color: var(--aside-bg); }

/* --- la barra si ritira ------------------------------------------------ */
html[data-dv-fuoco] .dv-topnav { transition: top 320ms var(--dv-fuoco-ease); }
html[data-dv-nav="h"][data-dv-fuoco] .kt-wrapper {
  margin-top: calc(var(--aside-inset) + var(--dv-topnav-h));
}
html[data-dv-nav="h"][data-dv-fuoco][data-dv-ritirata] { --dv-top: 0px; }
html[data-dv-fuoco][data-dv-ritirata] .dv-topnav {
  top: calc(-1 * var(--dv-topnav-h) - 16px);
}
html[data-dv-fuoco][data-dv-ritirata] .dv-topnav__bar { box-shadow: none; }
html[data-dv-fuoco][data-dv-ritirata] .dv-barra-filo {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dv-az);
  z-index: 98;
  pointer-events: none;
}
/* sotto la barra (99) quando torna, sopra la testata (97) */
html[data-dv-fuoco][data-dv-ritirata] .dv-barra-linguetta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 98;
  width: 64px;
  height: 14px;
  margin: 0 0 0 -32px;
  padding: 0;
  border: 0;
  border-radius: 0 0 9px 9px;
  background: var(--aside-bg);
  box-shadow: none;
  color: var(--nav-text-muted);
  cursor: pointer;
  transition: height var(--motion-base), color var(--motion-base);
}
html[data-dv-fuoco][data-dv-ritirata] .dv-barra-linguetta:hover,
html[data-dv-fuoco][data-dv-ritirata] .dv-barra-linguetta:focus-visible {
  height: 20px;
  color: var(--color-white);
  outline: none;
}
.dv-barra-linguetta i { font-size: 10px; line-height: 1; }

} /* @media (min-width: 1025px) */

/* =====================================================================
   5 — CON LA BARRA, NIENTE FASCIA BIANCA A SINISTRA (14/10/2026)
   ---------------------------------------------------------------------
   Le liste con la colonna filtri hanno il fondo pagina BIANCO apposta
   (draive.core.css, «canvas pagina»: html body:has(#kt_inbox_aside)... e
   l'elenco delle classi kt-veicoli, kt-lista-*, con #fff !important): la
   colonna sta sul bianco e la lista sul foglio grigio arrotondato a
   sinistra. Con la barra in alto, quando la colonna NON c'e' a fianco, di
   quel bianco resta solo la striscia di 15px fra il bordo finestra e il
   foglio (Daniele: «rimuovi l'area bianca nel caso in cui non e' previsto
   il filtro in sidebar laterale»). Li' il fondo torna il grigio del foglio,
   e il foglio arriva al bordo. I casi:
     - i filtri in orizzontale sopra la lista (Showroom, sr-filter-horizontal);
     - la colonna filtri chiusa (kt-inbox-aside--hidden);
     - una lista senza colonna filtri.
   Con la colonna a fianco resta tutto com'e'; con la colonna a sinistra
   (data-dv-nav="v") questo blocco non vale.
   :root e gli id dentro :has() non sono decorazione: la regola da battere
   e' !important a (1,2,2) e draive.core.css veniva ricaricato per ultimo (fino al 23/10/2026) da
   bottomScripts.php, quindi a pari peso vincerebbe lui. */
@media (min-width: 1025px) {
  html[data-dv-nav="h"]:root body:has(#kt_inbox_aside):is(.sr-filter-horizontal, .kt-inbox-aside--hidden),
  html[data-dv-nav="h"]:root body:has(.kt-inbox__list):not(:has(#kt_inbox_aside)) {
    background: var(--surface-tint) !important;
  }
}

/* =====================================================================
   6 — SHOWROOM: STESSO RIENTRO A DESTRA E A SINISTRA (15/10/2026)
   ---------------------------------------------------------------------
   Daniele, screenshot dello Showroom con la barra a fuoco: «sistema il
   padding laterale, lo voglio uguale sia a dx che sx». Il rientro di
   sinistra e' quello della colonna (.kt-wrapper: --aside-w + 2 x
   --aside-inset, piu' i 5px di #kt_content .kt-container in draive.core.css);
   a destra non c'era niente. Con la colonna a sinistra non si vedeva,
   con la barra si': righe e filtri a 24px dal bordo sinistro e a 9px dal
   destro. Qui il rientro di sinistra si ripete a destra (10 + 5), e
   «Filtro» scende sulla stessa linea delle righe: tutto a 24px da tutti e
   due i bordi, come il «+» della testata, che a destra c'era gia'.
   Solo Showroom (kt-veicoli, anche Venduto/Archiviato/...): misurate a
   1550px, le altre pagine hanno rientri loro (la Bacheca 17 e 24, la Home
   15 e 0) e una regola comune ne avrebbe peggiorate alcune.
   #kt_content > .kt-container e non #kt_content .kt-container: dentro c'e'
   anche quello di #kt_subheader, largo 300px fissi. */
@media (min-width: 1025px) {
  html[data-dv-nav="h"] body.kt-veicoli .kt-wrapper {
    padding-right: calc(var(--aside-inset) * 2);
  }
  html[data-dv-nav="h"] body.kt-veicoli #kt_content > .kt-container {
    padding-right: 5px;
  }
  html[data-dv-nav="h"] body.kt-veicoli #kt_subheader .kt-container {
    padding-left: 12px;
  }
}

/* Il tooltip, quando esce SOTTO un bottone della barra (draive-sidebar.js,
   mostraTip): entra scendendo invece che da sinistra. */
.dv-tip--sotto { transform: translateY(-4px); }
.dv-tip--sotto.dv-tip--on { transform: none; }

/* Il disegnino della scelta «Menu» nel menu del profilo: due caselle
   uguali come quelle della dimensione del testo. */
.dv-usermenu .dv-navswitch__seg svg { display: block; margin: 0 auto; }

/* La scelta ha senso solo dove la barra esiste: sul telefono il menu e'
   sempre il drawer, e una scelta che non cambia niente confonde. */
@media (max-width: 1024px) {
  .dv-usermenu__pref--nav { display: none; }
  /* 16/10/2026 — linguetta e filo della barra a fuoco esistono solo sopra
     i 1024px (blocco 4). Qui sotto restavano bottone nudo: figlio flex
     della pagina, si allungava a tutta altezza e lasciava una fascia
     grigia di 29px a sinistra di OGNI pagina su tablet e telefono. */
  .dv-barra-linguetta,
  .dv-barra-filo { display: none; }
  /* «Apri un ticket» e' un fantasma col glifo nero (draive.core.css, 1,1,0
     !important), giusto sulla testata bianca da scrivania. Sotto i 1024px
     la testata e' NERA: il glifo spariva su ogni pagina. Il bianco del
     «+» accanto; html body alza la specificita' sopra quella regola,
     che draive.core.css ricaricava per ultima fino al 23/10/2026. */
  html body #sup_topbar_ticket .topbar-add-btn,
  html body #sup_topbar_ticket .topbar-add-btn:hover,
  html body #sup_topbar_ticket .topbar-add-btn:active { color: rgba(255, 255, 255, .88) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-topnav__menu,
  .dv-topnav__caret,
  .dv-topnav,
  .dv-topnav__grp,
  .dv-topnav__nome,
  .dv-topnav__nome > .dv-topnav__label,
  .dv-topnav__pagine,
  .dv-topnav__altre i { transition: none !important; }
}