/* ============================================================
   DRAIVE — CORE
   L'unico foglio comune della piattaforma: tutto cio' che vale su
   piu' di un modulo sta qui, e solo qui.

   Ordine di caricamento (includes/header.php):
     1. plugins.bundle.css / style.bundle.css   (Metronic, non si tocca)
     2. draive.tokens.css                       (solo valori)
     3. draive.core.css                         <- questo file
     4. draive.sidebar.css, draive.topnav.css   (il guscio: colonna e barra)
     5. pages/<modulo>/css/*.css                (solo lo specifico)

   Dentro, tre parti, nell'ordine in cui devono vincere:
     A  base della pagina-elenco di Metronic (ex pages/inbox/inbox.css)
     B  globali della casa (ex custom.css, 01-30 e blocchi autorevoli)
     C  componenti dv-* da adottare nei moduli

   Regole di convivenza (23/10/2026):
   - un componente si scrive UNA volta, qui; il modulo aggiunge solo
     cio' che e' suo, sempre sotto il proprio aggancio (body.kt-<modulo>,
     l'id della pagina o il prefisso delle sue classi);
   - un foglio di modulo non riveste classi comuni senza aggancio
     (.row, .table, .form-group label, #kt_header...): vale per tutta
     la pagina, filtri e pannelli compresi;
   - !important solo per battere il bundle Metronic o uno style="" che
     scrive il JS, mai per battere un altro foglio DRAIVE: se due regole
     di DRAIVE litigano, una delle due e' di troppo;
   - colori, raggi, spazi e corpi da draive.tokens.css.

   Nessun foglio si ricarica in fondo alla pagina. Fino al 23/10/2026
   custom.css si caricava due volte (testata e bottomScripts.php, piu'
   una terza nei planning) e vinceva a pari specificita' su core,
   colonna e moduli: le regole scritte dopo sembravano vive e non lo
   erano. Le poche che si erano adattate a quel giro sono state
   sistemate quel giorno, pagina per pagina, sul banco degli stili.
   ============================================================ */


/* ============================================================
   A — BASE: PAGINA-ELENCO DI METRONIC (ex pages/inbox/inbox.css)
   Restano solo le regole che toccano classi ancora nel markup: le
   altre 885 righe (pagina posta del tema) erano senza destinatario.
   Sta in testa perche' e' tema, non casa: le parti B e C la battono.
   ============================================================ */

.kt-inbox .kt-inbox__aside {
  padding: 40px 20px;
  width: 275px; }
    .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item {
      margin-bottom: 0.5rem; }
      .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item .kt-nav__link {
        padding: 0.75rem 20px;
        border-radius: 4px; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item .kt-nav__link i {
          color: #8e96b8; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item .kt-nav__link g [fill] {
          -webkit-transition: fill 0.3s ease;
          transition: fill 0.3s ease;
          fill: #8e96b8; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item .kt-nav__link:hover g [fill] {
          -webkit-transition: fill 0.3s ease;
          transition: fill 0.3s ease; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item .kt-nav__link .kt-nav__link-icon {
          text-align: center;
          margin: 0 0.7rem 0 -0.23rem; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item .kt-nav__link .kt-nav__link-text {
          font-weight: 500;
          color: #74788d; }
      .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item:last-child {
        margin-bottom: 0; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item:last-child .kt-nav__link .kt-nav__link-icon {
          font-size: calc(0.9rem * var(--dv-fs,1)); }
      .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.hover .kt-nav__link, .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.kt-nav__item--active .kt-nav__link {
        background-color: #f7f8fa;
        border-radius: 4px; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.hover .kt-nav__link i, .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.kt-nav__item--active .kt-nav__link i {
          color: #3699ff; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.hover .kt-nav__link g [fill], .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.kt-nav__item--active .kt-nav__link g [fill] {
          -webkit-transition: fill 0.3s ease;
          transition: fill 0.3s ease;
          fill: #3699ff; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.hover .kt-nav__link:hover g [fill], .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.kt-nav__item--active .kt-nav__link:hover g [fill] {
          -webkit-transition: fill 0.3s ease;
          transition: fill 0.3s ease; }
        .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.hover .kt-nav__link .kt-nav__link-text, .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item.kt-nav__item--active .kt-nav__link .kt-nav__link-text {
          color: #3699ff; }

.kt-inbox .kt-inbox__list {
  display: none;
  padding: 0; }

  .kt-inbox .kt-inbox__list.kt-inbox__list--shown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .kt-inbox .kt-inbox__list .kt-inbox__items {
    padding: 0; }


.kt-inbox .kt-portlet__head {
  min-height: 50px !important;
}

@media (max-width: 1024px) {
  .kt-inbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
      .kt-inbox .kt-inbox__aside .kt-inbox__nav .kt-nav .kt-nav__item .kt-nav__link {
        padding: 0.75rem 10px; }
    .kt-inbox .kt-inbox__list .kt-inbox__items {
      overflow: auto; }
    .kt-inbox .kt-inbox__list .kt-portlet__head {
      min-height: 60px !important;
      padding: 10px 15px; }
    .kt-inbox .kt-portlet__head {
      min-height: 60px !important;
      padding: 10px 15px; } }


.kt-inbox__aside-close {
  display: none; }

@media (max-width: 1024px) {
  .kt-inbox__aside {
    z-index: 1001;
    position: fixed;
    -webkit-overflow-scrolling: touch;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 300px !important;
    -webkit-transition: left 0.3s ease, right 0.3s ease;
    transition: left 0.3s ease, right 0.3s ease;
    left: -320px; }
    .kt-inbox__aside.kt-inbox__aside--on {
      -webkit-transition: left 0.3s ease, right 0.3s ease;
      transition: left 0.3s ease, right 0.3s ease;
      left: 0; } }
  @media screen and (max-width: 1024px) and (-ms-high-contrast: active), (max-width: 1024px) and (-ms-high-contrast: none) {
    .kt-inbox__aside {
      -webkit-transition: none !important;
      transition: none !important; } }

@media (max-width: 1024px) {
  .kt-inbox__aside--right .kt-inbox__aside {
    right: -320px;
    left: auto; }
    .kt-inbox__aside--right .kt-inbox__aside.kt-inbox__aside--on {
      -webkit-transition: left 0.3s ease, right 0.3s ease;
      transition: left 0.3s ease, right 0.3s ease;
      right: 0;
      left: auto; }
  .kt-inbox__aside-close {
    width: 25px;
    height: 25px;
    top: 1px;
    z-index: 1002;
    -webkit-transition: left 0.3s ease, right 0.3s ease;
    transition: left 0.3s ease, right 0.3s ease;
    position: fixed;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 3px;
    cursor: pointer;
    outline: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    left: -25px; } }
  @media screen and (max-width: 1024px) and (-ms-high-contrast: active), (max-width: 1024px) and (-ms-high-contrast: none) {
    .kt-inbox__aside-close {
      -webkit-transition: none !important;
      transition: none !important; } }

@media (max-width: 1024px) {
    .kt-inbox__aside-close > i {
      line-height: 0;
      font-size: calc(1.4rem * var(--dv-fs,1)); }
    .kt-inbox__aside-close:hover {
      text-decoration: none; }
    .kt-inbox__aside--right .kt-inbox__aside-close {
      left: auto;
      right: -25px; }
    .kt-inbox__aside--on .kt-inbox__aside-close {
      -webkit-transition: left 0.3s ease, right 0.3s ease;
      transition: left 0.3s ease, right 0.3s ease;
      left: 274px; }
    .kt-inbox__aside--on.kt-inbox__aside--right .kt-inbox__aside-close {
      left: auto;
      right: 274px; }
  .kt-inbox__aside-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 1000;
    -webkit-animation: kt-animate-fade-in .3s linear 1;
    animation: kt-animate-fade-in .3s linear 1; }
  .kt-inbox__aside-overlay {
    background: rgba(0, 0, 0, 0.05); }
  .kt-inbox__aside-close {
    background-color: #f7f8fa; }
    .kt-inbox__aside-close > i {
      color: #74788d; }
    .kt-inbox__aside-close:hover {
      background-color: transparent; }
      .kt-inbox__aside-close:hover > i {
        color: #3699ff; } }

@media (max-width: 350px) {
  .kt-inbox__aside {
    width: 90% !important; } }


/* ============================================================
   B — GLOBALI DELLA CASA (ex assets/css/custom.css)
   ============================================================ */

/* ============================================================
   02 — RESET / BASE (html, body, *, a, p, h1-h6 senza classi)
   ============================================================ */

/* Select2 full width and vertical centering */
html, body {
  font-family: var(--font-sans);
  color: #111827;
  /* neutral-900 */
}

/* DIMENSIONE DEL TESTO — la riga qui sopra dichiarava font-size per html E
   body insieme, e con la scala globale (--dv-fs, v. draive.tokens.css) le due
   dichiarazioni si moltiplicavano fra loro: body vale 0.875rem, cioe' 0.875
   volte html, quindi un fattore applicato a tutt'e due lo si sarebbe visto al
   quadrato (a 1.08 il testo cresceva del 17%, non dell'8).
   Le due righe sono separate apposta:
     html — resta 0.875rem = 14px, cioe' la base del rem. NON scala, se no
            scalerebbe con lei ogni padding/altezza scritto in rem dal tema
            (Bootstrap e Metronic ne sono pieni) e questa sarebbe una lente
            d'ingrandimento sul layout, non una dimensione del testo;
     body — scala: 0.875rem di html fa 12.25px, ed e' la misura che eredita
            tutto il testo senza font-size proprio. */
html { font-size: 0.875rem; }
body { font-size: calc(0.875rem * var(--dv-fs,1)); }

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  line-height: 1.2;
  color: #373f50;
}

/* ============================================================
   03 — LAYOUT GLOBALE (kt-wrapper, kt-container, kt-page, kt-content)
   ============================================================ */

/* Page background like Metronic — solo su body; .kt-grid e .kt-content sono trasparenti per default e mostrano il bg del body */
body {
  background-color: #F6F7FB;
}

#kt_content > .kt-container, #kt_content > .kt-container.kt-container--fluid {
  background: #f6f7fb;
}

/* .kt-wrapper: il rientro per la colonna sta in draive.sidebar.css
   insieme alla colonna che lo causa (e alla sua transizione). Qui era
   una terza dichiarazione, sovrascritta a ogni larghezza dalle due
   media query e quindi mai applicata. */

/* Footer: Metronic base lo imposta a background:#ffffff (style.bundle.css ~36505),
   creando una fascia bianca su tutte le pagine. Lo riallineiamo al bg pagina. */
.kt-footer { background: transparent; }

/* ============================================================
   04 — HEADER / TOPBAR (kt-header, .topbar-add-btn, header user)
   ============================================================ */


.kt-page-loader--logo img {
  width: 180px;
}

#kt_header {
  height: 64px;
  min-height: 64px;
}

/* === Pulsante "+" (aggiungi nuovo) – stile globale ===
   Stesso design/dimensioni del pulsante "Importa Dati" (btn KTUI mono,
   34px): quadrato icon-only, radius 6, #09090b, hover #1d1d20. */
.topbar-add-btn {
   /* kt-menu__link nel topbar aggiunge padding: lo azzera */
  margin-right: 8px;
}

.topbar-add-btn:hover {
  box-shadow: none;
}

.topbar-add-btn:active {
  transform: translateY(1px);
}

.topbar-add-btn i {
  color: #fff;
  transition: transform .18s ease;
}

/* "Apri un ticket": azione secondaria nella topbar, va alleggerita rispetto
   al "+" (azione primaria) che condivide .topbar-add-btn — qui niente
   quadrato di sfondo, resta solo il glifo nero. Scope sull'#id (vince sugli
   !important della regola base sopra) cosi' il "+" altrove nel sito, che usa
   la stessa classe, non viene toccato. */
#sup_topbar_ticket .topbar-add-btn,
#sup_topbar_ticket .topbar-add-btn:hover,
#sup_topbar_ticket .topbar-add-btn:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--action, #09090b) !important;
}

#sup_topbar_ticket .topbar-add-btn i {
  color: inherit !important;
}

/* ============================================================
   05 — MENU METRONIC CONDIVISO (.kt-menu__*)
   ------------------------------------------------------------
   ATTENZIONE AL NOME: questo blocco si chiamava "SIDEBAR / ASIDE"
   ed era diventato falso. Dal 2026-08-08 la colonna di
   navigazione non usa piu' il markup kt-menu__: e' resa da
   includes/sideNavigation.php con classi .dv-* e vestita da
   assets/css/draive.sidebar.css, che e' l'unico posto in cui la
   sidebar ha un aspetto.

   Le ~230 righe che stavano qui sono state CANCELLATE, non
   spostate e non sovrascritte: erano .kt-aside, #kt_aside,
   .pro4-aside-user, .kt-menu__section, gli stati
   .kt-aside--minimize e il vecchio toggler a due icone. Diverse
   si contraddicevano fra loro (#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}) e vinceva l'ordine di
   caricamento, non una decisione.

   Quello che resta qui sotto NON e' avanzo: i menu di pagina
   della topbar (pages/*/includes/topnavigation.php,
   topbarQuickactions.php) usano ancora .kt-menu__nav,
   .kt-menu__item, .kt-menu__link e .kt-menu__link-text, e queste
   sono le regole che li vestono. Prima erano scritte per la
   colonna e la topbar se le prendeva di rimbalzo; ora sono
   dichiaratamente sue. Non aggiungere qui regole per la
   sidebar: vanno in draive.sidebar.css.
   ============================================================ */

body,
.kt-menu__nav,
.kt-menu__item,
.kt-menu__link {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kt-menu__nav {
  gap: 4px;
}

.kt-menu__item {
  margin: 4px 0;
  border-radius: 12px;
}

.kt-menu__item .kt-menu__link {
  border-radius: var(--radius-md);
  min-height: 42px;
  padding: 11px 12px;
}

/* I valori qui sotto sono inchiostri da superficie CHIARA (2026-08-09).
   Erano rimasti i token --nav-* della colonna scura da cui queste regole
   provengono: ma la topbar sta su banda chiara (trasparente sul canvas
   bianco; #f6f7fb su showroom), e --nav-text (#e6e8ec) su quel fondo e'
   invisibile — "Importa/Esporta" sembravano disabilitati, e in hover il
   testo diventava bianco. Il mobile non c'entra: sotto i 1025px la barra
   e' nera e la sezione 4 qui sotto reimpone gia' color:#fff al testo. */
.kt-menu__link .kt-menu__link-text {
  color: var(--ink-body);
  font-weight: 500;
}

.kt-menu__link-text {
  color: var(--color-white);
  font-weight: 600;
  margin-left: 0.75rem;
}

.kt-menu__link i.ki-outline {
  width: 20px;
  height: 20px;
  min-width: 20px;
  color: var(--ink-muted);
  opacity: .95;
}


.kt-menu__link i.ki-outline {
  stroke-width: 1.5;
}

/* hover/attivo: --surface-track e non --surface-soft, che sul grigio
   #f6f7fb della testata showroom non si distinguerebbe dal fondo */
.kt-menu__item:hover > .kt-menu__link {
  background: var(--surface-track);
}

.kt-menu__item:hover .kt-menu__link-text {
  color: var(--ink);
}


.kt-menu__item.kt-menu__item--active > .kt-menu__link,
.kt-menu__item.kt-menu__item--open > .kt-menu__link {
  background: var(--surface-track);
}

.kt-menu__item.kt-menu__item--here > .kt-menu__link {
  background: var(--surface-track);
  box-shadow: 0 0 0 1px var(--hairline) inset;
}

.kt-menu__submenu {
  background: transparent;
  padding: 4px 0 6px 44px;
}

.kt-menu__subnav .kt-menu__item .kt-menu__link {
  min-height: 38px;
  padding: 9px 10px;
}

.kt-menu__subnav .kt-menu__item .kt-menu__link-text {
  color: var(--ink-body);
}

.kt-menu__subnav .kt-menu__item:hover > .kt-menu__link {
  background: var(--surface-track);
}

/* ============================================================
   06 — SUBHEADER (kt-subheader, breadcrumb)
   ============================================================ */

#kt_subheader_group_actions_delete_all {
  margin-top: 0.8rem;
}

.kt-subheader__title {
  font-weight: 600;
  color: #0f172a;
}

/* subheader inside content must be transparent to show the radius */

/* ============================================================
   08 — COMPONENTI: MODAL E DEMO-PANEL (modal, kt-demo-panel, lg-backdrop)
   ============================================================ */

/* ================================
   Unified Lightbox / Modal styling
   (Bootstrap modal + KTOffcanvas demo-panel)
   ================================ */

/* (14/09/2026) Velo, margini, bordo, raggio e ombra dei modali: tutto nel
   blocco LIGHTBOX DRAWER e nella regola "body .modal-backdrop" piu' sotto.
   Le regole che stavano qui (bordo 1px, raggio 16, margine auto) erano
   battute da quelle e sono state tolte. */

/* Testata, X e piede dei modali: vedi "ANATOMIA UNICA" nel blocco
   LIGHTBOX DRAWER. Le regole che stavano qui (padding 1.25rem, X a 36px
   col testo grigio, filetti rgba) erano tutte battute da quel blocco —
   rimosse il 14/09/2026. */

/* LightGallery backdrop (used in vehicle media lightbox) */
.lg-backdrop {
  background: var(--lightbox-backdrop) !important;
}

.lg-backdrop.in {
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(var(--lightbox-blur));
  backdrop-filter: blur(var(--lightbox-blur));
}

/* KT demo-panel (offcanvas lightbox) backdrop blur — stesso backdrop del
   modal Bootstrap (es. "Inserisci una nuova azienda"): scrim scuro + blur.
   Il bundle lo lasciava quasi trasparente (rgba(0,0,0,.05)) e senza blur. */
.kt-demo-panel-overlay {
  background: var(--lightbox-backdrop) !important;
  -webkit-backdrop-filter: blur(var(--lightbox-blur));
  backdrop-filter: blur(var(--lightbox-blur));
}

/* KT demo-panel card look (keep slide animation as-is) */


.kt-demo-panel .kt-demo-panel__body {
  padding: 1.25rem 1.5rem !important;
}

/* Testata, X e frecce del drawer: "ANATOMIA UNICA" (14/09/2026). */

/* KT demo-panel: inset, raggio, bordo e ombra nel blocco LIGHTBOX DRAWER */
.kt-demo-panel {
  overflow: hidden;
  z-index: 3100 !important;
}

/* =========================================================
   Profile lightbox: vertical sidebar navigation (Metronic-like)
   Applies when profile page is opened inside a lightbox/modal
   ========================================================= */
.modal .kt-app, .kt-demo-panel .kt-app {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: stretch;
}

/* ============================================================
   09 — COMPONENTI: FORM (form-control, form-group, label, input, select, textarea, checkbox, radio, draive-error)
   ============================================================ */

.form-group {
  margin-bottom: 0;
}

.radio {
  color: #74788d;
}

.input-group-prepend .btn, .input-group-append .btn {
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0!important;
}

/* arancione */
.kt-radio.kt-radio--solid.color > span {
  border: none!important;
}

.input-group i {
  color: #0000009c;
  line-height: 0;
}

.input-group-text {
  background: #80808029;
  border: none;
}

.error.invalid-feedback {
  text-align: left;
}

/* Form labels & groups */
.form-group label {
  font-weight: 600;
}

/* col-lg-9 aggiunto 2026-07-05: senza, una riga 9+3 (es. "Inserisci
   vincolo" nella scheda veicolo) partiva disallineata di 30px */
.form-group.col-lg-4, .form-group.col-lg-3, .form-group.col-lg-6, .form-group.col-lg-9 {
  margin-top: 30px;
}

/* ==========================================================
   DRAIVE – Global form & button style (floating labels)
   ========================================================== */

/* Base look for classic controls */
.form-control, .form-select, textarea.form-control {
  background-color: var(--draive-field-bg);
  border: 1px solid var(--draive-field-border);
  border-radius: var(--draive-radius);
  box-shadow: none !important;
}

.form-control:focus, .form-select:focus, textarea.form-control:focus {
  background-color: var(--draive-field-bg-focus);
  border-color: var(--draive-border-focus);
  box-shadow: none !important;
}

.form-control.is-invalid,
.form-select.is-invalid,
textarea.form-control.is-invalid {
  border-color: var(--draive-border-error) !important;
  background-color: var(--draive-field-bg-focus);
}

/* ==========================================================
   Form errors – unify across the whole platform
   Target: same look as "Dettaglio prenotazione" (red border + red inline message)
   ========================================================== */

/* Most common feedback blocks (Bootstrap, FormValidation, legacy) */
.invalid-feedback,
.form-text.text-danger,
.text-danger.form-text,
.text-danger.small,
.text-danger {
  line-height: 1.2;
}

/* Keep ONLY the feedback blocks as flex rows with an icon */
.invalid-feedback,
.form-text.text-danger,
.text-danger.form-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  color: var(--draive-border-error) !important;
}

/* Add a consistent warning bullet before messages (no HTML changes needed) */
.invalid-feedback::before,
.form-text.text-danger::before,
.text-danger.form-text::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--draive-border-error);
  color: #fff;
  line-height: 1;
  flex: 0 0 16px;
}

/* L'errore di checkbox e radio sta nel blocco unico DRAIVE CHECKS in
   coda al file. Qui c'era un outline rosso di 2px: su .kt-checkbox non
   si e' mai visto (l'input e' a opacity 0, il box e' il <span> accanto)
   e sui nativi si sarebbe sommato all'anello del blocco in coda, due
   cerchi rossi concentrici sullo stesso box. Rimosso il 2026-08-09. */

/* Inline field errors (same style used in mobile payment form screenshot) */
/* .draive-error: la resa e' nel blocco unico STATO ERRORE in coda.
   Qui restava una copia con gli stessi valori scritti a mano. */

.draive-error i {
  line-height: 1;
}

/* Le regole .draive-floating che stavano qui erano un duplicato verbatim
   del blocco autorevole "DRAIVE FIELDS" in coda al file: stesso
   selettore, stesse proprieta, stessi valori. Rimosse il 2026-08-07
   dopo averlo verificato proprieta per proprieta. Le regole rimaste
   qui sotto NON sono coperte da quel blocco. */
/* Floating label wrapper generated by JS */
.draive-floating {
  position: relative;
  width: 100%;
}


/* Chrome autofill: senza questo l'autofill dipinge il suo sfondo
   (bianco/giallino) sopra il box grigio del campo e il riquadro
   "sparisce" (es. Nome utente nella login) */
.draive-floating .draive-control:-webkit-autofill,
.draive-floating .draive-control:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--draive-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--draive-field-bg) inset !important;
  -webkit-text-fill-color: var(--ink-body);
  caret-color: var(--ink-body);
  border-radius: var(--draive-radius);
}


/* Float when focused or when a value is present.
   Per i <select> non si usa :not(:placeholder-shown) (sempre vero): la label
   sale solo con .draive-has-value (JS) o .has-value sul wrapper. */
.draive-floating .draive-control:focus + .draive-label,
.draive-floating input.draive-control:not([type="date"]):not([type="datetime-local"]):not([type="time"]):not(:placeholder-shown) + .draive-label,
.draive-floating textarea.draive-control:not(:placeholder-shown) + .draive-label,
.draive-floating .draive-control.draive-has-value ~ .draive-label,
.draive-floating.draive-touched .draive-label,
.draive-floating.has-value .draive-label {
  top: 10px;
  transform: none;
  color: #666;
}

/* Keep selects aligned */
.draive-floating select.draive-control {
  padding-top: 24px;
  padding-bottom: 10px;
}

/* -------------------------
   Floating labels (CSS + tiny JS)
   Works with markup like:
   <div class="fv-row mb-3">
     <label class="form-label">Nome</label>
     <input class="form-control" ...>
   </div>
-------------------------- */

/* Identify common wrappers and prepare positioning */

/* Place label inside the control */

/* Float on focus */

/* Float when value is present (class added by draive-forms.js) */

/* Floating label support for <select>
   - label MUST move only when a real value is selected (i.e. not "Seleziona")
   - keep it stable on focus
   - combinatore "~" e non "+": Select2 inserisce il proprio container tra
     il <select> e la label, e con "+" la label restava sovrapposta al
     valore (es. select Azienda nella login) */
/* Un <select> e' quasi sempre :valid: NON usarlo per flottare (altrimenti la
   label sale anche col select vuoto). Si flotta solo con valore reale
   (.draive-has-value dal JS) o wrapper .has-value/.is-open. */
.draive-floating select.draive-control.draive-has-value ~ .draive-label {
  top: 10px;
  transform: none;
  color: #666;
}

/* still above its input, but below modal(3000) */

/* ------------------------------------------------------------------
   Select (native + select2 + bootstrap-select) - unified Metronic-like
   ------------------------------------------------------------------ */

/* Base control sizing */select.form-control,
.form-control select,
select.kt-select2,
select.custom-select {
  height: 46px;
  line-height: 46px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background-color: rgba(248, 250, 252, .95);
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

select.form-control:focus,
.form-control select:focus,
select.kt-select2:focus,
select.custom-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, .55);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
  background-color: #ffffff;
}

/* =========================================================
   Tooltips (Bootstrap / KT): cleaner, more readable
   ========================================================= */
.tooltip {
  z-index: 9999;
}

/* Sfondo nero pieno + testo bianco su TUTTI i moduli, identico al tooltip
   della lista veicoli (.sr-table-tooltip): i tooltip Bootstrap sono sempre
   appesi a <body>, quindi lo stile globale qui li copre ovunque. I trigger
   con un data-template proprio (es. .tooltip.prezzi) mantengono il loro
   stile perche' piu' specifici. */
.tooltip .tooltip-inner {
  max-width: 320px;
  padding: 10px 12px;
  line-height: 1.35;
  border-radius: 10px;
  background: #000;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.bs-tooltip-top .arrow::before {
  border-top-color: #000;
}

.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.bs-tooltip-right .arrow::before {
  border-right-color: #000;
}

.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #000;
}

.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.bs-tooltip-left .arrow::before {
  border-left-color: #000;
}

/* =========================================================
   Torna su (#kt_scrolltop) — 2026-08-10
   Il bundle disegna il pulsante 40x40 ma non da' mai una taglia
   al glifo, che quindi eredita il font-size del body (~13px):
   dentro il quadrato blu restava un segno minuscolo, illeggibile
   a colpo d'occhio proprio nel momento in cui serve. 26px = poco
   piu' della meta' del pulsante, la proporzione con cui e'
   disegnata la famiglia ki-outline.
   Selettore con l'ID: il bundle scrive ".kt-scrolltop > i" e
   draive.core.css e' caricato dopo, ma a parita' di specificita' basta
   un refuso d'ordine per perdere — l'ID mette la regola al riparo.
   ========================================================= */
#kt_scrolltop.kt-scrolltop > i {
  font-size: calc(26px * var(--dv-fs,1));
  line-height: 1;
}

/* Inputs / Select / Textarea */
.form-control,
.custom-select,
select.form-control,
textarea.form-control {
  line-height: var(--form-line-height);
  color: var(--form-text);
  background-color: var(--form-bg);
  border-color: var(--form-border);
  border-radius: var(--radius-md);
}

.form-control {
  padding: var(--form-padding-y) var(--form-padding-x);
  min-height: calc(1.5em + (var(--form-padding-y) * 2) + 2px);
}

.form-control::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

.form-control:focus {
  border-color: rgba(54,153,255,.45);
  box-shadow: 0 0 0 .2rem var(--form-focus);
}

/* Select arrow spacing (avoid text overlap) */

/* Checkboxes / Radios (Bootstrap + KT helpers) */

.kt-checkbox > span, .kt-radio > span {
  cursor: pointer;
}

.form-control.submittable, select.form-control {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1.7rem + 2px);
  padding: 0.65rem 2rem 0.65rem 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-body);
  vertical-align: middle;
  background: #80808029 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 596.085 356.13'%3e%3cpath fill='%23343a40' d='M298.994,213.3,495.15,17.136Q512.289.007,537.046,0q24.729,0,41.9,17.136,17.139,17.139,17.14,41.9t-17.14,41.9L340.893,338.986q-17.139,17.141-41.9,17.144t-41.9-17.144L19.047,100.935Q-.016,83.795,0,59.035q0-24.724,18.1-41.9A60.193,60.193,0,0,1,60.942,0q24.731,0,41.9,17.136Z'/%3e%3c/svg%3e") no-repeat right 1rem center/12px 10px !important;
  border-bottom: 1px solid #e2e5ec;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.form-group label.radio {
  margin-bottom: 2rem;
}

.input-group-txt {
  border-bottom: 1px solid #e2e5ec;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  padding: 0.85rem 1rem;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.5;
  color: #74788d;
  text-align: center;
  white-space: nowrap;
  background: #80808029;
  border-radius: 0 10px 10px 0;
}

/* Qui c'era "border: 1.5px solid #777" sul box del checkbox. Era gia'
   codice morto — il blocco DRAIVE CHECKS in coda al file lo riscriveva
   con !important — ma leggerlo faceva credere che il bordo si decidesse
   in questo punto. Rimosso il 2026-08-09: il checkbox si disegna in un
   posto solo. */

.kt-checkbox-inline {
  padding: 0 30px 0;
}

/* ============================================================
   10 — COMPONENTI: SELECT2
   ============================================================ */

.select2.select2-container.select2-container--default {
  width: 100%!important;
}

/* Select2 container */

.select2-container--default .select2-selection--single {
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  background-color: rgba(248, 250, 252, .95);
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.2;
  padding-left: 14px;
  padding-right: 40px;
  color: #0f172a;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgba(15, 23, 42, .55);
}

/* Freccia select2: v. blocco "SELECT2 — LA FRECCIA" in fondo al file.
   Qui c'erano height 44px / right 12px e un border-color sul <b>: la
   prima era gia' inerte (nessuna !important, contro la canonica che ce
   l'ha), la seconda ricolorava un <b> che Metronic tiene display:none
   dal 2019. Rimosse il 2026-08-08. */

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: rgba(59, 130, 246, .55) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
  background-color: #ffffff;
}

/* Select2 dropdown */

/* Mobile usability improvements (no ID changes) */
.select2-results__option {
  padding: 12px 14px;
}

.select2-results > .select2-results__options {
  max-height: 50vh;
  /* easier scrolling on mobile */
  -webkit-overflow-scrolling: touch;
}

.select2-search--dropdown .select2-search__field {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(248, 250, 252, .95);
  -webkit-appearance: none;
  appearance: none;
}

.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  background: #fff;
  border-color: rgba(59, 130, 246, .55);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(59, 130, 246, .10);
  color: #0f172a;
}

/* Bootstrap-select */
.bootstrap-select > .dropdown-toggle {
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  background-color: rgba(248, 250, 252, .95);
  padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:active,
.bootstrap-select > .dropdown-toggle.active {
  outline: none !important;
  border-color: rgba(59, 130, 246, .55);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
  background-color: #ffffff;
}

.bootstrap-select .dropdown-menu {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .20);
}

/* Layering: make dropdowns usable inside lightboxes, but keep lightbox on top */
.select2-container--open {
  z-index: 3205 !important;
}

.select2-dropdown {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .20);
  overflow: hidden;
  z-index: 3205 !important;
}

.bootstrap-select.show .dropdown-menu {
  z-index: 3205 !important;
}

/* ============================================================
   11 — COMPONENTI: BUTTON (btn, kt-btn, btn-group)
   ============================================================ */

/* Vuoto di proposito. Tutto cio' che riguarda i bottoni — geometria,
   varianti, taglie, icon-only, focus, disabilitato — vive in UN SOLO
   blocco: "DRAIVE BUTTONS" in coda a questo file.

   Cosa stava qui e perche' e' stato tolto (2026-08-08):
   - ".kt-btn" a 44px/padding 18/raggio 8: era la sola regola del
     progetto che dava ai kt-btn un'altezza diversa dai .btn (44 contro
     32). Ora i due nomi condividono la stessa geometria.
   - Il trio ".btn-light/.btn-outline-secondary/.btn-secondary" col
     bordo #dcdcdc: teneva colore ai soli .dropdown-toggle, che il
     blocco in coda escludeva. Adesso il blocco in coda li copre da se'
     con un selettore dedicato, e il grigio e' quello di sistema.
   - ".btn.draive-btn { padding 0 32px }": la classe non esiste piu' nel
     markup (restava solo in due .bak di autocortesia) ed era comunque
     in contrasto con "stessa dimensione per tutti". */

#filter_toggle {
  margin-right: 20px !important;
}

#kt_subheader_search_form {
  margin-top: 24px;
}

/* ===============================
   Draive UI (global)
   =============================== */

/* Ombre e filtri dei bottoni: azzerati nel blocco "DRAIVE BUTTONS" in
   coda al file, in una regola sola. Le tre copie che stavano qui, a
   riga ~6050 e a riga ~6320 dicevano la stessa cosa tre volte.

   Attenzione: il vecchio "box-shadow:none !important" elencava anche
   ":focus" e ":focus-visible". E' il motivo per cui l'anello di focus
   scritto in draive.core.css non si e' mai visto. Il nuovo blocco
   spegne l'ombra a riposo ma RIACCENDE l'anello su :focus-visible.

   ".btn.btn-icon { padding: .6rem }" e' stato tolto: dava 9.6px di
   padding a un bottone che il blocco in coda vuole quadrato a
   larghezza fissa, e le due regole si contraddicevano. */

/* ============================================================
   12 — COMPONENTI: SWITCH / TOGGLE (kt-switch)
   ============================================================ */


/* === Metronic-like toggle (pure CSS) ===
   Works with: <input type="checkbox" class="kt-switch kt-switch-sm">
   No wrapper/label required. JS not required. */

input.kt-switch {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: #e5e7eb;
  /* gray-200 */
  border: 1px solid #d1d5db;
  /* gray-300 */
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .2s ease, border-color .2s ease;
}

input.kt-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid #e5e7eb;
  transform: translate(0, -50%);
  transition: transform .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

input.kt-switch:checked {
  background: #10b981;
  /* emerald-500 */
  border-color: #10b981;
}

input.kt-switch:checked::after {
  transform: translate(18px, -50%);
}

/* size sm — 24px di altezza, non 22: e' il minimo di WCAG 2.2 SC 2.5.8 per
   un bersaglio, e nella griglia dei permessi questi switch stanno a coppie
   fitte dove l'eccezione di spaziatura non aiuta. */
input.kt-switch.kt-switch-sm {
  width: 38px;
  height: 24px;
}

input.kt-switch.kt-switch-sm::after {
  width: 18px;
  height: 18px;
  left: 2px;
}

input.kt-switch.kt-switch-sm:checked::after {
  transform: translate(16px, -50%);
}

/* size lg */


input.kt-switch:disabled {
  opacity: .5;
  cursor: not-allowed;
}

input.kt-switch:focus-visible {
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
}

/* Neutralize legacy rules that hide checkboxes within kt-switch wrappers */

/* === KT Switch: broad selectors to match legacy and new markup === */
/* Support both: 
   A) <input type="checkbox" class="kt-switch ...">
   B) <span class="kt-switch ..."><label><input type="checkbox">...</label></span>
*/

/* Reset default checkbox when it carries kt-switch class OR lives inside a kt-switch wrapper */
input[type="checkbox"].kt-switch, .kt-switch input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  cursor: pointer;
  vertical-align: middle;
  outline: none;
  transition: background-color .2s ease, border-color .2s ease;
}

/* Knob */
input[type="checkbox"].kt-switch::after,
.kt-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid #e5e7eb;
  transform: translate(0, -50%);
  transition: transform .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* Checked */
input[type="checkbox"].kt-switch:checked,
.kt-switch input[type="checkbox"]:checked {
  background: #10b981;
  border-color: #10b981;
}

input[type="checkbox"].kt-switch:checked::after,
.kt-switch input[type="checkbox"]:checked::after {
  transform: translate(18px, -50%);
}

/* Sizes */
input[type="checkbox"].kt-switch.kt-switch-sm,
.kt-switch.kt-switch-sm input[type="checkbox"] {
  width: 38px;
  height: 22px;
}

input[type="checkbox"].kt-switch.kt-switch-sm::after,
.kt-switch.kt-switch-sm input[type="checkbox"]::after {
  width: 18px;
  height: 18px;
  left: 2px;
}

input[type="checkbox"].kt-switch.kt-switch-sm:checked::after,
.kt-switch.kt-switch-sm input[type="checkbox"]:checked::after {
  transform: translate(16px, -50%);
}


/* States */
input[type="checkbox"].kt-switch:disabled,
.kt-switch input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

input[type="checkbox"].kt-switch:focus-visible,
.kt-switch input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
}

/* ============================================================
   13 — COMPONENTI: AVATAR (kt-avatar)
   ============================================================ */

/* === Avatar component restyle (Metronic-like circular avatar) === */

/* Base avatar container */
.kt-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Avatar image / initials circle */
.kt-avatar .kt-avatar__holder {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

/* Upload / remove buttons */
.kt-avatar .kt-avatar__upload, .kt-avatar .kt-avatar__cancel {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -4px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: var(--color-white);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: all .2s ease;
}

.kt-avatar .kt-avatar__upload {
  right: -4px;
}

.kt-avatar .kt-avatar__cancel {
  left: -4px;
}

.kt-avatar .kt-avatar__upload:hover, .kt-avatar .kt-avatar__cancel:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* ============================================================
   14 — COMPONENTI: PORTLET / CARD (kt-portlet, card)
   ============================================================ */

/*selezione*/
.kt-portlet__head-label .kt-subheader__group {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.kt-portlet__head-label .kt-subheader__desc {
  padding: 0 .5rem 0 0;
  font-weight: 500;
  color: var(--gray-550);
}

.kt-portlet__head-label .btn:not(.dropdown-toggle-split) {
  margin-left: 0;
  margin-right: 0.5rem;
}

.kt-portlet__head-label .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 32px !important;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.kt-portlet.kt-portlet--head-sm .kt-portlet__head {
  min-height: 10px;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
  color: #333;
}

/* content */
.modal .kt-app .kt-portlet--tabs, .kt-demo-panel .kt-app .kt-portlet--tabs {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   15 — COMPONENTI: TABS / WIZARD (kt-wizard, nav-tabs)
   ============================================================ */

.kt-wizard-v3.kt-wizard-v3--white .kt-wizard-v3__wrapper {
  background: none;
}

.kt-wizard-v3 .kt-wizard-v3__wrapper .kt-form {
  width: 100%;
  padding: 0;
}

.kt-portlet.wizard .kt-portlet__head {
  padding: 0!important;
}

.kt-portlet.wizard .kt-portlet__body {
  padding: 2rem 0 0 0!important;
}

.kt-portlet.wizard h4.kt-portlet__head-title {
  color: var(--gray-800);
}

/* (la nav del wizard e' lo stepper KTUI: layout in
   assets/css/pages/wizard/wizard-3.css, nessun override qui) */

.kt-wizard-v3 {
  margin: 1em 3em;
}

/* ============================================================
   16 — COMPONENTI: PROGRESS CIRCLE
   ============================================================ */

/**** progress circle ****/

.progress-circle {
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
  height: 15rem;
  margin: 3rem 2rem 2rem 2rem;
  position: relative;
  width: 15rem;
}

.progress-circle:hover {
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 14px 26px -12px rgba(0,0,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
  -moz-box-shadow: 0 14px 26px -12px rgba(0,0,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
  -ms-box-shadow: 0 14px 26px -12px rgba(0,0,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
  -o-box-shadow: 0 14px 26px -12px rgba(0,0,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.progress-circle:before {
  -webkit-box-align: center;
  align-items: center;
  background-color: var(--gray-75);
  border-radius: 50%;
  content: attr(data-progress) '%';
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 1rem;
  bottom: 1rem;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.progress-circle:after {
  background-color: #125ef2;
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 100%;
  width: 100%;
}

.progress-circle:hover:before, .progress-circle:focus:before {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

/**
* $step is set to 5 by default, meaning you can only use percentage classes in increments of five (e.g. 25, 30, 45, 50, and so on). This helps to reduce the size of the final CSS file. If you need a number that doesn't end in 0 or 5, you can change the text percentage while rounding the class up/down to the nearest 5.
*/
.progress-circle[data-progress="0"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, #125ef2), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(90deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="1"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(93.6deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="2"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(97.2deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="3"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(100.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="4"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(104.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="5"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(108deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="6"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(111.6deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="7"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(115.2deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="8"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(118.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="9"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(122.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="10"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(126deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="11"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(129.6deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="12"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(133.2deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="13"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(136.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="14"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(140.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="15"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(144deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="16"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(147.6deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="17"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(151.2deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="18"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(154.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="19"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(158.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="20"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(162deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="21"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(165.60000000000002deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="22"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(169.2deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="23"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(172.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="24"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(176.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="25"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #125ef2), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(180deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="26"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(183.60000000000002deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="27"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(187.2deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="28"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(190.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="29"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(194.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="30"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(198deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="31"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(201.60000000000002deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="32"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(205.2deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="33"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(208.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="34"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(212.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="35"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(216deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="36"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(219.6deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="37"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(223.20000000000002deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="38"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(226.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="39"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(230.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="40"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(234deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="41"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(237.6deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="42"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(241.20000000000002deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="43"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(244.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="44"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(248.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="45"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(252deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="46"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(255.6deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="47"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(259.20000000000005deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="48"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(262.8deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="49"]:after {
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%, transparent), linear-gradient(266.4deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="50"]:after {
  background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #125ef2), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #125ef2), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(-90deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="51"]:after {
  background-image: linear-gradient(-86.4deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="52"]:after {
  background-image: linear-gradient(-82.8deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="53"]:after {
  background-image: linear-gradient(-79.2deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="54"]:after {
  background-image: linear-gradient(-75.6deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="55"]:after {
  background-image: linear-gradient(-72deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="56"]:after {
  background-image: linear-gradient(-68.4deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="57"]:after {
  background-image: linear-gradient(-64.8deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="58"]:after {
  background-image: linear-gradient(-61.2deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="59"]:after {
  background-image: linear-gradient(-57.6deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="60"]:after {
  background-image: linear-gradient(-54deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="61"]:after {
  background-image: linear-gradient(-50.4deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="62"]:after {
  background-image: linear-gradient(-46.8deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="63"]:after {
  background-image: linear-gradient(-43.199999999999996deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="64"]:after {
  background-image: linear-gradient(-39.6deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="65"]:after {
  background-image: linear-gradient(-36deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="66"]:after {
  background-image: linear-gradient(-32.4deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="67"]:after {
  background-image: linear-gradient(-28.799999999999997deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="68"]:after {
  background-image: linear-gradient(-25.200000000000003deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="69"]:after {
  background-image: linear-gradient(-21.599999999999994deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="70"]:after {
  background-image: linear-gradient(-18deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="71"]:after {
  background-image: linear-gradient(-14.399999999999991deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="72"]:after {
  background-image: linear-gradient(-10.799999999999997deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="73"]:after {
  background-image: linear-gradient(-7.200000000000003deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="74"]:after {
  background-image: linear-gradient(-3.599999999999994deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="75"]:after {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #125ef2), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #125ef2), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(0deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="76"]:after {
  background-image: linear-gradient(3.600000000000009deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="77"]:after {
  background-image: linear-gradient(7.200000000000003deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="78"]:after {
  background-image: linear-gradient(10.799999999999997deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="79"]:after {
  background-image: linear-gradient(14.400000000000006deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="80"]:after {
  background-image: linear-gradient(18deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="81"]:after {
  background-image: linear-gradient(21.60000000000001deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="82"]:after {
  background-image: linear-gradient(25.200000000000003deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="83"]:after {
  background-image: linear-gradient(28.799999999999997deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="84"]:after {
  background-image: linear-gradient(32.400000000000006deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="85"]:after {
  background-image: linear-gradient(36deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="86"]:after {
  background-image: linear-gradient(39.599999999999994deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="87"]:after {
  background-image: linear-gradient(43.20000000000002deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="88"]:after {
  background-image: linear-gradient(46.80000000000001deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="89"]:after {
  background-image: linear-gradient(50.400000000000006deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="90"]:after {
  background-image: linear-gradient(54deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="91"]:after {
  background-image: linear-gradient(57.599999999999994deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="92"]:after {
  background-image: linear-gradient(61.20000000000002deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="93"]:after {
  background-image: linear-gradient(64.80000000000001deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="94"]:after {
  background-image: linear-gradient(68.4deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="95"]:after {
  background-image: linear-gradient(72deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="96"]:after {
  background-image: linear-gradient(75.6deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="97"]:after {
  background-image: linear-gradient(79.20000000000002deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="98"]:after {
  background-image: linear-gradient(82.80000000000001deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="99"]:after {
  background-image: linear-gradient(86.4deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

.progress-circle[data-progress="100"]:after {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #125ef2), color-stop(50%, transparent), to(transparent)), -webkit-gradient(linear, right top, left top, color-stop(50%, #125ef2), color-stop(50%, #ddd), to(#ddd));
  background-image: linear-gradient(90deg, #125ef2 50%, transparent 50%, transparent), linear-gradient(270deg, #125ef2 50%, #ddd 50%, #ddd);
}

/* ============================================================
   17 — COMPONENTI: DATATABLES
   ============================================================ */

/* Il rientro di 9px delle righe-card sta sul CONTENITORE, non sulle
   righe. Prima le righe erano "width: calc(100% - 18px); margin: 4px 9px"
   dentro una tabella larga 100%: la tabella misurava 18px piu' delle
   righe che contiene, DataTables distribuiva le colonne su quei 18px in
   piu' e l'ultima colonna finiva oltre il bordo della riga — e siccome
   la tabella arriva gia' a filo della finestra, oltre il bordo della
   finestra. Ne usciva una scrollbar orizzontale di pochi pixel, sempre
   presente su ogni elenco e senza niente di visibilmente tagliato: il
   sintomo che rende difficile trovarla.
   Con il padding qui, il "width:100%" che DataTables scrive inline sulla
   tabella si risolve gia' sul contenuto rientrato: tabella, riga di
   intestazione e righe del corpo misurano tutte lo stesso, e le colonne
   vengono calcolate sulla larghezza che le righe hanno davvero.
   In piu' l'intestazione si incolonna con le card, cosa che prima non
   faceva per quegli stessi 9px. 2026-08-09. */
.kt-datatable {
  padding-left: 9px;
  padding-right: 9px;
}

.kt-datatable > .kt-datatable__table {
  background: none;
}

.kt-datatable > .kt-datatable__table > .kt-datatable__body .kt-datatable__row {
  flex: 1;
  display: inline-block;
  width: 100% !important;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  transition: all .3s;
  margin: 4px 0;
  padding: 2px 0;
}

/* La spunta selezionata nelle liste era grigia (#b5b5b5) con il bordo
   in !important: quel !important, piu' lungo di qualunque regola di
   componente, era l'unico motivo per cui la colonna di spunta delle
   liste non seguiva il checkbox del prodotto. La forma sta nel blocco
   DRAIVE CHECKS in coda al file, sezione "Datatable". 2026-08-09. */

.kt-datatable > .kt-datatable__table > .kt-datatable__body .kt-datatable__row-detail .kt-datatable__detail table {
  border-collapse: collapse !important;
}

.kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row {
  border: none;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row-detail .kt-datatable__detail .kt-datatable__row {
  border: none;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row-detail .kt-datatable__detail .kt-datatable__row > .kt-datatable__cell {
  padding: 4px 12px;
  text-align: left;
  vertical-align: top;
  height: auto;
  border-bottom: 2px solid #F6F7FB;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row.kt-datatable__row--active {
  background: #b5b5b5;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row.kt-datatable__row--active > .kt-datatable__cell {
  border-bottom: none;
  background: none;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sorted > span,
.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell.kt-datatable__cell--sorted > span {
  color: #000;
  font-weight: bold;
}

/* Datatable — common header & hover (all list modules) */
.kt-datatable > .kt-datatable__table > .kt-datatable__body .kt-datatable__row:hover {
  box-shadow: -1px 3px 10px 0 rgba(0,0,0,.06);
  border-color: #b5b5b5;
  transform: scale(1.0075);
}

/* Prima colonna: il rientro della TESTATA deve essere quello del CORPO, o la
   spunta "seleziona tutto" non si incolonna con le spunte delle righe.
   style.bundle.css da' 25px alla prima cella di testata E di corpo con la
   stessa specificita' (0,7,0, il :first-child) — quindi qui l'ordine di
   caricamento non conta niente e il 32px che stava scritto sopravviveva solo
   sulla testata, lasciando il corpo a 25. Misurato sul banco: la spunta di
   testata cadeva 7px a destra di quelle delle righe, esattamente 32-25.
   Le altre colonne non ne risentivano perche' hanno padding 0 da entrambe le
   parti: si vedeva solo sulla colonna di spunta. Il margin negativo che
   vehicleList.js mette sullo span della testata (initComplete) e' il
   contrappeso VERTICALE della cella e va lasciato dov'e': toglierlo fa
   ricadere la spunta di 17px.
   Le liste che nascondono la prima colonna (aziende/utenti/opt/report/
   cruscotto) non se ne accorgono: li' il rientro cade su un th nascosto e
   la testata la stacca la regola sul :first-child + .kt-datatable__cell
   piu' sotto, che resta com'era. 2026-08-10. */
.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child {
  padding: 0 0 0 25px;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell {
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell,
.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell,
.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell {
  vertical-align: middle;
  padding: 0;
  height: 50px;
}

.kt-datatable__cell span a {
  font-weight: bold;
  color: #000;
}

.kt-datatable.kt-datatable--default {
  margin-bottom: 0;
}

.kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell > span {
  line-height: 12px;
}

/* Rimuove la "fascia bianca" sopra la lista (testata colonne) presente su
   tutti i moduli che usano un kt-datatable. Le regole base di Metronic
   (style.bundle.css) impostano background: #fff sul __table e #ffffff sul
   .kt-portlet che fa da wrapper: qui le neutralizziamo perché il bg pagina
   (#F6F7FB definito su body) deve restare visibile. */
.kt-datatable > .kt-datatable__table > .kt-datatable__head,
.kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row,
.kt-datatable > .kt-datatable__pager {
  background: transparent;
}

/* ============================================================
   18 — COMPONENTI: GRID NAV (kt-grid-nav)
   ============================================================ */

.kt-portlet__content .kt-grid-nav-v2__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(31% - 3px);
  min-height: 105px;
  border-radius: 6px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.5rem;
  margin: 0.3rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  line-height: 13px;
  float: left;
  color: #6c757d;
}

.kt-grid-nav-v2__item:hover {
  background: var(--gray-50);
}

.kt-grid-nav-v2__item-title {
  text-overflow: ellipsis;
}

/* ============================================================
   19 — COMPONENTI: DROPDOWN
   ============================================================ */

.dropdown-menu.show {
  z-index: 99999;
}

/* Select2 / bootstrap-select dropdowns must stay below active lightboxes */
.select2-container,
.bootstrap-select,
.select2-dropdown,
.dropdown-menu {
  z-index: auto;
}

/* ============================================================
   20 — PAGINA: LOGIN (login-container, login-card, hero-*)
   ============================================================ */

.login-container {
  display: flex;
  min-height: 100vh;
  gap: 0;
  background: var(--body-bg,#f3f6f9);
}

.login-hero {
  flex: 1 1 100%;
  display: flex;
  padding: 24px;
}

.login-hero-inner {
  position: relative;
  border-radius: 16px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../media/bg/login-poster.jpg');
  flex: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  /* il video sta dentro il raggio; isolation tiene i z-index qui dentro */
  overflow: hidden;
  isolation: isolate;
}

/* Video dell'hero (2026-08-31)
   Sostituisce l'immagine, ma NON arriva col resto della pagina: l'elemento
   nasce senza src e senza autoplay, e' index.php a montarlo dopo il load e
   solo se ha senso (vedi il commento nello script). Finche' non e' pronto
   si vede il poster, che e' il fotogramma 0 del video: lo scambio non si
   nota. login-poster.jpg resta anche la resa definitiva per chi il video
   non lo riceve mai (mobile, rete lenta, prefers-reduced-motion). */
.login-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}

.login-hero-inner.has-video .login-hero-video {
  opacity: 1;
}

/* Velo (2026-08-31)
   Sta sopra al video perche' e' uno ::after, quindi ultimo nell'ordine di
   pittura. Sono DUE gradienti e servono tutti e due:

   - orizzontale (dichiarato per primo = quello sopra): scurisce la fascia
     sinistra, dove stanno logo, titolo, sottotitolo e link;
   - verticale: chiude le due estremita', per il logo in alto e la riga in
     fondo (il copyright sta a destra, dove l'orizzontale e' ormai a zero).

   Perche' non basta il solo verticale: a meta' clip il tunnel al neon
   schiarisce moltissimo e le strisce passano proprio dietro al titolo.
   Misurato fotogramma per fotogramma sull'area reale dei glifi, il titolo
   scendeva a 1,89:1 e il sottotitolo a 1,56:1 — illeggibili. Con questi due
   veli il caso peggiore su tutti e 109 i fotogrammi e' 5,05:1 (sottotitolo),
   7,83:1 (titolo): sopra la soglia AA di 4,5:1.
   Se si cambia il video, i numeri vanno rifatti: le costanti qui sotto sono
   tarate su QUESTA clip. */
.login-hero-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,12,24,.72) 0%, rgba(8,12,24,.54) 34%, rgba(8,12,24,.12) 62%, rgba(8,12,24,0) 80%),
    linear-gradient(180deg, rgba(8,12,24,.55) 0%, rgba(8,12,24,.20) 34%, rgba(8,12,24,.24) 66%, rgba(8,12,24,.66) 100%);
}

.hero-top {
  position: relative;
  z-index: 1;
  display: flex;
}

.hero-logo {
  height: 28px;
  max-width: none;
}

.hero-middle {
  position: relative;
  z-index: 1;
  margin-top: auto;
  margin-bottom: auto;
}

.hero-bottom {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gray-400);
}

.hero-links a:hover {
  text-decoration: underline;
}

.form-block {
  margin-bottom: 14px;
}


.actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

/* variante login: solo il link "Password dimenticata?", allineato a
   destra SOTTO il campo password (prima galleggiava sopra, a sinistra) */
.actions-row--end {
  justify-content: flex-end;
}

.kt-link {
  color: var(--primary-500);
  text-decoration: none;
}

.kt-link:hover {
  text-decoration: underline;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 100%;
  padding: 24px;
}

/* Draive inputs baseline */

/* Draive select centering */

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  border: 1px solid var(--card-border-color,#eff2f5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.login-card-body {
  padding: 40px;
}

.login-title {
  text-align: center;
  margin: 0 0 6px;
  color: var(--gray-900);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login-subtitle {
  text-align: center;
  color: #9ca3af;
  margin-top: 6px;
  margin-bottom: 22px;
}

.form-block label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #374151;
}


/* .kt-btn-primary non porta un colore: porta la LARGHEZZA PIENA. E' la
   classe dei ~20 pulsanti "Azzera filtri" in fondo alle colonne filtro
   e del submit di login, che devono occupare la riga. Il colore arriva
   dal blocco DRAIVE BUTTONS come per ogni altra primaria.

   Tolte due dichiarazioni che erano gia' morte: "background:#3b82f6"
   (residuo del blu Metronic demo10, coperto dal nero con !important) e
   ":hover{filter:brightness(.96)}" (coperto da "filter:none !important"
   della base). Restavano a suggerire che qui si decidesse un colore.

   Attenzione se la si riusa: width:100% dentro un contenitore flex
   collassa il bottone alla larghezza del contenuto minimo. Va usata in
   un contenitore di blocco, come la colonna filtri. */
.kt-btn-primary {
  width: 100%;
}

/* Left hero text more readable over dark image */
.hero-title {
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.hero-subtitle {
  color: rgba(255,255,255,.75);
}

.hero-links a {
  text-decoration: none;
  margin-right: 16px;
  color: rgba(255,255,255,.7);
}

.hero-copy {
  color: rgba(255,255,255,.6);
}

.hero-copy a {
  text-decoration: none;
  color: inherit;
}

.hero-copy a:hover {
  color: rgba(255,255,255,.9);
}

/* Autofill yellow killer (global) */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f2f2f2 inset !important;
  box-shadow: 0 0 0px 1000px #f2f2f2 inset !important;
  -webkit-text-fill-color: #111 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ============================================================
   21 — PAGINA: VEICOLI (kt-veicoli, ff--modello-targa, .pagamenti)
   ============================================================ */

/* All */

/* LOGO */

.kt-header-mobile .kt-header-mobile__logo a img {
  width: 75px;
}

/* veicoli */

.cartitle-img {
  height: 40px;
}


.kt-inbox .kt-portlet__head {
  padding: 0 10px!important;
}

.veichletable {
  padding: 0.55rem 0.955rem;
}

.veichletable table {
  width: 100%;
  color: var(--gray-800);
  display: inline-table !important;
  margin: 3px;
}


.cardtabletitle {
  padding: 0.5rem!important;
}

#kt_inbox_list #generalSearch {
  background: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-xs);
  text-indent: 1rem;
  color: var(--gray-500);
  font-weight: inherit;
  padding: 0 !important;
}

#kt_inbox_list #generalSearch input:focus + .kt-svg-icon {
  fill: #41b883!important;
}

#kt_inbox_list #generalSearch:hover {
  background: var(--color-white);
  border: 1px solid var(--color-white)!important;
}

#kt_inbox_list #generalSearch:focus {
  border: 1px solid var(--color-white)!important;
}

/********/

#kt_inbox_list #generalSearch > .kt-svg-icon g [fill] {
  fill: var(--gray-350)!important;
}

#kt_inbox_list #generalSearch::placeholder {
  color: var(--gray-550)!important;
}

/** da verificare**/

.btn-inactive {
  color: var(--gray-550);
}

#kt_inbox_aside .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 100%;
  padding-right: 5px;
  padding-left: 5px;
}

/* scheda */


.kt-quick-panel .kt-quick-panel__nav {
  padding: 3.5rem 0 0 0;
}

/* profilo personale  */

.kt-portlet-aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 20px;
  border-radius: 4px;
}

.kt-portlet-aside .kt-portlet__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 25px;
  border-radius: 4px;
}

/* targa perizia */

.telaio input {
  padding: 1.35rem 0rem 0.15rem !important;
}

.btn.btn-primary.telaio {
  margin-top: 25px;
  height: 50px;
  font-weight: bold;
}

.targa .alert-icon {
  margin-left: 20px;
}

span.ff--modello-targa {
  margin-top: 25px;
  position: relative;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  width: 192px;
  border: 2px solid #000 !important;
}

.ff--modello-targa::before, .ff--modello-targa::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 21px;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 1;
}

.ff--modello-targa input {
  padding: 0 36px;
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
  height: 46px;
  text-align: center;
}

.ff--modello-targa::after {
  right: 0;
  background-image: url(../media/bg/targa_automobilistica.svg);
  background-size: cover;
  background-position: right;
}

.ff--modello-targa::before {
  left: 0;
  background-image: url(../media/bg/targa_automobilistica.svg);
  background-size: cover;
  background-position: left;
}

.pagamenti {
  background-color: var(--green-50a)!important;
  color: var(--green-500)!important;
  padding: 1.5rem;
  margin-bottom: 1rem!important;
}

.pagamenti h3, .inattesa h3 {
  margin: 0;
  line-height: 0.8;
}

.pagamenti p, .inattesa p {
  margin-bottom: 0;
}

/* portali */

.kt-portali .kt-widget__files .kt-widget__media img {
  width: 100%;
}

.svg-icon.svg-icon-3x svg {
  height: 2.9rem;
  margin-top: 10px;
  opacity: 55%;
}

.targa {
  margin-top: 20px;
}

/* aggiungi auto */


.kt-radio-inline.checkbox {
  margin-top: 20px;
}


.as24 {
  background: url("../media/logos/portali/autoscout24.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.subito {
  background: url("../media/logos/portali/subitomotori.jpg") center center;
  background-size: auto;
  background-size: 140%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.www {
  background: url("../media/logos/portali/www.jpg") center center;
  background-size: auto;
  background-size: 140%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.facebook {
  background: url("../media/logos/portali/facebook.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.automobile {
  background: url("../media/logos/portali/automobileit.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.fca {
  background: url("../media/logos/portali/FCA.jpg") center center;
  background-size: auto;
  background-size: 110%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.cargurus {
  background: url("../media/logos/portali/cargurus.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.infomotori {
  background: url("../media/logos/portali/infomotori.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.kijiji {
  background: url("../media/logos/portali/kijiji.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.alvolante {
  background: url("../media/logos/portali/alvolante.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

.autouncle {
  background: url("../media/logos/portali/autouncle.jpg") center center;
  background-size: auto;
  background-size: 120%;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 12rem;
}

/** Header Topbar - button plus **/


/* Alerts visibility */
#response_box_alert, #response_box_success {
  display: none;
  margin-bottom: 12px;
}

/* Centratura verticale degli elementi topbar nella banda 64px del header.
   Il padding-top sposta il centro a ~39px: la linea della ragione sociale
   (appoggiata alla base del logo Draive), condivisa con Filtro/titolo. */
#kt_header .kt-header__topbar {
  padding-right: 16px;
  padding-top: 18px;
  gap: 10px;
}

#kt_header .kt-header__topbar,
#kt_header .kt-header__topbar .kt-header__topbar-item,
#kt_header .kt-header__topbar .kt-header__topbar-wrapper {
  display: flex;
  align-items: center;
}

#kt_header .kt-header__topbar .kt-header__topbar-item {
  margin-left: 8px;
}

/* I .btn sono usciti da questo selettore il 07/09/2026: raggio e padding
   glieli da' il blocco DRAIVE BUTTONS, che e' !important ed e' caricato
   dopo — qui erano due dichiarazioni che non arrivavano a destinazione e
   dicevano per giunta un raggio diverso (10 contro il token). Resta per
   gli <a> nudi della topbar, che bottoni non sono. */
#kt_header .kt-header__topbar .kt-header__topbar-item > a {
  border-radius: var(--radius-btn);
  padding: 8px 12px;
}

.kt-header input[type="search"] {
  border-radius: 12px;
  background: #f2f4f7;
  border: 1px solid rgba(17,18,20,0.06);
  padding: 10px 12px;
  height: 40px;
}

.kt-badge--username {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
}

/* Ensure aside menu avoids overlapping last items */

/* Larger avatar on profile header card */
.kt-widget--user-profile-1 #kt_profile_avatar_1 .kt-avatar__holder,
.kt-widget--user-profile-1 #kt_profile_avatar_1 span.kt-badge.kt-badge--username {
  width: 96px;
  height: 96px;
  line-height: 96px;
  border-radius: 1rem;
}

/* Le iniziali si scalano col riquadro, come nell'avatar di destra.
   .kt-badge--xxl NON esiste nel tema: senza un font-size esplicito il testo
   eredita quello del contesto e in un riquadro da 96px usciva minuscolo. E'
   la stessa trappola gia' annotata sul widget .kt-avatar--outline in fondo
   al file — li' era stata risolta, qui no, e le due iniziali sulla stessa
   pagina non si somigliavano.
   Il rapporto e' quello dell'altro avatar (28 su 80 = 0.35), applicato ai
   96px di questo: 34px. Cosi' i due riquadri restano di misura diversa —
   sono due cose diverse, la scheda e l'editor — ma le lettere ci stanno
   dentro nello stesso modo. 2026-08-10. */
.kt-widget--user-profile-1 #kt_profile_avatar_1 span.kt-badge.kt-badge--username {
  font-size: calc(34px * var(--dv-fs,1));
  font-weight: 600;
}

/* ========================================================================== */
/* Common module styles (moved from pages/...css)                             */
/* ========================================================================== */

#kt_inbox_aside {
  padding: 60px 0px 0px;
}

#kt_portlet_tab_2_1,
#kt_portlet_tab_2_2,
#kt_portlet_tab_2_3,
#kt_portlet_tab_2_4,
#kt_portlet_tab_2_5a,
#kt_portlet_tab_2_5b,
#kt_portlet_tab_2_5c,
#kt_portlet_tab_2_7,
#kt_portlet_tab_2_8,
#kt_portlet_tab_2_9,
#kt_portlet_tab_2_10,
#kt_portlet_tab_2_11 {
  margin: 10px;
  margin-bottom: 5rem;
}

/* aside */

.kt-inbox .kt-inbox__aside .kt-inbox__nav {
  margin-top: -10px;
}


.kt-inbox-aside--hidden #kt_inbox_aside {
  position: fixed;
  background-color: #F6F7FB/*#f2f3f8*/;
  z-index: 1;
  width: 0;
  height: calc(100% - 50px);
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* kt-veicoli layout (showroom / annunci / valutazioni / report) */
.kt-veicoli #kt_inbox_list .kt-portlet .kt-portlet__head {
  justify-content: unset;
}

.kt-veicoli #kt_inbox_list {
  margin-left: 0;
}

.kt-veicoli.kt-inbox-aside--hidden #kt_inbox_list .kt-portlet__head .kt-portlet__head-toolbar {
  margin-left: 250px;
}

/* ...ma con l'ANTEPRIMA aperta i 250px non bastano piu'. La testata
   della lista, nei moduli kt-veicoli, e' "position:fixed; top:0": vive
   nella stessa banda da 64px del bottone Filtro, e da quando
   l'anteprima del pannello filtri e' alta 100vh (blocco hover-peek in
   fondo al file) quella banda e' coperta fin dove arriva la colonna.
   Con 250px le tab archivio partivano a x=529 contro un pannello che
   finisce a 545: la "U" di "Usato" spariva sotto il bianco.
   Il numero non si scrive a mano: e' la larghezza della colonna piu' il
   suo filetto. Il rientro parte dal bordo del contenuto della testata,
   che e' gia' 10px dentro, quindi 275+1 lascia 10px di stacco fra il
   pannello e la prima linguetta.
   Vale SOLO in anteprima: a pannello chiuso restano i 250px, che sono
   tarati sul bisogno di scansare #kt_subheader e su cui e' appesa la
   soglia dei 1750px del blocco "Ricerca avanzata" (v. showroom
   custom.modulo.css). #kt_inbox_list e' fratello di #kt_inbox_aside
   dentro .kt-inbox: il combinatore ~ legge lo stato dell'anteprima
   senza bisogno di una classe sul body. */
.kt-veicoli.kt-inbox-aside--hidden #kt_inbox_aside.kt-inbox-aside--hover ~ #kt_inbox_list .kt-portlet__head .kt-portlet__head-toolbar {
  margin-left: calc(var(--filter-col-w) + 1px);
}

.kt-veicoli #kt_inbox_list .kt-portlet__head {
  width: 100%;
  background: #F6F7FB;
  border-bottom: 5px solid #F6F7FB;
}

.kt-veicoli #kt_subheader {
  margin: 0;
  min-height: 54px;
  width: 300px;
}

.kt-veicoli.kt-inbox-aside--hidden #kt_subheader {
  width: 270px;
}

/* margin-bottom 0 esteso a tutte le liste (prima ripetuto in ogni
   custom.modulo.css: aziende, profilo, optManager, ubicazioni) */
body.kt-veicoli .kt-portlet,
body.kt-lista-utenti .kt-portlet,
body.kt-lista-aziende .kt-portlet,
body.kt-lista-opt .kt-portlet,
body.kt-lista-report .kt-portlet,
body.kt-cruscotto .kt-portlet,
body.kt-bdc .kt-portlet,
body.kt-lista-logistica .kt-portlet,
body.kt-lista-supporto .kt-portlet,
body.kt-academy .kt-portlet,
body.sup-page-config .kt-portlet,
body.kt-lista-brand .kt-portlet,
body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) .kt-portlet,
body.kt-ubicazioni .kt-portlet {
  margin-bottom: 0;
}

body.kt-veicoli .kt-portlet .kt-portlet__body {
  padding: 10px;
}

/* Reset background + ombra portlet per i moduli "lista"/contenuto flat.
   Centralizzato qui per tenere puliti i custom.modulo.css di pagina:
   in queste viste i row-card del datatable hanno il loro #fff e i
   portlet wrapper devono restare trasparenti sul bg pagina #F6F7FB.
   sup-page-config non ha un datatable ma la stessa esigenza: il bianco lo
   portano le .supcfg-card della sezione Configurazione del Supporto, e il
   portlet che le contiene deve restare trasparente. E' registrata per conto
   proprio, e non solo tramite kt-lista-supporto, cosi' la pagina resta
   vestita anche se un giorno perdesse quella classe di body. */
.kt-veicoli .kt-portlet,
.kt-lista-utenti .kt-portlet,
.kt-lista-aziende .kt-portlet,
.kt-lista-opt .kt-portlet,
.kt-lista-report .kt-portlet,
.kt-cruscotto .kt-portlet,
.kt-lista-logistica .kt-portlet,
.kt-lista-supporto .kt-portlet,
.kt-academy .kt-portlet,
.sup-page-config .kt-portlet,
.kt-lista-brand .kt-portlet,
.kt-ubicazioni .kt-portlet {
  background: none;
  box-shadow: none;
}

.kt-veicoli .kt-portlet .nav.nav-tabs.nav-tabs-line,
.kt-lista-utenti .kt-portlet .nav.nav-tabs.nav-tabs-line,
.kt-lista-aziende .kt-portlet .nav.nav-tabs.nav-tabs-line,
.kt-lista-opt .kt-portlet .nav.nav-tabs.nav-tabs-line,
.kt-lista-report .kt-portlet .nav.nav-tabs.nav-tabs-line,
.kt-cruscotto .kt-portlet .nav.nav-tabs.nav-tabs-line,
.kt-ubicazioni .kt-portlet .nav.nav-tabs.nav-tabs-line {
  margin: 0;
}

.kt-veicoli .nav-link,
.kt-lista-utenti .nav-link,
.kt-lista-aziende .nav-link,
.kt-lista-opt .nav-link,
.kt-lista-report .nav-link,
.kt-cruscotto .nav-link,
.kt-ubicazioni .nav-link {
  padding: 0 10px !important;
}

th.kt-datatable__cell.kt-datatable__cell--sort span,
.kt-datatable__cell span div div span.kt-user-card-v2__email,
.kt-datatable__cell span div div span.kt-user-card-v2__desc,
.kt-datatable__cell span span {
  font-weight: inherit !important;
}

/* kt-list component */
.kt-list {
  position: relative;
  padding: 0;
  margin: 0;
}

.kt-list .kt-list__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: .75rem 0;
}

.kt-list .kt-list__item:first-child {
  padding-top: 0;
  margin-top: 0;
}

.kt-list .kt-list__item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.kt-list .kt-list__item .kt-list__icon {
  display: inline-block;
  min-width: 50px;
  padding: 0 15px 0 10px;
  line-height: 0;
  text-align: center;
}

.kt-list .kt-list__item .kt-list__text {
  width: 100%;
  display: inline-block;
  text-align: left;
  padding: 0 5px 0 0;
  color: #595d6e;
}

.kt-list .kt-list__item .kt-list__text:hover {
  text-decoration: none;
}

.kt-list .kt-list__item .kt-list__time {
  min-width: 80px;
  text-align: right;
  display: inline-block;
  padding: 0;
  color: #74788d;
}

.kt-list .kt-list__item .kt-list__icon i {
  color: #74788d;
}


.kt-list.kt-list--badge:before {
  position: absolute;
  display: block;
  content: '';
  width: 1px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 3px;
  background-color: #ebedf2;
}

.kt-list.kt-list--badge .kt-list__item:first-child:before,
.kt-list.kt-list--badge .kt-list__item:last-child:before {
  background-color: #fff;
  position: absolute;
  display: block;
  content: '';
  width: 1px;
  height: 50%;
  top: 0;
  bottom: 0;
  left: 3px;
}

.kt-list.kt-list--badge .kt-list__item:last-child:before {
  top: auto;
  bottom: 0;
}

.kt-list.kt-list--badge .kt-list__item .kt-list__badge {
  display: flex;
  align-items: center;
  text-align: left;
  position: relative;
  width: 20px;
}

.kt-list.kt-list--badge .kt-list__item .kt-list__badge:before {
  position: absolute;
  display: block;
  content: '';
  width: 7px;
  height: 7px;
  left: 0;
  border-radius: 100%;
  background-color: #ebedf2;
}


.kt-list .kt-list__item .kt-list__badge.kt-list__badge--success:before {
  background-color: #1dc9b7;
}


.kt-list .kt-list__item:first-child:before,
.kt-list .kt-list__item:last-child:before {
  background-color: #74788d;
}

/* kt-badge vehicle color system */
.kt-badge--white {
  color: #d3dae6;
  border: 1px solid #d3dae6;
  background: #ffffff;
}

.kt-badge--black {
  color: #ffffff;
  background: #000;
}

.kt-badge--red {
  color: #586272;
  background: #d91a2a;
}

.kt-badge--pink {
  color: #586272;
  background: #f44ca7;
}

.kt-badge--grey {
  color: #586272;
  background: #949494;
}

.kt-badge--orange {
  color: #586272;
  background: #ff7500;
}

.kt-badge--blue {
  color: #ffffff;
  background: #0059b2;
}

.kt-badge--brown {
  color: #ffffff;
  background: #994200;
}

.kt-badge--beige {
  color: #ffffff;
  background: #dbaf6e;
}

.kt-badge--green {
  color: #ffffff;
  background: #38a614;
}

.kt-badge--yellow {
  color: #ffffff;
  background: #f7c81e;
}

.kt-badge--purple {
  color: #ffffff;
  background: #9816f4;
}

.kt-badge--silver {
  color: #ffffff;
  background: linear-gradient(0deg, rgba(220,220,220,1) 0%, rgba(172,172,172,1) 100%);
}

.kt-badge--lilac {
  color: #ffffff;
  background: #991289;
}

.kt-badge--gold {
  color: #ffffff;
  background: linear-gradient(0deg, rgba(247,233,148,1) 0%, rgba(217,166,0,1) 100%);
}

.kt-badge--bronze {
  color: #ffffff;
  background: linear-gradient(0deg, rgba(247,198,148,1) 0%, rgba(191,115,38,1) 100%);
}

/* Vehicle utilities */
.logomarca {
  max-width: 30px !important;
}

.goToDetail {
  cursor: pointer;
}

.editable.e {
  padding: 0;
}

#lucchetto_vincolo {
  fill: #0abb87;
}

#lucchetto_prenotazione {
  fill: #595d6e;
}

#kt_inbox_aside .kt-portlet__head {
  border-bottom: 1px solid #e5e5e5;
}

#kt_inbox_aside .form-group label {
  top: 0;
}

.kt-user-card-v2 .kt-user-card-v2__pic {
  padding-right: 0 !important;
  min-width: 40px;
}

.kt-user-card-v2 .kt-user-card-v2__pic img {
  margin-right: 0.5rem;
  display: block;
}

.kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__desc,
.kt-user-card-v2 .kt-user-card-v2__details .kt-user-card-v2__email {
  margin-top: -3px !important;
}

.kt-user-card-v2__pic.vehicleImage a img {
  max-width: 67px;
  max-height: 50px;
}

.kt-widget__files .kt-widget__media img {
  width: 10rem;
}

.kt-widget__files .kt-widget__media.document img {
  width: 5rem;
}

.draggable .kt-widget__media:hover {
  cursor: grab;
}

.draggable--over {
  background: #e0e1c855;
  margin-top: -15px;
  padding-top: 15px;
}

#sendVehicleImages_popUp .kt-widget__media {
  position: relative;
}

#sendVehicleImages_popUp .kt-widget__media:hover .kt-widget__image-rollover {
  display: block;
}

#sendVehicleImages_popUp .kt-widget__image-rollover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #00000090;
  display: none;
}


/* kt-demo-panel head nav buttons (prev/next) */
.kt-demo-panel .kt-demo-panel__head .cartitle-img {
  float: left;
  margin: -10px 10px -10px 0;
  background-size: contain;
  height: 45px;
  width: 45px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Vehicle image panel layout */
.vehicleButton {
  position: fixed;
  bottom: 0;
  right: 0;
  background: #fff;
  margin: 0 !important;
  padding: 1rem;
  z-index: 10;
  width: 100%;
}

.kt-demo-panel .vehicleImage.full {
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(/assets/media/bg/login.jpg);
  background-position: center;
  background-size: cover;
  cursor: zoom-in;
}

.kt-demo-panel .vehicleImage.full > div {
  display: none;
  width: 100%;
  height: 100%;
}

.kt-demo-panel .vehicleImage.full > div > div {
  cursor: pointer;
  background: rgba(10,10,10,.5);
  width: 100%;
  height: 100%;
  display: table;
}

.kt-demo-panel .vehicleImage.full > div > div i {
  color: #fff;
  display: table-cell;
}

/* Tooltip prezzi */
.tooltip.prezzi .tooltip-inner {
  max-width: 100%;
}

.tooltip.prezzi .tooltip-inner.prezzi .popup {
  width: 370px;
}

.tooltip.prezzi .tooltip-inner.prezzi .etichetta.costiFissi,
.tooltip.prezzi .tooltip-inner.prezzi .valore.costiFissi {
  background-color: #9cc7e3;
}

.tooltip.prezzi .tooltip-inner.prezzi .etichetta {
  font-weight: bold;
  text-align: right;
}

.tooltip.prezzi .tooltip-inner.prezzi .valore {
  text-align: right;
}

.tooltip.prezzi .tooltip-inner.prezzi .row.optional {
  background: #e1f3f2;
}

/* Rebate / ecobonus labels */
.rebate {
  color: #ED1C24 !important;
  letter-spacing: -0.2px;
}

.ecobonus {
  color: #036400 !important;
  letter-spacing: -0.2px;
}

/* Changelog table (diff view) */
div[data-ajax-template="Changelog"] {
  line-height: .5rem;
}

div[data-ajax-template="Changelog"] table {
  overflow: hidden;
}

div[data-ajax-template="Changelog"] th {
  background: #fff;
  background-clip: content-box;
  position: sticky;
  top: 0;
  z-index: 1;
  line-height: 1.5rem;
  font-weight: bold;
  padding: 0 !important;
}

div[data-ajax-template="Changelog"] tr:hover {
  background-color: #ffa;
}

div[data-ajax-template="Changelog"] td, th {
  position: relative;
}

div[data-ajax-template="Changelog"] td:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

/* IRS range slider (km / prezzo filter) */
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
  background-color: #000;
}

.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
  border-top-color: #000;
}

.irs--flat .irs-handle > i:first-child {
  background-color: #000;
}

.irs--flat .irs-bar {
  background: rgba(0,0,0,.7);
}

/* 36mesi badge */
.badge36mesi {
  width: 40px;
  margin: -30px;
  margin-bottom: -26px;
  margin-left: 0;
}

.title36mesi {
  width: 52px;
  float: right;
  margin-right: -70px;
  margin-top: -43px;
}

.kt-user-card-v2__pic .b36mesi {
  position: absolute;
  margin-top: 19px;
  width: 40px;
  margin-left: -37px;
}

/* Avatar username badge */
.kt-avatar.kt-avatar--outline .kt-badge.kt-badge--username {
  width: 120px;
  height: 120px;
  font-weight: 600;
}

/* (#kt_inbox_aside padding: gia' definito identico nella sezione
   "Common module styles"; doppione rimosso 2026-07-05) */

/* Anteprima del filtro compattato (hover-peek). Regola storica con ID:
   quella desktop piu' sotto ("SIDEBAR FLOTTANTE") la riscrive quasi
   tutta a colpi di !important, ma la LARGHEZZA passava di qui e valeva
   300px contro i 275 della colonna agganciata — la stessa colonna
   cambiava misura a seconda di come la si guardava. Ora legge lo stesso
   token della colonna. */
.kt-inbox-aside--hidden #kt_inbox_aside.kt-inbox-aside--hover {
  width: var(--filter-col-w);
  margin: 0px -25px 0;
  padding: 25px 25px 250px;
  overflow: auto;
}

/* Reset button in filters – consistent across modules.
   Geometria e palette del sistema KTUI (mono, taglia lg 40px come la
   toolbar delle liste); resta full-width dentro la colonna filtri. */
/* "Azzera filtri": qui resta SOLO l'impaginazione (larghezza piena e
   stacco verticale nella colonna filtri). Colore e geometria arrivano
   dal blocco DRAIVE BUTTONS come per ogni altro pulsante.

   Prima questa regola si disegnava da sola il nero, il raggio a 6 e
   l'altezza a 40: era il pulsante piu' grande della piattaforma, e per
   pareggiarlo con il "Salva ricerca" accanto lo showroom aveva dovuto
   scrivere un contro-override a 36px con cinque !important. Tolti i
   numeri da qui, e' caduto anche quello.

   Il gruppo di selettori resta com'e' (il terzo membro vale 0,4,0):
   serviva a battere il tema, e serve ancora a battere i moduli. */
.kt-inbox__aside button[name="resetFilters"],
.kt-inbox__aside .kt-btn[name="resetFilters"],
.kt-inbox__aside .kt-btn.kt-btn-primary[name="resetFilters"] {
  width: 100%;
  /* 2026-08-10 — via i 25px di margine sopra e sotto: adesso il pulsante
     sta dentro .filter-foot (blocco "FILTRI LISTA: CAMPI COMUNI"), che e'
     la barra azioni col filetto di separazione e possiede lei lo stacco.
     Con il margine il filetto restava lontano dai campi e il pulsante
     galleggiava a meta' del piede. */
  margin: 0;
  text-transform: none;
}


/* Bootstrap-select (used by some filters like Ubicazioni) */
.kt-inbox__aside .bootstrap-select > .dropdown-toggle,
.kt-inbox__aside .bootstrap-select .dropdown-toggle {
  height: var(--draive-control-height) !important;
  background: var(--draive-field-bg) !important;
  border: 1px solid var(--draive-field-border) !important;
  border-radius: var(--draive-radius) !important;
  box-shadow: none !important;
  padding: 0 2.5rem 0 1rem !important;
  font-weight: 500;
  color: var(--ink-body) !important;
}

.kt-inbox__aside .bootstrap-select .dropdown-toggle .filter-option {
  display: flex;
  align-items: center;
  height: 100%;
}

.kt-inbox__aside .bootstrap-select .dropdown-menu {
  border-radius: calc(var(--draive-radius) + 2px) !important;
  overflow: hidden;
}

.kt-inbox__aside .bootstrap-select .dropdown-menu .dropdown-item,
.kt-inbox__aside .bootstrap-select .dropdown-menu li a {
  padding: 0.75rem 1rem;
}

/* ================================
   Shared module styles (auto-merged)
   NOTE: moved here to reduce duplication across page CSS
   ================================ */

#input_immatricolazione {
  width: 100%;
  max-width: 12rem;
  margin: 0 auto;
}


.custom-select-clear {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1.7rem + 2px);
  padding: 0.65rem 2rem 0.65rem 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-body);
  vertical-align: middle;
  background: #80808029 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 596.085 356.13'%3e%3cpath fill='%23343a40' d='M298.994,213.3,495.15,17.136Q512.289.007,537.046,0q24.729,0,41.9,17.136,17.139,17.139,17.14,41.9t-17.14,41.9L340.893,338.986q-17.139,17.141-41.9,17.144t-41.9-17.144L19.047,100.935Q-.016,83.795,0,59.035q0-24.724,18.1-41.9A60.193,60.193,0,0,1,60.942,0q24.731,0,41.9,17.136Z'/%3e%3c/svg%3e") no-repeat right 1rem center/12px 10px!important;
  border-bottom: 1px solid #e2e5ec;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.editable input[type="date"].form-control {
  max-width: 150px;
  padding: 0;
  height: auto;
}

.editable input[type="text"].form-control {
  margin: 1px 0px 0px 5px;
  float: right;
  background: #80808029 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 261.948 489.5'%3e%3cpath fill='%237f7f7f' d='M238.135,0H23.813A23.883,23.883,0,0,0,0,23.813V198.446a23.883,23.883,0,0,0,23.813,23.813H53.58a23.814,23.814,0,0,1,23.814,23.814V465.687A23.883,23.883,0,0,0,101.208,489.5H238.135a23.883,23.883,0,0,0,23.813-23.813V23.813A23.883,23.883,0,0,0,238.135,0ZM227.609,161.636H148.3L163.2,173.551a3.781,3.781,0,0,1-4.724,5.906L131.3,157.719l27.3-19.925a3.78,3.78,0,1,1,4.46,6.1l-13.946,10.177H220.05V127.617H197.37a3.78,3.78,0,0,1,0-7.56h30.239Z'/%3e%3c/svg%3e") no-repeat right .18rem center/20px 25px !important;
  max-width: 90px;
  padding: 0;
  height: auto;
}

.files_holder, .selected_files_holder {
  min-height: 125px;
}

.form-control.inputdesc {
  height: auto;
}

.form-control.touchspinner {
  min-height: 3.8rem;
}

.form-control.touchspinner.piu {
  min-height: 2.7rem;
}

.selected_files_holder {
  counter-reset: countSelectedImgs;
}

.selected_files_holder .watermark-button {
  display: unset;
}

.selected_files_holder > .draggable {
  counter-increment: countSelectedImgs;
}

.selected_files_holder > .draggable h3.kt-portlet__head-title::before {
  content: counter(countSelectedImgs);
  background: #aaa;
  border: 1px solid #999;
  border-radius: 1em;
  padding: .8em;
  margin: -2em;
}

.selected_files_holder > .draggable, .files_holder > .draggable {
  margin-top: -15px;
  padding-top: 15px;
  margin-bottom: 15px;
}

.selected_files_holder > .draggable:first-child {
  background: #abcabc55;
}

.vehicleDetails .kt-portlet__body .btn.btn-icon {
  margin-top: -1em;
  margin-bottom: -1em;
  width: 2em;
  height: 2em;
}

input.caratteristiche {
  display: none;
}

input.caratteristiche + label {
  cursor: pointer;
}

input.caratteristiche:checked + label {
  background-color: #cecfd3;
}

input.form-control.prezzo::-moz-placeholder,
input.form-control.prezzo::placeholder {
  color: #5d3eb8 !important;
}

input.tags {
  display: none;
}

input.tags + label {
  cursor: pointer;
}

input.tags:checked + label.btn-label-brand {
  background-color: #5d78ff;
  color: #ffffff;
}

input.tags:checked + label.btn-label-danger {
  background-color: #fd397a;
  color: #fff;
}

input.tags:checked + label.btn-label-success {
  background-color: #0abb87;
  color: #ffffff;
}

input.tags:checked + label.btn-label-warning {
  background-color: #ffb822;
  color: #111;
}

/* Il wrapper dell'icona riempie il bottone e centra il glifo: neutralizza
   qualunque dimensione/margine dal bundle (kt-header__topbar-icon). */
.topbar-add-btn .kt-header__topbar-icon,
.profilo-add-btn .kt-header__topbar-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ============================================================
   22 — PAGINA: PERIZIA DIGITALE (perizia, viste automobile, selettore colori)
   ============================================================ */

/* Perizia Digitale - Viste Automobile */

.carousel {
  display: block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}

.carousel > input {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}


/* selettore colori */

.kt-radio.color > span {
  height: 30px;
  width: 30px;
}

.kt-radio.color > span::after {
  content: '';
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 100% !important;
}

.kt-radio.kt-radio--solid.kt-arancione > span {
  background: #ff7500;
}

.kt-radio.kt-radio--solid.kt-arancione > input:checked ~ span {
  background: #ff7500!important;
}

/* grigio */
.kt-radio.kt-radio--solid.kt-grigio > span {
  background: #949494;
}

.kt-radio.kt-radio--solid.kt-grigio > input:checked ~ span {
  background: #949494!important;
}

/* argento */
.kt-radio.kt-radio--solid.kt-argento > span {
  background: rgb(220,220,220);
  background: linear-gradient(0deg, rgba(220,220,220,1) 0%, rgba(172,172,172,1) 100%);
}

.kt-radio.kt-radio--solid.kt-argento > input:checked ~ span {
  background: rgb(220,220,220);
  background: linear-gradient(0deg, rgba(220,220,220,1) 0%, rgba(172,172,172,1) 100%);
}

.kt-radio.kt-radio--solid.kt-argento > span::after {
  border: solid #000;
  background: #000;
}

/* lilla */
.kt-radio.kt-radio--solid.kt-lilla > span {
  background: #991289;
}

.kt-radio.kt-radio--solid.kt-lilla > input:checked ~ span {
  background: #991289!important;
}

/* beige */
.kt-radio.kt-radio--solid.kt-beige > span {
  background: #dbaf6e;
}

.kt-radio.kt-radio--solid.kt-beige > input:checked ~ span {
  background: #dbaf6e!important;
}

.kt-radio.kt-radio--solid.kt-beige > span::after {
  border: solid #000;
  background: #000;
}

/* marrone */
.kt-radio.kt-radio--solid.kt-marrone > span {
  background: #994200;
}

.kt-radio.kt-radio--solid.kt-marrone > input:checked ~ span {
  background: #994200!important;
}

/* bianco */

.kt-radio.kt-radio--solid.kt-bianco > span::after {
  border: solid #000;
  background: #000;
}

/* nero */
.kt-radio.kt-radio--solid.kt-nero > span {
  background: #000;
}

.kt-radio.kt-radio--solid.kt-nero > input:checked ~ span {
  background: #000!important;
}

/* blu / azzurro */
.kt-radio.kt-radio--solid.kt-bluazzurro > span {
  background: #0059b2;
}

.kt-radio.kt-radio--solid.kt-bluazzurro > input:checked ~ span {
  background: #0059b2!important;
}

/* oro */
.kt-radio.kt-radio--solid.kt-oro > span {
  background: rgb(247,233,148);
  background: linear-gradient(0deg, rgba(247,233,148,1) 0%, rgba(217,166,0,1) 100%);
}

.kt-radio.kt-radio--solid.kt-oro > input:checked ~ span {
  background: rgb(247,233,148);
  background: linear-gradient(0deg, rgba(247,233,148,1) 0%, rgba(217,166,0,1) 100%);
}

.kt-radio.kt-radio--solid.kt-oro > span::after {
  border: solid #000;
  background: #000;
}

/* bronzo */
.kt-radio.kt-radio--solid.kt-bronzo > span {
  background: rgb(247,198,148);
  background: linear-gradient(0deg, rgba(247,198,148,1) 0%, rgba(191,115,38,1) 100%);
}

.kt-radio.kt-radio--solid.kt-bronzo > input:checked ~ span {
  background: rgb(247,198,148);
  background: linear-gradient(0deg, rgba(247,198,148,1) 0%, rgba(191,115,38,1) 100%);
}

/* rosso */
.kt-radio.kt-radio--solid.kt-rosso > span {
  background: #d91a2a;
}

.kt-radio.kt-radio--solid.kt-rosso > input:checked ~ span {
  background: #d91a2a!important;
}

/* giallo */
.kt-radio.kt-radio--solid.kt-giallo > span {
  background: #f7c81e;
}

.kt-radio.kt-radio--solid.kt-giallo > input:checked ~ span {
  background: #f7c81e!important;
}

.kt-radio.kt-radio--solid.kt-giallo > span::after {
  border: solid #000;
  background: #000;
}

/* verde */
.kt-radio.kt-radio--solid.kt-verde > span {
  background: #38a614;
}

.kt-radio.kt-radio--solid.kt-verde > input:checked ~ span {
  background: #38a614!important;
}

/* altro */
.kt-radio.kt-radio--solid.kt-altro > span {
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHN0eWxlPjwhW0NEQVRBWw0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojQzZDNkM2O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCl1dPjwvc3R5bGU+PHBhdGggZD0iTTAgMGgzMHYzMEgweiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tNDAgNDBsNTAtNTBNLTMwIDQwbDUwLTUwTS0yMCA0MGw1MC01ME0tMTAgNDBsNTAtNTBNMCA0MGw1MC01ME0xMCA0MGw1MC01ME0yMCA0MGw1MC01MCIvPjwvc3ZnPg==")!important;
  background-position: 50% 50%;
}

.kt-radio.kt-radio--solid.kt-altro > input:checked ~ span {
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHN0eWxlPjwhW0NEQVRBWw0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojQzZDNkM2O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCl1dPjwvc3R5bGU+PHBhdGggZD0iTTAgMGgzMHYzMEgweiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tNDAgNDBsNTAtNTBNLTMwIDQwbDUwLTUwTS0yMCA0MGw1MC01ME0tMTAgNDBsNTAtNTBNMCA0MGw1MC01ME0xMCA0MGw1MC01ME0yMCA0MGw1MC01MCIvPjwvc3ZnPg==")!important;
  background-position: 50% 50%;
}

.kt-radio.kt-radio--solid.kt-altro > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-arancione > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-bianco > span {
  background: #fff;
  border: 1px solid #e4e8ee!important;
}

.kt-radio.kt-radio--solid.kt-bluazzurro > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-bronzo > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-grigio > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-lilla > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-marrone > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-nero > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-rosso > span::after {
  border: solid #fff;
  background: #fff;
}

.kt-radio.kt-radio--solid.kt-verde > span::after {
  border: solid #fff;
  background: #fff;
}

/* ============================================================
   23 — PAGINA: PROFILO (kt-profilo, profilo-uploader, profilo-editor-card)
   ============================================================ */

/* Initials inside the edit avatar widget */
#kt_user_avatar span.kt-badge.kt-badge--username {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 1rem;
}

/* kt-profilo sidebar nav (profilo / aziende / optManager) — stesso stile
   della sidebar del drawer "Modifica profilo utente" (#kt_demo_panel
   .kt-settings-sidebar): voci a colonna, icone KeenIcons Outline 19px
   scure, card chiara arrotondata sulla voce attiva, a tutta larghezza. */
.kt-profilo #kt_user_profile_aside {
  background: none !important;
  box-shadow: none;
  padding: 0;
}

.kt-profilo #kt_user_profile_aside .nav.nav-tabs.nav-tabs-line {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  border-bottom: unset;
  margin: 0;
  padding: .25rem 0;
}

.kt-profilo #kt_user_profile_aside .nav.nav-tabs.nav-tabs-line .nav-item {
  margin: 6px 0;
  display: flex;
}

.kt-profilo #kt_user_profile_aside .nav.nav-tabs.nav-tabs-line li a.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  width: 100%;
  padding: 14px 16px;
  min-height: 48px;
  border: 0;
  border-bottom: unset;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: calc(14px * var(--dv-fs,1));
  color: var(--gray-850);
  background: transparent;
  white-space: nowrap;
}

.kt-profilo #kt_user_profile_aside .kt-widget__section {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.kt-profilo #kt_user_profile_aside .nav .nav-link i {
  opacity: 1;
  font-size: calc(19px * var(--dv-fs,1));
  color: #1f2937;
  margin-right: 0;
  flex: 0 0 auto;
}

.kt-profilo #kt_user_profile_aside .nav.nav-tabs.nav-tabs-line li a.nav-link:hover {
  border-bottom: unset;
  color: var(--gray-900);
  background: rgba(15,23,42,.035);
}

.kt-profilo #kt_user_profile_aside .nav.nav-tabs.nav-tabs-line li a.nav-link.active {
  border-bottom: unset;
  color: var(--gray-900);
  background: rgba(15,23,42,.05);
}

/* (rimosso) La visibilita' del bottone "rimuovi" del widget avatar e'
   gestita dal blocco autorevole AVATAR WIDGET in fondo al file, tramite
   la classe .kt-avatar--changed. */

.kt-profilo .kt-badge--xxl {
  width: 100px;
  height: 100px;
}

.kt-profilo #informazioni-account .referente {
  margin-top: 40px;
}

#kt_user_profile_aside {
  background: none;
}

/* Wizard (inserimento utente): la vecchia regola qui (background grigio
   #d5d5d5, padding .955rem) era gia' completamente inerte — il blocco
   "HEADER unificato" piu' sotto (body .kt-demo-panel .kt-demo-panel__head)
   la sovrascrive con !important — rimossa 2026-07-23 per non fuorviare.
   L'header di questo pannello ora e' allineato 1:1 a "Modifica profilo
   utente" (stesso padding/bordo, vedi regola ID-condivisa piu' sotto). */

/* sidebar */
.modal #kt_user_profile_aside, .kt-demo-panel #kt_user_profile_aside {
  flex: 0 0 280px;
  max-width: 280px;
  border-right: 1px solid rgba(0,0,0,.06);
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* make tabs vertical + card-like items */
.modal #kt_user_profile_aside .nav.nav-tabs,
.kt-demo-panel #kt_user_profile_aside .nav.nav-tabs {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  border-bottom: 0 !important;
  padding: .5rem .75rem 1rem;
}

.modal #kt_user_profile_aside .nav.nav-tabs .nav-link,
.kt-demo-panel #kt_user_profile_aside .nav.nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 12px !important;
  padding: .65rem .75rem !important;
  color: rgba(0,0,0,.68) !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  gap: .6rem;
  position: relative;
}

/* left indicator like Metronic */
.modal #kt_user_profile_aside .nav.nav-tabs .nav-link.active::before,
.kt-demo-panel #kt_user_profile_aside .nav.nav-tabs .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--radius-xs);
  background: rgba(59,130,246,1);
}

/* icon sizing */
.modal #kt_user_profile_aside .kt-widget__icon i,
.kt-demo-panel #kt_user_profile_aside .kt-widget__icon i {
  opacity: .8;
}

/* =========================================================
   KT Demo Panel - profile edit: sidebar MUST stay on the left
   and content MUST stay on the right (Metronic settings-sidebar)
   (Only for the "Modifica profilo utente" panel)
   ========================================================= */
#kt_demo_panel.kt-demo-panel {
  display: flex;
  flex-direction: column;
  padding: 0;

  /* Geometria della shell impostazioni, dichiarata una volta sola.
     La barra azioni e' position:fixed e deve iniziare dove inizia la
     colonna contenuto: con i numeri ripetuti a mano il primo ritocco alla
     sidebar avrebbe fatto scivolare il footer sotto la navigazione. */
  --settings-aside-w:   270px;
  --settings-shell-gap: 1.5rem;
  --settings-body-pad:  1.25rem;
}

/* Header — condiviso con "Inserimento nuovo utente" (2026-07-23): stesso
   padding/bordo/allineamento dei due drawer, cosi' il wizard non ha piu'
   un header piu' basso/compresso rispetto a "Modifica profilo utente". */
/* (14/09/2026) Il padding 22/28 della testata e' stato tolto: con l'id
   batteva l'anatomia unica e spostava la X di 8px rispetto a ogni altro
   lightbox. Testata, bordo e allineamento arrivano da li'. */

#kt_demo_panel .kt-portlet {
  background: transparent;
  box-shadow: none;
  border: none;
  margin: 0;
}

#kt_demo_panel .kt-demo-panel__body {
  /* keep panel header fixed; allow inner scroll only on content */
  flex: 1 1 auto;
  overflow: hidden;
  padding: var(--settings-body-pad);
}

#kt_demo_panel .kt-portlet.kt-portlet--tabs {
  height: 100%;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#kt_demo_panel .kt-settings-shell {
  display: flex;
  align-items: stretch;
  gap: var(--settings-shell-gap);
  height: 100%;
  min-height: 0;
}

#kt_demo_panel .kt-settings-sidebar {
  flex: 0 0 var(--settings-aside-w);
  max-width: var(--settings-aside-w);
  padding-right: 1rem;
  border-right: 1px solid rgba(15,23,42,.08);
  overflow: auto;
  position: relative;
  padding-top: 10px;
}

#kt_demo_panel .kt-settings-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  position: relative;
  padding: 18px 18px 22px 18px;
}

/* =========================================================
   Menu verticale del drawer — pattern "Item" di ReUI
   https://reui.io/components/item

   Riferimento preciso: gli esempi a riga singola, "Small-size
   items with badges" (c-item-8) e "Items with keyboard shortcuts"
   (c-item-7). Niente descrizione sotto l'etichetta: icona,
   etichetta, e uno slot in coda per un contatore o una scorciatoia.

   Misure lette dal componente vero, non stimate a occhio:
     riga        padding 8px 10px · gap 8px · raggio 10px
                 bordo 1px trasparente · transizione colori 100ms
     icona       16px, nuda — ReUI non la mette in un riquadro
     etichetta   14px/500, interlinea 19.25px, mai a capo
     coda        flex, gap 8px, spinta a destra dal contenuto
     gruppo      colonna, gap 2px
   La riga viene alta 37px; la colonna e' larga 270px, l'esempio
   ReUI 256px, quindi le proporzioni reggono senza ritocchi.

   Il raggio 10px non e' un valore importato: e' --radius-card, che
   draive.tokens.css dichiara allineato allo 0.625rem di ReUI.

   La voce di menu E' l'Item: il contenitore e' <a class="nav-link">.
   Il .kt-widget__section di Metronic e' sparito dal markup perche'
   faceva solo da flex-row con gap — cioe' quello che ora fa il link.

   Prima di questo blocco ce n'erano due, uno sopra l'altro, piu' un
   terzo in fondo al foglio che riscriveva hover e attivo con
   !important (vinceva quello, essendo l'ultimo). Ora e' uno solo.

   Gli !important restano dove c'erano: questa colonna e' una
   navigazione verticale su misura, non i tab a linguetta del tema,
   e .nav-tabs .nav-link di Metronic la dipinge comunque.
   ========================================================= */
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 0 !important;
  margin: 0;
  padding: 0;
}

/* height:auto smonta .nav-tabs.nav-tabs-line .nav-item{height:40px} del
   tema (style.bundle.css): e' l'altezza della STRISCIA di tab
   orizzontali, e qui stirava la voce a 40px quando l'Item ne misura
   37,25 di suo. Non e' un dettaglio da 3 pixel: finche' l'altezza la
   decideva quella regola, il padding scritto qui sopra era finto. */
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-item {
  margin: 0 !important;
  height: auto !important;
  display: flex;
}

/* --- Item ------------------------------------------------ */
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  /* L'Item di ReUI misura 37,25px con questo padding. Qui la riga si
     ferma a 40: e' un bersaglio piu' comodo su una colonna che si usa
     col mouse a ripetizione, e nella colonna larga 270px i 3 pixel non
     si vedono. E' una scelta, scritta; prima i 40px arrivavano per
     sbaglio dalla regola dei tab orizzontali del tema. */
  min-height: 40px;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-card) !important;
  background: transparent !important;
  color: var(--ink-muted) !important;
  text-align: left;
  white-space: nowrap;
  position: relative;
  /* il .nav-item e' flex: senza questo il link (e la riga attiva)
     si stringe sul contenuto invece di riempire la colonna */
  flex: 1 1 auto;
  width: 100%;
  transition: background-color .1s ease, color .1s ease;
}

/* --- Item media: icona 16px, nuda -------------------------
   ReUI non mette l'icona in un riquadro: e' un glifo di 16px sulla
   linea del testo. Le KeenIcons stavano a 19px e a #1f2937 fisso,
   cioe' piu' scure e piu' grandi dell'etichetta che accompagnavano:
   l'icona pesava piu' della parola. Ora eredita il colore della
   riga, come fa .dv-item nella colonna di navigazione. */
#kt_demo_panel .kt-settings-sidebar .nav-link .rui-item__media {
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}

#kt_demo_panel .kt-settings-sidebar .nav-link .rui-item__media i {
  font-size: calc(16px * var(--dv-fs,1));
  line-height: 1;
  color: inherit;
  opacity: 1;
}

/* --- Item content ----------------------------------------
   flex:1 e' cio' che spinge lo slot di coda a destra: in ReUI la
   spaziatura fra etichetta e badge non e' un margin, e' il
   contenuto che occupa tutto lo spazio libero. */
#kt_demo_panel .kt-settings-sidebar .nav-link .rui-item__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* line-clamp-1: "Accesso Aziende" e' al limite della colonna e non
   deve spezzarsi in due righe alte il doppio delle altre */
#kt_demo_panel .kt-settings-sidebar .nav-link .rui-item__title {
  font-size: calc(var(--fs-lead) * var(--dv-fs,1));
  font-weight: 500;
  line-height: 1.375;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Coda: contatori e scorciatoie ------------------------
   E' la parte che distingue i due esempi di riferimento dal
   semplice elenco di link. Lo slot esiste ed e' vestito; oggi
   nessuna voce lo popola, perche' i conteggi non arrivano dal
   server con la pagina e non li invento. Chi ne aggiunge uno
   scrive solo <span class="rui-item__meta">3</span>.
   Il fondo e' --surface-track e non --surface-alt di proposito:
   --surface-alt e' il fondo della riga attiva, e il chip ci
   sparirebbe dentro. */


/* --- Stati ------------------------------------------------
   Tre segnali distinti, non due grigi quasi uguali: prima hover e
   attivo erano rgba(15,23,42,.035) e .04, un delta di mezzo punto
   percentuale — passando il mouse sulla colonna si perdeva di
   vista dove si fosse. Ora cambiano insieme fondo, colore e peso. */
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-link:hover {
  background: var(--surface-soft) !important;
  color: var(--ink-body) !important;
}

/* Selezionato: fondo pieno, inchiostro pieno, peso 600. Piatto e
   senza bordo come gli esempi ReUI e come .dv-item--on della
   colonna di navigazione, cosi' l'app ha un solo modo di dire
   "sei qui". L'icona segue il testo (color: inherit). */
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-link.active,
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-link.active:hover {
  background: var(--surface-alt) !important;
  color: var(--ink) !important;
}

#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-link.active .rui-item__title {
  font-weight: 600;
}


/* Focus da tastiera: l'anello 3px di ReUI. Prima questa colonna non
   aveva alcun segno di focus — si tabulava alla cieca fra otto
   voci. :focus-visible e non :focus, cosi' il click col mouse non
   lascia l'anello acceso. */
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-link:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(18, 94, 242, .28);
}

/* Spazio per la barra azioni: SOLO nei tab che una barra ce l'hanno.
   Era incondizionato su .tab-content, quindi "Accesso Aziende" e
   "Recensioni QR" — che salvano per riga e non hanno footer — ereditavano
   110px di vuoto in coda per una barra inesistente. */
#kt_demo_panel .kt-settings-content .tab-content { padding-bottom: 0; }

#kt_demo_panel .kt-settings-content .tab-pane:has(.kt-portlet__foot) {
  padding-bottom: 88px;   /* barra 61px + un respiro */
}

/* DataTables/scroll wrappers (if present inside these tabs) */

/* Barra azioni sempre visibile. Il containing block e' il drawer, non il
   viewport, perche' .kt-demo-panel porta un translate3d dal tema
   (style.bundle.css:29041). Con width:100% la barra copriva anche la
   colonna dei tab — 270x43.5px misurati — sottolineando la navigazione con
   l'azione del contenuto, e con una nona voce di menu l'ultima sarebbe
   finita sotto una fascia bianca non raggiungibile con lo scroll.
   Ora parte dove parte la colonna contenuto. */
#kt_demo_panel .kt-settings-content .kt-portlet__foot {
  position: fixed;
  bottom: 0;
  left: calc(var(--settings-body-pad) + var(--settings-aside-w) + var(--settings-shell-gap));
  right: 0;
  width: auto;
  z-index: 30;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  padding-top: 0;
  padding-bottom: 0;
  /* il drawer e' arrotondato e non ha overflow:hidden (lo togliere
     taglierebbe i dropdown dei select): la barra si arrotonda da sola */
  border-bottom-right-radius: 18px;
}

/* Sotto 900px la shell si impila e la sidebar passa sopra il contenuto:
   li' la barra torna a tutta larghezza. */
@media (max-width: 900px) {
  #kt_demo_panel .kt-settings-content .kt-portlet__foot { left: 0; }
}

@media (max-width: 768px) {
  /* drawer a tutto schermo: niente angoli arrotondati da assecondare */
  #kt_demo_panel .kt-settings-content .kt-portlet__foot { border-bottom-right-radius: 0; }
}

/* keep actions aligned even inside grid */
#kt_demo_panel .kt-settings-content .kt-portlet__foot .kt-form__actions {
  margin: 0;
}

/* =========================================================
   Profile edit (kt_demo_panel): improve readability + spacing
   ========================================================= */
/* (rimosso 2026-08-09) .kt-widget__section: era il flex-row con gap
   .75rem dentro la voce di menu. La classe non esiste piu' nel
   markup — il gap ora e' quello dell'Item, 8px sul link stesso. */

#kt_demo_panel .kt-form--label-right .col-form-label {
  text-align: left !important;
}

#kt_demo_panel .kt-settings-content .form-group.row {
  align-items: center;
}

/* compact cards + cleaner section spacing */
#kt_demo_panel .card {
  border-radius: var(--radius-lg);
  border-color: var(--hairline);
  margin-bottom: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}

#kt_demo_panel .card-header {
  padding: 12px 16px;
  background: #fafbfd;
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#kt_demo_panel .card-body {
  padding: 14px 16px;
}

/* sticky footer actions: align Save/Cancel on the same row */
#kt_demo_panel .kt-settings-content .kt-portlet__foot .kt-form__actions .row {
  align-items: center;
}

#kt_demo_panel .kt-settings-content .kt-portlet__foot .kt-form__actions .draive-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* (rimosso 2026-08-08) Qui c'era un raggio 14px + padding 12/18 sui bottoni
   del footer. Vinceva per specificita' (1,5,0) sul blocco autorevole piu'
   sotto — "#kt_demo_panel .kt-portlet__foot .draive-actions > .btn", (1,3,0)
   — che dichiara 10px/10px 20px come tutti gli altri bottoni dell'app.
   Risultato: quel blocco sembrava vivo e non lo era, e i bottoni di questo
   drawer erano gli unici fuori scala. Ora governa lui. */

/* (il Salva largo min-width 220px e' stato rimosso: i footer dei lightbox
   hanno tutti la stessa formattazione — pulsanti compatti allineati a
   destra, vedi blocco "Draive UI — LIGHTBOX DRAWER" in fondo al file) */

/* ================================
   FIX: Inline validation icon only when message exists
   ================================ */
#kt_demo_panel .invalid-feedback:empty,
#kt_demo_panel .fv-plugins-message-container:empty,
#kt_demo_panel .form-text.text-danger:empty {
  display: none !important;
}

#kt_demo_panel .form-control.is-invalid,
#kt_demo_panel input.is-invalid,
#kt_demo_panel textarea.is-invalid,
#kt_demo_panel select.is-invalid {
  background-image: none !important;
  /* remove bootstrap invalid icon */
}

/* =========================================================
   Profilo panel — componenti riutilizzabili
   Tutte le primitive visive dei form dentro #kt_demo_panel:
   pannello, form grid, card-list, biz-card,
   editor Summernote, uploader.
   (Il pannello dei report periodici sta in §25, come .sched.)
   Spostato da pages/profilo/css/custom.modulo.css
   ========================================================= */

/* --- Pannello: titolo, sottotitolo, close button ------------------- */
/* condiviso con "Inserimento nuovo utente": stesso blocco titolo+sottotitolo */

/* Il blocco titolo+sottotitolo e' una colonna, non un testo che scorre
   attorno a un elemento flottante.
   .kt-demo-panel__title porta float:left da draive.core.css:484, e li' serve:
   nella scheda veicolo la miniatura della marca (.cartitle-img) gli sta a
   sinistra. Qui pero' il contenitore e' un flex item che si stringe sul
   contenuto, quindi la prima riga del sottotitolo finiva accanto al
   titolo o sotto a seconda di quanto era lunga — una geometria che
   cambiava col testo. Con il sottotitolo che ora porta l'identita'
   dell'utente ("Cognome Nome · Livello · Azienda") il caso peggiore era
   diventato quello normale. */
#kt_demo_panel .kt-demo-panel__head > div:first-child,
#kt_demo_panel_inserimento .kt-demo-panel__head > div:first-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* Titolo, sottotitolo e X: "ANATOMIA UNICA" nel blocco LIGHTBOX DRAWER
   (14/09/2026). Qui c'era una X da 40px col raggio 12 — battuta da quel
   blocco, e quindi mai vista — e un sottotitolo a peso 500 che era
   l'unico dei lightbox a non essere 13px/400 grigio. */

/* --- Drawer "Escludi un cliente dai KPI" (23/09/2026) ---------------- */
/* LA GEOMETRIA DEL DRAWER E' SCRITTA PER ID, non per classe: il blocco
   #kt_demo_panel poco sopra dichiara «pannello colonna / corpo flex:1 con
   overflow / piede», che e' l'anatomia descritta nel blocco LIGHTBOX DRAWER
   per TUTTI i lightbox, ma vale solo per quel pannello. Un secondo drawer
   nasce quindi display:block, con il .kt-portlet alto quanto il contenuto:
   con un form di tre campi il piede si fermava a 529px su un pannello alto
   712 e sotto restava un vuoto di 211px.
   Qui si ricalcano le stesse righe per il pannello dei Clienti esclusi.
   Il wizard degli utenti non ne ha bisogno: il suo piede e' gia' ancorato
   da «body .kt-demo-panel .kt-wizard-v3 .kt-form .kt-form__actions», che
   pero' chiede le classi del wizard — e un form di un passo solo non e'
   un wizard.
   (28/09/2026) Le stesse righe valgono per il drawer dell'Agenda
   (#kt_demo_panel_agenda, form «Nuovo impegno» e dettaglio): si aggiunge
   il suo id ai selettori, non si ricopia il blocco. Il suo contenitore
   interno e' .ag-form (un <form> per il nuovo impegno, un <div> per il
   dettaglio), perche' il drawer ne ospita due.
   (30/09/2026) E il drawer «Nuova variante» della pagina Modelli
   (#kt_demo_panel_modelli, form #mdlVarForm). */
#kt_demo_panel_blacklist.kt-demo-panel,
#kt_demo_panel_agenda.kt-demo-panel,
#kt_demo_panel_modelli.kt-demo-panel {
  display: flex;
  flex-direction: column;
}

#kt_demo_panel_blacklist .kt-portlet,
#kt_demo_panel_agenda .kt-portlet {
  background: transparent;
  box-shadow: none;
  border: none;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#kt_demo_panel_blacklist .kt-demo-panel__body,
#kt_demo_panel_blacklist #bl_form,
#kt_demo_panel_agenda .kt-demo-panel__body,
#kt_demo_panel_agenda .ag-form,
#kt_demo_panel_modelli .kt-demo-panel__body,
#kt_demo_panel_modelli #mdlVarForm {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Scorre il CORPO, non il form: cosi' il piede resta in vista anche quando
   le note dei tipi «contiene» allungano la pagina. */
#kt_demo_panel_blacklist #bl_form > .kt-portlet__body,
#kt_demo_panel_agenda .ag-form > .kt-portlet__body,
#kt_demo_panel_modelli #mdlVarForm > .kt-portlet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

#kt_demo_panel_blacklist #bl_form > .dv-lb__foot,
#kt_demo_panel_agenda .ag-form > .dv-lb__foot,
#kt_demo_panel_modelli #mdlVarForm > .dv-lb__foot {
  flex: 0 0 auto;
}

/* --- Header dei singoli tab-panel ---------------------------------- */
#kt_demo_panel .kt-portlet__head {
  border-bottom: none;
  padding: 18px 28px 6px;
  min-height: 0;
  background: transparent;
}

#kt_demo_panel .kt-portlet__head-title {
  font-weight: 700;
  color: var(--ink);
}

#kt_demo_panel .kt-portlet__head-title small {
  display: block;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 2px;
  /* ereditava l'interlinea del titolo (1.15-1.20): su due righe le parole
     si toccavano. Il sottotitolo e' testo da leggere, non un titolo. */
  line-height: var(--lh-meta);
}

#kt_demo_panel .kt-portlet__body {
  padding: 14px 28px 18px;
}

/* Il tema colora .text-muted con #74788d: 4.36:1 su bianco, appena sotto
   la soglia AA. Nel drawer questi non sono ornamenti — sono le note che
   spiegano le regole non ovvie ("Il nome utente non puo' essere
   modificato", il rimando a Integrazioni > Collegamenti): vanno lette. */
#kt_demo_panel .text-muted {
  color: var(--ink-muted) !important;
}

/* --- Footer: Annulla + Salva ---------------------------------------
   Piede e pulsanti: "ANATOMIA UNICA" (14/09/2026). Qui restava un
   min-width:100px !important che, con l'id, batteva il blocco dei
   pulsanti: Annulla e Salva di questo drawer erano gli unici larghi 100
   invece che quanto il loro testo. Padding, raggio e colori erano gia'
   battuti. */

/* --- Section label (uppercase grigio) ------------------------------ */
/* Il colore era scritto a mano, #9ca3af: 2.54:1 su bianco, sotto la soglia AA.
   Non e' una didascalia — INFORMAZIONI PERSONALI, ACCOUNT, SICUREZZA,
   PIANIFICAZIONE sono l'unica struttura di orientamento del form, e
   compaiono in ogni tab. --ink-muted porta il rapporto a 4.83:1 senza
   cambiare il registro (resta piu' chiaro del testo corrente). */
.profilo-section-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  padding: 12px 0 8px;
  border-top: 1px solid var(--hairline);
  margin-top: 6px;
}

.profilo-form > .profilo-section-label:first-child {
  border-top: none;
  padding-top: 4px;
  margin-top: 0;
}

/* --- Griglia 2 colonne -------------------------------------------- */
.profilo-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.profilo-form .full {
  grid-column: 1 / -1;
}

.profilo-field {
  min-width: 0;
}

/* due campi dentro una cella sola (2026-08-05): telefono + interno del
   centralino occupano insieme la larghezza di un campo normale, 80/20.
   Il gap più stretto del gap di griglia (8 contro 12) è voluto: dice a
   colpo d'occhio che i due campi sono un'unità sola. */
.profilo-field--split {
  display: grid;
  grid-template-columns: 4fr minmax(84px, 1fr);
  gap: 8px;
  align-items: start;
}
.profilo-field--split > * {
  min-width: 0;
}

/* nota sotto un campo (2026-07-26): spiega una regola non ovvia senza
   occupare un campo suo — prima riga d'uso: la sede principale in
   pages/aziende > Utenti */
.profilo-field-hint {
  margin-top: 6px;
  font-size: calc(11px * var(--dv-fs,1));
  line-height: 1.4;
  color: var(--text-muted, #8c8f9a);
}
.profilo-field-hint .ki-outline {
  font-size: calc(11px * var(--dv-fs,1));
  color: var(--info-text);
}

.profilo-form .form-group {
  margin: 0;
}

/* --- Lista a card (settings-style) --------------------------------- */
.profilo-card-list {
  background: #f4f5f7;
  border-radius: var(--radius-lg);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}

.profilo-card-list__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-bottom: 1px solid #e7e9ee;
}

.profilo-card-list__row:last-child {
  border-bottom: none;
}

.profilo-card-list__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
}

.profilo-card-list__label {
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profilo-card-list__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profilo-card-list__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  /* era #9ca3af: 2.4:1 sul fondo grigio della lista, sotto i 3:1 che
     WCAG 1.4.11 chiede a un'icona che porta significato (salva, elimina) */
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.profilo-card-list__icon-btn:hover {
  background: #fff;
  border-color: #e5e7eb;
  color: #374151;
}

.profilo-card-list__icon-btn.is-danger:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

/* --- Bottone aggiungi (+) ------------------------------------------ */
.profilo-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--action);
  color: #fff !important;
  border: 1px solid var(--action);
  text-decoration: none !important;
  transition: background-color .15s ease, transform .05s ease;
  flex: 0 0 auto;
}

.profilo-add-btn:hover {
  background: var(--action-hover);
  color: #fff !important;
}

.profilo-add-btn:active {
  transform: translateY(1px);
}


/* --- Select pill --------------------------------------------------- */


/* --- Editor card (TinyMCE) — stile "bio" KTUI/Metronic: textarea pulita,
   bordo sottile, focus ring come un campo -------------------------- */
/* Box unico come il "bio" Metronic: bordo 2px #eeeeee, radius 10px. .tox-tinymce
   porta il suo bordo/ombra di default: azzerati per farlo combaciare con la card. */
.profilo-editor-card {
  border: 2px solid #eeeeee;
  border-radius: var(--radius-btn);
  background: #fff;
  overflow: hidden;                 /* angoli netti anche su toolbar/editable */
  box-shadow: none;
  transition: var(--draive-transition);
  transition-property: border-color, box-shadow;
}

/* Focus: bordo scuro sottile (coerente ma discreto come Metronic) */
.profilo-editor-card:focus-within {
  border-color: #cfd3da;
}

/* Il bundle del tema (style.bundle.css, .tox-tinymce) forza height:500px e
   border-radius:4px in !important per il suo demo "rich text editor": qui li
   neutralizziamo con l'altezza fissa configurata in tinymce.init (height:240,
   stesso spirito del vecchio note-editable min-height:220 — nessun resize). */
.profilo-editor-card .tox-tinymce {
  border: none !important;
  border-radius: 8px !important;
  height: 240px !important;
}

/* --- Hint sotto l'editor ------------------------------------------- */
/* stesso motivo della section-label: 2.54:1 -> 4.83:1 */
.firma-hint {
  margin-top: 8px;
  color: var(--ink-muted);
  font-weight: 500;
}

/* ============================================================
   24 — PAGINA: ACCESSO AZIENDE (biz-list, accesso-aziende)
   ============================================================ */

#kt_demo_panel #gestione-permessi *,
#kt_demo_panel #accesso-aziende *,
#kt_demo_panel #serviziAD *,
#kt_demo_panel #serviziGC * {
  /* neutralize nested scrollers created by theme/components */
  max-height: none;
}

/* ========================================================================== */
/* Profilo > Accesso Aziende – layout più fruibile */
/* ========================================================================== */

/* Header */

.businessForm .business-access-head--bottom {
  margin-top: 0.75rem;
}

/* Riga */
.businessForm .business-access-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0;
}

/* Colonne – breakpoint “fluid” senza rompere gli ID */


/* Input “readonly” più leggibili */

/* Azioni: bottoni ben allineati */


/* Separatore meno “alto” per non sprecare spazio */
.businessForm .kt-separator.secondaryBusiness {
  margin: 0.75rem 0;
}

/* --- Accesso Aziende: head con pulsante + a destra ----------------- */
#kt_demo_panel #accesso-aziende .kt-portlet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* --- Accesso Aziende: biz-list ------------------------------------- */
.biz-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.biz-list__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.biz-list__empty {
  background: #f4f5f7;
  border: 1px dashed #d8dde5;
  border-radius: var(--radius-lg);
  padding: 22px;
  text-align: center;
  /* --ink-muted su questo fondo grigio dava 4.43:1, appena sotto la
     soglia: sul grigio il testo secondario sale di un gradino. */
  color: var(--ink-body);
}

/* Card singola */
.biz-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.biz-card:hover {
  border-color: #e2e6ee;
  box-shadow: 0 6px 14px -10px rgba(16,24,40,.18);
}

.biz-card.is-inactive {
  background: #fafbfc;
  opacity: .92;
}

.biz-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.biz-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f4f5f7;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.biz-card__title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.biz-card__title {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.biz-card__title--placeholder {
  color: var(--ink-faint);
  font-weight: 600;
}

.biz-card__meta {
  margin-top: 2px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.3;
}

.biz-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 600;
  letter-spacing: .01em;
}

.biz-card__chip--referente {
  background: var(--surface-alt);
  color: #374151;
}

.biz-card__chip-sep {
  color: #cbd5e1;
}

.biz-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Switch toggle
   Il track e' alto 22px: sotto il minimo di 24 di WCAG 2.2 SC 2.5.8. Il
   track resta com'e' — e' un elemento grafico calibrato — e ad allargarsi
   e' la label che lo contiene, con un padding verticale che porta l'area
   cliccabile a 24px senza spostare niente di visibile (il flex della riga
   la ricentra). */
.biz-card__switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: 1px 0;
  user-select: none;
}

.biz-card__switch-input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.biz-card__switch-track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d1d5db;
  position: relative;
  transition: background-color .15s ease;
  display: inline-block;
}

.biz-card__switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
  transition: transform .18s ease;
}

.biz-card__switch-input:checked + .biz-card__switch-track {
  background: var(--draive-check-checked); /* nero design system (era blu #2563eb) */
}

.biz-card__switch-input:checked + .biz-card__switch-track .biz-card__switch-thumb {
  transform: translateX(16px);
}

.biz-card__switch-input:focus-visible + .biz-card__switch-track {
  box-shadow: 0 0 0 3px rgba(17, 24, 39, .15);
}

/* Body editor — select in griglia */
.biz-card__body {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.biz-card__body:empty, .biz-card__field:empty {
  display: none;
}

.biz-card--new .biz-card__body {
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 12px;
}

.biz-card__field {
  min-width: 0;
}

.biz-card--new .biz-card__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f2f7;
}

.biz-card--new .biz-card__foot .btn {
  border-radius: var(--radius-btn);
  padding: 10px 18px;
  font-weight: 600;
}

.biz-card__body .draive-floating .draive-control {
  height: var(--draive-control-height); /* 56px: la floating label non entrava in 3rem */
}
/* Select2 (se i select vengono trasformati): stessa altezza + label che flotta */
.biz-card__body .draive-floating .select2-container--default .select2-selection--single {
  height: var(--draive-control-height) !important;
  min-height: var(--draive-control-height) !important;
}

.biz-card__body .draive-floating.biz-readonly .draive-control {
  background: #f4f5f7;
  color: #4b5563;
  border-color: #e5e7eb;
  cursor: default;
}

/* ============================================================
   25 — PAGINA: REPORT PERIODICI DEL PROFILO (.sched)
   ------------------------------------------------------------
   Un solo componente per i due report del profilo — annunci
   (servizi_notificheAD.php) e giacenze veicoli
   (servizi_giacenze.php). La forma dice l'ordine della decisione:

     1. l'INTERRUTTORE — "lo voglio?" — e' la prima riga, larga
        quanto la scheda, con nome e descrizione accanto;
     2. la PIANIFICAZIONE — "quando?" — sta sotto, su fondo tenue,
        e si apre solo quando il report e' acceso;
     3. il RIEPILOGO rilegge la scelta in italiano ("ogni lunedi'
        alle 10:00"). E' l'unico punto in cui "Mese" dice che
        significa il primo giorno del mese: la tendina non lo dice.

   COSA C'ERA PRIMA. Una riga sola di griglia Bootstrap: col-9 di
   campi, col-2 con l'etichetta "Report giacenze veicoli" spezzata
   su due righe, col-1 con lo switch nell'angolo. Siccome
   `body .draive-floating` porta width:100% (blocco DRAIVE FIELDS,
   in coda a questo foglio), dentro il contenitore flex ogni campo
   prendeva una riga INTERA: si sceglieva "Giorno" da una tendina
   larga 800px e la frase "Ricevi ogni ... alle ..." si spezzava in
   quattro righe. La larghezza dei campi qui sotto e' percio'
   dichiarata sui figli (.sched__field), che con due classi battono
   `body .draive-floating` senza !important.
   ============================================================ */

.sched {
  /* container: il blocco vive in due contenitori di larghezza
     diversa — la pagina profilo e il drawer #kt_demo_panel — e deve
     ripiegare sulla PROPRIA larghezza, non su quella della finestra. */
  container-type: inline-size;
  background: var(--canvas);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  /* clip: arrotonda l'angolo basso della zona pianificazione e
     nasconde il pannello mentre si chiude. L'anello di focus dei
     campi (3px) resta dentro il padding di 18px, quindi non viene
     tagliato. */
  overflow: hidden;
}

/* --- 1. L'interruttore: la decisione ------------------------------- */
.sched__switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-base);
  padding: var(--space-lg) var(--space-xl);
  margin: 0;
}

.sched__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: calc(16px * var(--dv-fs,1));
}

/* <label for>: il bersaglio e' tutto il testo, non i 42px dello
   switch. cursor:pointer lo dichiara. */
.sched__text {
  display: block;
  margin: 0;
  min-width: 0;
  cursor: pointer;
}

.sched__title {
  display: block;
  font-size: calc(var(--fs-lead) * var(--dv-fs,1));
  font-weight: var(--fw-semi);
  line-height: var(--lh-lead);
  color: var(--ink);
}

.sched__desc {
  display: block;
  margin-top: 2px;
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
  font-weight: var(--fw-regular);
  line-height: var(--lh-meta);
  color: var(--ink-muted);
}

/* Lo switch principale e' quello grande (42px): gli switch per
   azienda della lista qui sotto restano .kt-switch-sm. La taglia
   e' la gerarchia — questo comanda quelli. */
.sched__switch > .kt-switch {
  justify-self: end;
  margin: 0;
}

/* --- 2. La pianificazione: si apre con l'interruttore -------------- */
/* Lo stato scritto e' CHIUSO (.is-off), non aperto: se schedPanel.js
   non arriva — errore di rete, livello senza lo script — il pannello
   resta visibile e si torna esattamente al comportamento di prima.
   Il contrario avrebbe nascosto la pianificazione per sempre.

   0fr -> 1fr e' l'unico modo di animare un'altezza "auto" senza
   misurarla in JS. Dove non e' supportato la dichiarazione decade e
   il pannello resta aperto: si degrada mostrando, non nascondendo. */
.sched__detail {
  display: grid;
  grid-template-rows: 1fr;
  background: var(--surface-soft);
  transition: grid-template-rows 280ms cubic-bezier(.2, .7, .2, 1);
}

.sched.is-off .sched__detail {
  grid-template-rows: 0fr;
}

.sched__detail-inner {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: opacity 220ms ease 60ms, visibility 0s;
}

.sched.is-off .sched__detail-inner {
  /* visibility, non solo altezza zero: dentro un box alto 0 e con
     overflow:hidden i <select> restano raggiungibili col TAB, e il
     focus su un campo fuori dallo schermo fa scorrere il contenitore
     (su Firefox accade anche con overflow:hidden). Cosi' escono
     dall'ordine di tabulazione e dall'albero di accessibilita'. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease, visibility 0s linear 280ms;
}

/* Errore da correggere a report spento: il pannello si apre lo stesso,
   altrimenti si bloccherebbe il salvataggio per un campo invisibile.
   Dopo .is-off nel foglio, quindi vince a parita' di specificita'. */
.sched.is-forced .sched__detail {
  grid-template-rows: 1fr;
}

.sched.is-forced .sched__detail-inner {
  visibility: visible;
  opacity: 1;
  transition: opacity 220ms ease 60ms, visibility 0s;
}

.sched__detail-pad {
  border-top: 1px solid var(--hairline);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

/* --- I campi: una frase, non un modulo ----------------------------- */
.sched__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-base);
  row-gap: var(--space-md);
}

/* La parola e il campo che governa sono UN elemento: cosi' "alle"
   non resta mai orfano in fondo a una riga, ne' quando il pannello
   si stringe ne' quando compare il giorno della settimana.
   display:flex dichiarato qui e non in linea: jQuery .show() svuota
   lo stile in linea e riprende questo valore dal foglio. */
.sched__pair {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 1 auto;
  min-width: 0;
}

.sched__word {
  flex: 0 0 auto;
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--ink-body);
  white-space: nowrap;
}

/* Due classi: batte `body .draive-floating {width:100%}` senza
   !important. Senza questa riga il campo prende la riga intera. */
.sched__controls .sched__field {
  width: auto;
  margin: 0;
}

.sched__field--freq { flex: 0 1 172px; min-width: 152px; }
.sched__field--day  { flex: 0 1 172px; min-width: 152px; }
.sched__field--hour { flex: 0 1 132px; min-width: 118px; }

/* Il campo sbagliato porta l'anello rosso; il messaggio lo dice il
   riepilogo qui sotto, a tutta larghezza. Dentro un wrapper largo
   152px il .invalid-feedback di Bootstrap andava a capo due volte,
   alzava il campo e sfalsava tutta la riga. Tre classi: batte
   `body .is-invalid ~ .invalid-feedback` senza !important. */
.sched .sched__field .invalid-feedback {
  display: none;
}

/* --- 3. Il riepilogo: la scelta riletta in italiano ---------------- */
.sched__recap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: var(--space-base) 0 0;
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
  line-height: var(--lh-meta);
  color: var(--ink-muted);
}

.sched__recap i {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: calc(14px * var(--dv-fs,1));
  color: var(--info-text);
}

.sched__recap b {
  font-weight: var(--fw-semi);
  color: var(--ink);
}

/* Manca un pezzo (il giorno della settimana): il riepilogo diventa
   la richiesta. Ambra e non rosso — non e' un errore finche' non si
   prova a salvare. */
.sched__recap--todo,
.sched__recap--todo i,
.sched__recap--todo b {
  color: var(--warning-text);
}

/* Dopo un tentativo di salvataggio la stessa riga diventa l'errore:
   e' gia' il posto dove si legge lo stato della pianificazione, e un
   solo messaggio non puo' contraddirne un altro. */
.sched__recap--error,
.sched__recap--error i,
.sched__recap--error b {
  color: var(--danger-text);
}

/* --- Stretto: ogni coppia parola+campo prende una riga ------------- */
@container (max-width: 520px) {
  /* Da flex a griglia: la parola prende una colonna di larghezza
     fissa, cosi' i campi di righe diverse partono tutti dallo stesso
     bordo. In fila le parole hanno larghezze diverse ("Ricevi ogni",
     "di", "alle") e i campi sotto uscivano scalinati. */
  .sched__pair {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
  }

  .sched__field--freq,
  .sched__field--day,
  .sched__field--hour {
    flex: 1 1 auto;
  }

  .sched__switch {
    padding: var(--space-base) var(--space-lg);
  }

  .sched__detail-pad {
    padding: var(--space-base) var(--space-lg) var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sched__detail,
  .sched__detail-inner {
    transition: none;
  }
}

/* ============================================================
   26 — INTEGRAZIONE: EUROTAX
   ============================================================ */

/** EUROTAX **/

.eurotax {
  text-align: center;
}

p.eurotax {
  color: #74788d;
}

th.eurotaxblu {
  background: #166fff;
  color: var(--color-white);
}

th.eurotaxgiallo {
  background: #fce54e;
}

/* ============================================================
   27 — INTEGRAZIONE: SUMMERNOTE / EDITOR
   ============================================================ */

#sendVehicleImages_popUp .note-btn-group button {
  margin-top: 0 !important;
}

/* Firma email (pages/profilo): TinyMCE, stile "bio" Metronic -------------
   .tox.tox-tinymce e non .tox: il tema di TinyMCE (skin.min.css) si
   aggiunge alla pagina DOPO questo foglio e a pari specificita' vince lui. */

/* Toolbar: bianca, SENZA separatore (come Metronic bio), compatta */
.profilo-editor-card .tox.tox-tinymce .tox-editor-header {
  background: #fff;
  border-bottom: 0;
  box-shadow: none;
  padding: 5px 10px;
}

.profilo-editor-card .tox.tox-tinymce .tox-toolbar,
.profilo-editor-card .tox.tox-tinymce .tox-toolbar__primary,
.profilo-editor-card .tox.tox-tinymce .tox-toolbar-overlord,
.profilo-editor-card .tox.tox-tinymce .tox-toolbar__overflow {
  background: none;
}

.profilo-editor-card .tox.tox-tinymce .tox-toolbar__group {
  padding: 0 8px;
  border: none;
}

.profilo-editor-card .tox.tox-tinymce .tox-toolbar__group + .tox-toolbar__group {
  margin-left: 3px;
  padding-left: 8px;
  border-left: 1px solid #eeeeee;
}

/* Bottoni come Metronic bio: 34x28, grigio muto, radius 3px, gap minimo */
.profilo-editor-card .tox.tox-tinymce .tox-tbtn {
  border: none !important;
  background: transparent !important;
  color: rgba(34, 47, 62, .5);
  border-radius: var(--radius-xs);
  width: 34px;
  height: 28px;
  margin: 0 1px 0 0;
  transition: background-color .12s ease, color .12s ease;
}

.profilo-editor-card .tox.tox-tinymce .tox-tbtn svg {
  fill: currentColor;
}

.profilo-editor-card .tox.tox-tinymce .tox-tbtn:hover {
  background: #f3f4f6 !important;
  color: #111827;
}

.profilo-editor-card .tox.tox-tinymce .tox-tbtn--enabled,
.profilo-editor-card .tox.tox-tinymce .tox-tbtn--enabled:hover {
  background: #eff0f2 !important;
  color: #111827;
}

.profilo-editor-card .tox.tox-tinymce .tox-split-button__chevron {
  color: #9ca3af;
  width: 18px;
}

.profilo-editor-card .tox.tox-tinymce .tox-edit-area {
  border: none;
}

.profilo-editor-card .tox.tox-tinymce .tox-edit-area__iframe {
  background: #fff;
}

/* Placeholder del corpo firma (iniettato via content_style nell'iframe) */
.profilo-editor-card .tox.tox-tinymce .tox-edit-area::before {
  border-radius: 0 0 8px 8px;
}

/* === TinyMCE — z-index sopra qualsiasi panel/drawer (stesso motivo di
   SweetAlert2 qui sotto): i dialog (es. "Inserisci link") vengono appesi
   a <body> in un sink .tox-silver-sink a z-index 1300/1100, che perde
   contro il drawer "Modifica profilo utente" (kt-demo-panel). Forziamo
   il sink e i suoi dialog in cima a tutto. */
.tox.tox-silver-sink,
.tox-dialog-wrap {
  z-index: 100000 !important;
}

/* ============================================================
   28 — INTEGRAZIONE: SWEETALERT2
   ============================================================ */

/* SweetAlert2 — stesso backdrop sfocato degli altri lightbox (modal,
   demo-panel, planning). Esclusi i TOAST: in questa versione il container
   del toast resta .swal2-shown senza .swal2-no-backdrop, ma il body prende
   .swal2-toast-shown — e' quella la discriminante. Senza l'esclusione, il
   toast si portava dietro una banda scura sfocata. */
body:not(.swal2-toast-shown) .swal2-container.swal2-shown:not(.swal2-no-backdrop) {
  background: var(--lightbox-backdrop) !important;
  -webkit-backdrop-filter: blur(var(--lightbox-blur)) !important;
  backdrop-filter: blur(var(--lightbox-blur)) !important;
}

body .swal2-popup {
  width: auto;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.25) !important;
}

/* Toast (es. "Dati aggiornati correttamente"): niente scrim/blur sul
   container e niente ombrone: resta solo il popup bianco. */
body.swal2-toast-shown .swal2-container {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.swal2-toast-shown .swal2-popup {
  box-shadow: none !important;
}

/* === SweetAlert2 — z-index sopra qualsiasi panel/drawer/select2 ===
   SwAl di default è 1060. kt-demo-panel e Select2 dropdown possono
   coprirlo (z-index ~1100/9999). Forziamo SwAl in cima a tutto. */
.swal2-container {
  z-index: 100000 !important;
}

/* ============================================================
   29 — UTILITY (helper classes, .text-*, .bg-*, .alerts)
   ============================================================ */

.icon--small {
  height: 2.5rem;
  margin-bottom: 5px;
}

.ki-exit-right, .ki-exit-left {
  color: #fff!important;
}


/* ============================================================
   30 — RESPONSIVE / MEDIA QUERIES (raggruppate per breakpoint)
   ============================================================ */

/* Responsive: reduce padding on mobile */
@media (max-width: 576px) {
  /* (14/09/2026) restano solo i margini del corpo del drawer: gli altri
     valori di questo blocco — padding della .modal, inset del drawer,
     margini di testata e piede — erano battuti dal blocco LIGHTBOX
     DRAWER e dalle variabili mobili dell'anatomia unica */
  .kt-demo-panel .kt-demo-panel__body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 1025px) {
  .kt-inbox .kt-inbox__aside .kt-inbox__nav {
    background: var(--color-white);
    margin-top: 0!important;
  }

  .row {
    margin-right: 0;
    margin-left: 0;
  }

  .kt-content > .kt-container {
    padding: 0;
  }
}


@media (max-width: 479px) {
  .col {
    flex-basis: initial!important;
  }
}

@media (max-width: 479px) {
  .carousel {
    width: 280px!important;
    margin: 0 auto;
  }


}

@media (min-width: 480px) and (max-width: 550px) {
  .carousel {
    width: 370px!important;
    margin: 0 auto;
  }


}

@media (min-width: 551px) and (max-width: 750px) {
  .carousel {
    width: 435px!important;
    margin: 0 auto;
  }

  /* ".btn.btn-icon { 2rem }" rimossa: 2rem sono esattamente i 32px che
     il blocco DRAIVE BUTTONS gia' da' a ogni icon-only. Qui pero'
     colpiva anche btn-sm e btn-lg, appiattendo tre taglie su una nella
     sola finestra 551-750px. */


}

@media (min-width: 751px) and (max-width: 1020px) {
  .carousel {
    width: 635px!important;
    margin: 0 auto;
  }


}

@media (min-width: 1024px) and (max-width: 1280px) {
  .carousel {
    width: 590px!important;
    margin: 0 auto;
  }


}

@media (min-width: 1281px) and (max-width: 1900px) {
  .carousel {
    width: 810px!important;
    margin: 0 auto;
  }


}

@media (min-width: 1901px) {
  .carousel {
    width: 1390px!important;
    margin: 0 auto;
  }


}

@media (max-width: 1024px) {
  .login-container {
    flex-direction: column;
  }
  .login-hero {
    display: block;
    padding: 16px;
    order: 1;
  }
  .login-panel {
    padding: 16px;
    order: 2;
  }
  .login-hero-inner {
    min-height: 220px;
    border-radius: 12px;
  }
}

/* Hide header user icon entirely */

@media (max-width:991.98px) {
  .kt-wrapper {
    padding-left: 0 !important;
    background: transparent !important;
  }
}

@media (max-width: 1025px) {
  .kt-profilo .kt-app .kt-inbox__aside .kt-inbox__nav {
    background: #fff;
    margin-top: 0 !important;
  }
}

@media (max-width: 1024px) {
  .kt-inbox-aside--hidden #kt_subheader {
    z-index: 0;
    width: auto;
  }
  .kt-inbox-aside--hidden #kt_inbox_list .kt-portlet__head {
    margin-left: 0;
  }
}

@media (min-width: 1025px) {
  #kt_header {
    width: 25%;
    left: 75%;
  }
  /* Il subheader (Filtro + titolo lista) occupa la stessa banda 64px del
     brand della sidebar e del header. Il padding-top sposta il centro degli
     elementi a ~39px: la linea della ragione sociale, che nella colonna e'
     .dv-panel__org (assets/css/draive.sidebar.css). Prima del refactoring
     del 2026-08-08 il riferimento era #kt_aside_brand .kt-aside__brand-logo,
     che non esiste piu'. */
  #kt_subheader {
    position: fixed;
    z-index: 2;
    width: 300px;
    top: 0;
    margin: 0;
    min-height: 64px;
    align-items: center;
    padding-top: 18px;
  }
  #kt_inbox_list .kt-portlet__head {
    position: fixed;
    z-index: 1;
    width: 50%;
    top: 0;
  }

  #kt_content .kt-container {
    padding-left: 5px;
  }
}

/* Mobile: bigger touch targets for Select2/Bootstrap-select */
@media (max-width: 768px) {
  .select2-results__option {
    padding: 0.75rem 1rem !important;
  }
  .select2-container--default .select2-selection--single {
    min-height: 3.5rem;
  }
  .bootstrap-select .dropdown-menu .dropdown-item,
  .bootstrap-select .dropdown-menu li a {
    padding: 0.875rem 1rem;
  }
}

@media (max-width: 576px) {
  body .modal.show .modal-dialog {
    margin: 14px auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Modal header/footer subtle separators (keeps Metronic feel) */

/* Close button in header */

/* Custom Planning lightbox (timeline): gli spacing mobile ≤576px che
   stavano qui (planning-modal-backdrop 14px/18px, modal-dialog 1.25rem/18px,
   coppie in conflitto tra loro) erano tutti superati dal blocco autorevole
   LIGHTBOX DRAWER (@max-768: drawer full-screen, padding 0 / margin 0
   !important, specificita' maggiore). Rimossi 2026-07-05. */

/* responsive: stack sidebar on small screens */
@media (max-width: 992px) {
  .modal .kt-app, .kt-demo-panel .kt-app {
    flex-direction: column;
  }
  .modal #kt_user_profile_aside, .kt-demo-panel #kt_user_profile_aside {
    flex: 0 0 auto;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .modal #kt_user_profile_aside .nav.nav-tabs,
  .kt-demo-panel #kt_user_profile_aside .nav.nav-tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Mobile: allow stack if needed */
@media (max-width: 900px) {
  #kt_demo_panel .kt-demo-panel__body {
    overflow: auto;
  }
  #kt_demo_panel .kt-settings-shell {
    flex-direction: column;
    height: auto;
    grid-template-columns: 1fr; /* merge dal secondo @media 900 (2026-07-05) */
  }
  #kt_demo_panel .kt-settings-sidebar {
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid rgba(15,23,42,.08);
    /* La shell qui e' in colonna, e in un flex a colonna flex-basis vale
       sull'ALTEZZA: i 270px pensati come larghezza tenevano la barra dei
       tab alta 270px anche quando le voci ne occupavano 200, lasciando un
       vuoto fra la navigazione e il contenuto. */
    flex: 0 0 auto;
  }
  /* Le voci vanno in riga e vanno a capo. La base fissa serve: senza,
     la larghezza la detta il testo, e il peso 600 della voce attiva
     bastava a far rimpaginare tutta la griglia a ogni cambio di tab —
     un tremolio che sembra un difetto di rendering. */
  #kt_demo_panel .kt-settings-sidebar .nav.nav-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  #kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-item {
    flex: 1 1 190px;
    max-width: none;
  }
  #kt_demo_panel .kt-settings-content {
    overflow: visible;
  }
}

/* On very small screens: keep sidebar at top but still visible */
@media (max-width: 900px) {
  #kt_demo_panel .kt-settings-sidebar:before,
  #kt_demo_panel .kt-settings-sidebar:after {
    display: none;
  }
  /* (rimosso 2026-08-09) padding-left: 16px sulla voce. Era il rientro
     della vecchia riga da 14/16; l'Item ne ha 10 su tutti e quattro i
     lati e un solo lato diverso lo sbilanciava. */
  #kt_demo_panel .kt-settings-content .tab-content {
    padding-bottom: 120px;
  }
}

/* Responsive: su schermi medi/piccoli, azioni vanno a capo e diventano più comode */

/* Responsive pannello */
@media (max-width: 768px) {
  #kt_demo_panel .kt-portlet__head,
  #kt_demo_panel .kt-portlet__body,
  #kt_demo_panel .kt-portlet__foot {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 768px) {
  #kt_demo_panel .profilo-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .biz-card__head {
    gap: 10px;
  }
  .biz-card__icon {
    width: 36px;
    height: 36px;
  }
}

/* (mobile: il "+" resta 34px come su desktop — stessa dimensione ovunque) */

/* ============================================================
   99 — OVERRIDES (regole rischiose: full-important, sovrascritture libreria)
   ============================================================ */

.tipoveicolo {
  margin: 0px 5px!important;
  padding: 0!important;
}


/* Select2 full width and vertical centering */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  -webkit-text-fill-color: var(--gray-850) !important;
  caret-color: var(--gray-850) !important;
}

/* Legacy hiding overrides */
.kt-switch input[type="checkbox"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.kt-datatable__cell span {
  font-weight: bolder !important;
  color: #000 !important;
}

/* Ensure invalid borders also apply to select2 (container is injected after the <select>) */
select.is-invalid + .select2-container .select2-selection,
select[aria-invalid="true"] + .select2-container .select2-selection {
  border-color: var(--draive-border-error) !important;
  background-color: var(--draive-field-bg-focus) !important;
}

/* ==========================================================
   Filters side panels (kt-inbox__aside) - same style as global forms
   ========================================================== */

.kt-inbox__aside .form-control,
.kt-inbox__aside .form-select,
.kt-inbox__aside textarea.form-control {
  background-color: var(--draive-field-bg) !important;
  border: 1px solid var(--draive-field-border) !important;
  border-radius: var(--draive-radius) !important;
}

.kt-inbox__aside .form-control:focus,
.kt-inbox__aside .form-select:focus,
.kt-inbox__aside textarea.form-control:focus {
  background-color: var(--draive-field-bg-focus) !important;
  border-color: var(--draive-border-focus) !important;
  box-shadow: none !important;
}

.kt-inbox__aside .select2-container--default .select2-selection--single {
  height: var(--draive-control-height) !important;
  background: var(--draive-field-bg) !important;
  border: 1px solid var(--draive-field-border) !important;
  border-radius: var(--draive-radius) !important;
  box-shadow: none !important;
}

.kt-inbox__aside .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 42px 0 16px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* La freccia dei filtri inbox non si tocca piu': aveva right 12px
   !important e quattro classi di specificita', quindi batteva la
   canonica e portava il chevron a 20px dal bordo invece che a 15 —
   nei pannelli filtri le frecce erano diverse da quelle delle schede.
   Rimossa il 2026-08-08. */

.kt-inbox__aside .select2-container--default.select2-container--open .select2-selection--single,
.kt-inbox__aside .select2-container--default.select2-container--focus .select2-selection--single {
  background: var(--draive-field-bg-focus) !important;
  border-color: var(--draive-border-focus) !important;
}

.kt-inbox__aside .bootstrap-select.show > .dropdown-toggle,
.kt-inbox__aside .bootstrap-select.open > .dropdown-toggle,
.kt-inbox__aside .bootstrap-select > .dropdown-toggle:focus {
  background: var(--draive-field-bg-focus) !important;
  border-color: var(--draive-border-focus) !important;
  outline: none !important;
}

/* =========================================
   Draive - Global form style (platform-wide)
   ========================================= */

/* Base controls (keep high specificity to win vs theme bundles) */
body input.form-control,
body textarea.form-control,
body select.form-select {
  background: var(--draive-field-bg) !important;
  border: 1px solid var(--draive-field-border) !important;  /* era "2px solid transparent": lo spazio del bordo si riservava
     perche il campo era un riempimento grigio senza contorno. Da
     quando il campo e bianco, il bordo E il campo. */
  border-radius: var(--draive-radius) !important;
  box-shadow: none !important;
  color: #111 !important;
}

/* Comfortable sizing */
body input.form-control, body textarea.form-control, body select.form-select {
  min-height: var(--draive-control-height);
  padding: 18px 16px;
}

/* Focus */
body input.form-control:focus,
body textarea.form-control:focus,
body select.form-select:focus {
  background: var(--draive-field-bg-focus) !important;
  border-color: var(--draive-border-focus) !important;
  outline: none !important;
}

/* Disabled/readonly */
body input.form-control:disabled,
body textarea.form-control:disabled,
body select.form-select:disabled,
body input.form-control[readonly],
body textarea.form-control[readonly] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Buttons: vedi il blocco autorevole "Draive UI — KTUI button system"
   piu' avanti nel file (le vecchie regole gradiente/52px sono state rimosse
   perche' in conflitto con lo spec KTUI). */

/* Add headroom in the control for the label */

/* Validation state (match screenshot: red border) */
body .is-invalid {
  border-color: var(--draive-border-error) !important;
}

/* Ombre dei bottoni: seconda copia della stessa regola, rimossa
   2026-08-08. Vedi "DRAIVE BUTTONS" in coda al file. */

/* ==========================================================
   Draive UI – Input groups & addons (global)
   ========================================================== */
body .input-group .input-group-text,
body .input-group .btn,
body .input-group .input-group-append .input-group-text,
body .input-group .input-group-prepend .input-group-text {
  background: var(--draive-field-bg) !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
  color: #111 !important;
}

body .input-group:focus-within .input-group-text {
  background: var(--draive-field-bg-focus) !important;
  border-color: var(--draive-border-focus) !important;
}

body .input-group > .form-control {
  border-right: 0 !important;
}

body .input-group > .input-group-text {
  border-left: 0 !important;
}

/* Keep rounded corners consistent inside input groups */
body .input-group > .form-control:first-child {
  border-top-left-radius: var(--draive-radius) !important;
  border-bottom-left-radius: var(--draive-radius) !important;
}

body .input-group > .input-group-text:last-child {
  border-top-right-radius: var(--draive-radius) !important;
  border-bottom-right-radius: var(--draive-radius) !important;
}

/* Modal form spacing: keep controls consistent */
body .modal .form-control,
body .modal .form-select,
body .modal .select2-container--default .select2-selection--single {
  background: var(--draive-field-bg) !important;
}

/* Select2 selection styling (global) */
body .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  padding: 0 15px !important;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.2 !important;
  padding-left: 0 !important;
  color: #111 !important;
}

/* Qui c'era una regola col selettore IDENTICO a quello della canonica
   (v. "SELECT2 — LA FRECCIA" in fondo), ma con right 10px: stessa
   specificita', quindi decideva solo l'ordine nel file e vinceva la
   seconda. Due dichiarazioni identiche che si contendono un valore
   sono un errore in attesa: rimossa il 2026-08-08. */

/* Focus for Select2 */
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
  background: var(--draive-field-bg-focus) !important;
}

/* Dropdown z-index above modals/offcanvas */
.select2-container {
  width: 100% !important;
  z-index: 1065 !important;
  /* bootstrap modal is 1055 */
}

/* ==========================================================
   Draive UI – Global form + buttons (authoritative)
   This block is intentionally last to override module css.
   ========================================================== */

/* Core controls (Bootstrap/Metronic) */
body .form-control,
body .form-select,
body select.form-control,
body textarea.form-control,
body input.form-control {
  min-height: var(--draive-control-height) !important;
  padding: 0 15px !important;
  border-radius: var(--draive-radius) !important;
  border: 1px solid var(--draive-field-border) !important;
  background: var(--draive-field-bg) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  color: #111 !important;
}

body textarea.form-control {
  resize: vertical;
  padding: 14px 16px !important;
  min-height: 120px !important;
}

body .form-control::placeholder, body .form-select::placeholder {
  color: var(--draive-placeholder) !important;
}

body .form-control:focus,
body .form-select:focus {
  background: var(--draive-field-bg-focus) !important;
  border-color: var(--draive-border-focus) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body .form-control:disabled,
body .form-select:disabled,
body .form-control[readonly] {
  opacity: 1 !important;
  background: #ececec !important;
}

/* Select2 (single + multiple) */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
  min-height: var(--draive-control-height) !important;
  border-radius: var(--draive-radius) !important;
  border: 1px solid var(--draive-field-border) !important;
  background: var(--draive-field-bg) !important;
  box-shadow: none !important;
}

body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--multiple {
  background: var(--draive-field-bg-focus) !important;
}

body .select2-container--default .select2-selection--multiple {
  padding: 6px 12px !important;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 0 !important;
  background: #e9e9e9 !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
  /* 2026-07-26: la chip non aveva padding e la × ci stava dentro
     appiccicata e disallineata rispetto al testo.
     NIENTE flex sulla chip: in select2 4.0.12 il testo e' un TEXT NODE
     nudo accanto allo <span> della ×, quindi diventa un flex item
     anonimo che non si puo' far restringere — la × sbordava a destra e
     con le etichette lunghe la chip cresceva fino a 70px di altezza.
     Con il flusso inline normale il testo va a capo dentro il padding e
     la × resta un inline-block allineato al centro della prima riga.
     Regola volutamente NON dentro .draive-floating: vale per ogni
     multiplo di DRAIVE (brand della sede, sedi dell'utente, filtri). */
  display: inline-flex !important;
  align-items: center !important;   /* centra × e testo davvero: con
                                       vertical-align restavano sfalsati
                                       di ~2,6px, ed e' il disallineamento
                                       che si vedeva nella chip */
  gap: 6px;
  padding: 4px 10px !important;
  max-width: 100%;
  min-width: 0;
  line-height: 1.4 !important;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  float: none !important;
  flex: 0 0 16px;                 /* non si schiaccia se l'etichetta e' lunga */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 16px;
  height: 16px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: calc(13px * var(--dv-fs,1));
  line-height: 1;
  color: var(--text-muted, #8c8f9a) !important;
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: rgba(0,0,0,.08);
  color: #3f4254 !important;
}

/* Legacy custom wrapper used in modules: .kt-input */


/* Buttons – unified (no shadows, login style) */
/* ---- Bottoni: rimossi 2026-08-08, vedi "DRAIVE BUTTONS" in coda ----

   Qui stava "body .btn, body button, body .kt-btn { border-radius:8px;
   padding:0 15px; margin:0 2px; font-weight:600 }" con !important su
   tutto. Era la regola piu' dannosa del foglio, per tre motivi:

   1. Prendeva OGNI <button> del documento, non i soli pulsanti di
      interfaccia: maniglie, toggle, chiudi, icone. Con box-sizing
      border-box un controllo quadrato da 28px non contiene 30px di
      padding e diventava un rettangolo da 32.
   2. Il danno peggiore non si vedeva sul bottone ma sui suoi figli: in
      un <button> flex quei 30px lasciavano 10px utili e i figli, che
      sono flex item, venivano compressi al loro min-content. Un avatar
      con "width:34px" dichiarata ne misurava 18 — e in DevTools la
      dichiarazione risultava vincente senza essere rispettata.
   3. Le geometrie scritte nei CSS di modulo erano codice morto: questo
      file era rilinkato (fino al 23/10/2026) da bottomScripts.php DOPO i custom.modulo.css,
      quindi vinceva sempre lui. Due esempi misurati nel filtro
      showroom: ".sr-adv-open{padding:11px 0}" e
      ".sr-results-btn{padding:10px 12px}" non hanno mai avuto effetto.

   Con le varianti sono sparite anche: il primario #000/#3a3a3a
   (sostituito da zinc-950 #09090b, la variante "mono" di ReUI), il
   bordo secondario #d5d5d5 e il rosso pieno #ff2d55 — quest'ultimo
   perche' col testo bianco sopra sta a 3.9:1, sotto la soglia AA.

   E soprattutto e' sparito "outline:none !important" su :focus: era
   quello a rendere invisibile il focus da tastiera in tutta la
   piattaforma, e a uccidere l'anello che draive.core.css credeva di
   disegnare. Ora l'anello c'e', ed e' su :focus-visible (mouse no,
   tastiera si'). */

/* ==========================================================
   Draive UI – Global Lightbox / Modal (Metronic-like)
   - blur background
   - rounded corners
   - outer margin/padding
   - consistent header/body spacing
   NOTE: does NOT touch any existing IDs
   ========================================================== */

/* Bootstrap modal backdrop (global) */
body .modal-backdrop.show {
  opacity: 1 !important;
}

/* Bootstrap modal spacing: gestito dal blocco autorevole
   "Draive UI — LIGHTBOX DRAWER" in fondo al file (drawer a destra). */

/* Bootstrap modal backdrop (Bootstrap v4: .modal-backdrop.fade.show) */
body .modal-backdrop {
  background: var(--lightbox-backdrop) !important;
  -webkit-backdrop-filter: blur(var(--lightbox-blur));
  backdrop-filter: blur(var(--lightbox-blur));
}

/* Bootstrap modal spacing: interamente nel blocco LIGHTBOX DRAWER
   (body .modal { padding:0 !important }, superset del padding-left:0
   che stava qui — rimosso 2026-07-05). */

/* Modal: testata, titolo, X e piede in "ANATOMIA UNICA" (14/09/2026) */
body .modal-body {
  padding: 18px 20px !important;
}

/* Custom planning lightbox/backdrop (Auto di Cortesia planning) */
body .planning-modal__body {
  padding: 18px 20px !important;
}

/* Bootstrap modal spacing: vedi blocco "Draive UI — LIGHTBOX DRAWER". */


/* (14/09/2026) Qui c'era il margine negativo -8px che agganciava la X
   dei modali Bootstrap al bordo della testata: era l'unica X a 12px dal
   bordo invece che a 20, e la ragione per cui i modali e i drawer non
   avevano la X nello stesso punto. Tolto con l'anatomia unica. */

/* ==========================================================
   Custom lightboxes used in modules (planning, etc.)
   ========================================================== */

/* Planning lightbox backdrop + container */
body .planning-modal-backdrop {
  background: var(--lightbox-backdrop) !important;
  -webkit-backdrop-filter: blur(var(--lightbox-blur));
  backdrop-filter: blur(var(--lightbox-blur));
  padding: 28px !important;
  /* outer margin */
}

body .planning-modal {
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.22) !important;
  border: 0 !important;
}


/* ==========================================================
   SweetAlert2 (if used) – blur + rounded
   ========================================================== */

/* =========================================================
   Lightbox layering fix (z-index) - keeps slide animation
   (il padding 1.25rem che stava qui era superato dal blocco
   LIGHTBOX DRAWER "body .modal { padding:0 !important }";
   resta solo lo z-index, che il drawer non ridefinisce)
   Gerarchia layer: drawer .kt-demo-panel 3100 < MODALI 3150 <
   lightGallery 3160/3170 < dropdown select2/bootstrap-select
   3205 < toast/swal 100000.
   Con 3000 le modali aperte DAI pannelli (es. "Cambia archivio
   veicolo" dalla scheda) finivano SOTTO il drawer: invisibili.
   Alzate a 3150 il 2026-07-05.
   ========================================================= */
.modal {
  z-index: 3150 !important;
}

.modal-backdrop {
  background: var(--lightbox-backdrop) !important;
  z-index: 3140 !important; /* sotto la modale (3150), sopra il drawer (3100) */
}

/* lightGallery (galleria foto veicolo): il vendor CSS lo lascia a
   1050/1040, cioe' SOTTO il drawer 3100 — la galleria aperta dalla
   scheda finiva dietro al pannello. Visore fullscreen: sta sopra
   drawer E modali, sotto restano solo dropdown e toast/swal. */
.lg-outer {
  z-index: 3170 !important;
}

.lg-backdrop {
  z-index: 3160 !important; /* sotto il visore (3170), sopra le modali (3150) */
}

.modal #kt_user_profile_aside .nav.nav-tabs .nav-item,
.kt-demo-panel #kt_user_profile_aside .nav.nav-tabs .nav-item {
  margin: 0 !important;
  padding: 0 !important;
}

.modal #kt_user_profile_aside .nav.nav-tabs .nav-link:hover,
.kt-demo-panel #kt_user_profile_aside .nav.nav-tabs .nav-link:hover {
  background: rgba(0,0,0,.035) !important;
  color: rgba(0,0,0,.82) !important;
}

.modal #kt_user_profile_aside .nav.nav-tabs .nav-link.active,
.kt-demo-panel #kt_user_profile_aside .nav.nav-tabs .nav-link.active {
  background: rgba(59,130,246,.08) !important;
  color: rgba(0,0,0,.86) !important;
}

/* (rimosso 2026-08-09) Qui c'erano hover e attivo del menu verticale
   del drawer, in rgba(15,23,42,.035) e .04 con !important. Erano la
   copia stanca del blocco "Menu verticale del drawer — pattern Item
   di ReUI" molto piu' su, e vincevano loro perche' erano gli ultimi:
   qualunque ritocco lassu' non si vedeva. I due grigi distavano mezzo
   punto percentuale, cioe' l'attivo e l'hover erano lo stesso colore.
   Gli stati veri stanno ora in un posto solo. */

/* left indicator */
#kt_demo_panel .kt-settings-sidebar .nav.nav-tabs .nav-link.active::before {
  content: none !important;
  display: none !important;
}

#kt_demo_panel .kt-settings-sidebar .nav .nav-link:before {
  content: none !important;
  display: none !important;
}

#kt_demo_panel .kt-settings-sidebar .nav .nav-link.active:after {
  content: none !important;
  display: none !important;
}

#kt_demo_panel .kt-settings-sidebar .nav .nav-link.active:before {
  /* decorative bullet removed */
  content: none !important;
  display: none !important;
}

/* (Il fix "double scroll" dei pannelli profilo e' nel blocco completo
   "FIX: Remove double vertical scroll" qui sotto: la versione ridotta
   che stava qui era un sottoinsieme esatto, rimossa 2026-07-05.) */

#kt_inbox_aside .form-group.row .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  padding-right: 0px!important;
  padding-left: 0px!important;
}

.kt-radio.kt-radio--solid.kt-bianco > input:checked ~ span {
  background: #fff!important;
  border: 1px solid #e4e8ee!important;
}

/* ================================
   FIX: Remove double vertical scroll in profile tabs
   (Permessi, Accesso Aziende, Notifiche, Giacenze)
   Keep only the panel scroll
   ================================ */
#kt_demo_panel #gestione-permessi,
#kt_demo_panel #accesso-aziende,
#kt_demo_panel #serviziAD,
#kt_demo_panel #serviziGC {
  overflow: visible !important;
  max-height: none !important;
}

#kt_demo_panel #gestione-permessi .kt-portlet,
#kt_demo_panel #gestione-permessi .kt-portlet__body,
#kt_demo_panel #gestione-permessi .kt-section,
#kt_demo_panel #gestione-permessi .kt-section__body,
#kt_demo_panel #gestione-permessi .card,
#kt_demo_panel #gestione-permessi .card-body,
#kt_demo_panel #accesso-aziende .kt-portlet,
#kt_demo_panel #accesso-aziende .kt-portlet__body,
#kt_demo_panel #accesso-aziende .kt-section,
#kt_demo_panel #accesso-aziende .kt-section__body,
#kt_demo_panel #accesso-aziende .card,
#kt_demo_panel #accesso-aziende .card-body,
#kt_demo_panel #serviziAD .kt-portlet,
#kt_demo_panel #serviziAD .kt-portlet__body,
#kt_demo_panel #serviziAD .kt-section,
#kt_demo_panel #serviziAD .kt-section__body,
#kt_demo_panel #serviziAD .card,
#kt_demo_panel #serviziAD .card-body,
#kt_demo_panel #serviziGC .kt-portlet,
#kt_demo_panel #serviziGC .kt-portlet__body,
#kt_demo_panel #serviziGC .kt-section,
#kt_demo_panel #serviziGC .kt-section__body,
#kt_demo_panel #serviziGC .card,
#kt_demo_panel #serviziGC .card-body {
  overflow: visible !important;
  max-height: none !important;
}

/* DataTables nested scroll areas (if present inside tabs) */
#kt_demo_panel #gestione-permessi .dataTables_scrollBody,
#kt_demo_panel #accesso-aziende .dataTables_scrollBody,
#kt_demo_panel #serviziAD .dataTables_scrollBody,
#kt_demo_panel #serviziGC .dataTables_scrollBody {
  overflow: visible !important;
  max-height: none !important;
}

/* ============================================================
   DRAIVE BUTTONS — sorgente unica dei pulsanti (modello ReUI)
   reui.io/components/button

   Questo e' l'UNICO posto in cui si scrive la forma di un pulsante.
   Non esistono piu' regole di bottone nei custom.modulo.css, in
   draive.core.css o piu' su in questo file: se un pulsante e' storto,
   si aggiusta qui e si aggiusta ovunque.

   Perche' proprio qui: bottomScripts.php rilinkava (fino al 23/10/2026) draive.core.css DOPO i
   custom.modulo.css ("Force custom.css to be loaded LAST", tolto il 23/10/2026), quindi a
   parita' di specificita' questo blocco vince su tutto. E' anche il
   motivo per cui le geometrie scritte nei moduli erano codice morto.

   GEOMETRIA (token in draive.tokens.css:271-275, misurati sui
   componenti ReUI renderizzati il 2026-08-07 — non a occhio):

     taglia   altezza   padding-x   testo   icona
     sm/xs     28px       8px       13px    14px
     md         32px      10px      14px    16px    <- predefinita
     lg         40px      16px      14px    16px

   raggio 10px (--radius-btn, che e' anche il --radius di ReUI a
   0.625rem), peso 500, gap 6px.

   NB1: !important sulle proprieta' dimensionali, altrimenti perde
   contro style.bundle.css. "display" invece NON e' !important, cosi'
   .d-none e gli style="display:none" inline continuano a nascondere.

   NB2: i .dropdown-toggle sono esclusi dalla GEOMETRIA — i trigger
   bootstrap-select hanno misure loro (campi filtro 47px, select del
   pager 32px) e uniformarli spaccherebbe i filtri. Il COLORE invece
   li copre, in fondo al blocco: prima lo prendevano da una regola
   separata a riga 1096 e i due punti si erano gia' disallineati.
   ============================================================ */

/* --- Base ------------------------------------------------------- */
body .btn:not(.dropdown-toggle),
body .kt-btn:not(.dropdown-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-h-md) !important;
  padding: 0 var(--btn-px-md) !important;
  /* I 2px orizzontali sono l'unico pezzo della vecchia regola globale
     che vale la pena tenere. ReUI non li avrebbe (li' lo spazio lo da'
     il "gap" del contenitore), ma qui i pulsanti stanno in 1132 punti e
     moltissime barre azioni non hanno un gap dichiarato: senza margine
     si toccherebbero. Niente !important, cosi' chi ha un contenitore
     con gap proprio puo' azzerarli. Il margine non fa il danno che
     faceva il padding: non entra nel box e non comprime i figli. */
  margin: 0 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn) !important;
  font-size: calc(var(--btn-fs-md) * var(--dv-fs,1)) !important;
  font-weight: var(--fw-medium) !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  transition: background-color var(--motion-base),
              border-color var(--motion-base),
              color var(--motion-base),
              box-shadow var(--motion-base);
}

/* With Icon: il glifo scala con il testo (ReUI non lo tiene fisso).
   Niente margini: lo spazio lo fa il gap del contenitore. */
body .btn:not(.dropdown-toggle) i,
body .kt-btn:not(.dropdown-toggle) i {
  font-size: calc(var(--btn-icon) * var(--dv-fs,1));
  line-height: 1;
  margin: 0;
}

/* --- Varianti ---------------------------------------------------
   Il markup ha 25 nomi di variante per 6 trattamenti reali: sono
   quasi tutti sinonimi ereditati da Metronic. Qui si canonicalizza
   il nome sul trattamento, non si inventa una tinta nuova.
   ---------------------------------------------------------------- */

/* mono nero — azione principale (ReUI "mono", zinc-950).
   primary/dark/brand/info rendono tutti lo stesso nero: erano gia'
   sinonimi nel markup, ora lo sono anche nel foglio. */
body .btn.btn-primary:not(.dropdown-toggle),
body .btn.btn-dark:not(.dropdown-toggle),
body .btn.btn-brand:not(.dropdown-toggle),
body .btn.btn-info:not(.dropdown-toggle),
body .btn.btn--primary:not(.dropdown-toggle),
body .kt-btn.kt-btn-primary:not(.dropdown-toggle) {
  background: #09090b !important;
  border-color: #09090b !important;
  color: #fff !important;
}

body .btn.btn-primary:not(.dropdown-toggle):hover,
body .btn.btn-dark:not(.dropdown-toggle):hover,
body .btn.btn-brand:not(.dropdown-toggle):hover,
body .btn.btn-info:not(.dropdown-toggle):hover,
body .btn.btn--primary:not(.dropdown-toggle):hover,
body .kt-btn.kt-btn-primary:not(.dropdown-toggle):hover {
  background: #1d1d20 !important;
  border-color: #1d1d20 !important;
  color: #fff !important;
}

body .btn.btn-primary:not(.dropdown-toggle) i,
body .btn.btn-dark:not(.dropdown-toggle) i,
body .btn.btn-brand:not(.dropdown-toggle) i,
body .btn.btn-info:not(.dropdown-toggle) i,
body .btn.btn--primary:not(.dropdown-toggle) i,
body .kt-btn.kt-btn-primary:not(.dropdown-toggle) i {
  color: #fff;
}

/* Eccezione: "Cancella filtri" nella BARRA orizzontale dello showroom
   (2026-09-10). Nel pannello in colonna e' l'ultima cosa in fondo e il
   nero ci sta. In barra la stessa pastiglia sale in alto a destra, sotto
   il titolo della pagina: diventerebbe l'oggetto piu' forte dello schermo
   per un'azione che non e' quella principale — e "Salva ricerca", che le
   sta accanto, e' in ghost. Perde il riempimento e tiene solo il bordo;
   geometria e larghezza restano del blocco "FILTRI LISTA".
   !important perche' il nero qui sopra e' !important: e' la stessa
   sorgente, quindi l'eccezione vive accanto alla regola e non in un
   foglio di modulo, dove sarebbe codice morto (draive.core.css e' l'ultimo
   caricato). */
body.sr-filter-horizontal .kt-inbox__aside .kt-btn.kt-btn-primary[name="resetFilters"]:not(.dropdown-toggle) {
  background: transparent !important;
  border-color: var(--border-soft) !important;
  color: var(--ink-body) !important;
}
body.sr-filter-horizontal .kt-inbox__aside .kt-btn.kt-btn-primary[name="resetFilters"]:not(.dropdown-toggle):hover {
  background: var(--surface-soft) !important;
  border-color: var(--grey-mid) !important;
  color: var(--ink) !important;
}

/* Stessa barra: «Applica» delle ricerche salvate solo bordato, nero sulla
   scheda puntata (era nel foglio di modulo, dove perdeva contro il nero). */
@media (min-width: 1025px) {
  body.sr-filter-horizontal .showroom-search-card .btn-primary[data-action="apply"] {
    background: var(--canvas) !important;
    border-color: var(--grey-line) !important;
    color: var(--ink) !important;
  }
  body.sr-filter-horizontal .showroom-search-card:hover .btn-primary[data-action="apply"],
  body.sr-filter-horizontal .showroom-search-card .btn-primary[data-action="apply"]:focus-visible {
    background: var(--action) !important;
    border-color: var(--action) !important;
    color: var(--on-action) !important;
  }
  body.sr-filter-horizontal .showroom-search-card .btn-primary[data-action="apply"] i { color: inherit; }
}

/* outline — bianco con bordo (ReUI "outline"). Alternativa alla
   principale: Annulla, Esporta, filtri. */
body .btn.btn-light:not(.dropdown-toggle),
body .btn.btn-default:not(.dropdown-toggle),
body .btn[class*="btn-outline"]:not(.dropdown-toggle),
body .kt-btn.kt-btn-light:not(.dropdown-toggle) {
  background: #fff !important;
  border-color: #e4e4e7 !important;
  color: #27272a !important;
}

body .btn.btn-light:not(.dropdown-toggle):hover,
body .btn.btn-default:not(.dropdown-toggle):hover,
body .btn[class*="btn-outline"]:not(.dropdown-toggle):hover,
body .kt-btn.kt-btn-light:not(.dropdown-toggle):hover {
  background: #fafafa !important;
  border-color: #c9cdd6 !important;
  color: #111214 !important;
}

body .btn.btn-light:not(.dropdown-toggle) i,
body .btn.btn-default:not(.dropdown-toggle) i,
body .btn[class*="btn-outline"]:not(.dropdown-toggle) i,
body .kt-btn.kt-btn-light:not(.dropdown-toggle) i {
  color: var(--ink-muted);
}

/* secondary — riempimento zinc-100 (ReUI "secondary"). Distinto da
   outline di proposito: ReUI tiene i due trattamenti separati. */
body .btn.btn-secondary:not(.dropdown-toggle),
body .kt-btn.kt-btn-secondary:not(.dropdown-toggle) {
  background: #f4f4f5 !important;
  border-color: #f4f4f5 !important;
  color: #27272a !important;
}

body .btn.btn-secondary:not(.dropdown-toggle):hover,
body .kt-btn.kt-btn-secondary:not(.dropdown-toggle):hover {
  background: #ececf1 !important;
  border-color: #ececf1 !important;
  color: #111214 !important;
}

body .btn.btn-secondary:not(.dropdown-toggle) i,
body .kt-btn.kt-btn-secondary:not(.dropdown-toggle) i {
  color: var(--ink-muted);
}

/* ghost — nessun fondo fino all'hover (ReUI "ghost"). E' la variante
   dei "⋯" di riga, dei chiudi e dei bottoni con la sola icona.
   btn-clean e' il nome Metronic, btn-ghost e btn--ghost quelli usati
   a mano nel markup: 386 occorrenze in tutto, stesso trattamento.
   btn-ghost/btn--ghost non erano definiti in NESSUN foglio prima di
   oggi — 154 pulsanti che ereditavano l'aspetto da .btn e basta. */
body .btn.btn-clean:not(.dropdown-toggle),
body .btn.btn-ghost:not(.dropdown-toggle),
body .btn.btn--ghost:not(.dropdown-toggle) {
  background: transparent !important;
  border-color: transparent !important;
  color: #52525b !important;
}

/* Hover TRASLUCIDO, non un grigio pieno (2026-08-22). #0000000a e' nero
   al 4%: scurisce cio' che c'e' sotto invece di coprirlo. #f4f4f5 era un
   colore opaco tarato sul bianco, e questi bottoni — "modifica" e
   "calendar" in prima colonna, i "⋯" di riga, i chiudi — stanno anche
   sopra righe gia' colorate (is-mk-targa verde, is-mk-rinvio ambra, righe
   selezionate): li' il grigio pieno cancellava il colore della riga per
   tutto il tempo del passaggio del mouse, e lo stesso gesto dava due
   effetti diversi a seconda di dove si trovava. Con l'alfa il rinforzo e'
   sempre lo stesso, su qualunque fondo e in qualunque modulo. */
body .btn.btn-clean:not(.dropdown-toggle):hover,
body .btn.btn-ghost:not(.dropdown-toggle):hover,
body .btn.btn--ghost:not(.dropdown-toggle):hover {
  background: #0000000a !important;
  border-color: transparent !important;
  color: #111214 !important;
}

body .btn.btn-clean:not(.dropdown-toggle) i,
body .btn.btn-ghost:not(.dropdown-toggle) i,
body .btn.btn--ghost:not(.dropdown-toggle) i {
  color: var(--ink-muted);
}

/* Ghost che apre un pannello (aria-controls + aria-expanded): da aperto
   resta premuto. I menu a tendina no (niente aria-controls). */
body .btn.btn-clean[aria-controls][aria-expanded="true"],
body .btn.btn-ghost[aria-controls][aria-expanded="true"] {
  background: #0000000a !important;
  color: #111214 !important;
}
body .btn.btn-clean[aria-controls][aria-expanded="true"] i,
body .btn.btn-ghost[aria-controls][aria-expanded="true"] i { color: #111214; }

/* distruttiva — il rosso e' --danger-text, lo stesso che riempie i
   badge pieni e i blocchi del planning: un solo rosso per tutte le
   superfici piene. NON --danger (#ff2d55): quello col bianco sopra
   sta a 3.9:1, sotto la soglia AA; questo sta a 6.89:1. */
body .btn.btn-danger:not(.dropdown-toggle) {
  background: var(--danger-text) !important;
  border-color: var(--danger-text) !important;
  color: var(--white) !important;
}

body .btn.btn-danger:not(.dropdown-toggle):hover {
  background: var(--danger-alt) !important;
  border-color: var(--danger-alt) !important;
  color: var(--white) !important;
}

body .btn.btn-danger:not(.dropdown-toggle) i {
  color: #fff;
}

/* distruttiva silenziosa — quando "Elimina" e' una delle tante azioni
   di una riga e non il fulcro della schermata: resta una secondaria,
   cambia solo il colore del testo. Arriva da draive.core.css, dove
   viveva separata dalle altre varianti. */
body .btn.btn-danger-quiet:not(.dropdown-toggle) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--danger-text) !important;
}

body .btn.btn-danger-quiet:not(.dropdown-toggle):hover {
  background: rgba(220, 38, 38, .08) !important;
  border-color: transparent !important;
}

body .btn.btn-danger-quiet:not(.dropdown-toggle) i {
  color: var(--danger-text);
}

/* success — conferme e approvazioni (validazione auto di cortesia,
   swal). Non e' nella palette ReUI base ma serve una semantica verde;
   geometria identica alle altre. */
body .btn.btn-success:not(.dropdown-toggle) {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

body .btn.btn-success:not(.dropdown-toggle):hover {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #fff !important;
}

body .btn.btn-success:not(.dropdown-toggle) i {
  color: #fff;
}

/* warning — avvisi che richiedono una scelta. Ambra 600 col testo
   scuro: l'ambra col bianco sopra non passa il contrasto. */
body .btn.btn-warning:not(.dropdown-toggle) {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #1c1917 !important;
}

body .btn.btn-warning:not(.dropdown-toggle):hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #1c1917 !important;
}

body .btn.btn-warning:not(.dropdown-toggle) i {
  color: #1c1917;
}

/* --- Taglie ------------------------------------------------------ */
body .btn.btn-sm:not(.dropdown-toggle),
body .btn.btn-xs:not(.dropdown-toggle),
body .btn.btn--mini:not(.dropdown-toggle) {
  min-height: var(--btn-h-sm) !important;
  padding: 0 var(--btn-px-sm) !important;
  font-size: calc(var(--btn-fs-sm) * var(--dv-fs,1)) !important;
}

body .btn.btn-sm:not(.dropdown-toggle) i,
body .btn.btn-xs:not(.dropdown-toggle) i,
body .btn.btn--mini:not(.dropdown-toggle) i {
  font-size: calc(var(--btn-icon-sm) * var(--dv-fs,1));
}

body .btn.btn-lg:not(.dropdown-toggle) {
  min-height: var(--btn-h-lg) !important;
  padding: 0 var(--btn-px-lg) !important;
  font-size: calc(var(--btn-fs-lg) * var(--dv-fs,1)) !important;
}

body .btn.btn-lg:not(.dropdown-toggle) i {
  font-size: calc(var(--btn-icon-lg) * var(--dv-fs,1));
}

/* --- Icon-only: quadrati ----------------------------------------
   "height" va dichiarata, non basta min-height: il bundle Metronic
   mette "height: 3rem" su .btn.btn-icon e il bottone restava a 42px
   mentre tutti gli altri stavano a 32. Misurato sul banco.
   Il padding va azzerato o il quadrato si sfonda in rettangolo. */
body .btn.btn-icon:not(.dropdown-toggle) {
  width: var(--btn-h-md) !important;
  min-width: var(--btn-h-md) !important;
  height: var(--btn-h-md) !important;
  padding: 0 !important;
}

body .btn.btn-icon.btn-sm:not(.dropdown-toggle),
body .btn.btn-icon.btn-xs:not(.dropdown-toggle) {
  width: var(--btn-h-sm) !important;
  min-width: var(--btn-h-sm) !important;
  height: var(--btn-h-sm) !important;
}

body .btn.btn-icon.btn-lg:not(.dropdown-toggle) {
  width: var(--btn-h-lg) !important;
  min-width: var(--btn-h-lg) !important;
  height: var(--btn-h-lg) !important;
}

/* btn-icon-md / btn-icon-h: 175 occorrenze nel markup. Nel bundle
   Metronic cambiano SOLO la dimensione del glifo, non del bottone —
   il quadrato resta quello della taglia. Qui si riallineano al passo
   delle icone di sistema invece di lasciare i valori del tema. */
body .btn.btn-icon.btn-icon-md:not(.dropdown-toggle) i,
body .btn.btn-icon.btn-icon-h:not(.dropdown-toggle) i {
  font-size: calc(var(--btn-icon) * var(--dv-fs,1));
}

/* --- Modificatori Metronic da neutralizzare ----------------------
   Classi ancora presenti nel markup che riscrivono la geometria per
   conto loro. Non si tolgono dall'HTML (sono centinaia di occorrenze
   in decine di file): si spengono qui, una volta.

     btn-bold / btn-bolder / btn-boldest -> pesi 600/700 fuori scala
     btn-elevate                         -> ombra, e non abbiamo ombre
     btn-pill                            -> raggio 999px
     btn-wide / btn-tall                 -> padding e altezze extra
     btn-font-sm / btn-md                -> non definite in nessun
                                            foglio, ma nel markup ci
                                            sono: qui diventano inerti
   ---------------------------------------------------------------- */
body .btn.btn-bold:not(.dropdown-toggle),
body .btn.btn-bolder:not(.dropdown-toggle),
body .btn.btn-boldest:not(.dropdown-toggle) {
  font-weight: var(--fw-medium) !important;
}

body .btn.btn-elevate:not(.dropdown-toggle),
body .btn.btn-elevate:not(.dropdown-toggle):hover {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

body .btn.btn-pill:not(.dropdown-toggle) {
  border-radius: var(--radius-btn) !important;
}

body .btn.btn-wide:not(.dropdown-toggle),
body .btn.btn-md:not(.dropdown-toggle) {
  padding: 0 var(--btn-px-md) !important;
}

body .btn.btn-tall:not(.dropdown-toggle) {
  min-height: var(--btn-h-md) !important;
  height: auto !important;
}

body .btn.btn-font-sm:not(.dropdown-toggle) {
  font-size: calc(var(--btn-fs-md) * var(--dv-fs,1)) !important;
}

body .btn.btn-font-sm.btn-sm:not(.dropdown-toggle),
body .btn.btn-font-sm.btn-xs:not(.dropdown-toggle) {
  font-size: calc(var(--btn-fs-sm) * var(--dv-fs,1)) !important;
}

/* --- Larghezza piena --------------------------------------------- */
body .btn.btn-block:not(.dropdown-toggle) {
  display: flex;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Testo a capo: .text-wrap (Bootstrap) su un pulsante in un
   contenitore stretto, es. le card della lavagna del cruscotto --- */
body .btn.text-wrap:not(.dropdown-toggle) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  line-height: 1.25 !important;
  text-align: center;
}

/* --- Gruppi -------------------------------------------------------
   Dentro un btn-group i raggi interni vanno spenti o si vedono le
   gobbe fra un segmento e l'altro. Il margine orizzontale va a zero
   o i segmenti si staccano. */
body .btn-group > .btn:not(.dropdown-toggle),
body .input-group .btn:not(.dropdown-toggle) {
  margin: 0 !important;
}

body .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0 !important;
}

body .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body .btn-group > .btn:last-child:not(:first-child):not(.dropdown-toggle) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* --- Controllo segmentato (.dv-segmented) -------------------------
   Gruppo di 2-3 scelte mutuamente esclusive dove UNA e' sempre attiva:
   non sono azioni, sono uno stato. Sono la cosa che nei moduli veniva
   reinventata piu' spesso: tre copie, tutte diverse (officina/dashboard,
   marketing/annunci, recensioni). Dal 15/09/2026 restano solo
   .do-prod-toggle e il nome di sistema: annunci e' ritirato (404) e
   recensioni usa .draive-viewswitch, la forma di "scegli una voce fra
   poche" ormai usata ovunque.

   NB: .do-prod-toggle contiene <button> nudi, senza classe .btn — per
   questo la geometria va ridichiarata qui invece di arrivare dalla base
   (che di proposito non prende piu' ogni <button> del documento). */
body .dv-segmented {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e4e4e7;
  border-radius: var(--radius-btn);
  overflow: hidden;
}

body .dv-segmented > button,
body .dv-segmented > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: calc(var(--btn-h-md) - 2px) !important;
  padding: 0 var(--btn-px-md) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #52525b !important;
  font-size: calc(var(--btn-fs-md) * var(--dv-fs,1)) !important;
  font-weight: var(--fw-medium) !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  margin: 0 !important;
  transition: background-color var(--motion-base), color var(--motion-base);
}

body .dv-segmented > button + button,
body .dv-segmented > .btn + .btn {
  border-left: 1px solid #e4e4e7 !important;
}

body .dv-segmented > button:hover,
body .dv-segmented > .btn:hover {
  background: #fafafa !important;
  color: #111214 !important;
}

/* Attivo: lo stesso nero delle azioni principali. Un segmentato non ha
   bisogno di un colore proprio — deve solo dire quale delle scelte e'
   quella in corso. */
body .dv-segmented > button.is-active,
body .dv-segmented > .btn.active {
  background: #09090b !important;
  color: #fff !important;
}

body .dv-segmented > button.is-active i,
body .dv-segmented > .btn.active i {
  color: #fff !important;
}

/* Sotto i 768px i segmenti salgono a 40px: erano ~29px, sotto la soglia
   di un bersaglio toccabile. Prima lo faceva solo officina/dashboard,
   per se'. */
@media (max-width: 768px) {
  body .dv-segmented > button,
body .dv-segmented > .btn {
    min-height: calc(var(--btn-h-lg) - 2px) !important;
    padding: 0 var(--btn-px-lg) !important;
  }
}

/* --- Focus da tastiera -------------------------------------------
   :focus-visible, non :focus — l'anello deve comparire per chi naviga
   da tastiera e NON a ogni clic di mouse. Fino a oggi non compariva
   mai: un "outline:none !important" piu' su nel file lo spegneva, e
   spegneva anche quello scritto in draive.core.css.

   Si usa box-shadow e non outline perche' l'anello deve seguire il
   raggio di 10px; un outline resta rettangolare su alcuni motori. */
body .btn:focus,
body .kt-btn:focus,
body button:focus {
  outline: none !important;
  box-shadow: none !important;
}

body .btn:focus-visible,
body .kt-btn:focus-visible,
body button:focus-visible {
  outline: none !important;
  box-shadow: var(--btn-ring) !important;
}

/* --- Disabilitato -------------------------------------------------
   Leggibile ma chiaramente inerte. pointer-events:none impedisce
   anche l'hover, cosi' un disabilitato non "risponde" al passaggio. */
body .btn:disabled,
body .btn.disabled,
body .kt-btn:disabled,
body .kt-btn.disabled {
  opacity: var(--btn-disabled-opacity) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* --- Trigger bootstrap-select (.dropdown-toggle) ------------------
   Esclusi dalla geometria (misure proprie), ma il colore e il peso li
   allineiamo comunque: sono pulsanti a tutti gli effetti e prima
   pescavano da una regola staccata a meta' file che si era gia'
   disallineata dal resto (bordo #dcdcdc contro #e4e4e7). */
body .btn.dropdown-toggle,
body .btn.btn-light.dropdown-toggle,
body .btn.btn-default.dropdown-toggle {
  font-weight: var(--fw-medium);
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
}

body .btn.btn-light.dropdown-toggle,
body .btn.btn-default.dropdown-toggle,
body .btn.btn-secondary.dropdown-toggle {
  background: #fff;
  border: 1px solid #e4e4e7;
  color: #27272a;
}

body .btn.btn-light.dropdown-toggle:hover,
body .btn.btn-default.dropdown-toggle:hover,
body .btn.btn-secondary.dropdown-toggle:hover {
  background: #fafafa;
  border-color: #c9cdd6;
  color: #111214;
}

/* ============================================================
   Liste — azioni riga "⋯" più leggibili + icona "+" topbar
   (globale per tutte le pagine lista: utenti, aziende, import, ...)
   ============================================================ */

/* Il menu azioni "⋯" e' lo stesso controllo in 14 punti del prodotto
   (elenchi veicoli/utenti/aziende/opt/report/richieste/viaggi/import/
   supporto, annunci, scheda veicolo) e il markup e' sempre lo stesso:
   .btn.btn-sm.btn-clean|btn-ghost.btn-icon.btn-icon-md con dentro
   <i class="ki-outline ki-dots-horizontal">. Qui prende la sua misura,
   una volta per tutte.
   -----------------------------------------------------------------
   2026-08-10 — perche' era rimasto piccolo. La regola precedente
   diceva gia' 20px ma era scritta ".kt-datatable .btn.btn-icon i.ki-
   dots-horizontal" (0,4,1): perdeva contro "body .btn.btn-icon.btn-
   icon-md:not(.dropdown-toggle) i" (0,4,2) poche centinaia di righe
   piu' su, che riporta ogni icona di bottone a --btn-icon (16px).
   Era codice morto e non si vedeva leggendolo. Adesso il selettore
   pareggia quella specificita' (0,4,2) e sta DOPO, quindi vince —
   e non e' piu' legato a .kt-datatable, cosi' i "⋯" fuori tabella
   (scheda veicolo, annunci) hanno la stessa misura degli altri. */
body .btn.btn-icon:not(.dropdown-toggle) i.ki-dots-horizontal {
  font-size: calc(22px * var(--dv-fs,1));
  line-height: 1;
}

/* Intestazioni: etichetta e freccia di sort sulla STESSA riga. La freccia
   viene appesa dal plugin dentro lo <span> a larghezza fissa della colonna:
   nelle colonne strette (es. "Attivo") andava a capo sotto l'etichetta,
   disallineando la testata. */
.kt-datatable__head .kt-datatable__cell > span {
  white-space: nowrap;
}

/* Le azioni riga stavano a 42x42: era l'unico quadrato della
   piattaforma fuori dalla scala 28/32/40, e con "btn-sm" nel markup
   dichiarava 28 e ne misurava 42. Ora prende la misura di sistema dal
   blocco DRAIVE BUTTONS e questa regola non serve piu'. */

/* Icona del pulsante aggiungi/azione: 16px come l'icona di "Importa Dati".
   Centraggio GEOMETRICO: la <i> riempie il wrapper e centra il glifo via
   flex; letter-spacing/text-indent azzerati (uno spacing ereditato allunga
   l'advance del ::before e sposta l'ink a sinistra del centro).
   Generalizzata da "i.ki-plus" a qualunque icona (2026-07-23): il
   bottone Export CSV di report/ usa ki-folder-down e senza questa
   regola restava piccolo/non centrato — stesso trattamento per
   qualsiasi icona futura dentro questi due bottoni. */
.topbar-add-btn i,
.profilo-add-btn i {
  font-size: calc(16px * var(--dv-fs,1)) !important;
  line-height: 1 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
}

.topbar-add-btn i::before,
.profilo-add-btn i::before {
  display: block;
  line-height: 1;
  margin: 0;
}

/* Dropdown azioni riga (Disattiva / Modifica / Invia email...):
   icone leggibili in uno slot fisso, distanziate dal testo, voci più ariose. */
.dropdown-menu .kt-nav .kt-nav__link {
  display: flex;
  align-items: center;
  padding: 10px 18px;
}

.dropdown-menu .kt-nav .kt-nav__link .kt-nav__link-icon {
  flex: 0 0 28px;
  font-size: calc(17px * var(--dv-fs,1));
  line-height: 1;
  color: #7e8299;
  margin-right: 8px;
}

.dropdown-menu .kt-nav .kt-nav__link .kt-nav__link-text {
  flex: 1;
  white-space: nowrap;
}

/* ============================================================
   DataTable pager — nav pagine, selettore righe, dettaglio
   (globale per tutte le liste kt-datatable)
   ============================================================ */
.kt-datatable > .kt-datatable__pager {
  align-items: center;
  padding: 18px 4px 6px;
}

/* Nav pagine — KTUI Pagination, variante Icon (ktui.io/docs/pagination):
   pulsanti kt-btn-icon kt-btn-ghost 34px, radius 6, gap 4; hover e pagina
   attiva = accent #f4f4f5 con testo scuro; icone frecce muted #71717a.
   NB: stessa catena di selettori del bundle Metronic (che imposta il blu
   #125ef2 su active/hover): a parita' di specificita' vince questo file,
   caricato per ultimo (fino al 23/10/2026). */
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link {
  min-width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  color: #27272a;
  font-size: calc(13px * var(--dv-fs,1));
  font-weight: 500;
  box-shadow: none;
  transition: background .15s ease, color .15s ease;
}

.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link > i {
  font-size: calc(13px * var(--dv-fs,1));
  color: var(--ink-muted);
}

.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link:hover {
  background: #f4f4f5;
  color: #27272a;
  opacity: 1;
  box-shadow: none;
}

.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link:hover > i {
  color: var(--ink-muted);
}

/* Frecce: ghost trasparente a riposo (il bundle da' loro un fondo grigio),
   accent solo su hover — come i pulsanti numerici. */
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--first,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--prev,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--next,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--last {
  background: transparent;
}

.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--first:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--prev:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--next:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--last:hover {
  background: #f4f4f5;
  color: #27272a;
}

.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--active {
  background: #f4f4f5;
  color: #27272a;
  font-weight: 500;
}

.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--disabled,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--disabled:hover {
  background: transparent;
  opacity: .5;
  cursor: default;
}

/* Frecce pager e ordinamento colonne: glifi Keenicons OUTLINE al posto dei
   flaticon2 di default generati dalla libreria (scripts.bundle.js). Il remap
   avviene via content: cosi' vale per OGNI kt-datatable della piattaforma
   senza toccare le singole init. */
.kt-datatable .kt-datatable__pager-link > i[class^="flaticon2-"]:before,
.kt-datatable .kt-datatable__pager-link > i[class*=" flaticon2-"]:before,
.kt-datatable i.flaticon2-arrow-up:before,
.kt-datatable i.flaticon2-arrow-down:before {
  font-family: 'keenicons-outline' !important;
  font-style: normal;
}

/* ATTENZIONE codepoint: il font keenicons della piattaforma e' il build
   INCORPORATO in style.bundle.css (font in assets/css/font-icon/), NON
   quello di assets/vendors/keenicons (build diverso, codepoint diversi,
   caricato solo dove linkato esplicitamente). I content qui sotto vengono
   dalle regole .ki-X.ki-outline:before di style.bundle.css. */
.kt-datatable .kt-datatable__pager-link > i.flaticon2-back:before      { content: "\ea56"; } /* ki-left */
.kt-datatable .kt-datatable__pager-link > i.flaticon2-next:before      { content: "\eab3"; } /* ki-right */
.kt-datatable .kt-datatable__pager-link > i.flaticon2-fast-back:before { content: "\e9e0"; } /* ki-double-left */
.kt-datatable .kt-datatable__pager-link > i.flaticon2-fast-next:before { content: "\e9e2"; } /* ki-double-right */
.kt-datatable i.flaticon2-arrow-up:before   { content: "\eb24"; } /* ki-up */
.kt-datatable i.flaticon2-arrow-down:before { content: "\e9e5"; } /* ki-down */

/* ki-lock-2-open NON esiste nel build keenicons della piattaforma (il
   filter_toggle lo usa per lo stato "filtri sbloccati" -> icona vuota):
   fallback sul glifo di ki-lock-2 attenuato, cosi' lo stato resta leggibile. */
.ki-outline.ki-lock-2-open:before {
  content: "\ea5d";
  opacity: .45;
}

/* Selettore numero righe (bootstrap-select) + dettaglio "Visualizzi..." */
.kt-datatable__pager .kt-datatable__pager-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Trigger in stile KTUI Select base (ktui.io/docs/select), taglia sm 32px:
   bordo zinc #e4e4e7, radius 6, ombra sottile da input, testo scuro.
   !important sulle proprieta' dimensionali: il trigger e' un .btn.btn-light
   e la regola globale dei bottoni (min-height 52 / radius 14) lo sfigurava. */
/* La larghezza la decide il contenuto, non il data-width che KTDatatable
   scrive inline sul wrapper: con una misura fissa il numero e la freccia
   si contendono lo stesso spazio e vince chi arriva prima. */
.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select {
  width: auto !important;
}

/* La freccia rientra a 10px come il padding laterale: a 15px (il valore dei
   campi da 47px) su un controllo da 32 restava troppo staccata dal bordo e
   troppo attaccata alla cifra. */
.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select > .btn.dropdown-toggle::after {
  right: 10px !important;
}

.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select > .btn.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px !important;
  min-height: 32px !important;
  /* 28 a destra = 10 di rientro + 12 di freccia + 6 d'aria. Prima erano 10
     tondi e la cifra finiva incollata al chevron: misurato, fra "100" e la
     freccia restavano 0,3px. Il padding qui vince sul 40px della regola
     globale dei bootstrap-select (piu' specifica, stessa !important), ma
     riservava spazio per una freccia che non c'e' piu' a 15px. */
  padding: 0 28px 0 10px !important;
  /* 07/09/2026: erano 6px a mano, in mezzo ai pulsanti del pager che il
     token porta a 7. Un solo raggio per tutto cio' che si preme. */
  border-radius: var(--radius-btn) !important;
  background: #fff !important;
  border: 1px solid #e4e4e7 !important;
  color: #0a0a0b !important;
  font-size: calc(13px * var(--dv-fs,1));
  font-weight: 400;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

/* il testo del valore si dimensiona sul contenuto e resta centrato in
   verticale: il selectpicker lo mette position:absolute/top:0 con
   width:100% (numero schiacciato in alto), qui si riporta nel flusso flex. */
.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select > .btn.dropdown-toggle .filter-option,
.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select > .btn.dropdown-toggle .filter-option-inner,
.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select > .btn.dropdown-toggle .filter-option-inner-inner {
  position: static !important;
  display: flex !important;
  align-items: center;
  width: auto !important;
  height: 100% !important;
  padding: 0 !important;
  float: none !important;
  overflow: visible !important;
  line-height: 1;
}

.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select > .btn.dropdown-toggle:hover,
.kt-datatable > .kt-datatable__pager .kt-datatable__pager-info .bootstrap-select.show > .btn.dropdown-toggle {
  border-color: #a1a1aa !important;
  background: #fff !important;
}

.kt-datatable__pager .kt-datatable__pager-detail {
  color: #8a8f98;
  font-size: calc(12.5px * var(--dv-fs,1));
}

/* Menu del selettore righe: il selectpicker ha data-container="body", il
   menu vive in un wrapper .bs-container appeso al body. Stile KTUI Select
   base: radius 8, bordo zinc, ombra morbida, voce selezionata accent
   #f4f4f5 con testo scuro. */
.bs-container.bootstrap-select .dropdown-menu {
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  padding: 4px;
}

/* la ul annidata (div.dropdown-menu > ul.dropdown-menu.inner) non deve
   ereditare bordo/ombra/padding del contenitore */
.bs-container.bootstrap-select .dropdown-menu .dropdown-menu.inner {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.bs-container.bootstrap-select .dropdown-menu li > a {
  border-radius: 6px;
  padding: 6px 10px;
  font-size: calc(13px * var(--dv-fs,1));
  color: #27272a;
}

.bs-container.bootstrap-select .dropdown-menu li > a:hover {
  background: #f4f4f5;
  color: #27272a;
}

.bs-container.bootstrap-select .dropdown-menu li.selected > a,
.bs-container.bootstrap-select .dropdown-menu li.selected > a .text,
.bs-container.bootstrap-select .dropdown-menu .dropdown-item.active {
  background: #f4f4f5 !important;
  color: #27272a !important;
  font-weight: 500;
}

.bs-container.bootstrap-select .dropdown-menu li.selected > a .text {
  background: transparent !important;
}

/* ============================================================
   Liste — header sempre visibile
   Banda superiore opaca (#F6F7FB, lo stesso bg pagina) sotto la riga
   Filtro/titolo/+, e intestazioni di colonna sticky subito sotto:
   scorrendo, le righe passano sotto senza sporcare la testata.
   ============================================================ */
@media (min-width: 1025px) {
  body.kt-veicoli #kt_content::before,
  body.kt-lista-utenti #kt_content::before,
  body.kt-lista-aziende #kt_content::before,
  body.kt-lista-opt #kt_content::before,
  body.kt-lista-report #kt_content::before,
  body.kt-cruscotto #kt_content::before,
  body.kt-bdc #kt_content::before,
  body.kt-recensioni #kt_content::before,
  body.kt-lista-brand #kt_content::before,
  body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) #kt_content::before,
  body.kt-ubicazioni #kt_content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #F6F7FB;
    z-index: 1;
    pointer-events: none;
  }

  /* Il bundle da' al wrapper padding-top:53px, ma l'header fisso e' alto
     64px: a riposo tabella e filtri finivano 11px sotto la banda.

     2026-08-10 — l'elenco di classi pagina e' diventato un aggancio
     STRUTTURALE, come gia' fatto per il blocco "FILTRI LISTA: CAMPI
     COMUNI": la pagina si riconosce dalla colonna che ha, non da un nome
     scritto a mano. L'elenco era incompleto e niente lo segnalava —
     mancavano kt-lista-supporto, kt-academy e kt-lista-logistica, quindi
     su supporto, academy, viaggi e richieste il wrapper restava a 53px:
     i primi 11px della colonna filtri finivano SOTTO l'header e il piede
     "Cancella filtri" si fermava 11px sopra il fondo finestra. Lo stesso
     pannello in due posizioni diverse a seconda del modulo.
     :has() e' gia' usato in questo file (campi flottanti con select2
     multiplo). La specificita' e' (1,1,1) contro i (0,2,1) di prima:
     continua a battere ".kt-header--fixed .kt-wrapper" del bundle, che
     e' (0,2,0), perche' un ID conta prima di qualunque numero di classi. */
  body:has(#kt_inbox_aside) .kt-wrapper {
    padding-top: 64px;
  }

  /* L'aside dei filtri contiene Select2/label con z-index 1065/1066 che,
     senza stacking context proprio, passerebbero SOPRA la banda header
     (z-index 1) durante lo scroll. z-index:0 li confina: scorrendo, i
     filtri passano sotto l'header. I dropdown aperti non ne risentono
     (Select2 li appende a body, z-index 100000). */
  /* 2026-08-10 — anche qui via l'elenco di classi pagina: lo stacking
     context serve alla COLONNA, che si nomina da sola. Il
     "position: relative" e' caduto con l'elenco perche' era gia' codice
     morto: piu' avanti in questo stesso file la colonna e' dichiarata
     sticky con (0,3,0), che vince: sticky e' comunque posizionata,
     quindi lo z-index fa stacking context lo stesso. */
  .kt-inbox__aside {
    z-index: 0;
  }

  /* la <table> del datatable ha overflow:hidden dal bundle e bloccherebbe
     lo sticky delle intestazioni: nelle liste (layout non-scroll) e' sicuro
     renderla visibile */
  .kt-datatable > .kt-datatable__table {
    overflow: visible !important;
  }

  /* Sticky sul THEAD (il datatable Metronic rende table/thead display:block,
     quindi lo sticky sulle singole th non avrebbe spazio per agganciarsi). */
  .kt-datatable > .kt-datatable__table > .kt-datatable__head {
    position: sticky !important;   /* il bundle la forza a relative */
    top: 64px;
    z-index: 2;
    background: #F6F7FB;
  }
}

/* ============================================================
   Draive UI — LIGHTBOX DRAWER (authoritative)
   Tutti i moduli in lightbox si aprono come DRAWER ancorato a
   destra, a tutta altezza, con backdrop sfocato (variabili
   --lightbox-*). Riferimento: "Nuova auto" di Auto di Cortesia
   (planning-modal: inset 28px, radius 18, ombra 0 18px 60px).
   Copre: modal Bootstrap (prima centrati), kt-demo-panel
   (offcanvas: Scheda azienda, dettaglio utente/veicolo, profilo)
   e planning-modal. Gli swal (conferme) restano centrati: non
   sono moduli. Header e footer hanno la stessa formattazione
   ovunque. Caricato per ultimo fino al 23/10/2026: vinceva sulle regole sparse sopra.
   ============================================================ */

/* --- Bootstrap modal → drawer destro -------------------------------- */
body .modal {
  padding: 0 !important; /* vince anche sul padding-right inline di Bootstrap */
}

body .modal .modal-dialog,
body .modal.show .modal-dialog {
  position: fixed !important;
  top: 28px !important;
  right: 28px !important;
  bottom: 28px !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: min(560px, calc(100vw - 56px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: stretch !important;
  transform: translateX(calc(100% + 28px)) !important;
  transition: transform .25s ease !important;
}

body .modal.show .modal-dialog {
  transform: translateX(0) !important;
}

body .modal .modal-dialog.modal-lg { width: min(800px, calc(100vw - 56px)) !important; }
body .modal .modal-dialog.modal-xl { width: min(1100px, calc(100vw - 56px)) !important; }

body .modal .modal-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.22) !important;
  overflow: hidden;
}

/* molti modal wrappano head/body/foot in un <form> dentro .modal-content:
   anche il form deve essere colonna flex a tutta altezza, altrimenti il
   footer non resta ancorato in basso */
body .modal .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body .modal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Variante COMPATTA (micro-edit, 2026-07-06) ---------------------- */
/* I micro-edit a 1-2 campi (Cambia archivio, Neopatentati, Colore...)
   NON diventano drawer: restano centrati e alti quanto il contenuto.
   Stessa pelle (radius 18, ombra, header/footer unificati). Si attiva
   aggiungendo .modal-dialog-compact al .modal-dialog. Le regole stanno
   DOPO quelle drawer: a parita' di specificita' vincono per ordine. */
body .modal .modal-dialog.modal-dialog-compact,
body .modal.show .modal-dialog.modal-dialog-compact {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(520px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100vh - 56px);
  transform: translate(-50%, -50%) scale(.97) !important;
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease !important;
}
body .modal.show .modal-dialog.modal-dialog-compact {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1;
}
body .modal .modal-dialog.modal-dialog-compact .modal-content {
  height: auto;
  max-height: calc(100vh - 56px);
}
/* bootstrap .modal-dialog-centered ha un ::before alto ~100vh che
   stira il flex: senza questo il micro-edit tornava a tutta altezza */
body .modal .modal-dialog.modal-dialog-compact::before {
  display: none;
}

/* --- kt-demo-panel (offcanvas): stessa geometria del drawer --------- */
body .kt-demo-panel {
  top: 28px !important;
  bottom: 28px !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.22) !important;
}

body.kt-demo-panel--right .kt-demo-panel.kt-demo-panel--on {
  right: 28px !important;
}

/* --- Drawer CHIUSO: fuori viewport, invisibile, non interattivo ------ */
/* Il parcheggio del tema (left/right:-970px) e' tarato sulla larghezza
   originale di 950px. La scheda veicolo v2 allarga il pannello a
   calc(100% - 40px) (pages/showroom/css/custom.modulo.css): da chiuso
   sporgeva nel viewport per (larghezza - 970)px con z-index 3100 e
   pointer-events attivi, mangiando i click su cio' che stava sotto
   (es. il campo "Marca e modello" del filtro showroom). Da chiuso il
   drawer va parcheggiato oltre TUTTO il viewport e disattivato; la
   visibility scatta a fine slide (delay .3s) per non tagliare
   l'animazione di chiusura. */
body .kt-demo-panel:not(.kt-demo-panel--on) {
  visibility: hidden !important;
  pointer-events: none !important;
  transition: left .3s ease, right .3s ease, visibility 0s linear .3s !important;
}
body.kt-demo-panel--right .kt-demo-panel:not(.kt-demo-panel--on) {
  right: -100vw !important;
  left: auto !important;
}
body:not(.kt-demo-panel--right) .kt-demo-panel:not(.kt-demo-panel--on) {
  left: -100vw !important;
}
body .kt-demo-panel.kt-demo-panel--on {
  visibility: visible !important;
  transition: left .3s ease, right .3s ease !important;
}

/* --- ANATOMIA UNICA: testata, X, piede, pulsanti (14/09/2026) -------
   Ogni lightbox ha la stessa testata, la stessa X e lo stesso piede,
   qualunque markup lo costruisca. Riferimento: il modale «Nuova
   prenotazione» del planning auto di cortesia. Prima (misurato sul
   banco, 100 lightbox): cinque X diverse, 28 lightbox con le azioni nel
   corpo che scorrevano via, pulsanti a 28px o in maiuscolo nei piedi.

   Famiglie: .modal (Bootstrap), .kt-demo-panel (KTOffcanvas),
   .planning-modal, e .dv-lb__head / __title / __sub / __close / __nav /
   __foot per ogni lightbox scritto a mano. Chi ne fa uno nuovo mette
   queste classi e NON scrive CSS di testata, X e piede nel modulo.

   La X non dipende dal markup (&times;, <i>, <span>): spegne i figli e
   disegna la croce Keenicons con ::before. Le misure stanno solo nelle
   variabili; sotto i 768px cambiano in fondo al blocco LIGHTBOX DRAWER.
   display senza !important, come in DRAIVE BUTTONS: .hide() e hidden
   devono continuare a nascondere. */
:root {
  --lb-pad-x:       20px;
  --lb-head-pad-y:  18px;
  --lb-foot-pad-y:  14px;
  --lb-rule:        #eef0f6;
  --lb-close:       34px;   /* X e frecce di testata */
  --lb-close-glyph: 14px;
  --lb-close-hover: #f7f8fa;
  --lb-foot-gap:    12px;   /* + i 2px di margine dei bottoni = 16 */
}

/* --- Testata ---------------------------------------------------------- */
body :is(.modal .modal-header, .kt-demo-panel .kt-demo-panel__head,
         .planning-modal .planning-modal__head, .dv-lb__head) {
  display: flex;
  align-items: center !important;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: var(--lb-head-pad-y) var(--lb-pad-x) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lb-rule) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

/* il <div style="clear:both"> dei drawer a float: in una riga flex e' un
   elemento vuoto che prende un gap e scosta la X */
body .kt-demo-panel .kt-demo-panel__head > div[style*="clear"] {
  display: none !important;
}

body :is(.modal .modal-title, .kt-demo-panel .kt-demo-panel__title,
         .planning-modal .planning-modal__title, .dv-lb__title) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  font-size: calc(16px * var(--dv-fs,1)) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #111827 !important;
}

body :is(.modal .modal-title small, .kt-demo-panel .kt-demo-panel__title small,
         .kt-demo-panel .kt-demo-panel__subtitle,
         .planning-modal .planning-modal__subtitle, .dv-lb__sub) {
  display: block;
  font-size: calc(13px * var(--dv-fs,1)) !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  margin-top: 2px;
  line-height: 1.3;
}

/* --- X di chiusura e frecce di testata ------------------------------
   In alto a destra, a 18px dal bordo alto e 20 dal destro: il titolo su
   una riga si centra sulla X, la X (e il gruppo che la contiene) resta in
   alto anche con titolo e sottotitolo. Frecce ‹ › della scheda veicolo e
   «indietro» dei lightbox a passi (.dv-lb__nav): stessa pelle. */
body :is(.modal .modal-header .close, .kt-demo-panel .kt-demo-panel__close,
         .planning-modal .planning-modal__close, .dv-lb__close,
         .kt-demo-panel .kt-demo-panel__prev, .kt-demo-panel .kt-demo-panel__next,
         .dv-lb__nav) {
  -webkit-appearance: none;
  appearance: none;
  position: static !important;
  float: none !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  width: var(--lb-close) !important;
  min-width: var(--lb-close) !important;
  height: var(--lb-close) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--lb-rule) !important;
  border-radius: var(--radius-btn) !important;
  background: #fff !important;
  color: #111 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background-color var(--motion-base), border-color var(--motion-base);
}

body :is(.modal .modal-header .close, .kt-demo-panel .kt-demo-panel__close,
         .planning-modal .planning-modal__close, .dv-lb__close) {
  margin-left: auto !important;
  font-size: 0 !important;          /* spegne &times; e testo nudo */
  line-height: 0 !important;
}

body :is(.modal .modal-header .close, .kt-demo-panel .kt-demo-panel__close,
         .planning-modal .planning-modal__close, .dv-lb__close) > * {
  display: none !important;
}

body :is(.modal .modal-header .close, .kt-demo-panel .kt-demo-panel__close,
         .planning-modal .planning-modal__close, .dv-lb__close)::before {
  content: "\e9b5" !important;      /* ki-cross, keenicons-outline */
  display: block !important;
  font-family: "keenicons-outline" !important;
  font-size: calc(var(--lb-close-glyph) * var(--dv-fs,1)) !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  color: currentColor !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body :is(.kt-demo-panel .kt-demo-panel__prev, .kt-demo-panel .kt-demo-panel__next,
         .dv-lb__nav) i {
  font-size: calc(var(--lb-close-glyph) * var(--dv-fs,1)) !important;
  color: #111 !important;
}

body :is(.modal .modal-header .close, .kt-demo-panel .kt-demo-panel__close,
         .planning-modal .planning-modal__close, .dv-lb__close,
         .kt-demo-panel .kt-demo-panel__prev, .kt-demo-panel .kt-demo-panel__next,
         .dv-lb__nav):hover {
  background: var(--lb-close-hover) !important;
  border-color: var(--lb-rule) !important;
  color: #111 !important;
  box-shadow: none !important;
}

/* l'anello di DRAIVE BUTTONS prende solo .btn e <button>: qui anche le <a> */
body :is(.modal .modal-header .close, .kt-demo-panel .kt-demo-panel__close,
         .planning-modal .planning-modal__close, .dv-lb__close,
         .kt-demo-panel .kt-demo-panel__prev, .kt-demo-panel .kt-demo-panel__next,
         .dv-lb__nav):focus-visible {
  outline: none !important;
  box-shadow: var(--btn-ring) !important;
}

body .kt-demo-panel .kt-demo-panel__counter {
  align-self: flex-start;
  min-height: var(--lb-close);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* il gruppo che contiene la X (badge + X) sale con lei; a parte, perche'
   un :has() non capito non invalidi le regole qui sopra */
body :is(.kt-demo-panel .kt-demo-panel__head, .dv-lb__head) > :has(.kt-demo-panel__close, .dv-lb__close) {
  align-self: flex-start;
  min-height: var(--lb-close);
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* --- Piede: pulsanti in basso a destra, sempre in vista --------------
   Sta FUORI dal corpo che scorre (pannello = testata / corpo flex:1 con
   overflow / piede). Un testo nel piede prende la sinistra. */
body :is(.modal .modal-footer, .planning-modal .planning-modal__foot, .dv-lb__foot) {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--lb-foot-gap) !important;
  margin: 0 !important;
  /* in fondo anche il margine della home-indicator iOS: 0 dove non c'e' */
  padding: var(--lb-foot-pad-y) var(--lb-pad-x) calc(var(--lb-foot-pad-y) + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  border-top: 1px solid var(--lb-rule) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body :is(.dv-lb__foot, .dv-lb__head, .dv-lb__nav)[hidden] {
  display: none !important;
}

/* .kt-portlet__foot c'e' anche DENTRO il corpo dei drawer (Prenota e
   Vincola della scheda veicolo): solo la pelle, la struttura resta sua */
body .kt-demo-panel .kt-portlet__foot {
  padding: var(--lb-foot-pad-y) var(--lb-pad-x) !important;
  border-top: 1px solid var(--lb-rule) !important;
  background: #fff;
}

body :is(.modal .modal-footer, .planning-modal .planning-modal__foot, .dv-lb__foot)
  > :not(.btn, .kt-btn, button, .draive-actions, .btn-group, .dropdown) {
  margin-right: auto !important;
}

body :is(.modal .modal-footer, .planning-modal .planning-modal__foot,
         .kt-demo-panel .kt-portlet__foot, .dv-lb__foot) .draive-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: var(--lb-foot-gap) !important;
  width: auto;
  margin: 0 !important;
}

/* Pulsanti del piede: una geometria sola, la md di DRAIVE BUTTONS. Si
   spengono btn-sm/lg, btn-tall/wide, kt-font-bold, kt-font-transform-u,
   i min-width a mano e mr-auto / kt-mr-10 che spingevano a sinistra. */
body :is(.modal .modal-footer, .planning-modal .planning-modal__foot,
         .kt-demo-panel .kt-portlet__foot, .dv-lb__foot) :is(.btn, .kt-btn):not(.dropdown-toggle) {
  flex: 0 0 auto !important;
  min-height: var(--btn-h-md) !important;
  height: var(--btn-h-md) !important;
  padding: 0 var(--btn-px-md) !important;
  margin: 0 2px !important;
  border-radius: var(--radius-btn) !important;
  font-size: calc(var(--btn-fs-md) * var(--dv-fs,1)) !important;
  font-weight: var(--fw-medium) !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

body :is(.modal .modal-footer, .planning-modal .planning-modal__foot,
         .kt-demo-panel .kt-portlet__foot, .dv-lb__foot) :is(.btn, .kt-btn):not(.dropdown-toggle, .btn-icon, .kt-btn-icon) {
  width: auto !important;
  min-width: 0 !important;
}

body :is(.modal .modal-footer, .planning-modal .planning-modal__foot,
         .kt-demo-panel .kt-portlet__foot, .dv-lb__foot) .btn:not(.dropdown-toggle) i {
  font-size: calc(var(--btn-icon) * var(--dv-fs,1)) !important;
}

body :is(.modal .modal-footer, .dv-lb__foot) .btn-group > .btn {
  margin: 0 !important;
}

/* --- Wizard dentro i drawer (es. Inserimento nuovo utente) ----------- */
/* La nav del wizard e' lo stepper KTUI (assets/css/pages/wizard/
   wizard-3.css); i bottoni azione sono inline-flex da li', quindi
   centrati senza hack. */

/* La riga azioni del wizard diventa il footer unificato del lightbox:
   riga bianca con bordo superiore, ancorata in basso durante lo scroll.
   Padding orizzontale 20px (2026-07-23): allineato all'inset reale del
   footer di "Modifica profilo utente" (.kt-portlet__foot, 14px 20px) —
   prima era "14px 0" e i pulsanti del wizard toccavano i bordi del
   drawer invece di starne staccati come Annulla/Salva. */
body .kt-demo-panel .kt-wizard-v3 .kt-form .kt-form__actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
}
/* pelle, padding e pulsanti: e' un .dv-lb__foot (14/09/2026) */

/* --- Mobile: drawer a tutto schermo ---------------------------------- */
@media (max-width: 768px) {
  body .modal .modal-dialog,
  body .modal.show .modal-dialog {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    transform: translateX(100%) !important;
  }
  body .modal.show .modal-dialog { transform: translateX(0) !important; }
  body .modal .modal-content { border-radius: 0 !important; }
  body .kt-demo-panel {
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
  }
  body.kt-demo-panel--right .kt-demo-panel.kt-demo-panel--on { right: 0 !important; }
  body .planning-modal-backdrop { padding: 0 !important; }
  body .planning-modal { border-radius: 0 !important; }
  /* testate e piedi piu' stretti, X e frecce a bersaglio da dito: le
     misure cambiano solo qui, le regole restano quelle dell'anatomia */
  :root {
    --lb-pad-x:      16px;
    --lb-head-pad-y: 14px;
    --lb-foot-pad-y: 12px;
    --lb-close:      40px;
  }
}

/* ============================================================
   AVATAR WIDGET (upload avatar/logo nei form) — BLOCCO AUTOREVOLE
   Uniforma tutti i moduli (Profilo, Inserimento utente, Scheda
   azienda, Inserimento azienda) alla grafica del Profilo personale:
   - riquadro 80x80 con angoli arrotondati (1rem), niente cerchio;
   - stato vuoto: badge iniziali scuro/verde (kt-badge--username);
   - matita in alto a destra; "x" in basso a sinistra, visibile
     SOLO quando c'e' un'immagine caricata (.kt-avatar--changed).
   Qualsiasi override precedente e' superato da questo blocco.
   ============================================================ */

/* Riquadro immagine: stessa geometria del badge iniziali */
body .kt-avatar.kt-avatar--outline .kt-avatar__holder {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
}

/* Badge iniziali (stato senza immagine) — come nel Profilo personale.
   font-size esplicito: .kt-badge--xxl non esiste nel tema e senza questo
   il testo eredita la dimensione del contesto (nel wizard usciva minuscolo) */
body .kt-avatar.kt-avatar--outline span.kt-badge.kt-badge--username {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 1rem;
  font-size: calc(28px * var(--dv-fs,1));
  font-weight: 600;
}

/* Matita (upload): come nella simulazione NON c'e' nessun chip bianco —
   e' la sola icona KeenIcons Outline (ki-notepad-edit) disegnata in
   BIANCO direttamente sul riquadro scuro, nell'angolo in alto a destra.
   Il leggero drop-shadow la tiene leggibile anche sopra una foto. */
body .kt-avatar .kt-avatar__upload {
  top: 5px;
  right: 5px;
  bottom: auto;
  left: auto;
  width: 26px;
  height: 26px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  z-index: 2;
}

body .kt-avatar .kt-avatar__upload i {
  color: #fff;
  font-size: calc(18px * var(--dv-fs,1));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

body .kt-avatar .kt-avatar__cancel i {
  color: #111827;
  font-size: calc(12px * var(--dv-fs,1));
}

body .kt-avatar .kt-avatar__upload:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

body .kt-avatar .kt-avatar__upload:hover i {
  color: #0ABB87;
}

/* "x" (rimuovi): in basso a sinistra, nascosta finche' non c'e'
   un'immagine; i moduli JS attivano .kt-avatar--changed al caricamento */
body .kt-avatar .kt-avatar__cancel {
  top: auto;
  right: auto;
  bottom: -4px;
  left: -4px;
  z-index: 2;
  display: none;
}

body .kt-avatar.kt-avatar--changed .kt-avatar__cancel {
  display: flex;
}

/* ============================================================
   ANGOLI CONTENT vs SIDEBAR — SUPERSEDED (2026-07-02)
   Gli pseudo-elementi che disegnavano gli angoli neri del content
   verso la sidebar full-bleed non servono piu': la sidebar ora e'
   una card flottante (inset + radius) sul bg grigio della pagina
   — vedi blocco "SIDEBAR FLOTTANTE" piu' sotto.
   ============================================================ */
.kt-wrapper::before,
.kt-wrapper::after {
  display: none;
}

/* ============================================================
   SIDEBAR FLOTTANTE + FILTRI BIANCHI + HEADER STICKY — BLOCCO AUTOREVOLE
   Richieste UX (2026-07-02):
   1) la sidebar menu diventa una card flottante: staccata dai bordi
      finestra (--aside-inset), angoli stondati, padding interno;
   2) il pannello filtri delle liste (kt-inbox__aside) e' una card
      BIANCA sul content grigio (#F6F7FB del body);
   3) la riga header delle liste (Filtro / titolo / conteggio) resta
      sempre visibile allo scroll (sticky dentro la banda opaca del
      blocco "Liste — header sempre visibile").
   Solo desktop: su mobile la sidebar e' un offcanvas.
   ============================================================ */
/* Il punto 1) di questo blocco — la card flottante della sidebar —
   e' stato spostato in assets/css/draive.sidebar.css (2026-08-08),
   insieme al rientro di .kt-wrapper che ne discende. Con esso se ne
   sono andati #kt_aside_menu_wrapper e la correzione su
   "#kt_aside_menu > .ps__rail-y": Perfect Scrollbar non e' piu'
   attaccato al menu (data-ktmenu-scroll="0"), lo scorrimento e' CSS e
   la sua barra non si vede. Anche --aside-inset e --aside-radius se ne
   sono andati: erano ridichiarati qui identici a draive.tokens.css.
   Restano qui sotto i punti 2) e 3), che non riguardano la colonna. */

/* --- 2) pannello filtri bianco sulle liste ---------------------- */
/* vince sul reset ".kt-lista-X .kt-portlet {background:none}" per
   specificita' e posizione; il padding va in !important per battere
   il legacy "#kt_inbox_aside { padding:60px 0 0 }" (specificita' ID)
   che serviva quando l'aside era trasparente e lasciava un buco
   bianco in cima alla card. I campi draive-floating (bg #f2f2f2)
   restano leggibili sul bianco come nei form dei drawer.
   NB: niente align-self:flex-start — la card e' una COLONNA a tutta
   altezza (stretch del kt-grid, come la tabella accanto): i campi e
   il reset restano in alto, il bianco scende fino a fine contenuto. */
.kt-inbox .kt-inbox__aside.kt-portlet {
  box-shadow: var(--shadow-card);
  padding: 18px 16px 6px 2px!important;
}

.kt-inbox .kt-inbox__aside.kt-portlet .kt-inbox__nav {
  margin-top: 0 !important;
}

/* --- 3) header lista sempre visibile ----------------------------- */
/* Gia' garantito: "#kt_subheader { position:fixed; top:0 }" (sezione
   layout liste) tiene la riga Filtro/titolo ferma nella banda 64px, e
   il blocco "Liste — header sempre visibile" copre lo scroll con la
   banda opaca + thead sticky. Nessuna regola aggiuntiva necessaria. */

/* ============================================================
   Draive UI — CANVAS BLU + SHEET LISTA (authoritative, 2026-07-03)
   Riferimento: screenshot Lista aziende. Sulle liste desktop il
   body e' il blu brand (#135CE9) e la colonna della lista e' uno
   "sheet" #F6F7FB a tutta altezza: sale sotto la riga Filtro/titolo
   fino al bordo alto della finestra e tocca i bordi destro e basso;
   angoli stondati 16px solo sul lato sinistro. Il pannello filtri
   perde la card bianca sul desktop (campi grigi e reset nero
   flottano sul blu; su mobile l'offcanvas resta bianco — regola
   base nel blocco qui sopra). Righe, testata colonne e pager
   restano invariati: vivono sullo sheet, che ha lo stesso #F6F7FB
   che prima era il bg pagina. La banda opaca del blocco "Liste —
   header sempre visibile" coprirebbe lo sheet: spenta su queste
   pagine; le intestazioni sticky passano a top:0 (il loro bg
   #F6F7FB e' lo stesso dello sheet e maschera le righe in scroll).
   ============================================================ */
@media (min-width: 1025px) {
  /* canvas pagina: "html body" (0,1,2) per battere i
     "body.kt-X { background:#F6F7FB !important }" (0,1,1) dei
     custom.modulo.css, caricati DOPO questo file */
  /* LOGISTICA E' ARRUOLATA CON :has(#kt_inbox_aside), NON A CLASSE NUDA
     (2026-08-12). Le sei pagine di pages/logistica condividono un'unica
     classe kt-lista-logistica, ma solo richieste e viaggi sono liste: le
     altre quattro sono la board del planning, le card della dashboard, la
     vista js dell'autista e la nav verticale delle anagrafiche. A classe
     nuda questa regola (0,1,2) batterebbe il
     "body.kt-lista-logistica{background:#F6F7FB!important}" (0,1,1) dei
     loro custom.modulo.css e sbiancherebbe quattro pagine che non sono
     sheet. Il filtro sul pannello e' anche la condizione giusta nel
     merito: il trattamento canvas esiste per le liste con colonna filtri.
     Stessa forma in tutti i gruppi che seguono. */
  html body.kt-veicoli,
  html body.kt-lista-utenti,
  html body.kt-lista-aziende,
  html body.kt-lista-opt,
  html body.kt-lista-report,
  html body.kt-cruscotto,
  html body.kt-bdc,
  html body.kt-recensioni,
  html body.kt-lista-brand,
  html body.kt-ubicazioni,
  /* --- il default, invece dell'elenco a mano (2026-09-04) ------------
     Gli elenchi di classi body qui sopra sono nati uno alla volta e ogni
     modulo nuovo andava aggiunto a mano a tutti: chi se ne dimenticava si
     ritrovava la pagina col fondo grigio, il footer che scorreva e la
     colonna filtri senza il bianco. Erano gia' rimasti fuori supporto,
     bacheca, academy, portali e — l'ultimo — politiche.

     Il criterio vero non e' «quale modulo e'», e' «questa pagina ha una
     colonna filtri»: il selettore strutturale lo dice da solo, e i moduli
     nuovi non devono piu' registrarsi da nessuna parte. Gli elenchi
     restano perche' coprono anche pagine SENZA aside (kt-lista-brand): il
     generico si AGGIUNGE, non sostituisce.

     Due esclusioni, entrambe con un trattamento proprio piu' sotto:
     lo showroom (kt-veicoli, canvas blu + sheet) e il profilo
     (kt-profilo, blocco dedicato). Il selettore :has() e' gia' in uso in
     questi stessi elenchi per kt-lista-logistica. */
  html body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo),
  html body.kt-lista-logistica:has(#kt_inbox_aside) {
    background: #fff !important;
  }

  body.kt-veicoli #kt_content::before,
  body.kt-lista-utenti #kt_content::before,
  body.kt-lista-aziende #kt_content::before,
  body.kt-lista-opt #kt_content::before,
  body.kt-lista-report #kt_content::before,
  body.kt-cruscotto #kt_content::before,
  body.kt-bdc #kt_content::before,
  body.kt-recensioni #kt_content::before,
  body.kt-lista-brand #kt_content::before,
  body.kt-ubicazioni #kt_content::before,
  body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) #kt_content::before,
  body.kt-lista-logistica:has(#kt_inbox_aside) #kt_content::before {
    display: none;
  }

  /* il .kt-container del contenuto ha un #F6F7FB proprio che
     coprirebbe il blu nella colonna filtri: trasparente qui, il
     grigio lo porta lo sheet della lista */
  body.kt-veicoli #kt_content .kt-container,
  body.kt-lista-utenti #kt_content .kt-container,
  body.kt-lista-aziende #kt_content .kt-container,
  body.kt-lista-opt #kt_content .kt-container,
  body.kt-lista-report #kt_content .kt-container,
  body.kt-cruscotto #kt_content .kt-container,
  body.kt-bdc #kt_content .kt-container,
  body.kt-recensioni #kt_content .kt-container,
  body.kt-lista-brand #kt_content .kt-container,
  body.kt-ubicazioni #kt_content .kt-container,
  body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) #kt_content .kt-container,
  body.kt-lista-logistica:has(#kt_inbox_aside) #kt_content .kt-container {
    background: transparent;
  }

  /* il padding-bottom 25px di kt-content allungherebbe la pagina
     oltre lo sheet 100vh: scroll fantasma con l'angolo mai a fondo */
  body.kt-veicoli #kt_content,
  body.kt-lista-utenti #kt_content,
  body.kt-lista-aziende #kt_content,
  body.kt-lista-opt #kt_content,
  body.kt-lista-report #kt_content,
  body.kt-cruscotto #kt_content,
  body.kt-bdc #kt_content,
  body.kt-recensioni #kt_content,
  body.kt-lista-brand #kt_content,
  body.kt-ubicazioni #kt_content,
  body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) #kt_content,
  body.kt-lista-logistica:has(#kt_inbox_aside) #kt_content {
    padding-bottom: 0;
  }

  /* Testata colonne sticky a top:0 SOLO sulle liste a scroll-documento
     (aziende/utenti/opt/ubicazioni). NIENTE showroom (kt-veicoli): il suo
     datatable e' in scroll:true (testata interna gia' posizionata da
     Metronic) con SOPRA la barra a tab fissa (Km0/Usato...) — forzarla a
     top:0 la nasconderebbe sotto quella barra. Il border-top-left-radius
     allinea la testata all'angolo stondato della cornice quando e'
     incollata in cima (cosi' il notch blu resta visibile). */
  body.kt-lista-utenti .kt-datatable > .kt-datatable__table > .kt-datatable__head,
  body.kt-lista-aziende .kt-datatable > .kt-datatable__table > .kt-datatable__head,
  body.kt-lista-opt .kt-datatable > .kt-datatable__table > .kt-datatable__head,
  body.kt-lista-report .kt-datatable > .kt-datatable__table > .kt-datatable__head,
  body.kt-cruscotto .kt-datatable > .kt-datatable__table > .kt-datatable__head,
  body.kt-ubicazioni .kt-datatable > .kt-datatable__table > .kt-datatable__head,
  /* richieste e viaggi stanno con questo gruppo e non con showroom: i loro
     datatable sono in layout.scroll:false, cioe' scorrono col documento
     come aziende, e sopra non hanno nessuna barra a tab da cui nascondersi. */
  body.kt-lista-logistica .kt-datatable > .kt-datatable__table > .kt-datatable__head {
    top: 0;
    border-top-left-radius: 16px;
  }

  /* LOGISTICA — riga del titolo come Cruscotto e Dashboard BDC (26/10/2026).
     La banda del titolo e' larga 300px per regola globale: col navigatore
     di periodo (Planning, Viaggi) andava a capo sopra la colonna filtri.
     Qui si dimensiona sul contenuto e, a colonna aperta, il titolo ne
     occupa tutta la larghezza: conteggio e navigatore partono sul grigio
     dello sheet, a filo delle tessere (rientro 9px come la tabella). */
  body.kt-lista-logistica:has(#kt_inbox_aside) #kt_subheader {
    width: auto;
    max-width: calc(100vw - var(--aside-w, 280px) - 40px);
    padding-right: 24px;
  }
  body.kt-lista-logistica:has(#kt_inbox_aside) #kt_subheader .kt-subheader__main { flex-wrap: nowrap; }
  body.kt-lista-logistica:has(#kt_inbox_aside) #kt_subheader .kt-subheader__title,
  body.kt-lista-logistica:has(#kt_inbox_aside) #kt_subheader .kt-subheader__desc { white-space: nowrap; }
  body.kt-lista-logistica:not(.kt-inbox-aside--hidden):has(#kt_inbox_aside) #kt_subheader .kt-subheader__title {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: calc(var(--filter-col-w, 275px) + 9px);
  }
  body.kt-lista-logistica:not(.kt-inbox-aside--hidden):has(#kt_inbox_aside) #kt_subheader .kt-subheader__separator { display: none; }

  /* la prima intestazione VISIBILE stacca dal bordo stondato dello
     sheet. Il padding storico (32px sul :first-child) finisce sul th
     nascosto della colonna id "#": qui si pada il th successivo.
     Solo per le liste con prima colonna nascosta (aziende/utenti/opt). */
  body.kt-lista-utenti .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child + .kt-datatable__cell,
  body.kt-lista-aziende .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child + .kt-datatable__cell,
  body.kt-lista-opt .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child + .kt-datatable__cell,
  body.kt-cruscotto .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child + .kt-datatable__cell,
  body.kt-lista-report .kt-datatable__head .kt-datatable__row > .kt-datatable__cell:first-child + .kt-datatable__cell {
    padding-left: 20px;
  }

  /* sheet: margine negativo sopra (la riga Filtro/titolo e' fixed e
     il wrapper ha padding-top 64px) ripagato dal padding interno,
     cosi' testata e righe non si spostano; il flex stretch del
     kt-inbox assorbe i 64px extra in altezza. A destra e in basso
     il container e' gia' flush coi bordi finestra. Il min-height
     100vh garantisce che con poche righe l'angolo stondato in basso
     arrivi comunque a fondo schermo (parte da y=0 per via del
     margine negativo). */
  /* Lo sheet grigio NON e' dipinto sull'elemento che scorre col documento
     (i suoi angoli scorrevano via): grigio + angoli stondati stanno su uno
     pseudo-elemento STICKY, incollato al viewport mentre le righe scorrono
     sopra. Sticky (non fixed) per ereditare il bordo sinistro dinamico dello
     sheet (aside filtri content-driven, diverso per pagina). La lista resta
     overflow:visible → i dropdown azioni non si clippano. Angoli SOLO
     alto-sx + basso-sx (BR a filo del bordo destro/basso del monitor),
     sempre visibili con pochi contenuti E in scroll. */
  .kt-inbox .kt-inbox__list {
    background: transparent;
    margin-top: -64px;
    padding-top: 64px;
    min-height: 100vh;
    position: relative;
    z-index: 0;            /* stacking context: confina lo pseudo z-index:-1 */
  }
  .kt-inbox .kt-inbox__list::before {
    content: '';
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;         /* cornice alta quanto il monitor */
    /* margini che si annullano nel flow (net 0): la cornice copre
       y=0..100vh senza spostare la tabella, che resta a 64px dal top */
    margin-top: -64px;
    margin-bottom: calc(-100vh + 64px);
    background: #F6F7FB;
    border-radius: 16px 0 0 16px;  /* alto-sx + basso-sx; basso-dx a filo */
    z-index: -1;
    pointer-events: none;
  }

  /* filtri sul blu: niente card bianca sul desktop. Colonna FISSA
     durante lo scroll della lista (sticky sotto la riga Filtro/
     titolo); se il pannello e' piu' alto dello schermo non si puo'
     inchiodare tutto: scorre al proprio interno (overflow). Lo
     sticky richiede align-self flex-start (un item in stretch non
     ha spazio in cui "aderire"). */
  /* 2026-08-10 — modello UNICO per la colonna filtri di TUTTI i moduli,
     preso dallo showroom, che era l'unico ad averlo giusto.

     Tre cose, e sono distinte:

     1) la COLONNA sta ferma mentre la lista scorre (sticky, gia' qui);
     2) i PULSANTI in fondo (Cancella filtri, Azzera / Salva ricerca) sono
        sempre in vista. Questo prima non valeva: la colonna era tutta un
        unico scroller (max-height + overflow-y:auto) e i pulsanti, che nel
        markup sono l'ultimo figlio, scorrevano via col resto.
     3) LARGHEZZA e RIENTRI hanno una sorgente sola (--filter-col-w,
        --filter-gutter in draive.tokens.css) e valgono anche per la card
        a scomparsa: prima la colonna era 275px e la sua anteprima 300,
        e il contenuto stava 2px dal bordo sinistro e 16 da quello destro.

     Da qui "height" e non "max-height": la colonna prende sempre tutta
     l'altezza utile, cosi' il piede sta a fondo finestra anche quando i
     filtri sono pochi (con la sola altezza massima un pannello corto lo
     faceva risalire a meta' schermo). La colonna diventa un flex verticale
     che NON scorre; a scorrere e' solo .kt-inbox__nav, e tutto cio' che le
     sta dopo resta inchiodato. Il markup e' gia' questo dappertutto:
       #kt_inbox_aside > .kt-inbox__nav (.filter-list / .sr-filter)
                       > .filter-foot > .filter-foot__row > i pulsanti
     Lo showroom interpone un "pane" fra i due (le tab Tutti/Salvati/
     Storia): per questo lo scroller si prende come DISCENDENTE e non
     come figlio — il resto della struttura e' identico. */
  .kt-inbox .kt-inbox__aside.kt-portlet {
    background: transparent;
    box-shadow: none;
    position: sticky;
    top: 64px;
    align-self: flex-start;
    width: var(--filter-col-w);
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    /* PADDING ORIZZONTALE ZERO, uguale sui due lati. Il rientro del
       contenuto lo portano i figli (--filter-gutter): il padding di un
       contenitore che scorre sta DENTRO la sua barra, quindi cosi' la
       barra si disegna sul bordo della colonna invece che 16px dentro
       il pannello, dove sembrava sospesa in mezzo al bianco.
       !important per battere il legacy "#kt_inbox_aside{padding:60px 0 0}"
       (specificita' ID). */
    padding: 12px 0 4px !important;
    /* la colonna non scorre piu': lo scroller e' il figlio, qui sotto.
       Non e' l'overflow:hidden "che nasconde la barra e lascia il
       contenuto raggiungibile col Tab": il contenuto sta dentro un
       elemento che scorre davvero, quindi il focus lo porta in vista. */
    overflow: hidden;
    /* "clip" invece di "hidden": hidden CREA comunque un contenitore
       scrollabile, solo senza barra. Basta che qualcosa al suo interno
       prenda il focus fuori campo (una checkbox nascosta dietro una
       label, un campo di un pane non attivo) e il browser lo scrolla per
       mostrarlo: la testa del pannello sparisce in alto e non c'e' barra
       per tornare su. "clip" non e' scrollabile per definizione, quindi
       il caso non esiste piu'. Dichiarato DOPO "hidden": i browser che
       non conoscono clip (Safari <16) tengono il comportamento vecchio. */
    overflow: clip;
  }

  /* Il corpo dei filtri: e' lui a scorrere. min-height:0 e' obbligatorio —
     senza, un figlio flex non scende sotto la propria altezza di contenuto
     e l'overflow non si attiva mai (la colonna sborderebbe e basta). */
  .kt-inbox .kt-inbox__aside.kt-portlet .kt-inbox__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* niente scroll orizzontale: con overflow-y:auto l'asse x passa da
       visible ad auto, e bastano i ~4px di sbordo dei campi per far
       comparire lo scorrimento laterale al passaggio del mouse */
    overflow-x: hidden;
    /* i rientri tolti alla colonna tornano qui, uguali a destra e a
       sinistra: stanno dentro la barra, quindi il contenuto non si
       sposta di un pixel e la barra resta incollata al bordo.
       2026-08-10: portati a 2px per incolonnare i campi con "Cancella
       filtri". 2026-08-11: scelta rientrata, decisione esplicita — si
       torna al token (16px). A 2px il riquadro bordato "Seleziona veicolo"
       stava a filo del pannello e leggeva come un difetto, e le schede
       Salvati/Storia, rimaste a 16px, davano allo stesso pannello due
       rientri diversi. I pulsanti d'azione restano sulla LORO verticale
       (--filter-btn-gutter, 2px): e' documentato nei token che non seguono
       il rientro dei campi ma il bottone Filtro della testata.
       2026-08-11 (ter) — il lato SINISTRO scende a 5px con un token
       dedicato (--filter-gutter-left): avvicina campi e tab alla
       verticale dei pulsanti azione. Il destro resta al token pieno. */
    padding-left: var(--filter-gutter-left);
    padding-right: var(--filter-gutter);
    /* NIENTE scrollbar-gutter qui. Provato e ritirato l'11/08/2026.

       `stable both-edges` prenota la fascia della barra su ENTRAMBI i lati.
       Rende simmetrico il pannello dentro un browser, ma sposta a destra il
       bordo SINISTRO del contenuto di quanto misura la barra — e la barra
       misura zero dove e' a scomparsa (Chrome su macOS) e ~13px dove e'
       classica (Firefox con "Mostra sempre le barre di scorrimento").
       Risultato: i due browser, che prima avevano lo stesso rientro a
       sinistra, si sono allontanati proprio li'. Il contrario di cio' che
       serviva.
    
       Senza la dichiarazione la barra resta dove sta di natura, nel padding
       box a destra: il rientro SINISTRO e' 2px per tutti, sempre. Quello
       destro varia con la barra, ed e' il lato dove una barra e' attesa. */
    /* 2026-08-11 (bis) — la barra non ha piu' una corsia: scrollbar-width:
       none. Richiesta esplicita: i controlli del pannello devono avere la
       STESSA geometria su Chrome e Firefox, e l'unico assetto che pareggia
       una barra overlay (Chrome macOS, 0px) con una classica (Firefox,
       ~11px DENTRO il padding destro) e' nessuna barra: quegli 11px
       restringevano ogni campo del pannello in un browser si' e
       nell'altro no. Lo scorrimento resta (rotella, trackpad, tastiera);
       il pattern barra-nascosta e' gia' in uso in sette punti della
       piattaforma. "none" qui batte il globale "* { scrollbar-width:
       thin }" del blocco barre (specificita' zero contro selettore
       composto); la riserva Safari <=18.1 e' la regola ::-webkit-scrollbar
       qui sotto, come da convenzione del blocco barre. */
    scrollbar-width: none;
  }

  /* Riserva per Safari <=18.1, che non conosce scrollbar-width: stessa
     scelta della regola qui sopra (barra nascosta, geometria identica). */
  .kt-inbox .kt-inbox__aside.kt-portlet .kt-inbox__nav::-webkit-scrollbar {
    display: none;
  }

  /* Tutto cio' che segue il corpo (i pulsanti) non si comprime e non
     scorre. Il selettore e' strutturale di proposito: serviva perche' i
     moduli chiamavano quel pulsante in modi diversi (.filter-reset-btn,
     .sr-filter-foot, button[name=resetFilters] nudo). Dal 2026-08-10 la
     barra si chiama .filter-foot dappertutto, ma il selettore resta
     strutturale: e' cio' che regge anche il modulo che verra'.
     MARGINE e non padding per il rientro: la barra azioni dello showroom
     ha un bordo superiore e un fondo suoi, e col padding la riga di
     separazione arriverebbe fino al bordo della colonna mentre i
     pulsanti si fermano prima. */
  .kt-inbox .kt-inbox__aside.kt-portlet .kt-inbox__nav ~ * {
    flex: 0 0 auto;
    margin-left: var(--filter-btn-gutter);
    margin-right: var(--filter-btn-gutter);
    /* "Cancella filtri" porta width:100% dalla sua regola (serve a
       riempire la colonna): con un margine ai lati, 100% del contenitore
       piu' i due margini sbordano oltre la colonna e il pulsante
       finiva sotto la lista. Sono elementi di blocco: con width:auto
       riempiono lo spazio che i margini lasciano, che e' il
       comportamento voluto. */
    width: auto;
  }

  /* (2026-08-10 — caduta la regola su ".filter-item > .btn-block": vestiva
     i pulsanti "Applica" che stavano DENTRO lo scroller in cruscotto e
     recensioni, riportandoli con due margini negativi sulla verticale di
     "Cancella filtri". Quei pulsanti non esistono piu': i filtri si
     applicano da soli al cambio del campo, come nello showroom, e l'unica
     azione della colonna e' quella del piede.) */

  /* filtro compattato (body.kt-inbox-aside--hidden): la regola storica
     lo riduce a una striscia fixed width:0, ma il padding !important
     qui sopra la teneva larga ~32px: lembi di campi/reset visibili sul
     blu accanto allo sheet. Da chiuso: padding zero e nessun fondo.
     Lo stato hover-peek (.kt-inbox-aside--hover, attivato via JS dal
     bottone "Filtro") e' escluso con :not() e trattato qui sotto. */
  body.kt-inbox-aside--hidden .kt-inbox .kt-inbox__aside.kt-portlet:not(.kt-inbox-aside--hover) {
    padding: 0 !important;
    background: transparent !important;
  }

  /* hover-peek: l'anteprima del filtro quando la colonna e' compattata.
     E' LA STESSA COLONNA di sopra, non un componente a parte: stessa
     larghezza, stessi rientri, stesso scroller interno. Cambia solo che
     e' sovrapposta alla lista invece che accanto, quindi si riallinea
     allo slot dei filtri (via i margini -25px storici) e sale sopra le
     intestazioni sticky della tabella (z-index 2).

     2026-08-10 — via il fondo bianco (e con lui ombra e angoli): era
     l'unica superficie bianca del prodotto disegnata sopra un canvas
     gia' bianco, e la card si leggeva solo per via dell'ombra.
     2026-09-01 — RIENTRATA. Il fondo trasparente aveva un prezzo che
     nel commento di allora era messo per iscritto ("cosi' i campi si
     sovrappongono alle righe della lista finche' l'anteprima e'
     aperta") e che all'uso non e' sostenibile: l'anteprima e' l'unico
     pannello della piattaforma disegnato SOPRA il contenuto, e senza
     fondo si legge il pannello e la pagina insieme — etichette dei
     filtri sopra i numeri delle tessere, i campi sopra le righe. Non
     e' una questione di gusto ma di leggibilita': il testo sta su due
     sfondi diversi. Quindi fondo opaco (--canvas, lo stesso bianco di
     ogni scheda) e un filetto a destra (--hairline, l'unico grigio
     delle separazioni) perche' il bordo si legga anche dove sotto c'e'
     una card bianca e non lo sheet grigio (academy, bacheca, supporto,
     marketing: quelle pagine non sono nell'elenco del canvas bianco).

     ALTEZZA PIENA, e piena vuol dire 100vh: il fondo bianco parte da y=0
     e arriva a fondo finestra, banda della testata compresa. Non e' un
     vezzo — il pannello e' fuori dal flusso, quindi la lista si riprende
     tutta la larghezza e le passa DIETRO; nei 64px in cima quel che sta
     dietro non e' fondo pagina ma contenuto (la barra delle linguette
     del cruscotto, la toolbar della lista), e scorrendo ci passano le
     tessere. Un fondo che si ferma a 64px lascia scoperta proprio la
     fascia dove il contenuto si muove.
     Il contenuto dei filtri resta dov'era: i 64px tornano come
     padding-top (76 = 64 + i 12 di prima), non come spostamento.

     Con l'altezza dichiarata e non dedotta da top+bottom: con height:auto
     e i due bordi, su questo elemento — un item di flex container
     posizionato fixed, con contenuto piu' alto del viewport — Chrome
     smette di risolvere l'altezza dai bordi e torna all'altezza del
     contenuto, ancorandola a bottom. Il pannello finiva lungo 1400px.

     Z-INDEX 1, NON PIU' 10. Il 10 era stato scelto "sopra il thead
     sticky (z2)", ma quel 2 non e' un piano della pagina: il thead sta
     dentro #kt_inbox_list, che e' "position:relative; z-index:0" e fa
     contesto di impilamento — tutta la lista, testata sticky e toolbar
     comprese, vive a QUOTA 0. Sopra la lista basta 1.
     E 1 e' anche il massimo consentito: ora che il pannello arriva a
     y=0 deve passare SOTTO la riga Filtro/titolo, altrimenti si copre
     da solo il bottone su cui hai il mouse — e #kt_subheader vale 2
     nello showroom (la piattaforma) e 5 nel cruscotto. Uno sta sotto
     entrambi. Il copyright flottante, che deve restare dietro, e' a 0.
     Che il pannello tagli il contenuto della lista che gli passa dietro
     (le linguette del cruscotto, le tab archivio dello showroom) e' il
     comportamento dell'anteprima, non un effetto di questo blocco: vale
     gia' oggi su tutta l'altezza. */
  body.kt-inbox-aside--hidden .kt-inbox .kt-inbox__aside.kt-portlet.kt-inbox-aside--hover {
    background: var(--canvas) !important;
    border-right: 1px solid var(--hairline);
    box-shadow: none;
    border-radius: 0;
    /* 76 = i 64 della banda testata + i 12 di stacco della colonna
       agganciata: i campi restano sulla stessa y di prima. */
    padding: 76px 0 4px !important;
    margin: 0 !important;
    top: 0;
    bottom: auto;
    /* a scorrere e' .kt-inbox__nav come nella colonna agganciata: qui la
       card NON deve scorrere, o si porterebbe via i pulsanti in fondo */
    height: 100vh !important;
    max-height: none;
    overflow: hidden !important;
    overflow: clip !important;
    z-index: 1 !important;
  }

  /* Il pin del "top" dell'anteprima: (1,6,1), un ID in piu' del gruppo
     qui sopra, per battere i moduli che se lo riscrivono con l'ID
     (lo showroom lo dichiara 0, che ora e' anche il valore giusto: la
     riga resta perche' e' 0 per la ragione di sopra, non per caso). Sta
     in una regola sua e non nel blocco qui sopra perche' e' l'UNICA
     dichiarazione che ha bisogno di quella specificita': tenerle
     separate dice quale riga sta litigando con chi. */
  body.kt-inbox-aside--hidden .kt-inbox #kt_inbox_aside.kt-inbox__aside.kt-inbox-aside--hover {
    top: 0;
  }

  /* --- Veicoli: testa dell'aside filtro ---------------------------- */
  /* Il canvas delle liste non e' piu' blu ma bianco (vedi
     "html body.kt-veicoli { background:#fff }" a inizio blocco): tabs,
     contatore, titoli di sezione, checkbox e "Più filtri" usano i
     grigi del modulo (custom.modulo.css), come gli altri filtri lista.
     Le vecchie forzature bianco-su-blu li rendevano invisibili. */

  /* footer fuori dal flusso: in flusso allungherebbe la pagina oltre
     lo sheet 100vh (scroll fantasma e angolo mai a fondo schermo).
     Flottante sul blu in basso a sinistra, come da riferimento. */
  body.kt-veicoli .kt-footer,
  body.kt-lista-utenti .kt-footer,
  body.kt-lista-aziende .kt-footer,
  body.kt-lista-opt .kt-footer,
  body.kt-lista-report .kt-footer,
  body.kt-cruscotto .kt-footer,
  body.kt-bdc .kt-footer,
  body.kt-recensioni .kt-footer,
  body.kt-ubicazioni .kt-footer,
  body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) .kt-footer,
  body.kt-lista-logistica:has(#kt_inbox_aside) .kt-footer {
    position: fixed;
    left: calc(var(--aside-w) + var(--aside-inset) * 2);
    bottom: 0;
    width: auto;
    padding: 0 0 6px;
    /* z-index 0 e non 1 (2026-08-07): con z-index:1 il footer flottante
       finiva SOPRA la colonna filtri, che parte esattamente da questa
       stessa x. La colonna prende z-index:1 nella regola sotto, cosi'
       il copyright resta visibile sul canvas ma passa dietro i filtri
       invece di coprirne le ultime voci. */
    z-index: 0;
  }

  /* Il copyright flottante occupa la fascia bassa a sinistra del viewport,
     cioe' esattamente dove finisce la lista quando si e' a fondo scroll:
     ci finivano sotto la paginazione (il numero di pagina "1" era coperto
     a meta') e l'ultima riga della tabella. Essendo "fixed" non occupa
     spazio nel flusso, quindi lo spazio se lo deve riservare la lista.
     34px = altezza della riga di copyright + i 6px di padding del footer,
     con un margine di sicurezza. Stessa lista di selettori del footer qui
     sopra: le due regole vanno tenute in pari, perche' la fascia esiste
     esattamente dove il footer flotta. 2026-08-10 */
  body.kt-veicoli #kt_inbox_list,
  body.kt-lista-utenti #kt_inbox_list,
  body.kt-lista-aziende #kt_inbox_list,
  body.kt-lista-opt #kt_inbox_list,
  body.kt-lista-report #kt_inbox_list,
  body.kt-cruscotto #kt_inbox_list,
  body.kt-bdc #kt_inbox_list,
  body.kt-recensioni #kt_inbox_list,
  body.kt-ubicazioni #kt_inbox_list,
  body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) #kt_inbox_list,
  body.kt-lista-logistica #kt_inbox_list {
    padding-bottom: 34px;
  }

  /* La colonna filtri sta sopra il footer flottante: le serve un
     contesto di impilamento proprio, altrimenti - essendo statica -
     lo z-index non si applica e vince il footer, che nel DOM viene dopo.
     Vale per tutte le liste con aside filtri (stessa lista di selettori
     del footer qui sopra) piu' il profilo, gestito nel blocco dedicato.

     2026-08-10 — "sticky" e non piu' "relative". Il contesto di
     impilamento serve ancora e sticky lo crea allo stesso modo, quindi
     lo z-index qui sotto continua a funzionare; ma "relative" faceva
     anche un secondo lavoro non voluto, e cioe' DISFARE lo sticky
     dichiarato piu' sopra: quel selettore ha un ID (1,1,1) e batteva
     .kt-inbox .kt-inbox__aside.kt-portlet (0,3,0) a prescindere
     dall'ordine. Era il motivo per cui la colonna filtri se ne andava
     su con lo scroll in tutti i moduli tranne lo showroom, che se la
     riprendeva con un override locale nel proprio CSS di modulo. */
  body.kt-veicoli #kt_inbox_aside,
  body.kt-lista-utenti #kt_inbox_aside,
  body.kt-lista-aziende #kt_inbox_aside,
  body.kt-lista-opt #kt_inbox_aside,
  body.kt-lista-report #kt_inbox_aside,
  body.kt-cruscotto #kt_inbox_aside,
  body.kt-bdc #kt_inbox_aside,
  body.kt-recensioni #kt_inbox_aside,
  body.kt-ubicazioni #kt_inbox_aside,
  body:has(#kt_inbox_aside):not(.kt-veicoli):not(.kt-profilo) #kt_inbox_aside,
  body.kt-lista-logistica #kt_inbox_aside {
    position: sticky;
    z-index: 1;
  }

  /* ...ma NON quando la colonna e' compattata. Il gruppo qui sopra vale
     (1,1,1) e batteva "position: fixed" della regola storica
     ".kt-inbox-aside--hidden #kt_inbox_aside" (1,1,0), che e' quella che
     toglie la colonna dal flusso quando i filtri sono chiusi. Conseguenza:
     l'anteprima hover-peek — disegnata per stare SOPRA la lista (z-index 10,
     margini negativi, v. blocco "hover-peek" piu' sopra) — restava in flusso
     e SPINGEVA la tabella invece di coprirla. A occhio sembrava che il
     bottone "Filtro" non compattasse niente.

     (1,3,1): pareggia l'override locale dello showroom
     ("body.kt-veicoli .kt-inbox #kt_inbox_aside.kt-portlet", stessa
     specificita' in pages/showroom/css/custom.modulo.css) e passa avanti
     perche' bottomScripts.php ricarica draive.core.css per ultimo. Vale per
     tutti i moduli: la colonna compattata si nomina da sola, non serve
     l'elenco delle classi pagina. */
  body.kt-inbox-aside--hidden .kt-inbox #kt_inbox_aside.kt-inbox__aside {
    position: fixed;
  }
}

/* ============================================================
   Draive UI — PROFILO: stesso canvas + sheet della lista (2026-07-03)
   pages/profilo/index.php usava ancora il vecchio sfondo uniforme
   #F6F7FB senza sheet: qui viene allineato allo stesso schema delle
   liste (vedi blocco "CANVAS BLU + SHEET LISTA" sopra), riusando la
   root ".kt-profilo .kt-app" gia' presente nel foglio (v. media query
   max-width:1025px piu' sopra) invece di riusare ".kt-inbox", perche'
   il contenuto non e' una tabella ma i tab Profilo/Password/Permessi/
   Accesso Aziende/Firma eMail/Notifiche: la card tab (kt-portlet--tabs)
   fa da "sheet" al posto di kt-inbox__list, l'aside utente
   (#kt_user_profile_aside) fa da pannello fisso in scroll come i filtri.
   ============================================================ */
@media (min-width: 1025px) {
  html body.kt-profilo {
    background: #fff !important;
  }

  body.kt-profilo #kt_content::before {
    display: none;
  }

  body.kt-profilo #kt_content .kt-container {
    background: transparent;
  }

  body.kt-profilo #kt_content {
    padding-bottom: 0;
  }

  /* sheet: stesso trucco della lista (pseudo-elemento sticky agganciato
     al viewport mentre il contenuto dei tab scorre sopra), sulla card
     dei tab invece che sulla tabella. */
  .kt-profilo .kt-app .kt-portlet--tabs {
    background: transparent;
    margin-top: -64px;
    padding-top: 64px;
    min-height: 100vh;
    position: relative;
    z-index: 0;
  }
  .kt-profilo .kt-app .kt-portlet--tabs::before {
    content: '';
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    margin-top: -64px;
    margin-bottom: calc(-100vh + 64px);
    background: #F6F7FB;
    border-radius: 16px 0 0 16px;
    z-index: -1;
    pointer-events: none;
  }

  /* aside utente (Profilo/Password/Permessi/...) sul bianco, fissa in
     scroll come il pannello filtri delle liste. */
  .kt-profilo .kt-app #kt_user_profile_aside.kt-portlet {
    position: sticky;
    top: 64px;
    align-self: flex-start;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.kt-profilo .kt-footer {
    position: fixed;
    left: calc(var(--aside-w) + var(--aside-inset) * 2);
    bottom: 0;
    width: auto;
    padding: 0 0 6px;
    /* vedi nota sul footer delle liste (2026-08-07): dietro l'aside,
       non davanti. L'aside del profilo e' gia' sticky qui sopra, quindi
       gli basta lo z-index. */
    z-index: 0;
  }

  .kt-profilo .kt-app #kt_user_profile_aside.kt-portlet {
    z-index: 1;
  }
}

/* ============================================================
   DRAIVE FIELDS — blocco autorevole unico dei campi form
   (input / select / textarea / select2 + floating label).
   Ultimo nel file: vince sui blocchi precedenti di draive.core.css.
   Consuma SOLO i token di :root (nessun valore hardcoded).
   Un solo meccanismo floating (riposo centrato -> flottata top 10px),
   una scala di stati: riposo · hover · focus(+ring) · disabled · error.
   Coerente per input, select, textarea e select2.
   ============================================================ */

/* --- Campo floating: geometria e superficie --- */
body .draive-floating {
  position: relative;
  width: 100%;
}

/* La regola dice la verita' FINALE del campo. Prima dichiarava
   "border: 1px solid transparent" e duecento righe piu' sotto un'altra
   lo correggeva in grigio: due regole per un valore solo, ed e' il
   modo in cui un foglio diventa illeggibile. Il bordo trasparente
   serviva quando il campo era un riempimento grigio; da quando e'
   bianco, il bordo E' il campo, quindi si dichiara qui.

   Proprieta' separate e non la scorciatoia "border:": se un valore non
   si risolve, con la scorciatoia decade tutto e il campo sparisce. */
body .draive-floating .draive-control {
  width: 100%;
  height: var(--draive-control-height);
  /* !important: deve battere il legacy "body input.form-control{padding:0 16px
     !important}" (sezione Unified Forms) che schiacciava il valore al centro
     del campo (28px) invece che sotto la label (32px) — 2026-07-18 */
  padding: 22px 15px 7px !important;
  background-color: var(--draive-field-bg);
  border-width: 1px;
  border-style: solid;
  border-color: var(--draive-field-border);
  border-radius: var(--draive-radius);
  color: var(--ink-body);
  box-shadow: none !important;
  transition: var(--draive-transition);
  transition-property: color, background-color, border-color, box-shadow;
}

/* ============================================================
   SELECT NATIVI — il chevron della casa, dichiarato UNA volta
   ------------------------------------------------------------
   Al 2026-08-07 questo stesso chevron era ridisegnato in tre fogli
   di modulo: officina/dashboard due volte (.do .draive-floating
   select.draive-control e .do select.do-gran), e altrove con la
   freccia nativa del browser, che si posiziona male e cambia da un
   sistema operativo all'altro. Adesso la disegna solo questa regola.

   L'elenco copre i select che portano una classe di campo. I select
   "nudi" dentro un wrapper di modulo hanno ricevuto class="form-control"
   nel markup: e' una riga di HTML che evita una regola di CSS in piu'
   per ciascun modulo.
   ============================================================ */
/* PERCHE' !important SUI QUATTRO LONGHAND DELLO SFONDO, 2026-08-08.
   Senza, questa regola perdeva in tre modi diversi e il chevron non si
   vedeva affatto fuori da .draive-floating. Misurato a schermo:

     6285  body .form-control, body select.form-control ...
           background: var(--draive-field-bg) !important
           -> e' una SHORTHAND: azzera anche background-image. Su un
              select.form-control nudo la freccia SPARIVA del tutto.
     6104  stessa cosa per select.form-select.
     1106  .form-control.submittable, select.form-control
           background: #80808029 url(<triangolo pieno>) ... !important
     3731  .custom-select-clear, stesso triangolo pieno legacy
           -> qui usciva un TRIANGOLO nero 12x10 a right 1rem invece
              del chevron 12x12 #64748b a 15px.

   Una !important batte una dichiarazione normale a prescindere da
   specificita' e ordine: la canonica, per quanto piu' specifica e piu'
   in basso nel file, perdeva sempre. Si dichiarano importanti SOLO i
   quattro longhand del disegno — mai background-color: la superficie
   resta di chi la governa (fondo, hover, focus, stati legacy), e le
   shorthand qui sopra continuano a fare il loro lavoro sul colore.

   :not([multiple]):not([size]) esclude i listbox: un <select multiple
   size="4"> non ha tendina, e il chevron finiva dipinto in mezzo alla
   lista (widget "condizioni" del supporto). */
body .draive-floating select.draive-control:not([multiple]):not([size]),
body select.form-control:not([multiple]):not([size]),
body select.form-select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--draive-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: var(--draive-chevron-w) var(--draive-chevron-h) !important;
  padding-right: 40px !important;
}

/* Il rientro verticale della label flottante vale solo DENTRO
   .draive-floating: un select di toolbar non ha label sopra il valore. */
body .draive-floating select.draive-control {
  padding-top: 22px !important;
  padding-bottom: 7px !important;
}

/* niente freccia doppia su IE/Edge legacy */
body .draive-floating select.draive-control::-ms-expand,
body select.form-control::-ms-expand,
body select.form-select::-ms-expand,
body select.draive-chevron::-ms-expand { display: none; }

/* --- .draive-chevron: SOLO la freccia, per i controlli fuori scala ---
   Un select che non e' un campo standard non puo' prendere .form-control
   per avere la freccia: si porterebbe dietro tutto il sistema campi
   (min-height 47px !important, padding, raggio, fondo) e perderebbe la
   propria scala. E' il caso dei filtri di academy/certificati, alti 34px
   con testo a 13px e contrasti calcolati apposta: senza classe di campo
   restavano con la freccia del SISTEMA OPERATIVO, diversa su ogni
   macchina e su ogni browser.

   Questa classe da' l'icona della casa e nient'altro. Si aggiunge nel
   markup accanto alla classe del modulo. Cosi' l'SVG resta dichiarato
   una volta sola qui, e nessun foglio di modulo deve ricopiarselo. */
body select.draive-chevron {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--draive-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: var(--draive-chevron-w) var(--draive-chevron-h) !important;
  padding-right: 34px !important;   /* 15 di margine + 12 di icona + 7 d'aria */
}

/* Select nativi che portano ANCHE la classe legacy .custom-select-clear
   (wizard veicoli e affini): la regola globale `.custom-select-clear`
   (sezione showroom, ~3760) imposta `background: #80808029 url(chevron)
   ... !important` e batterebbe superficie e chevron DRAIVE qui sopra
   nonostante la specificita' minore. Dentro .draive-floating rivince lo
   standard; hover/focus ribadiscono il solo background-color (i longhand
   !important successivi vincono sulla shorthand di base). */
/* Solo la SUPERFICIE. Il chevron lo mette la regola canonica qui sopra,
   che dal 2026-08-08 e' !important e batte la shorthand legacy: qui
   ridisegnarlo significava solo tenerne in giro una seconda copia, che
   infatti era finita a right 16px invece di 15 — un pixel di scarto
   dagli altri campi, invisibile da solo e impossibile da vedere se non
   confrontando due select affiancati. */
body .draive-floating select.draive-control.custom-select-clear {
  background-color: var(--draive-field-bg) !important;
}
body .draive-floating select.draive-control.custom-select-clear:hover:not(:focus):not(:disabled):not([readonly]) {
  background-color: var(--draive-field-bg-hover) !important;
}
body .draive-floating select.draive-control.custom-select-clear:focus {
  background-color: var(--draive-field-bg-focus) !important;
}

body .draive-floating textarea.draive-control {
  height: auto;
  min-height: 120px;
  padding-top: 26px !important; /* multiline: il testo parte sotto la label */
  resize: vertical;
}

body .draive-floating .draive-control::placeholder {
  color: var(--draive-placeholder);
  opacity: 1;
}

/* --- Stato hover (solo se non in focus): lieve scurimento --- */
body .draive-floating .draive-control:hover:not(:focus):not(:disabled):not([readonly]) {
  background-color: var(--draive-field-bg-hover);
}

/* --- Stato focus: bianco + bordo nero + ring --- */
body .draive-floating .draive-control:focus {
  background-color: var(--draive-field-bg-focus);
  outline: none;
  box-shadow: var(--draive-ring-focus) !important;
}

/* --- Stato disabled / readonly --- */
body .draive-floating .draive-control:disabled,
body .draive-floating .draive-control[readonly] {
  opacity: .6;
  cursor: not-allowed;
}

/* ============================================================
   CAMPO VUOTO — il testo che disegna il BROWSER
   ------------------------------------------------------------
   Due controlli scrivono da soli nel campo e non si possono zittire
   con un attributo: input[type=date] mostra "gg/mm/aaaa", e una
   <select> mostra sempre il testo dell'opzione selezionata — anche
   quando quell'opzione e' il segnaposto ("Tutti", "— seleziona —").

   Con la label centrata i due testi si sovrappongono. La soluzione e'
   renderlo TRASPARENTE finche' il campo non ha un valore vero: il
   campo appare vuoto, la label sta al centro, e appena si sceglie
   qualcosa il testo ricompare e la label sale.

   Perche' color e non ::-webkit-datetime-edit: quello pseudo-elemento
   non esiste su Firefox, che resterebbe l'unico browser col
   "gg/mm/aaaa" addosso. color e' proprieta' standard e vale ovunque.

   :focus fa eccezione — chi sta scrivendo deve vedere cosa scrive.

   UN SOLO SEGNALE, E DEVE ESSERE QUELLO VERO — .draive-has-value sul
   CONTROLLO, scritta da draive-forms.js leggendo el.value.

   Nell'applicazione esiste anche .has-value sul WRAPPER: e' la
   convenzione storica per far salire la label, la usano una quarantina
   di file. Qui NON si consulta, e la tentazione va spiegata perche' e'
   costata un giro (2026-08-08).

   Il difetto era reale: precompilando un form da codice il controllo non
   riceveva .draive-has-value — assegnare un valore non emette eventi —
   e questa regola dipingeva trasparente un dato che c'era. In modifica
   l'anagrafica auto mostrava marca, alimentazione, sede e date vuote
   mentre in banca dati erano piene.

   Il rimedio sbagliato e' onorare anche il wrapper: quella classe e'
   una DICHIARAZIONE, non una misura, e in 20 punti e' scritta fissa nel
   markup (filtri e report, dove il campo nasce vuoto). Fidandosene
   tornava il "gg/mm/aaaa" su tutti quei campi.

   Il rimedio giusto sta dall'altra parte: rendere .draive-has-value
   affidabile anche sull'assegnazione da codice. Lo fa draive-forms.js
   avvolgendo jQuery.fn.val (v. "VALORE ASSEGNATO DA CODICE" li'). Qui
   si continua a leggere il valore reale, non cio' che il markup dice. */
/* Le <select> si spengono con `color`: il loro chevron e' un'immagine di
   sfondo e non dipende dal colore del testo. */
body .draive-floating select.draive-control:not(.draive-has-value):not(:focus) {
  color: transparent !important;
}

/* I campi DATA no: qui `color` non si tocca.

   Su Firefox il pulsante del calendario e' contenuto anonimo del browser,
   disegnato in currentColor perche' segua il tema chiaro/scuro. Mettendo
   `color: transparent` spariva insieme al testo: campo data vuoto = nessuna
   icona, e nessun modo di aprire il calendario se non a tastiera. Su
   Chromium non si vedeva, perche' li' l'indicatore di sistema e' spento e
   l'icona la disegniamo noi come sfondo, che `color` non tocca. Ecco perche'
   il difetto compariva su un motore solo (segnalato il 2026-08-08).

   -webkit-text-fill-color spegne SOLO il riempimento dei glifi e lascia
   currentColor intatto: sparisce "gg/mm/aaaa", resta l'icona. Nonostante il
   prefisso e' implementata anche da Firefox (dalla 49) e da Safari, quindi
   copre tutti i motori su cui gira l'applicazione.

   NB: il blocco ICONA DEL CALENDARIO piu' sotto porta poi `color` a
   transparent su TUTTI i motori, ma di proposito e per un'altra ragione —
   spegnere il pulsante nativo di Firefox — e insieme rimette il colore del
   testo e del cursore. Le due cose convivono: qui si decide se il testo si
   vede, li' si decide quale icona si vede. */
body .draive-floating input[type="date"]:not(.draive-has-value):not(:focus),
body .draive-floating input[type="datetime-local"]:not(.draive-has-value):not(:focus),
body .draive-floating input[type="time"]:not(.draive-has-value):not(:focus) {
  -webkit-text-fill-color: transparent !important;
}

/* NB: l'icona del calendario NON si gestisce qui. Vedi il blocco
   "L'icona del calendario e' NOSTRA" piu' sotto: l'indicatore di
   sistema viene reso invisibile e sostituito da un SVG di sfondo, per
   non dipendere dal colore del testo. Una regola di opacita' qui
   entrerebbe in conflitto con quella. */


/* ============================================================
   STATO ERRORE — blocco unico, per ogni tipo di campo
   ------------------------------------------------------------
   Lo stato lo scrive il JS che c'e' gia': addClass('is-invalid')
   piu' attr('aria-invalid','true'), e li toglie al rientro. Qui non
   si inventa nessun sistema nuovo: si dipinge quello esistente.

   Due agganci equivalenti, perche' il progetto usa entrambi:
     .is-invalid              la classe (40 usi nel markup e nel JS)
     [aria-invalid="true"]    l'attributo (11 usi), che serve anche
                              ai lettori di schermo

   Vale per input di ogni tipo, textarea, select nativi e select2, sia
   dentro .draive-floating sia nella colonna filtri. L'alone c'e' anche
   A RIPOSO, non solo al fuoco: e' il caso in cui l'utente torna sul
   modulo e deve capire dove ha sbagliato.
   ============================================================ */

body .draive-floating .draive-control.is-invalid,
body .draive-floating .draive-control[aria-invalid="true"],
body .draive-floating .is-invalid ~ .select2 .select2-selection,
body .draive-floating select.is-invalid + .select2 .select2-selection,
body .kt-inbox__aside .form-control.is-invalid,
body .kt-inbox__aside .form-control[aria-invalid="true"],
body .form-control.is-invalid,
body .form-control[aria-invalid="true"],
body textarea.is-invalid,
body select.is-invalid {
  border-color: var(--draive-border-error) !important;
  box-shadow: var(--draive-ring-error) !important;
}

/* Col fuoco l'errore RESTA. Il nero del fuoco non deve cancellare il
   rosso: chi corregge un campo deve continuare a vedere che era
   sbagliato finche' non lo e' piu'. Cambia solo l'anello, che si fa
   piu' fitto per dire "sei qui". */
body .draive-floating .draive-control.is-invalid:focus,
body .draive-floating .draive-control[aria-invalid="true"]:focus,
body .kt-inbox__aside .form-control.is-invalid:focus,
body .form-control.is-invalid:focus,
body textarea.is-invalid:focus,
body select.is-invalid:focus {
  border-color: var(--draive-border-error) !important;
  box-shadow: 0 0 0 4px rgba(255, 45, 85, .28) !important;
}

/* Il messaggio sotto il campo. Due nomi, una resa: .draive-error e'
   quello di casa (25 usi), .invalid-feedback quello di Bootstrap (28).
   Non se ne rinomina nessuno — il JS li cerca per nome — ma da qui in
   avanti si vedono identici. */
body .draive-error,
body .invalid-feedback,
body .draive-floating + .invalid-feedback {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  font-size: calc(var(--fs-caption) * var(--dv-fs,1));
  line-height: var(--lh-caption);
  color: var(--draive-border-error);
}

/* Vuoto non deve occupare spazio: senza questa il messaggio nascosto
   allarga comunque il modulo di 6px per campo. */
body .draive-error:empty,
body .invalid-feedback:empty {
  margin-top: 0;
}

/* Bootstrap mostra .invalid-feedback solo accanto a un .is-invalid.
   Qui si rispetta la stessa regola, cosi' il markup Bootstrap
   continua a funzionare come si aspetta chi lo ha scritto. */
body .is-invalid ~ .invalid-feedback,
body .is-invalid + .invalid-feedback {
  display: flex;
}

/* --- Autofill: mantieni il fondo del campo, niente giallino --- */
body .draive-floating .draive-control:-webkit-autofill,
body .draive-floating .draive-control:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--draive-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--draive-field-bg) inset !important;
  -webkit-text-fill-color: #111;
  caret-color: #111;
  border-radius: var(--draive-radius);
}
body .draive-floating .draive-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--draive-field-bg-focus) inset, var(--draive-ring-focus) !important;
  box-shadow: 0 0 0 1000px var(--draive-field-bg-focus) inset, var(--draive-ring-focus) !important;
}

/* --- Label flottante: riposo centrata --- */
body .draive-floating .draive-label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  color: var(--draive-label-color);
  line-height: 1;
  pointer-events: none;
  transition: var(--draive-transition);
  transition-property: top, transform, color;
  z-index: 3;
}

/* Flottata: valore presente, campo attivo, o select2 aperto.
   NB: per i <select> NON si usa :not(:placeholder-shown) (sempre vero sui
   select) ne' :valid: la label sale solo con un valore reale, segnalato da
   .draive-has-value (JS markHasValue) o .has-value/.is-open sul wrapper.
   Cosi' i select VUOTI tengono la label al centro come gli input. */
body .draive-floating input.draive-control:not([type="date"]):not([type="datetime-local"]):not([type="time"]):not(:placeholder-shown) + .draive-label,
body .draive-floating textarea.draive-control:not(:placeholder-shown) + .draive-label,
body .draive-floating input.draive-control:-webkit-autofill + .draive-label, /* preview autofill Chrome: :placeholder-shown resta true ma il valore è visibile (2026-07-18) */
body .draive-floating .draive-control.draive-has-value ~ .draive-label,
body .draive-floating.has-value .draive-label,
body .draive-floating.is-open .draive-label,
body .draive-floating .draive-control:focus + .draive-label {
  top: 10px;
  transform: none;
  color: var(--draive-label-float);
}

/* Flottata + focus/aperto = etichetta nera */
body .draive-floating .draive-control:focus + .draive-label,
body .draive-floating.is-open .draive-label {
  color: var(--draive-label-focus);
}

/* Errore: label flottata rossa */
body .draive-floating .draive-control.is-invalid + .draive-label,
body .draive-floating .draive-control[aria-invalid="true"] + .draive-label {
  color: var(--draive-border-error);
}

/* --- Select2: stessi stati e stessa transizione dei campi --- */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
  transition: var(--draive-transition);
  transition-property: background-color, border-color, box-shadow;
}

body .select2-container--default .select2-selection--single:hover {
  background-color: var(--draive-field-bg-hover) !important;
}

body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--multiple {
  background-color: var(--draive-field-bg-focus) !important;
  border-color: var(--draive-border-focus) !important;
  box-shadow: var(--draive-ring-focus) !important;
}

/* Placeholder di select2 dentro un campo floating: e' un doppione della
   floating-label, che fa gia' da placeholder centrato a riposo (come i select
   nativi, che lasciano il box vuoto). Senza questo si vedevano SOVRAPPOSTI la
   label ("Azienda") e il placeholder di select2 ("Seleziona Azienda"). Lo
   nascondiamo: resta solo la label, centrata a riposo e flottante in alto
   quando c'e' un valore reale (.has-value sul wrapper). */
body .draive-floating .select2-selection__placeholder {
  color: transparent !important;
}

/* Select2 in stato errore (container iniettato dopo il <select>) */
body select.is-invalid + .select2-container .select2-selection,
body select[aria-invalid="true"] + .select2-container .select2-selection {
  border-color: var(--draive-border-error) !important;
  box-shadow: var(--draive-ring-error) !important;
}

/* --- Messaggi di errore: nascondi i contenitori VUOTI ---
   Il blocco 09 forza .invalid-feedback a display:flex (con bollino "!"),
   percio' anche i contenitori vuoti (nessun errore) mostravano il pallino
   rosso sotto ai campi. Qui li nascondiamo finche' non hanno un messaggio. */
body .invalid-feedback:empty,
body .draive-error:empty {
  display: none !important;
}

/* --- Toggle password (occhio) — iniettato da draive-forms.js --- */
body .draive-floating .draive-control.draive-has-pwtoggle {
  padding-right: 44px !important;
}
body .draive-floating .draive-pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--draive-placeholder);
  cursor: pointer;
  z-index: 4;
  transition: var(--draive-transition);
  transition-property: color, background-color;
}
body .draive-floating .draive-pw-toggle:hover {
  color: #111;
  background: rgba(15, 23, 42, .06);
}
body .draive-floating .draive-pw-toggle:focus {
  outline: none;
}
body .draive-floating .draive-pw-toggle i {
  font-size: calc(18px * var(--dv-fs,1));
  line-height: 1;
}

/* --- Input number: stepper -/+ interno (iniettato da draive-forms.js) ---
   2026-08-08 — il controllo e' UNO SOLO: un riquadro compatto ancorato a
   destra, centrato in verticale, con le due frecce impilate dentro. Prima
   erano due pillole separate alte meta' campo ciascuna, che pesavano quanto
   il valore e spezzavano il campo in due. Il riferimento e' lo spinner
   nativo del browser (lo stesso che ReUI lascia a vista sul suo "input with
   number type"): superficie grigia, angoli piccoli, frecce discrete.

   Il fondo grigio e il raggio vivono sul CONTENITORE, non sui bottoni: cosi'
   si legge come un pezzo unico e l'hover di una meta' resta ritagliato
   dentro il riquadro (overflow: hidden).                                  */
body .draive-floating .draive-control.draive-has-stepper {
  padding-right: 38px !important;
}
/* nasconde gli spinner nativi: usiamo i nostri bottoni */
body .draive-floating input[type="number"].draive-control::-webkit-outer-spin-button,
body .draive-floating input[type="number"].draive-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body .draive-floating input[type="number"].draive-control {
  -moz-appearance: textfield;
}
body .draive-floating .draive-stepper__controls {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 32px;
  /* nei campi bassi (--draive-control-height-sm, 34px: pager e toolbar)
     il riquadro si stringe invece di sbordare */
  max-height: calc(100% - 12px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, .05);
  z-index: 4;
}
body .draive-floating .draive-stepper__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* !important: il blocco "Buttons – unified" impone radius 8px /
     padding 15px / margin 2px con !important su ogni <button>. Senza,
     il bottone esce dal riquadro (30px di larghezza dentro 24px). */
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  transition: var(--draive-transition);
  transition-property: background-color, color;
}
body .draive-floating .draive-stepper__btn:hover {
  background: rgba(15, 23, 42, .10);
  color: #111;
}
body .draive-floating .draive-stepper__btn:active {
  background: rgba(15, 23, 42, .16);
}
body .draive-floating .draive-stepper__btn:focus {
  outline: none;
}
body .draive-floating .draive-stepper__btn i {
  font-size: calc(9px * var(--dv-fs,1));
  line-height: 1;
}
/* Campo disabilitato: le frecce si spengono insieme al campo (bump() gia'
   non agisce, ma il controllo restava acceso e sembrava cliccabile). */
body .draive-floating:has(.draive-control:disabled) .draive-stepper__controls,
body .draive-floating:has(.draive-control[readonly]) .draive-stepper__controls {
  opacity: .5;
}
body .draive-floating:has(.draive-control:disabled) .draive-stepper__btn,
body .draive-floating:has(.draive-control[readonly]) .draive-stepper__btn {
  cursor: not-allowed;
}
body .draive-floating:has(.draive-control:disabled) .draive-stepper__btn:hover,
body .draive-floating:has(.draive-control[readonly]) .draive-stepper__btn:hover {
  background: transparent;
  color: #4b5563;
}

/* --- Input number "with buttons" (KTUI input-number): bottoni − / +
   INTEGRATI nella superficie grigia del campo, ai due lati. Opt-in:
   wrapper .draive-stepper-group attorno al .draive-floating (bottoni
   iniettati da draive-forms.js). E' il WRAPPER a fare da campo:
   superficie, hover, focus(ring), errore e disabled vivono qui;
   input e bottoni al suo interno sono trasparenti. */
body .draive-stepper-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--draive-control-height);
  background: var(--draive-field-bg);
  border: 1px solid transparent;
  border-radius: var(--draive-radius);
  transition: var(--draive-transition);
  transition-property: background-color, border-color, box-shadow;
}
body .draive-stepper-group .draive-floating {
  flex: 1 1 auto;
  min-width: 0;
}
/* L'input dentro il gruppo perde superficie e stati propri (altrimenti
   hover/focus disegnerebbero un "campo nel campo"): trasparente sempre.
   !important: i blocchi legacy impongono il fondo grigio con !important
   su ogni .form-control (es. "body .form-control ... background !important"). */
body .draive-stepper-group .draive-floating .draive-control,
body .draive-stepper-group .draive-floating .draive-control:hover:not(:focus):not(:disabled):not([readonly]),
body .draive-stepper-group .draive-floating .draive-control:focus {
  height: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Stati del campo, portati sul wrapper. Doppio aggancio per il focus:
   :focus-within nativo + .is-focused messa da draive-forms.js su
   focus/blur dell'input (rete di sicurezza per i motori che non
   ricalcolano i pseudo-stati sul markup iniettato nelle modali). */
body .draive-stepper-group:hover:not(.is-focused):not(:focus-within):not(:has(.draive-control:disabled)) {
  background-color: var(--draive-field-bg-hover);
}
body .draive-stepper-group.is-focused,
body .draive-stepper-group:focus-within {
  background-color: var(--draive-field-bg-focus);
  border-color: var(--draive-border-focus);
  box-shadow: var(--draive-ring-focus);
}
body .draive-stepper-group:has(.draive-control.is-invalid),
body .draive-stepper-group:has(.draive-control[aria-invalid="true"]) {
  border-color: var(--draive-border-error);
}
body .draive-stepper-group__btn {
  flex: 0 0 auto;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* !important: il blocco "Buttons – unified" impone radius 8px /
     padding 15px / margin 2px con !important su ogni <button> */
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  transition: var(--draive-transition);
  transition-property: background-color, color;
}
/* raggio solo sugli angoli esterni: il − e' il primo figlio, il + l'ultimo
   (-1px: raggio interno al bordo del wrapper) */
body .draive-stepper-group__btn:first-child {
  border-radius: calc(var(--draive-radius) - 1px) 0 0 calc(var(--draive-radius) - 1px) !important;
}
body .draive-stepper-group__btn:last-child {
  border-radius: 0 calc(var(--draive-radius) - 1px) calc(var(--draive-radius) - 1px) 0 !important;
}
body .draive-stepper-group__btn:hover {
  background: rgba(15, 23, 42, .06);
  color: #111;
}
body .draive-stepper-group__btn:active {
  background: rgba(15, 23, 42, .10);
}
body .draive-stepper-group__btn:focus {
  outline: none;
}
body .draive-stepper-group__btn i {
  font-size: calc(14px * var(--dv-fs,1));
  line-height: 1;
}
/* Campo disabilitato (es. radio "Nessuno" / check "Sempre attivi"):
   bottoni spenti in sincrono col campo (bump() gia' non agisce). */
body .draive-stepper-group:has(.draive-control:disabled) .draive-stepper-group__btn {
  opacity: .6;
  cursor: not-allowed;
}
body .draive-stepper-group:has(.draive-control:disabled) .draive-stepper-group__btn:hover {
  background: transparent;
  color: #4b5563;
}

/* --- Campo data/ora --------------------------------------------
   Fino al 2026-08-07 la label qui era flottata SEMPRE, e c'era una
   ragione: il controllo mostra "gg/mm/aaaa" anche da vuoto, quindi
   una label centrata ci finiva sopra. Adesso quel testo e' reso
   trasparente finche' non c'e' una data (blocco "CAMPO VUOTO"), e la
   label puo' comportarsi come in ogni altro campo: centrata da vuota,
   in alto quando la data c'e'.
   Il .draive-has-value lo scrive draive-forms.js leggendo il valore
   reale, quindi funziona anche quando la data la imposta il JS. */
body .draive-floating input[type="date"].draive-control.draive-has-value ~ .draive-label,
body .draive-floating input[type="datetime-local"].draive-control.draive-has-value ~ .draive-label,
body .draive-floating input[type="time"].draive-control.draive-has-value ~ .draive-label,
body .draive-floating input[type="month"].draive-control.draive-has-value ~ .draive-label,
body .draive-floating input[type="date"].draive-control:focus ~ .draive-label,
body .draive-floating input[type="datetime-local"].draive-control:focus ~ .draive-label,
body .draive-floating input[type="time"].draive-control:focus ~ .draive-label,
body .draive-floating input[type="month"].draive-control:focus ~ .draive-label {
  top: 10px;
  transform: none;
  color: var(--draive-label-float);
}
body .draive-floating input[type="date"].draive-control:focus ~ .draive-label,
body .draive-floating input[type="datetime-local"].draive-control:focus ~ .draive-label,
body .draive-floating input[type="time"].draive-control:focus ~ .draive-label,
body .draive-floating input[type="month"].draive-control:focus ~ .draive-label {
  color: var(--draive-label-focus);
}
/* padding-right: lo detta il blocco ICONA DEL CALENDARIO (46px). */
/* ============================================================
   ICONA DEL CALENDARIO — una sola, NOSTRA, su ogni browser
   ------------------------------------------------------------
   L'icona e' un'immagine di sfondo: a 15px dal bordo destro e
   centrata in verticale su qualunque motore, perche' lo sfondo si
   posiziona rispetto al BOX del campo e non segue il contenuto.

   Il problema e' l'icona che il browser aggiunge da solo, e i due
   motori vanno spenti in due modi diversi.

   CHROMIUM e SAFARI espongono ::-webkit-calendar-picker-indicator:
   si spegne direttamente, nel blocco @supports qui sotto.

   FIREFOX non ha nessuno pseudo-elemento per il suo pulsante, e per
   mesi questo e' sembrato senza rimedio: disegnare la nostra icona
   voleva dire averne due. Il modo esiste, e l'ha rivelato un difetto:
   quel pulsante e' disegnato in currentColor, percio' `color:
   transparent` lo rende invisibile. Prima era un guaio — spegnendo il
   testo si spegneva anche l'icona; adesso e' la leva, perche' il
   testo si governa a parte con -webkit-text-fill-color, che agisce
   solo sul riempimento dei glifi e non su currentColor.

   Quindi, su tutti i motori:
     color                   transparent   -> spegne il pulsante di Firefox
     -webkit-text-fill-color il colore     -> ridà il testo
     caret-color             il colore     -> ridà il cursore, che
                                              altrimenti eredita da color
     background-image        la nostra icona, a right 15px center

   Il pulsante di Firefox resta invisibile ma cliccabile, nello spazio
   riservato a destra: un modo in piu' per aprire il calendario, non un
   difetto. La NOSTRA icona la rende cliccabile draive-forms.js con
   showPicker(), disponibile su Firefox dalla 101 e su Chromium dalla 99.

   Il campo VUOTO e' gestito nel blocco "CAMPO VUOTO": li' si porta
   -webkit-text-fill-color a transparent, e l'icona resta perche' non
   dipende ne' da color ne' dal riempimento del testo.
   ============================================================ */
body .draive-floating input[type="date"].draive-control,
body .draive-floating input[type="datetime-local"].draive-control,
body .draive-floating input[type="time"].draive-control,
body .draive-floating input[type="month"].draive-control {
  padding-right: 46px !important;
  color: transparent !important;
  -webkit-text-fill-color: var(--ink-body);
  caret-color: var(--ink-body);
  background-image: var(--draive-calendar) !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 16px 16px !important;
}

@supports selector(::-webkit-calendar-picker-indicator) {

  body .draive-floating input[type="date"].draive-control::-webkit-calendar-picker-indicator,
  body .draive-floating input[type="datetime-local"].draive-control::-webkit-calendar-picker-indicator,
  body .draive-floating input[type="time"].draive-control::-webkit-calendar-picker-indicator,
  body .draive-floating input[type="month"].draive-control::-webkit-calendar-picker-indicator,
  body input[type="date"].draive-control::-webkit-calendar-picker-indicator,
  body input[type="date"].form-control::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
  }

  body .draive-floating input[type="date"].draive-control::-webkit-inner-spin-button,
  body .draive-floating input[type="datetime-local"].draive-control::-webkit-inner-spin-button,
  body .draive-floating input[type="time"].draive-control::-webkit-inner-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
}

/* Il cursore a manina sulla fascia dell'icona: dice che si puo' cliccare */
body .draive-floating input[type="date"].draive-control,
body .draive-floating input[type="datetime-local"].draive-control,
body .draive-floating input[type="time"].draive-control,
body .draive-floating input[type="month"].draive-control {
  cursor: text;
}

/* ============================================================
   ...E LO STESSO CALENDARIO ANCHE FUORI DAI CAMPI DATA
   ------------------------------------------------------------
   Il disegno qui sopra e' il calendario della piattaforma. Ma nel
   markup i calendari sono <i class="ki-outline ki-calendar">, cioe'
   un GLIFO della icon-font keenicons: un altro disegno (tre
   linguette e sei puntini invece di due linguette e il filo di
   testata). Erano due calendari diversi nella stessa schermata —
   in valutazioni si vedevano affiancati, campo e icona.

   Qui il glifo viene sostituito con lo stesso disegno dei campi.
   Non si tocca il markup: 30 punti in 20 file dicono gia'
   "ki-calendar" e continuano a dirlo, cambia cosa disegnano.

   Perche' MASK e non background-image come sui campi: un'icona di
   testo deve prendere il colore da chi la ospita — bianca nella
   sidebar, verde sul pulsante della data programmata, nel tono del
   KPI in logistica. La mask ritaglia la forma e il colore lo mette
   "background-color: currentColor", quindi l'icona segue il colore
   del testo come faceva il glifo. Per questo il tratto dell'SVG e'
   nero: nella mask conta solo l'opacita', non la tinta.

   La misura e' in em, non in px: cosi' continua a scalare con la
   font-size, che e' l'unica leva che i 30 punti conoscono (il
   blocco DRAIVE BUTTONS, per dire, dimensiona ogni icona di
   pulsante con --btn-icon). 1.15em di riquadro perche' il glifo
   keenicons disegna dentro un em con un margine suo: a 1em pieno
   il calendario sarebbe uscito piu' grande dei fratelli che gli
   stanno accanto (ki-star, ki-trash, ki-car).
   ============================================================ */
body i.ki-calendar::before,
body .ki-calendar.ki-outline::before,
body .ki-calendar.ki-solid::before,
body .ki-calendar.ki-duotone::before {
  content: "" !important;
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask-image: var(--draive-calendar-mask);
          mask-image: var(--draive-calendar-mask);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: contain;       mask-size: contain;
}


/* --- Campo floating dentro un .input-group (suffisso unita': €, km...).
   Il wrapper .draive-floating a width:100% forzava l'append a capo
   sotto il campo (visto sui campi Valore di ritiro / Spese Ripristino
   del wizard valutazioni): da flex-item deve potersi stringere.
   L'hint .form-text scende sotto su riga piena; il suffisso eredita
   superficie e altezza del campo, radius raccordati in giunzione. --- */
body .input-group > .draive-floating {
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
}
body .input-group > .draive-floating .draive-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body .input-group > .draive-floating + .input-group-append {
  display: flex;
  margin-left: 0;
}
body .input-group > .draive-floating + .input-group-append .input-group-txt {
  display: flex;
  align-items: center;
  height: var(--draive-control-height);
  padding: 0 14px;
  margin: 0;
  background: var(--draive-field-bg);
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 0 var(--draive-radius) var(--draive-radius) 0;
  color: var(--text-muted);
}
body .form-group.input-group > .form-text {
  flex-basis: 100%;
}

/* ------------------------------------------------------------
   Superficie dei campi — arrivata da draive.core.css il 2026-08-07.
   Sta in coda al blocco FIELDS perche deve vincere sulle regole
   storiche piu su nel file, che era la ragione per cui viveva in
   un foglio caricato dopo. Qui la posizione fa lo stesso lavoro.
   ------------------------------------------------------------ */

/* ============================================================
   5bis — CAMPI DI FORM: la superficie
   Riferimento: i campi ReUI — bianchi, un bordo di 1px che dice dove
   finisce il campo, l'anello di focus come unico effetto.

   NON si tocca il meccanismo della label flottante: quello vive nel
   blocco "DRAIVE FIELDS" in coda a draive.core.css, legge solo i token e
   resta identico (riposo centrata -> flottata a 10px). Qui cambia la
   superficie sotto la label, non l'animazione sopra.

   Il blocco storico dichiara "border: 1px solid transparent", cioe' lo
   spazio del bordo era gia' riservato: basta renderlo visibile, e
   nessuna misura si sposta di un pixel.
   ============================================================ */

/* Storia di questo blocco, perche' non torni il problema.
   draive.core.css imponeva "border: 2px solid transparent !important" sui
   .form-control in sette punti diversi: serviva a riservare lo spazio
   del bordo quando il campo era un riempimento grigio senza contorno.
   Col fondo bianco quei sette punti rendevano il campo invisibile, e
   la toppa era una regola qui che riaccendeva il bordo dall'esterno.
   Il 2026-08-07 i sette punti sono stati corretti ALLA SORGENTE: ora
   dichiarano il bordo vero e questa regola serve solo alle superfici
   che non sono ne' .form-control ne' .draive-control. */
/* UNA regola per tutte le superfici di campo del prodotto.

   Nel progetto ci sono 14 dichiarazioni "border: 1px solid transparent"
   sparse: erano tutte corrette finche' il campo era un riempimento
   grigio, perche' a farlo vedere era il fondo. Col fondo bianco il
   campo sparisce, e sparisce in 14 posti diversi.

   L'elenco qui sotto non e' ridondanza: ogni riga serve a superare una
   specificita' precisa. In particolare #generalSearch, la ricerca delle
   liste, ha una regola con l'id — (1,1,0) — che batte qualunque
   selettore di sole classi, per quanto lungo. Senza l'id qui, quel
   campo resta invisibile: misurato. */
/* Proprieta' SEPARATE, non la scorciatoia "border:". Con la
   scorciatoia basta che uno dei tre valori non si risolva perche'
   l'intera dichiarazione decada e il bordo sparisca del tutto; con le
   longhand un guasto ne perde una sola. Su una regola che deve reggere
   in quattordici contesti diversi vale la prudenza. */
/* Restano solo le superfici che NON sono .form-control ne
   .draive-control, e che quindi le regole base non raggiungono:
   il trigger di bootstrap-select e la ricerca della dual-listbox.
   Tutto il resto adesso ha il bordo dichiarato alla sua origine. */
body .kt-inbox__aside .bootstrap-select > .dropdown-toggle {
  background-color: var(--draive-field-bg) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--draive-field-border) !important;
  border-radius: var(--draive-radius) !important;
}

/* --- Select2 -----------------------------------------------------
   Trattato a parte e con un gradino di specificita' in piu': il
   contenitore reale porta sia .select2 sia .select2-container--default,
   quindi ".select2.select2-container--default" e' (0,4,1) invece di
   (0,3,1). Non e' un trucco: quelle classi ci sono davvero, e il
   gradino serve a stare sopra a qualunque regola di riposo scritta
   nella skin storica.
   Conseguenza da tenere a mente: alzando il riposo bisogna rialzare
   anche gli stati, altrimenti il riposo si mangia aperto e fuoco. Sono
   subito qui sotto, nello stesso ordine di sempre: hover, poi fuoco. */
body .draive-floating .select2.select2-container--default .select2-selection--single,
body .draive-floating .select2.select2-container--default .select2-selection--multiple,
body .kt-inbox__aside .select2.select2-container--default .select2-selection--single {
  background-color: var(--draive-field-bg) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--draive-field-border) !important;
  border-radius: var(--draive-radius) !important;
}

/* Hover: si sente sul bordo. Col campo bianco non c'e' fondo da
   schiarire, che era l'affordance di prima. */
body .draive-floating .draive-control:hover:not(:focus):not(:disabled):not([readonly]),
body .draive-floating #generalSearch:hover:not(:focus),
body .kt-inbox__aside .form-control:hover:not(:focus),
body .draive-floating .select2.select2-container--default:hover .select2-selection--single,
body .kt-inbox__aside .select2.select2-container--default:hover .select2-selection--single,
body .kt-inbox__aside .bootstrap-select:hover > .dropdown-toggle {
  border-color: var(--draive-field-border-hover) !important;
}

/* Fuoco e aperto: bordo nero. Tre forme perche' select2 segnala lo
   stato in tre modi diversi a seconda di come e' stato aperto. */
body .draive-floating #generalSearch:focus,
body .kt-inbox__aside .form-control:focus,
body .draive-floating.is-open .select2.select2-container--default .select2-selection--single,
body .draive-floating .select2.select2-container--default.select2-container--open .select2-selection--single,
body .draive-floating .select2.select2-container--default.select2-container--focus .select2-selection--single,
body .kt-inbox__aside .select2.select2-container--default.select2-container--open .select2-selection--single,
body .kt-inbox__aside .select2.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--draive-border-focus) !important;
}

/* L'hover si sente sul bordo, non piu' schiarendo il fondo: con il
   campo bianco non ci sarebbe nulla da schiarire. */
body .draive-floating .draive-control:hover:not(:focus):not(:disabled):not([readonly]) {
  border-color: var(--draive-field-border-hover) !important;
}

/* Focus ed errore erano gia' la forma giusta e coincidono con ReUI:
   qui si limitano a riconquistare il bordo dopo l'!important sopra. */
body .draive-floating .draive-control:focus {
  border-color: var(--draive-border-focus) !important;
}

body .draive-floating .draive-control.is-invalid,
body .draive-floating .draive-control[aria-invalid="true"] {
  border-color: var(--draive-border-error) !important;
}

/* Campo disabilitato: si vede che c'e', si vede che non si tocca.
   !important perche' la regola di base qui sopra impone il fondo
   bianco con !important: senza, il disabilitato resta bianco e si
   distingue solo per l'opacita'. Misurato. */
body .draive-floating .draive-control:disabled,
body .draive-floating .draive-control[readonly] {
  background-color: var(--surface-alt) !important;
  border-color: var(--hairline) !important;
}


/* --- Icona dentro il campo ---------------------------------------
   Il pattern "input con icona" di ReUI. Nel progetto non esisteva.

   Markup:
     <div class="draive-floating draive-floating--icon">
       <input class="draive-control" type="email" placeholder=" ">
       <label class="draive-label">Email</label>
       <i class="ki-outline ki-sms draive-field-icon"></i>
     </div>

   L'icona sta a destra, e' muta e non intercetta il puntatore: e' un
   indizio sul tipo di dato, non un comando. Se un giorno serve
   cliccabile (mostra password, apri calendario) va data una classe
   propria e restituiti gli eventi, non tolto pointer-events da qui. */
body .draive-floating .draive-field-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(18px * var(--dv-fs,1));
  line-height: 1;
  color: var(--ink-muted);
  pointer-events: none;
  z-index: 2;
}

/* Il valore non deve finire sotto l'icona. Specificita' (0,3,1) per
   battere il padding del blocco DRAIVE FIELDS, che e' !important. */
body .draive-floating.draive-floating--icon .draive-control {
  padding-right: 46px !important;
}

/* Con il campo a fuoco l'icona si scurisce come la label */
body .draive-floating .draive-control:focus ~ .draive-field-icon {
  color: var(--ink);
}

/* ============================================================
   DRAIVE CHECKS — checkbox e radio, ricetta ReUI.

   QUESTO E' L'UNICO POSTO IN CUI UN CHECKBOX VIENE DISEGNATO.
   Dal 2026-08-09 nessun foglio di modulo ne disegna piu' uno: il box
   del modal marca/modelli dello showroom (.srm-check__box, 22px con
   una keenicon dentro) e l'accent-color del menu multi-selezione di
   officina/autocortesia sono stati portati qui e cancellati la'.
   Erano tre checkbox diversi nella stessa piattaforma, e nessuno dei
   due fogli sapeva dell'altro.

   La ricetta e' quella del registry ReUI (style-nova.css, .cn-checkbox
   e .cn-radio-group-item):

     size-4                16px — non 20, la misura scende
     rounded-[4px]         --radius-xs
     border                1px, colore "input": lo stesso bordo dei campi
     data-checked          bg-primary + border-primary, spunta in
                           primary-foreground
     indicatore            icona lucide "check" a 14px (size-3.5)
     focus-visible         border-ring + ring-ring/50 a 3px
     aria-invalid          border-destructive + ring-destructive/20;
                           se e' anche checked il bordo torna primary,
                           perche' il riempimento nero dice gia' tutto
     disabled              opacity-50

   Come i nomi ReUI si leggono nei token di questo prodotto:
     border-input       -> --draive-field-border  (lo stesso dei campi)
     bg-primary         -> --draive-check-checked = --action, il nero
                           dei bottoni primari
     primary-foreground -> il bianco dentro le due icone qui sotto
     ring-[3px]         -> --btn-ring
     destructive        -> --draive-border-error / --ring-error

   Una deviazione voluta: ReUI non ha :hover sul checkbox, DRAIVE si'.
   Qui i campi scuriscono il bordo al passaggio del mouse, e un
   checkbox immobile in mezzo a campi che rispondono si legge come
   disabilitato. L'hover usa lo stesso token dei campi.

   Non toccati di proposito:
   - i radio "colore" (.kt-radio.color, color picker veicoli): la loro
     semantica e' cromatica, non di stato;
   - gli switch (.kt-switch): altro componente, in coda a questo blocco;
   - le pillole e gli swatch dei filtri (.sr-pill, .sr-color, input.tags)
     e gli input nascosti che li pilotano: hanno un checkbox nel markup
     ma non ne mostrano uno.
   ============================================================ */

/* Le due icone. Sono i glifi lucide usati da ReUI ("check" e "minus"),
   in bianco perche' vivono solo sopra il riempimento nero del checked.
   Stanno qui e non in draive.tokens.css: sono un asset, non un valore
   di progetto. Se un giorno --draive-check-checked diventasse chiaro,
   e' qui che va cambiato anche il tratto. */
:root {
  --draive-check-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --draive-check-icon-minus:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --draive-check-icon-size: 14px;   /* size-3.5 */
}

/* --- 1. La scatola a riposo ---------------------------------------
   Quattro famiglie, una sola forma: il <span> di Metronic (363 punti
   nel prodotto), il radio, il box disegnato dello showroom e ogni
   <input type="checkbox"> nativo che non e' altro (vedi l'elenco di
   esclusioni sotto).                                                 */
body .kt-checkbox > span,
body .kt-radio:not(.color) > span,
body .srm-check__box {
  box-sizing: border-box !important;
  width: var(--draive-check-size) !important;
  height: var(--draive-check-size) !important;
  border: 1px solid var(--draive-field-border) !important;
  background: var(--canvas) !important;
  transition: var(--draive-transition);
  transition-property: background-color, border-color, box-shadow;
}
body .kt-checkbox > span,
body .srm-check__box { border-radius: var(--draive-check-radius) !important; }
body .kt-radio:not(.color) > span { border-radius: 50% !important; }

/* Il box scende da 18 a 16: "top: 1px" del bundle lo alzerebbe di un
   pixel sulla prima riga di testo. 2px riporta il centro ottico dov'era
   (1 + 18/2 = 2 + 16/2 = 10) e nessuna etichetta si sposta. */
body .kt-checkbox > span,
body .kt-radio:not(.color) > span { top: 2px !important; }

/* Lo showroom lo usa dentro una riga flex e ci mette una keenicon
   dentro: la scatola qui e' un contenitore posizionato e vuoto, la
   spunta la disegna ::after come per tutti gli altri. */
body .srm-check__box {
  position: relative;
  flex: 0 0 auto;
}
body .srm-check__box > i { display: none !important; }

/* Metronic ha una variante "bold" a 2px con !important e una
   specificita' piu' alta di quella qui sopra: senza questa riga
   resterebbe l'unico checkbox del prodotto col bordo doppio. */
body .kt-checkbox.kt-checkbox--bold > span,
body .kt-radio.kt-radio--bold:not(.color) > span { border-width: 1px !important; }

/* La variante "single" (checkbox da sola in una cella di tabella) e'
   una label alta quanto il box: se il box scende a 16 e la label resta
   alla 18 del bundle, la riga della tabella si alza di 2px senza motivo.
   La larghezza segue solo dove puo': in una cella di lista il padding
   sinistro e' azzerato e la label vale davvero 16px; fuori, il
   padding-left di 30px di .kt-checkbox con box-sizing:border-box vince
   sulla dichiarazione — misurato, ed era cosi' anche a 18px. */
body .kt-checkbox.kt-checkbox--single {
  width: var(--draive-check-size);
  height: var(--draive-check-size);
}
body .kt-checkbox.kt-checkbox--single > span { top: 0 !important; }

/* --- 2. Hover ------------------------------------------------------ */
body .kt-checkbox:hover > input:not([disabled]) ~ span,
body .kt-radio:not(.color):hover > input:not([disabled]) ~ span,
body .srm-check:hover input:not([disabled]) + .srm-check__box {
  border-color: var(--draive-field-border-hover) !important;
}

/* --- 3. Selezionato: riempimento nero, bordo nero ------------------ */
body .kt-checkbox > input:checked ~ span,
body .kt-checkbox > input:indeterminate ~ span,
body .kt-radio:not(.color) > input:checked ~ span,
body .srm-check input:checked + .srm-check__box,
body .srm-check input:indeterminate + .srm-check__box {
  background: var(--draive-check-checked) !important;
  border-color: var(--draive-check-checked) !important;
}

/* --- 4. L'indicatore ------------------------------------------------
   Il bundle disegna la spunta come una "L" ruotata di 45 gradi fatta
   di bordi (width 5, height 10, border-width 0 2px 2px 0 !important).
   Qui diventa il glifo lucide, cioe' la stessa forma che si vede su
   reui.io: azzerare bordo, misure e rotazione e' obbligatorio, perche'
   la regola del bundle e' !important.                                */
body .kt-checkbox > span::after,
body .srm-check__box::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  background: var(--draive-check-icon) center center / var(--draive-check-icon-size) var(--draive-check-icon-size) no-repeat !important;
  opacity: 0;
  transition: opacity var(--motion-base);
}
body .kt-checkbox > input:checked ~ span::after,
body .srm-check input:checked + .srm-check__box::after { opacity: 1; }

/* Indeterminato: stesso riempimento, trattino al posto della spunta.
   Lo usa il capostipite dei gruppi di modelli nello showroom quando
   solo alcune varianti sono selezionate. */
body .kt-checkbox > input:indeterminate ~ span::after,
body .srm-check input:indeterminate + .srm-check__box::after {
  background-image: var(--draive-check-icon-minus) !important;
  opacity: 1;
}

/* Radio: pallino bianco di 8px (size-2 di ReUI), non un glifo.
   border: 0 e' obbligatorio quanto le misure: il bundle disegna il
   pallino delle varianti colorate come BORDO (`.kt-radio--brand >
   span:after { border: solid #125ef2 }`, width implicita 3px) e senza
   l'azzeramento il punto bianco esce con un anello blu intorno — sul
   riempimento nero del checked si vede benissimo. Stessa ragione del
   border: 0 gia' presente nella regola del checkbox qui sopra. */
body .kt-radio:not(.color) > span::after {
  background: #ffffff !important;
  border: 0 !important;
  width: 8px !important;
  height: 8px !important;
  top: 50% !important;
  left: 50% !important;
  margin: -4px 0 0 -4px !important;
}

/* --- 5. Focus da tastiera ------------------------------------------
   L'unico indicatore che resta dopo aver tolto le ombre del tema.
   Il bordo passa al nero del focus dei campi e l'anello e' quello dei
   bottoni: 3px, come il ring-[3px] di ReUI. */
body .kt-checkbox > input:focus-visible ~ span,
body .kt-radio:not(.color) > input:focus-visible ~ span,
body .srm-check input:focus-visible + .srm-check__box {
  border-color: var(--draive-border-focus) !important;
  box-shadow: var(--btn-ring) !important;
}

/* --- 6. Errore ------------------------------------------------------
   Un checkbox obbligatorio non spuntato. Da checked il bordo torna
   nero: il riempimento dice gia' che il valore c'e', un bordo rosso
   sopra un box pieno si legge come "sbagliato adesso". */
body .kt-checkbox > input.is-invalid ~ span,
body .kt-checkbox > input[aria-invalid="true"] ~ span,
body .kt-radio:not(.color) > input.is-invalid ~ span,
body .kt-radio:not(.color) > input[aria-invalid="true"] ~ span {
  border-color: var(--draive-border-error) !important;
  box-shadow: var(--ring-error) !important;
}
body .kt-checkbox > input.is-invalid:checked ~ span,
body .kt-checkbox > input[aria-invalid="true"]:checked ~ span,
body .kt-radio:not(.color) > input.is-invalid:checked ~ span,
body .kt-radio:not(.color) > input[aria-invalid="true"]:checked ~ span {
  border-color: var(--draive-check-checked) !important;
}

/* --- 7. Disabilitato ------------------------------------------------ */
body .kt-checkbox > input:disabled ~ span,
body .kt-radio:not(.color) > input:disabled ~ span,
body .srm-check input:disabled + .srm-check__box {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

/* --- 8. Datatable ---------------------------------------------------
   La colonna di spunta delle liste usa .kt-checkbox--solid, che nel
   bundle vale "fondo bianco, bordo #b5b5b5 !important" e da selezionata
   "fondo #b5b5b5" — un grigio che non appartiene piu' a nessuna parte
   del prodotto. La sua specificita' (sei classi) batte il blocco qui
   sopra: va spento con la stessa lunghezza, non con un !important in
   piu' altrove. La copia di quella regola che stava a meta' di questo
   file e' stata cancellata il 2026-08-09. */
body .kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell .kt-checkbox.kt-checkbox--solid > span,
body .kt-datatable > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell .kt-checkbox.kt-checkbox--solid > span,
body .kt-datatable > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell .kt-checkbox.kt-checkbox--solid > span {
  background: var(--canvas) !important;
  border: 1px solid var(--draive-field-border) !important;
}
body .kt-datatable > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell .kt-checkbox.kt-checkbox--solid > input:checked ~ span,
body .kt-datatable > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell .kt-checkbox.kt-checkbox--solid > input:checked ~ span,
body .kt-datatable > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell .kt-checkbox.kt-checkbox--solid > input:checked ~ span {
  background: var(--draive-check-checked) !important;
  border-color: var(--draive-check-checked) !important;
}

/* --- 9. Checkbox nativi --------------------------------------------
   Quelli senza involucro: il menu multi-selezione di autocortesia, le
   caselle "mostra/nascondi box" del cruscotto, e tutto cio' che verra'
   scritto domani. Stessa forma delle altre, disegnata sull'input.

   Senza !important, di proposito: draive.core.css era ricaricato per ultimo (fino al 23/10/2026)
   da bottomScripts.php, quindi a parita' di specificita' vince gia'.
   Un modulo che ha una ragione vera per un checkbox diverso puo' ancora
   dirla alzando la specificita', che e' la regola di convivenza dei
   fogli di questo prodotto.

   L'elenco di esclusioni non e' difensivo, e' l'inventario di cio' che
   nel markup e' un checkbox ma sullo schermo non lo e': gli switch, le
   pillole e gli swatch dei filtri (input nascosto + label a pillola),
   gli input che pilotano un box disegnato altrove. Un nuovo caso del
   genere si dichiara con .draive-check-off invece di allungare qui.

   Nota: la lista dentro :not() e' Selectors 4 (Chrome 88, Firefox 84,
   Safari 16.4). Dove non e' supportata la regola cade tutta e questi
   pochi input restano quelli del browser: un peggioramento visibile,
   mai un layout rotto.                                               */
body input[type="checkbox"]:not(
  .kt-switch, .kt-switch input,
  .kt-checkbox > input, .kt-radio > input, .srm-check > input,
  .tags, .sr-pill__input, .sr-color__input,
  .biz-card__switch-input, .showroom-search-card__notify input,
  .draive-check-off
) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: text-bottom;
  width: var(--draive-check-size);
  height: var(--draive-check-size);
  padding: 0;
  border: 1px solid var(--draive-field-border);
  border-radius: var(--draive-check-radius);
  background: var(--canvas) center center / var(--draive-check-icon-size) var(--draive-check-icon-size) no-repeat;
  cursor: pointer;
  transition: var(--draive-transition);
  transition-property: background-color, border-color, box-shadow;
}
body input[type="checkbox"]:not(
  .kt-switch, .kt-switch input,
  .kt-checkbox > input, .kt-radio > input, .srm-check > input,
  .tags, .sr-pill__input, .sr-color__input,
  .biz-card__switch-input, .showroom-search-card__notify input,
  .draive-check-off
):hover:not(:disabled) { border-color: var(--draive-field-border-hover); }

body input[type="checkbox"]:not(
  .kt-switch, .kt-switch input,
  .kt-checkbox > input, .kt-radio > input, .srm-check > input,
  .tags, .sr-pill__input, .sr-color__input,
  .biz-card__switch-input, .showroom-search-card__notify input,
  .draive-check-off
):checked {
  background-color: var(--draive-check-checked);
  background-image: var(--draive-check-icon);
  border-color: var(--draive-check-checked);
}
body input[type="checkbox"]:not(
  .kt-switch, .kt-switch input,
  .kt-checkbox > input, .kt-radio > input, .srm-check > input,
  .tags, .sr-pill__input, .sr-color__input,
  .biz-card__switch-input, .showroom-search-card__notify input,
  .draive-check-off
):indeterminate {
  background-color: var(--draive-check-checked);
  background-image: var(--draive-check-icon-minus);
  border-color: var(--draive-check-checked);
}
body input[type="checkbox"]:not(
  .kt-switch, .kt-switch input,
  .kt-checkbox > input, .kt-radio > input, .srm-check > input,
  .tags, .sr-pill__input, .sr-color__input,
  .biz-card__switch-input, .showroom-search-card__notify input,
  .draive-check-off
):focus-visible {
  outline: none;
  border-color: var(--draive-border-focus);
  box-shadow: var(--btn-ring);
}
body input[type="checkbox"]:not(
  .kt-switch, .kt-switch input,
  .kt-checkbox > input, .kt-radio > input, .srm-check > input,
  .tags, .sr-pill__input, .sr-color__input,
  .biz-card__switch-input, .showroom-search-card__notify input,
  .draive-check-off
):disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* --- 10. Switch: pill unica, checked nero (sostituisce l'emerald) ---
   Non e' un checkbox: e' un altro componente che nel markup usa lo
   stesso input. Sta qui perche' legge lo stesso token del nero. */
body input.kt-switch:checked,
body .kt-switch input[type="checkbox"]:checked {
  background: var(--draive-check-checked) !important;
  border-color: var(--draive-check-checked) !important;
}
body input.kt-switch:focus-visible,
body .kt-switch input[type="checkbox"]:focus-visible {
  box-shadow: var(--btn-ring) !important;
}

/* ============================================================
   DRAIVE ALERT — una sola forma per TUTTI gli avvisi (stile ReUI).
   Copre i toast SweetAlert2 (.draive-toast, ~50 call-site) e gli alert
   Bootstrap/Metronic ancorati alla pagina (.alert, blocco successivo).

   Ricetta ReUI (alert.tsx, registry ufficiale):
     bordo 1px al 30% dell'accento, fondo al 4%, icona a TRATTO 16px
     nell'accento pieno, rounded-lg, px-3 py-2.5, testo 14px, titolo 500
     "tracking-tight", messaggio in grigio. Niente fascia laterale,
     niente cerchi disegnati, niente riempimenti pieni.

   L'accento e' il token semantico DRAIVE profondo — lo stesso che colora
   i badge — cosi' un avviso e uno stato dicono rosso allo stesso modo.
   Le due tinte si ricavano da li' con color-mix: UNA manopola per
   variante. La riga prima di ogni color-mix e' il ripiego per i browser
   che non ce l'hanno (degrada a neutro pulito, mai a rotto).

   Le classi .draive-toast / .draive-toast--<type> e l'icona le mette
   window.DraiveToast (assets/js/draive-toast.js). draive.core.css e' ricaricato
   per ultimo: da qui si vince sia su style.bundle sia sui CSS di modulo.
   ============================================================ */

body .swal2-popup.draive-toast {
  --draive-alert-accent: var(--ink, #111827);
  --draive-alert-border: var(--grey-soft, #d5d9e2);
  --draive-alert-bg:     var(--white, #fff);
}
body .swal2-popup.draive-toast--success { --draive-alert-accent: var(--success-text, #1a7f45); }
body .swal2-popup.draive-toast--error   { --draive-alert-accent: var(--danger-text,  #b0134e); }
body .swal2-popup.draive-toast--warning { --draive-alert-accent: var(--warning-text, #8a6100); }
body .swal2-popup.draive-toast--info    { --draive-alert-accent: var(--info-text,    #4a5fd0); }

body .swal2-popup.draive-toast--success,
body .swal2-popup.draive-toast--error,
body .swal2-popup.draive-toast--warning,
body .swal2-popup.draive-toast--info {
  --draive-alert-border: color-mix(in srgb, var(--draive-alert-accent) 30%, transparent);
  --draive-alert-bg:     color-mix(in srgb, var(--draive-alert-accent) 4%, var(--white, #fff));
}

/* La card. swal2-toast mette il popup in flex ROW (titolo e messaggio
   affiancati): serve la griglia icona | colonna testi, con l'header
   sciolto via display:contents perche' il titolo sta DENTRO l'header e
   il messaggio fuori. Colonna icona 12px + gap 10px: sono le misure di
   ReUI, l'icona da 16px sborda di proposito dentro il gap. */
body .swal2-popup.draive-toast {
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-card, 10px) !important;
  background: var(--draive-alert-bg) !important;
  border: 1px solid var(--draive-alert-border) !important;
  /* L'alert ReUI e' piatto; questo pero' galleggia sopra la pagina e una
     velatura d'ombra gli serve per staccarsi. Tenuta al minimo. */
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06) !important;
  display: grid !important;
  grid-template-columns: 12px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center !important;
  overflow: hidden;
}
/* Toast senza icona: la variante `default` di ReUI collassa la colonna. */
body .swal2-popup.draive-toast--noicon {
  grid-template-columns: 0 1fr;
  column-gap: 0;
}
body .swal2-popup.draive-toast .swal2-header {
  display: contents !important;
}

/* Icona a tratto. Con titolo + messaggio ReUI allinea in alto e la
   abbassa di 2px; da sola resta centrata sulla riga. */
body .swal2-popup.draive-toast .draive-alert__icon {
  grid-column: 1;
  grid-row: 1;
  width: 16px;
  height: 16px;
  color: var(--draive-alert-accent);
  overflow: visible;
}
body .swal2-popup.draive-toast--stacked {
  align-items: start !important;
}
body .swal2-popup.draive-toast--stacked .draive-alert__icon {
  transform: translateY(2px);
}
/* Le icone disegnate da SweetAlert2 (cerchi, anelli, spunte animate) non
   c'entrano piu' nulla: draive-toast.js le nasconde, qui il rinforzo. */
body .swal2-popup.draive-toast .swal2-icon {
  display: none !important;
}

/* Testi: 14px tutti e due (il `text-sm` di ReUI). Il titolo NON e'
   clampato a una riga come in ReUI — li' e' un'etichetta corta, qui e'
   spesso il messaggio intero e troncarlo mangerebbe contenuto. */
body .swal2-popup.draive-toast .swal2-title {
  grid-column: 2;
  grid-row: 1;
  font-size: calc(14px * var(--dv-fs,1)) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1.35 !important;
  color: var(--ink, #111827) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body .swal2-popup.draive-toast .swal2-content {
  grid-column: 2;
  grid-row: 2;
  font-size: calc(14px * var(--dv-fs,1)) !important;
  line-height: 1.45 !important;
  color: var(--ink-muted, #6b7280) !important;
  text-align: left !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Barra del tempo a fondo box — l'unico ornamento tenuto. La disegna
   draive-toast.js (SweetAlert2 v8.19 non fa la sua) e il pause-on-hover
   ferma insieme il timer e questa animazione. */
body .swal2-popup.draive-toast .draive-toast__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--draive-alert-accent) 12%, transparent);
  overflow: hidden;
}
body .swal2-popup.draive-toast .draive-toast__progress-bar {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--draive-alert-accent);
}
@keyframes draiveToastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Container in alto a destra, sotto la topbar */
body.swal2-toast-shown .swal2-container.swal2-top-end {
  top: 76px !important;
  right: 20px !important;
}

/* ============================================================
   DRAIVE ALERT — versione ancorata alla pagina (.alert Bootstrap/Metronic)
   Stessa ricetta ReUI del toast, senza barra del tempo: questi non si
   chiudono da soli. Nessun call-site toccato: si vestono le classi che
   ci sono gia' — .alert-{tipo} (Metronic li riempiva di colore pieno,
   testo bianco) e .alert-solid-{tipo}.
   ============================================================ */

body .alert {
  --draive-alert-accent: var(--ink, #111827);
  --draive-alert-border: var(--grey-soft, #d5d9e2);
  --draive-alert-bg:     var(--white, #fff);
}
body .alert.alert-success, body .alert.alert-solid-success, body .alert.alert-outline-success {
  --draive-alert-accent: var(--success-text, #1a7f45);
  --draive-alert-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E");
}
body .alert.alert-danger,  body .alert.alert-solid-danger,  body .alert.alert-outline-danger,
body .alert.alert-error,   body .alert.alert-solid-error {
  --draive-alert-accent: var(--danger-text, #b0134e);
  --draive-alert-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%208v4'/%3E%3Cpath%20d='M12%2016h.01'/%3E%3C/svg%3E");
}
body .alert.alert-warning, body .alert.alert-solid-warning, body .alert.alert-outline-warning {
  --draive-alert-accent: var(--warning-text, #8a6100);
  --draive-alert-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E");
}
body .alert.alert-info,    body .alert.alert-solid-info,    body .alert.alert-outline-info,
body .alert.alert-primary, body .alert.alert-solid-primary, body .alert.alert-outline-primary {
  --draive-alert-accent: var(--info-text, #4a5fd0);
  --draive-alert-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%2016v-4'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E");
}

body .alert.alert-success, body .alert.alert-solid-success, body .alert.alert-outline-success,
body .alert.alert-danger,  body .alert.alert-solid-danger,  body .alert.alert-outline-danger,
body .alert.alert-error,   body .alert.alert-solid-error,
body .alert.alert-warning, body .alert.alert-solid-warning, body .alert.alert-outline-warning,
body .alert.alert-info,    body .alert.alert-solid-info,    body .alert.alert-outline-info,
body .alert.alert-primary, body .alert.alert-solid-primary, body .alert.alert-outline-primary {
  --draive-alert-border: color-mix(in srgb, var(--draive-alert-accent) 30%, transparent);
  --draive-alert-bg:     color-mix(in srgb, var(--draive-alert-accent) 4%, var(--white, #fff));
}

/* Impaginazione a FLEX, non a griglia come il toast: qui il contenuto non
   e' sempre incapsulato — meta' dei call-site scrivono il messaggio come
   testo nudo dentro .alert. In griglia ogni pezzo di testo anonimo si
   prenderebbe una cella sua (finendo nella colonna dell'icona); in flex i
   pezzi contigui diventano un solo item e il messaggio resta intero.
   Il gap di 6px riproduce la misura di ReUI: icona 16px, testo a 22px. */
body .alert {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  margin: 12px 0;
  border-radius: var(--radius-card, 10px);
  font-size: calc(14px * var(--dv-fs,1));
  line-height: 1.45;
  box-shadow: none;
  /* Il colore va marcato: Metronic dipinge i pieni su `.alert.alert-danger`
     (due classi) e i testi su `.alert.alert-danger .alert-text` (tre), che
     battono per specificita' qualunque regola di base ragionevole. Con la
     variante dentro una variabile basta UNA dichiarazione per tutti. */
  border: 1px solid var(--draive-alert-border) !important;
  background: var(--draive-alert-bg) !important;
  color: var(--ink-muted, #6b7280) !important;
}
/* Icona per gli alert scritti a mano nelle pagine, che nel markup non ne
   hanno nessuna: nella grammatica ReUI l'avviso e' guidato dal glifo, e
   senza si leggerebbe come un riquadro qualsiasi. Stessi tratti lucide
   del toast, qui come maschera cosi' prendono l'accento della variante.
   Solo dove manca gia': `:has(> .alert-icon)` guarda il FIGLIO, non il
   modificatore omonimo sul contenitore. Se :has() non c'e', il selettore
   decade e si torna semplicemente agli avvisi senza icona.

   Le varianti sono elencate a una a una di proposito: fuori da queste il
   glifo non esiste e la maschera vuota lascerebbe un quadrato pieno di
   colore. `[class*="alert-"]` non serve — lo passerebbero anche
   alert-dismissible, alert-bold e alert-border-color. */
body .alert.alert-success:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-solid-success:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-outline-success:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-danger:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-solid-danger:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-outline-danger:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-error:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-solid-error:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-warning:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-solid-warning:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-outline-warning:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-info:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-solid-info:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-outline-info:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-primary:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-solid-primary:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before,
body .alert.alert-outline-primary:not(:has(> .alert-icon)):not(:has(> .draive-alert__icon))::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-color: var(--draive-alert-accent);
  -webkit-mask: var(--draive-alert-glyph) center / 16px 16px no-repeat;
  mask: var(--draive-alert-glyph) center / 16px 16px no-repeat;
}

/* `.alert-icon` e' due cose in Metronic: elemento figlio (l'icona vera) e
   modificatore sul contenitore. Qui conta solo il figlio. */
body .alert > .alert-icon,
body .alert > .draive-alert__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0;
  margin-top: 2px;
  color: var(--draive-alert-accent);
  overflow: visible;
}
body .alert > .alert-icon > .draive-alert__icon,
body .alert > .draive-alert__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* I keenicon rimasti nel markup di pagina: stessa taglia, stesso colore. */
body .alert > .alert-icon > i {
  font-size: calc(16px * var(--dv-fs,1)) !important;
  line-height: 1;
  color: var(--draive-alert-accent) !important;
}
body .alert > .alert-text,
body .alert > .message {
  flex: 1 1 auto;
  align-self: center;
  color: inherit !important;
}
/* ReUI da' al titolo il colore pieno e il peso 500; nel markup di pagina
   il titolo e' lo <strong> in testa al messaggio. */
body .alert > .alert-text > strong:first-child,
body .alert > .message > strong:first-child {
  display: block;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink, #111827);
}
body .alert > .alert-text > strong:first-child + br {
  display: none;
}
/* Chiusura: bottone fantasma, non piu' la "x" grossa di Bootstrap.
   `body button` piu' su nel file mette padding 0 15px, margin 0 2px e
   radius 8px con !important su OGNI bottone: qui va rintuzzato voce per
   voce, altrimenti la "x" si porta dietro 30px di fianchi. */
body .alert > .alert-close,
body .alert > .close {
  flex: 0 0 auto;
  float: none;
  /* Bootstrap incolla `.alert-dismissible .close` in absolute nell'angolo:
     va rimesso nel flusso, se no scavalca il bordo arrotondato. */
  position: relative;
  top: auto;
  right: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--ink-muted, #6b7280);
  text-shadow: none;
  font-size: calc(16px * var(--dv-fs,1)) !important;
  font-weight: 400 !important;
  line-height: 1;
  opacity: .5;
  transition: opacity .15s ease;
}
body .alert > .alert-close:hover,
body .alert > .close:hover {
  opacity: 1;
}
body .alert > .alert-close .close {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit;
  text-shadow: none;
  font-size: inherit !important;
  font-weight: 400 !important;
  opacity: 1;
}
/* Metronic colora la crocetta per variante (`.alert.alert-warning
   .alert-close i`, tre classi): qui segue il grigio del contenitore. */
body .alert .alert-close i,
body .alert > .close i {
  font-size: calc(14px * var(--dv-fs,1)) !important;
  color: inherit !important;
}

/* ============================================================
   Draive UI — FILTRI LISTA: SELECT2 FLOATING + DROPDOWN LAYER
   (authoritative, centralizzato 2026-07-05)
   Era duplicato identico in pages/aziende, pages/profilo e
   pages/showroom (custom.modulo.css). Due parti:
   1) layer del dropdown Select2 appeso a <body>: sopra i pannelli
      (z 3100) e la banda header; attivo solo quando --open, per
      non interferire con i Select2 chiusi.
   2) skin "draive-floating" dei Select2: casella come i campi
      .draive-control, label flottante, chevron scuro, clear (X) a
      sinistra del chevron. Le regole sugli elementi .select2-*
      dentro .draive-floating matchano solo dove Select2 esiste;
      le regole sulla LABEL sono guardate con :has(.select2-container)
      per non toccare i campi nativi (DRAIVE FIELDS evita :valid sui
      select nativi di proposito). Stati is-open/has-value gestiti
      via JS (listaAziende.js / listaUtenti.js) con fallback :has().
   ============================================================ */

/* --- 1) Dropdown layer sopra a tutto ---------------------------- */
body > .select2-container.select2-container--open {
  z-index: 100000 !important;
}
body > .select2-container.select2-container--open .select2-dropdown {
  z-index: 100000 !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  background: #fff !important;
}
body > .select2-container.select2-container--open .select2-results,
body > .select2-container.select2-container--open .select2-results__options {
  display: block !important;
  visibility: visible !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}
body > .select2-container.select2-container--open .select2-results__option {
  display: list-item !important;
  visibility: visible !important;
  color: #111827 !important;
  background: #fff;
}
body > .select2-container.select2-container--open .select2-results__option--highlighted[aria-selected] {
  background: rgba(59,130,246,.10) !important;
}

/* --- 2) Skin floating dei Select2 ------------------------------- */
/* Container: display block + height fissa identica a .draive-control */
body .draive-floating .select2-container--default {
  width: 100% !important;
  display: block !important;
  height: var(--draive-control-height) !important;
}

/* La "casella" visibile (selection box) */
body .draive-floating .select2-container--default .select2-selection--single {
  background: var(--draive-field-bg);
  border: 1px solid var(--draive-field-border) !important;
  border-radius: var(--draive-radius);
  height: var(--draive-control-height) !important;
  min-height: var(--draive-control-height) !important;
  padding: 0 16px; /* verticale azzerato: valore centrato, la label flotta sopra */
  display: flex;
  align-items: center;
  outline: none;
  transition: background-color .15s ease, border-color .15s ease;
}

/* Stato focused/open: bordo nero, background bianco */
body .draive-floating.is-open .select2-container--default .select2-selection--single,
body .draive-floating .select2-container--default.select2-container--open .select2-selection--single,
body .draive-floating .select2-container--default.select2-container--focus .select2-selection--single {
  background: var(--draive-field-bg-focus);
  border-color: var(--draive-border-focus) !important;
}

/* Testo del valore selezionato */
body .draive-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #111827 !important;
  font-size: calc(13.33px * var(--dv-fs,1)) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  padding: 15px 58px 0 0 !important; /* destra: X (clear) + chevron.
     Top 15 e non piu' 8: era calibrato sul campo da 56px, che dal
     2026-08-07 e' alto 47. Valore verificato a schermo. */
  margin: 0 !important;
  height: auto !important;
  width: 100%;
  display: block !important;   /* NON flex: il flex disattiva text-overflow:ellipsis */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder "Seleziona": invisibile a riposo (label centrata),
   visibile quando la label e' flottata (focus/open o has-value) */
body .draive-floating .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: transparent !important;
  transition: color .15s ease;
}
body .draive-floating:has(.select2-container--open) .select2-selection__placeholder,
body .draive-floating:has(.select2-container--focus) .select2-selection__placeholder,
body .draive-floating.is-open .select2-selection__placeholder,
body .draive-floating.has-value .select2-selection__placeholder {
  color: var(--draive-label-color) !important;
}

/* ============================================================
   SELECT2 — LA FRECCIA, IDENTICA A QUELLA DEI SELECT NATIVI
   ------------------------------------------------------------
   Metronic (style.bundle.css) non usa la freccia di select2: la
   sostituisce con un GLIFO DI FONT. Tre regole, da conoscere
   perche' spiegano un anno di tentativi mancati:

     .select2-selection__arrow          font-family: LineAwesome
     .select2-selection__arrow::before  content: "\f110"  (angle-down)
     .select2-selection__arrow b        display: none

   La terza e' quella che conta: fino al 2026-08-08 il chevron della
   casa era scritto proprio sul <b>, con tanto di !important. Ma il <b>
   e' nascosto da Metronic, quindi quella regola non ha MAI disegnato
   nulla. Cio' che si vedeva in tutta l'applicazione era il glifo
   LineAwesome a 12.25px: piu' stretto, piu' alto e piu' sottile del
   chevron 12x12 a spessore 2.5 usato dai select nativi e dall'icona
   del calendario. Da qui "la freccia del select non e' come le altre".

   Adesso: si spegne il glifo e si disegna l'SVG sul CONTENITORE.

   Perche' sul contenitore e non piu' sul <b>: il <b> non esiste a
   schermo e riaccenderlo sarebbe una toppa sopra una toppa. Un
   tentativo precedente sul contenitore era pero' fallito, e la ragione
   e' misurabile: Metronic gli mette top: 50% e noi height: 100%, per
   cui la scatola COMINCIA a meta' campo e sborda di 24px sotto (campo
   alto 47: scatola da 23.5 a 70.5). Il glifo sembrava centrato solo
   perche' line-height: 0 appoggia la linea di testo sul bordo alto
   della scatola. Uno sfondo, invece, si centra nella scatola vera e
   finiva mezzo fuori dal campo. Serve azzerare top e margin-top.

   GEOMETRIA, allineata al pixel con i select nativi:
     nativo    background-position: right 15px center, 12x12
               -> chevron da 15 a 27 dal bordo destro, centro a 21
     select2   contenitore largo 28 a right: 7  -> centro a 7+14 = 21
               -> chevron da 15 a 27. Identico.
   ============================================================ */
body .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  margin-top: 0 !important;
  height: 100% !important;
  width: 28px !important;
  right: 7px !important;
  background-image: var(--draive-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--draive-chevron-w) var(--draive-chevron-h) !important;
}

/* Il glifo di Metronic si spegne: resterebbe sovrapposto all'SVG. */
body .select2-container--default .select2-selection--single .select2-selection__arrow::before,
body .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: none !important;
}

/* Il <b> resta nascosto — lo nasconde Metronic e a noi non serve piu'.
   Esplicito qui perche' non dipenda da un foglio di terze parti. */
body .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

/* ============================================================
   BOOTSTRAP-SELECT — la terza famiglia di select, stessa freccia
   ------------------------------------------------------------
   .kt-selectpicker (filtri di showroom e annunci) e i selettori
   "righe per pagina" delle tabelle non sono ne' select nativi ne'
   select2: bootstrap-select nasconde il <select> e disegna un
   <button class="dropdown-toggle">. Il caret e' un ::after con un
   GLIFO DI FONT — LineAwesome per i filtri, Flaticon2 per i pager —
   inline dopo il testo, a 13.33px e opacita' .7.

   Tre conseguenze, tutte visibili: la freccia e' piu' grande delle
   altre, e' piu' chiara perche' semitrasparente, e non e' ancorata al
   bordo destro ma scorre insieme al testo, quindi cambia posizione da
   una riga all'altra.

   Qui diventa lo stesso SVG degli altri, in posizione assoluta a 15px
   dal bordo: il trigger e' gia' position: relative, serve solo
   riservargli lo spazio a destra come si fa con i select nativi.
   ============================================================ */
body .bootstrap-select > .dropdown-toggle {
  padding-right: 40px !important;
}

body .bootstrap-select > .dropdown-toggle::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
  left: auto !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  opacity: 1 !important;
  background-image: var(--draive-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--draive-chevron-w) var(--draive-chevron-h) !important;
}

/* Bottone clear (✕) — a sinistra del chevron e allineato ad esso.

   Il glifo "×" del markup si spegne con font-size: 0 e il segno lo disegna
   var(--draive-x) come sfondo: v. la spiegazione accanto alla definizione,
   in :root. Il titolo dell'elemento ("Rimuovi tutti") resta nel markup, che
   e' quello che conta per chi usa un lettore di schermo — non il carattere.

   La scatola e' 16x16 per dare un bersaglio comodo al dito, ma lo sfondo si
   ancora a DESTRA dentro di essa: cosi' allargare l'area cliccabile non
   sposta il segno. In verticale e' centrato, e la scatola e' centrata sul
   campo: da qui l'allineamento con la freccia.

   POSIZIONE (2026-08-10). Il "right" qui sotto non misurava dal bordo del
   campo: il contenitore della ✕ era .select2-selection__rendered, che
   Metronic dichiara position:relative e che finisce 16px DENTRO il bordo
   destro del campo, mentre la freccia si posiziona sul campo. Due origini
   diverse per due elementi che devono stare in coppia: il 40 scritto qui
   diventava 56 misurati, e fra ✕ e chevron restavano 29px di vuoto — il
   segno sembrava appartenere al testo invece che al gruppo dei comandi.
   Con il rendered riportato a static (regola qui sotto) le due misure
   parlano finalmente della stessa origine, e allora:
     freccia   right 15, larga 12  -> occupa 15..27 dal bordo destro
     scatola ✕ right 35, larga 16  -> occupa 35..51, segno a filo 35
   cioe' 8px netti fra i due, e nessuna sovrapposizione con la zona
   cliccabile della freccia (che comincia a 35). */
body .draive-floating .select2-container--default .select2-selection--single .select2-selection__rendered {
  position: static;
}

body .draive-floating .select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute;
  right: 35px;
  left: auto;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1067;
  width: 16px;
  height: 16px;
  font-size: 0;
  cursor: pointer;
  background-image: var(--draive-x);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: var(--draive-x-size) var(--draive-x-size);
}

/* Label sopra alla casella Select2 (z-index 1065 del container) */
body .draive-floating:has(.select2-container) > .draive-label {
  z-index: 1066 !important;
  background: transparent;
  pointer-events: none;
  color: var(--draive-label-color);
}
/* Floating in puro CSS (fallback senza JS): label in alto quando il
   select ha valore reale (required + prima opzione vuota => :valid
   solo se valorizzato) o quando il Select2 e' aperto/in focus.
   NB [required]: il fallback :valid vale SOLO per i select che
   rispettano il contratto dei filtri (required + prima opzione vuota).
   Un select di FORM (senza required, es. marca/modello del wizard
   veicoli) e' SEMPRE :valid e la label flottava anche a campo vuoto;
   per i form il floating lo danno has-value/is-open via JS. */
body .draive-floating:has(.select2-container):has(select.draive-control:valid[required]) > .draive-label,
body .draive-floating:has(.select2-container--open) > .draive-label,
body .draive-floating:has(.select2-container--focus) > .draive-label,
body .draive-floating:has(.select2-container).is-open > .draive-label,
body .draive-floating:has(.select2-container).has-value > .draive-label {
  top: 10px;
  transform: none;
  color: #666;
}

/* --- 3) Skin floating dei Select2 MULTIPLI -----------------------
   Il container (2) impone height:56px fissa, corretta per i SINGLE. Un select
   multiplo (es. "Brand" della sede) con piu' chip deve invece crescere in
   altezza e mandare i chip a capo: senza questo il box resta bloccato a 56px e
   i chip in eccedenza escono dal box sovrapponendosi al campo successivo
   ("Sede principale"). Regola scoperta a runtime: il tema forza rendered a
   white-space:nowrap/overflow:hidden e i choice a float, che non fanno crescere
   il contenitore; qui li normalizziamo a flex-wrap. */
body .draive-floating .select2-container--default:has(.select2-selection--multiple) {
  height: auto !important;
}
body .draive-floating .select2-container--default .select2-selection--multiple {
  height: auto !important;
  min-height: var(--draive-control-height) !important;
  background: var(--draive-field-bg);
  border: 1px solid var(--draive-field-border) !important;
  border-radius: var(--draive-radius);
  padding: 24px 12px 6px !important; /* top: lascia spazio alla floating label */
}
body .draive-floating .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.2;
}
/* chip: padding, allineamento e × a destra stanno nella regola GLOBALE
   (cerca "select2-selection__choice__remove"); qui resta solo il reset
   del float, che serve al layout flex del .draive-floating */
body .draive-floating .select2-container--default .select2-selection--multiple .select2-selection__choice {
  float: none !important;
  margin: 0 !important;
}
body .draive-floating .select2-container--default .select2-selection--multiple .select2-search--inline,
body .draive-floating .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  float: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
/* label "Brand" sempre flottata: il box multiplo non ha uno stato "vuoto
   centrato" e i chip partono comunque sotto la label */
body .draive-floating:has(.select2-selection--multiple) > .draive-label {
  top: 10px;
  transform: none;
  color: #666;
}

/* ============================================================
   Draive UI — FILTRI LISTA: CAMPI COMUNI (authoritative, 2026-07-18)
   Skin condivisa delle pagine lista: #generalSearch stile campo
   flottante, colonna filtri flat (.filter-list / .filter-item /
   .filter-group / .filter-foot) e input date. I cloni identici sono
   stati rimossi da aziende / logistica richieste+viaggi / officina
   report / profilo (custom.modulo.css).

   2026-08-10 — il riferimento del pannello e' lo showroom, e questo
   blocco ne porta i valori: titoletti di sezione a 11px/600 senza
   filetto e barra azioni .filter-foot in fondo alla colonna. Con essa
   sono spariti i due bottoni "Applica" (cruscotto e recensioni): i
   filtri si applicano al cambio del campo, come li'.

   2026-08-10 — l'aggancio non e' piu' un ELENCO di classi pagina
   (.kt-lista-aziende, .kt-lista-logistica, .kt-academy, ...) ripetuto
   su cinque regole, ma la colonna filtri stessa: .kt-inbox__aside.
   L'elenco era scritto e mantenuto a mano, e un modulo dimenticato in
   uno dei cinque elenchi restava senza skin senza che niente lo
   segnalasse — che e' il modo in cui "centralizzato" smette di
   esserlo. Ne aveva gia' fatto le spese ubicazioni: i suoi due campi
   data nell'aside non erano in nessun elenco e uscivano con la pelle
   del browser invece di quella draive.
   Tutti i filtri lista in uso vivono dentro un
   "#kt_inbox_aside.kt-inbox__aside" — verificato su academy, aziende,
   cruscotto, logistica richieste e viaggi, officina report, profilo,
   recensioni, supporto, optManager, ubicazioni — quindi l'aggancio
   strutturale copre gli stessi casi di prima, piu' quelli che
   verranno. Le pagine showroom-family (showroom, valutazioni,
   annunci, giacenze) non hanno #generalSearch ne' .filter-list
   nell'aside: restano fuori come prima, con la loro skin.
   La SPECIFICITA' e' rimasta identica regola per regola
   (.kt-inbox__aside vale quanto valeva .kt-lista-*), quindi nessun
   equilibrio con i fogli di modulo cambia.
   Eccezione voluta: optManager tiene la variante compatta. La sua
   regola e' stata alzata a "body.kt-lista-opt #kt_inbox_aside
   #generalSearch" (custom.modulo.css): a parita' di specificita'
   vincerebbe questo blocco, che bottomScripts.php carica per ultimo.
   ============================================================ */
.kt-inbox__aside #generalSearch {
  background: var(--draive-field-bg);
  border: 1px solid var(--draive-field-border) !important;
  border-radius: var(--draive-radius);
  color: var(--ink-body);
  font-weight: inherit;
  height: var(--draive-control-height);
  /* allineato al campo standard: 22/15/7 come ogni altro input.
     Era 22px/1rem/12px, cioe' la vecchia geometria da 56px. */
  padding: 22px 15px 7px !important; /* allineato al padding interno dei campi flottanti */
  text-indent: 0;
}
.kt-inbox__aside #generalSearch::placeholder { color: #959cb6 !important; }
.kt-inbox__aside #generalSearch:focus {
  background: var(--draive-field-bg-focus);
  border-color: var(--draive-border-focus) !important;
  box-shadow: none !important;
}

/* colonna filtri flat: un .draive-floating per riga */
.kt-inbox__aside .filter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
.kt-inbox__aside .filter-item { width: 100%; }

/* Titoletto di sezione dentro la colonna filtri.
   2026-08-10 — valori presi da .sr-fsection__title dello showroom, che e'
   il riferimento del pannello: 11px/600, spaziatura .3px, niente filetto
   di separazione. Prima ogni modulo se lo disegnava (.kt-cruscotto a
   10.5px/700 con un border-top, .kt-recensioni a --fs-badge/--fw-semi):
   due rese diverse dello stesso elemento in due pagine vicine.
   Il margine e' NEGATIVO di proposito: .filter-list e' un flex column con
   gap 12px, quindi sotto il titolo ci sarebbero 12px mentre nello showroom
   ce ne sono 8 (il .sr-fsection__title ha margin-bottom 8 dentro una
   sezione senza gap). -4px riporta il conto a 8; sopra il titolo restano i
   12px del gap, che e' esattamente lo stacco fra due .sr-fsection. */
.kt-inbox__aside .filter-group {
  font-size: calc(11px * var(--dv-fs,1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted);
  margin: 0 0 -4px;
}

/* Barra azioni in fondo alla colonna filtri (authoritative, 2026-08-10).
   E' la .sr-filter-foot dello showroom promossa a modello di tutti i
   moduli: sta FUORI dallo scroller (ultimo figlio della colonna flex,
   quindi la prende la regola strutturale ".kt-inbox__nav ~ *" che le da'
   i rientri e le impedisce di scorrere), si stacca dai campi con un
   filetto e tiene i pulsanti su una riga sola.
   Prima "Cancella filtri" era un pulsante nudo con 22px di margine sopra
   e sotto e nessuna separazione: la colonna finiva senza un piede.
   La geometria dei pulsanti (altezza, raggio, colore) NON si dichiara
   qui: arriva dal blocco DRAIVE BUTTONS come per ogni altro pulsante. */
.kt-inbox__aside .filter-foot {
  border-top: 1px solid var(--border-soft);
  padding: 8px 0 4px;
  margin-top: 0;
  background: transparent;
}
.kt-inbox__aside .filter-foot__row {
  display: flex;
  gap: 8px;
  margin: 0;
}
/* flex:1 1 0 e non "width:100%": con due pulsanti (showroom: Cancella
   filtri + Salva ricerca) si dividono la riga in parti uguali, con uno
   solo riempie tutto. Il margine va azzerato in !important perche' il
   blocco DRAIVE BUTTONS dichiara "body button { margin: 0 2px }". */
.kt-inbox__aside .filter-foot__row > .kt-btn,
.kt-inbox__aside .filter-foot__row > .btn {
  flex: 1 1 0;
  white-space: nowrap;
  margin: 0 !important;
}

/* input date: stessa pelle dei campi draive.
   .sup-page-config resta a parte: e' la pagina di configurazione del
   supporto, i suoi campi data stanno in un form e non in una colonna
   filtri, quindi l'aggancio strutturale non li prenderebbe. */
.kt-inbox__aside input[type="date"].draive-control,
.sup-page-config input[type="date"].draive-control {
  background: var(--draive-field-bg);
  border: 1px solid var(--draive-field-border) !important;
  border-radius: var(--draive-radius);
  color: var(--ink-body);
  height: var(--draive-control-height);
  /* allineato al campo standard: 22/15/7 come ogni altro input.
     Era 22px/1rem/12px, cioe' la vecchia geometria da 56px. */
  padding: 22px 15px 7px !important;
}
.kt-inbox__aside input[type="date"].draive-control:focus,
.sup-page-config input[type="date"].draive-control:focus {
  background: var(--draive-field-bg-focus);
  border-color: var(--draive-border-focus) !important;
  box-shadow: none !important;
}

/* ============================================================
   Draive UI — AD MANAGER (authoritative, 2026-07-05)
   Gestione annuncio per portale, condivisa tra la pagina
   marketing/annunci e il tab "Annunci" della scheda veicolo
   showroom (embed KTAdEmbed). Template in
   pages/marketing/annunci/includes/adManager.templates.php,
   logica in pages/marketing/annunci/js/annuncioDetails.js.
   ============================================================ */

/* --- strip portali dentro il tab Annunci (embed showroom) -------- */
body .adm-portals { padding: 4px 0 0; }
body .adm-portals .kt-portlet {
  background: transparent;
  box-shadow: none;
  margin: 0;
}
body .adm-portals .kt-portlet__head {
  min-height: 0 !important;
  padding: 0 0 8px !important;
  border-bottom: 0;
}
body .adm-portals .kt-portlet__head .kt-portlet__head-title {
  font-size: calc(14px * var(--dv-fs,1));
  font-weight: 600;
  color: #111827;
}
body .adm-portals .kt-portlet__body { padding: 0 0 12px; }
body .adm-portals .kt-portlet__body .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
body .adm-portals .portale {
  flex: 0 0 200px;
  max-width: 200px;
  padding: 0;
}
body .adm-portals .portale img { width: 100%; border-radius: 8px; }
body .adm-portals .overlay-card-custom {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: calc(13px * var(--dv-fs,1));
  font-weight: 500;
  color: #3f3f46;
}

/* --- «siamo online su questo portale» (2026-09-03) ------------------
   Prima l'unico segnale era il bottone `rel="act"` che diventa verde —
   ma quel bottone sta DENTRO l'overlay che compare all'hover: a riposo
   le card erano identiche, e il cartellino in testata diceva «Pubblicato
   su 4 portali» mentre le card non lo dicevano.

   Lo stato si legge da quella stessa classe (`:has`), non da un attributo
   parallelo: dopo un click il JS scambia btn-success/btn-outline-secondary
   sul bottone e non ridisegna il template, quindi qualunque copia dello
   stato resterebbe indietro. Cosi' invece card e scritta seguono il
   bottone da sole, senza una riga di JS in piu'.

   Due segni insieme, non uno: l'anello per capirlo in un colpo d'occhio
   su tutta la riga, la pastiglia perche' sia scritto a parole — il colore
   da solo non e' un'informazione per tutti. E' la grammatica che la
   scheda usa gia' («In Stock», «1 Dato Mancante»). Spunto ReUI: Card in
   stato selected (ring + indicatore d'angolo) e Badge light col pallino.

   Sta qui e non nel CSS di modulo perche' la striscia portali e' condivisa
   fra la pagina marketing/annunci e il tab Annunci della scheda showroom:
   una sorgente sola per tutte e due. */

/* Ogni stato si scrive sul proprio selettore, e lo stato «spento» sul
   `:not(:has(...))` invece che come valore di partenza da disfare: un
   browser che non capisce `:has` scarta la regola invece di applicarla a
   tutti. Cosi' dove il selettore non passa si torna esattamente alla
   striscia di oggi — nessun segno — invece di ritrovarsi quattro card
   spente e quattro «Non pubblicato» detti a caso: una risposta sbagliata
   al posto di nessuna risposta. */

/* La card non attiva arretra: resta leggibile, ma smette di competere
   con quelle su cui il veicolo e' davvero online. */
body .adm-portals .portale img {
  transition: filter .15s ease, opacity .15s ease;
}
body .adm-portals .portale:not(:has([rel="act"].btn-success)) img {
  filter: grayscale(1);
  opacity: .55;
}

/* Anello verde: box-shadow e non border, cosi' non sposta di 2px la
   griglia delle card fra attive e non attive. Il raggio si allinea a quello
   dell'immagine (8px), se no l'anello a 12px lascia scoperti gli angoli.

   `:is(#kt_demo_panel, body)` e non un prefisso qualunque: dentro la scheda
   veicolo esiste `#kt_demo_panel .card { box-shadow; border-radius }`, e un
   id batte qualsiasi numero di classi — l'anello non si vedeva. `:is()`
   prende la specificita' del suo argomento piu' forte, quindi qui vale come
   un id e passa; il secondo argomento tiene in piedi la regola anche nella
   pagina marketing/annunci, dove quel contenitore non c'e'. Meglio di un
   !important, che spegnerebbe ogni futuro aggiustamento della card. */
:is(#kt_demo_panel, body) .adm-portals .portale .card.overlay {
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 0 0 1px var(--hairline, #eef0f6);
  transition: box-shadow .15s ease;
}
:is(#kt_demo_panel, body) .adm-portals .portale:has([rel="act"].btn-success) .card.overlay {
  box-shadow: 0 0 0 2px var(--success-strong, #1a9c52);
}

/* Spunta d'angolo. Sta DENTRO il riquadro (top/right 8px) perche' la card
   e' `overflow:hidden` per via dell'overlay: sporgendo verrebbe tagliata.
   Il segno di spunta e' una mask SVG e non un glifo dell'iconfont: i
   codepoint delle icone non sono intercambiabili fra i due font in uso e
   un carattere sbagliato qui diventerebbe un quadratino. */
body .adm-portals .portale:has([rel="act"].btn-success) .card.overlay::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--success-strong, #1a9c52);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .35);
  z-index: 2;
}
body .adm-portals .portale:has([rel="act"].btn-success) .card.overlay::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.7 2.7 6.1-6.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3l2.7 2.7 6.1-6.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  z-index: 3;
}
/* la card e' il riferimento della spunta: senza, si ancorerebbe al
   contenitore posizionato piu' vicino, che nel drawer e' il drawer */
body .adm-portals .portale .card.overlay { position: relative; }

/* Nome del portale: acceso quando e' online, spento quando non lo e'. */
body .adm-portals .portale:has([rel="act"].btn-success) .overlay-card-custom {
  color: var(--ink, #111827);
  font-weight: 600;
}

/* Pastiglia di stato. Le due diciture stanno entrambe nel markup
   (adManager.templates.php) e qui si sceglie quale mostrare: nessun testo
   dentro `content:`, che non e' traducibile e che alcuni lettori di
   schermo saltano. */
body .adm-portals .adm-portal__state {
  display: block;
  text-align: center;
  margin-top: 4px;
}
body .adm-portals .adm-portal__state-on,
body .adm-portals .adm-portal__state-off {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--radius-pill, 999px);
  font-size: calc(11px * var(--dv-fs,1));
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.5;
}
/* il pallino: stessa forma nei due stati, cambia solo il colore, cosi' la
   pastiglia non balla in larghezza passando da online a non pubblicato */
body .adm-portals .adm-portal__state-on::before,
body .adm-portals .adm-portal__state-off::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
body .adm-portals .portale:has([rel="act"].btn-success) .adm-portal__state-on {
  display: inline-flex;
  background: var(--success-bg, #e3f4e9);
  color: var(--success-text, #1a7f45);
}
body .adm-portals .portale:not(:has([rel="act"].btn-success)) .adm-portal__state-off {
  display: inline-flex;
  background: var(--surface-alt, #f3f4f6);
  color: var(--ink-muted, #6b7280);
}
body .adm-editor { border-top: 1px solid #eef0f6; }
/* form Equipaggiamento sotto l'editor (blocco AdOptionals condiviso) */
body .adm-optionals { border-top: 1px solid #eef0f6; margin-top: 8px; }
body .adm-optionals .kt-portlet { margin-bottom: 0; }
body .adm-empty {
  padding: 24px;
  text-align: center;
  color: #9aa2af;
  border: 1px dashed #c9cdd6;
  border-radius: 8px;
  margin: 16px 0;
}

/* --- editor annuncio (regole ex pages/marketing/annunci css) ----- */
.annuncio .textarea, .annuncio .textareaEmozionale { overflow: auto; }
#kt_portlet_annuncio_tab_generic { margin-top: 30px; }
/* barra Salva annuncio/Rigenera: sticky in fondo alla colonna che scorre
   (scheda annunci E tab Annunci della scheda showroom) */
body.kt-veicoli .kt-demo-panel .buttonRow {
  position: sticky;
  bottom: 0;
  right: auto;
  width: auto;
  padding: 12px 0;
  background: #fff;
  border-top: 1px solid #eef0f6;
  z-index: 5;
}

/* ============================================================
   Draive UI — DUAL LISTBOX (authoritative, 2026-07-06)
   Componente DualSelectList (plugins.bundle.js): due colonne
   "disponibili / selezionate" con pulsanti sposta-tutto in mezzo.
   Usato in: keyword veicolo (showroom/inc/ajax.php), preferenze
   colonne liste (showroom, valutazioni, giacenze, ubicazioni,
   annunci — dentro swal).
   Il bundle da' alle liste width fissa 300px e al container
   flex-wrap: wrap: nei contenitori stretti (drawer 560px) le due
   colonne andavano a capo impilandosi. Qui: colonne fluide sempre
   affiancate + grafica allineata ai token DRAIVE (campi grigi,
   focus nero, bordi #eef0f6).
   ============================================================ */

/* il drawer keyword ha bisogno di piu' aria delle 560px standard:
   due colonne + pulsanti. Vince su "body .modal .modal-dialog"
   del blocco LIGHTBOX DRAWER per specificita'. */
body .modal .modal-dialog.modal-dialog-keyword-veicolo {
  width: min(720px, calc(100vw - 56px)) !important;
}

/* NB specificita': style.bundle.css stila lo stesso componente con
   selettori annidati sotto .dual-listbox__container (fino a 0,4,0):
   le regole qui sotto replicano quegli stessi percorsi + body,
   altrimenti perdono anche se caricate dopo. */

body .dual-listbox {
  position: relative; /* ancora il position() del drag del plugin */
}

body .dual-listbox .dual-listbox__container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;      /* MAI a capo: colonne fluide, non fisse */
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

/* pannelli: colonna flessibile; l'ordine visivo diventa
   titolo → ricerca → lista (nel DOM la ricerca viene prima) */
body .dual-listbox .dual-listbox_panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body .dual-listbox .dual-listbox__container .dual-listbox__title {
  order: -1;
  padding: 0 2px 6px;
  margin: 0;
  font-size: calc(13px * var(--dv-fs,1));
  font-weight: 600;
  color: #374151;
  border: 0;
  border-radius: 0;
}

/* ricerca: stesso linguaggio dei campi DRAIVE (grigio senza bordo,
   focus bianco con bordo nero + ring) */
body .dual-listbox .dual-listbox__search {
  width: 100%;
  max-width: none;
  height: 38px;
  padding: 0 var(--space-base);
  margin: 0 0 var(--space-sm);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  color: var(--ink);
  background: var(--draive-field-bg);
  border: 1px solid var(--draive-field-border);
  border-radius: var(--draive-radius);
  outline: 0;
  transition: background-color var(--draive-transition),
              border-color var(--draive-transition),
              box-shadow var(--draive-transition);
}
body .dual-listbox .dual-listbox__search::placeholder { color: var(--draive-placeholder); }
body .dual-listbox .dual-listbox__search:hover { background: var(--draive-field-bg-hover); }
body .dual-listbox .dual-listbox__search:focus {
  background: var(--draive-field-bg-focus);
  border-color: var(--draive-border-focus) !important; /* il focus blu del bundle e' !important */
  box-shadow: var(--draive-ring-focus);
}

body .dual-listbox .dual-listbox__container .dual-listbox__available,
body .dual-listbox .dual-listbox__container .dual-listbox__selected {
  flex: 1 1 auto;
  width: 100%;
  height: 320px;
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #374151;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 12px;
}

/* nei drawer c'e' tutta l'altezza dello schermo: le liste la riempiono
   invece di lasciare mezzo modal vuoto (gli swal restano a 320px) */
body .modal .dual-listbox .dual-listbox__container .dual-listbox__available,
body .modal .dual-listbox .dual-listbox__container .dual-listbox__selected {
  height: clamp(260px, calc(100vh - 400px), 640px);
}

/* liste vuote: placeholder grigio al posto del riquadro muto */
body .dual-listbox .dual-listbox__container .dual-listbox__available:empty::after,
body .dual-listbox .dual-listbox__container .dual-listbox__selected:empty::after {
  content: 'Nessun elemento';
  display: block;
  padding: 18px 12px;
  text-align: center;
  font-size: calc(12px * var(--dv-fs,1));
  color: #9aa2af;
}

body .dual-listbox .dual-listbox__container .dual-listbox__available .dual-listbox__item,
body .dual-listbox .dual-listbox__container .dual-listbox__selected .dual-listbox__item {
  display: block;
  padding: 8px 10px;
  font-size: calc(13px * var(--dv-fs,1));
  color: #374151;
  border: 0;
  border-radius: 8px;
  cursor: grab;
  transition: background-color var(--draive-transition);
}
body .dual-listbox .dual-listbox__container .dual-listbox__available .dual-listbox__item:hover,
body .dual-listbox .dual-listbox__container .dual-listbox__selected .dual-listbox__item:hover {
  background: #f7f8fa;
}
body .dual-listbox .dual-listbox__container .dual-listbox__available .dual-listbox__item.dual-listbox__item--selected,
body .dual-listbox .dual-listbox__container .dual-listbox__selected .dual-listbox__item.dual-listbox__item--selected {
  background: #111827;
  color: #fff;
}
/* voci bloccate (colonne obbligatorie nelle preferenze lista) */
body .dual-listbox .dual-listbox__container .dual-listbox__available .dual-listbox__item.lock,
body .dual-listbox .dual-listbox__container .dual-listbox__selected .dual-listbox__item.lock {
  color: #9aa2af;
  cursor: default;
}

/* pulsanti sposta-tutto: quadrati come il close dei drawer */
body .dual-listbox .dual-listbox__container .dual-listbox__buttons {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
body .dual-listbox .dual-listbox__container .dual-listbox__buttons .dual-listbox__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  font-size: calc(14px * var(--dv-fs,1));
  color: #6b7280;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--draive-transition),
              color var(--draive-transition);
}
body .dual-listbox .dual-listbox__container .dual-listbox__buttons .dual-listbox__button:hover {
  background: #f7f8fa;
  color: #111827;
}

/* placeholder di drop del drag&drop: nascosto a riposo (il plugin
   lo mostra con .show() durante il trascinamento) */
body .dual-listbox .dsl-panel-item-null {
  display: none;
  height: 32px;
  margin: 2px 0;
  background: #f2f2f2;
  border: 1px dashed #c9cdd6;
  border-radius: 8px;
}

/* su mobile le colonne fluide restano affiancate ma strette:
   sotto i 480px meglio impilate con liste piu' basse */
@media (max-width: 480px) {
  body .dual-listbox .dual-listbox__container { flex-wrap: wrap; }
  body .dual-listbox .dual-listbox_panel { flex: 1 1 100%; }
  body .dual-listbox .dual-listbox__container .dual-listbox__available,
  body .dual-listbox .dual-listbox__container .dual-listbox__selected,
  body .modal .dual-listbox .dual-listbox__container .dual-listbox__available,
  body .modal .dual-listbox .dual-listbox__container .dual-listbox__selected { height: 200px; }
  body .dual-listbox .dual-listbox__container .dual-listbox__buttons {
    flex-direction: row;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   RESPONSIVE MOBILE/TABLET (blocco autorevole — 2026-07-06)
   Sotto 1025px la shell torna quella mobile di Metronic
   (header mobile 50px + sidebar offcanvas): le regole qui sotto
   neutralizzano le personalizzazioni desktop-only dichiarate
   piu' sopra senza media query (aside fissa, subheader 300px,
   stato minimize). Il desktop (>=1025px) non viene toccato.
   ============================================================ */

@media (max-width: 1024px) {

  /* Il punto 1. di questo blocco — il ripristino dell'offcanvas
     Metronic sotto i 1025px — sta in assets/css/draive.sidebar.css
     (2026-08-08), accanto alle regole desktop che deve neutralizzare:
     tenerle a 2.000 righe di distanza e' il motivo per cui erano
     diventate sei selettori per dire una cosa sola. */

  /* ---------- 2. HEADER MOBILE: barra opaca, toggler touch ---------- */
  .kt-header-mobile {
    background: var(--aside-bg, #000);
    padding: 0 8px 0 15px;
  }
  .kt-header-mobile .kt-header-mobile__toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .kt-header-mobile__toolbar .kt-header-mobile__toggler {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    /* ancoraggio per lo span assoluto dell'icona: senza, lo span
       (width:100% dal bundle) si ancorava al toolbar e sporgeva 5px
       oltre il bordo destro dello schermo */
    position: relative;
  }
  .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toggler span {
    width: 24px;
    left: 50%;
    margin-left: -12px;
    top: 21px;
  }
  /* hamburger della sidebar: e' l'unico toggler rimasto (il "puntini"
     e' stato rimosso) e va tenuto SEMPRE ancorato a destra */
  .kt-header-mobile__toolbar #kt_aside_mobile_toggler {
    margin-left: auto;
  }
  /* il toggler centrale apre il wrapper menu VUOTO di topNavigation.php
     (il menu pagina Importa/Esporta vive dentro la topbar): inutile qui */
  #kt_header_mobile_toggler {
    display: none;
  }

  /* ---------- 3. HEADER DESKTOP su mobile: niente banda vuota ----------
     #kt_header resta nel flusso (contiene la topbar fixed): senza
     questo reset la regola globale "height:64px" lascia una fascia
     vuota sopra il contenuto. */
  #kt_header {
    height: auto;
    min-height: 0;
  }

  /* ---------- 4. TOPBAR: pulsanti pagina DENTRO l'header mobile ----------
     (seconda iterazione 2026-07-06) Prima era una seconda riga statica
     sotto l'header (banda grigia #2b2a35 del bundle): ora i pulsanti
     pagina (Importa/Esporta, campanella, +) vivono NELLA barra nera,
     ancorati a destra PRIMA dell'hamburger (#kt_aside_mobile_toggler,
     che resta l'ultimo elemento a destra dell'header mobile).
     La topbar resta fixed come da bundle ma: left:auto + width:auto la
     fanno shrink-to-fit sul bordo destro; right:54px lascia lo spazio
     dell'hamburger (44px + 8px padding header); z-index 3 la porta SOPRA
     l'header mobile (z 2 dal bundle — il suo z:1 la nascondeva dietro);
     margin-top:0 !important batte il -50px del bundle; background
     transparent la fonde con la barra nera; max-width protegge il logo
     sui telefoni stretti. NIENTE overflow: i dropdown (campanella,
     profilo) sono ancorati dentro gli item e verrebbero clippati. */
  /* il selettore #kt_header serve a battere la regola desktop
     "#kt_header .kt-header__topbar { padding-top:18px }" (1,1,0)
     dichiarata piu' sopra senza media query */
  .kt-header__topbar,
  #kt_header .kt-header__topbar {
    position: fixed !important;
    margin-top: 0 !important;
    top: 0;
    left: auto;
    right: 54px;
    width: auto;
    /* il cap parte dal logo, non da un numero a caso: logo 75px + padding
       header 15px + 8px di aria = 98px a sinistra, hamburger 54px a destra.
       Sotto questo tetto la topbar NON puo' piu' dipingersi sopra il logo;
       se il contenuto non entra e' il menu pagina che si stringe e scorre
       (regola #kt_header_menu qui sotto), non la barra che sborda. */
    max-width: calc(100vw - 152px);
    height: 50px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    padding: 0;
    z-index: 3;
    /* il container (trasparente) puo' sovrapporsi al logo sui telefoni
       stretti: i tap passano attraverso, restano attivi solo i figli */
    pointer-events: none;
  }
  .kt-header__topbar > * {
    pointer-events: auto;
  }
  /* il menu pagina e' l'UNICO pezzo comprimibile della topbar: quando lo
     spazio non basta (telefono stretto, o campanella notifiche presente)
     si stringe e scorre in orizzontale invece di sbordare a sinistra
     sopra il logo — era il difetto visibile su showroom a 390px, con
     "Importa" dipinto sotto il logo. NIENTE overflow sulla topbar
     intera: clipperebbe il dropdown della campanella. I tre menu di
     pagina esistenti (showroom, report giacenze/ubicazioni) sono azioni
     dirette senza sottomenu: lo scroll non taglia nulla. */
  .kt-header__topbar #kt_header_menu {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kt-header__topbar #kt_header_menu::-webkit-scrollbar {
    display: none;
  }
  /* i pannelli offcanvas annidati nella topbar (profilo utente) devono
     restare apribili anche a topbar nascosta */
  .kt-header__topbar .kt-offcanvas-panel {
    visibility: visible;
  }
  /* menu pagina (Importa/Esporta) dentro la topbar: riga compatta */
  .kt-header__topbar #kt_header_menu {
    height: auto;
  }
  .kt-header__topbar #kt_header_menu .kt-menu__nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }
  .kt-header__topbar #kt_header_menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    padding: 10px 12px;
  }
  .kt-header__topbar #kt_header_menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text {
    color: #fff;
    white-space: nowrap;
  }

  /* ---------- 5. SUBHEADER: larghezza piena, in flusso ----------
     neutralizza ".kt-veicoli #kt_subheader { width:300px }" e simili */
  #kt_subheader,
  .kt-veicoli #kt_subheader,
  .kt-veicoli.kt-inbox-aside--hidden #kt_subheader {
    width: auto;
    margin: 10px 0 0;
    min-height: 0;
  }

  /* ---------- 6. GUARDIA OVERFLOW ORIZZONTALE ----------
     "clip" non crea uno scroll-container (non rompe position:sticky);
     hidden e' il fallback per browser datati. */
  html, body {
    overflow-x: hidden;
    overflow-x: clip;
  }
}

@media (max-width: 1024px) {

  /* ---------- 7. LISTE: FILTRI IN FLUSSO SOPRA LA LISTA ----------
     la parte A di questo file (ex inbox.css) rende #kt_inbox_aside un
     offcanvas fixed a left:-320px che nessun JS attiva: su mobile
     lo riportiamo nel flusso come card scrollabile sopra la lista.
     Il bottone Filtro (#filter_toggle, ri-abilitato qui sotto)
     continua a fare toggle della classe body kt-inbox-aside--hidden
     con il JS esistente. */
  #kt_inbox_aside,
  .kt-inbox .kt-inbox__aside,
  /* pagina Profilo personale: l'aside col riepilogo utente sta in
     .kt-app (non in .kt-inbox) e senza id -> inbox.css lo lascia
     fixed a left:-320px e nessun toggler lo apre. In flusso anche lui. */
  #kt_user_profile_aside,
  .kt-app .kt-inbox__aside {
    position: static !important;
    left: auto !important;
    top: auto;
    bottom: auto;
    width: 100% !important;
    max-height: 60vh;
    overflow-y: auto;
    /* il contenuto dei filtri sfora di ~4px e disegnava una scrollbar
       orizzontale in fondo alla card */
    overflow-x: hidden;
    z-index: auto;
    margin: 0 0 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    padding: 16px !important;
  }
  .kt-inbox-aside--hidden #kt_inbox_aside {
    display: none;
  }
  /* L'hamburger del subheader (#kt_subheader_mobile_toggle) pilotava
     l'offcanvas dell'aside via KTOffcanvas (initAside nei moduli
     giacenze/ubicazioni/portali/optManager): con l'aside inchiodato in
     flusso qui sopra il tap non muoveva nulla ma KTOffcanvas creava
     comunque .kt-inbox__aside-overlay (inbox.css: fixed inset 0,
     z-index 1000, quasi invisibile) che ingoiava il tap successivo.
     Il toggle dei filtri resta su #filter_toggle. */
  #kt_subheader_mobile_toggle {
    display: none !important;
  }
  .kt-inbox__aside-overlay {
    display: none !important;
  }
  /* il bottone Filtro torna visibile (una regola storica lo nascondeva
     sotto i 1024px lasciando i filtri irraggiungibili da mobile) */
  #filter_toggle {
    display: inline-flex;
    align-items: center;
  }
  /* niente piu' rientro desktop della toolbar quando l'aside e' nascosta */
  .kt-veicoli.kt-inbox-aside--hidden #kt_inbox_list .kt-portlet__head .kt-portlet__head-toolbar {
    margin-left: 0;
  }

  /* ---------- 8. LISTE: TESTATA (tab archivio + ricerca) ---------- */
  #kt_inbox_list .kt-portlet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 8px 10px;
  }
  #kt_inbox_list .kt-portlet__head .kt-portlet__head-toolbar {
    width: 100%;
    max-width: 100%;
  }
  #kt_inbox_list .kt-portlet__head .kt-portlet__head-label {
    width: 100%;
    margin: 6px 0 0;
  }
  #kt_subheader_search_form {
    width: 100%;
    margin: 0 !important;
  }
  #kt_subheader_search {
    width: 100%;
  }
  /* tab su UNA riga, scrollabili orizzontalmente senza scrollbar visibile */
  .kt-portlet__head .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .kt-portlet__head .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .kt-portlet__head .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  /* ---------- 9. TABELLE ----------
     NB: NON mettere overflow-x:auto su .kt-datatable. KTDatatable
     collassa gia' da solo le colonne che non entrano (autoHide) su
     viewport stretti, quindi la tabella non sborda; e un overflow-x
     forzerebbe anche overflow-y:auto (regola CSS), tagliando i menu
     "azioni" (dropdown Bootstrap inline nelle celle) delle ultime
     righe. Qui adattiamo solo il pager. */
  .kt-datatable > .kt-datatable__pager {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
}

/* ---------- 10. DRAWER SCHEDA VEICOLO / PANNELLI (kt-demo-panel) ----------
   il bundle fissa width:950px !important (desktop la ridimensiona il
   layout); su tablet il pannello scende a 560px, su mobile e' a tutto
   schermo (top/right/bottom 0 e radius 0 arrivano gia' dal blocco
   LIGHTBOX DRAWER a <=768px). */
@media (max-width: 1024px) {
  /* il prefisso html serve a battere il custom.modulo.css dello showroom
     (caricato DOPO draive.core.css) che fissa width:calc(100% - 40px) e
     right:20px con !important e specificita' body.kt-veicoli #id */
  .kt-demo-panel,
  html body.kt-veicoli #kt_demo_panel.kt-demo-panel {
    width: min(560px, 100%) !important;
  }
}

@media (max-width: 768px) {
  .kt-demo-panel,
  html body.kt-veicoli #kt_demo_panel.kt-demo-panel {
    width: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    /* il margin 20px del generico .kt-demo-panel, sommato a right:0,
       spingerebbe il pannello 20px oltre il bordo sinistro */
    margin: 0 !important;
  }
  html body.kt-veicoli.kt-demo-panel--right #kt_demo_panel.kt-demo-panel--on {
    right: 0 !important;
  }
  /* testata compatta, X e frecce a 40px: arrivano dalle variabili
     mobili dell'ANATOMIA UNICA (14/09/2026), per tutti i lightbox */
  /* riga flag operativi (stato/pubblicazione/dati mancanti): a capo */
  .dv-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* barra azioni della scheda (Venduta/Rottama/Stampa...): su mobile
     la pila verticale rubava mezzo schermo -> una riga scrollabile.
     html-prefix: batte la regola wrap del custom.modulo.css showroom. */
  /* (14/09/2026) e' un piede di lightbox (.dv-lb__foot): padding e gap
     arrivano dall'anatomia unica. Qui resta la riga che scorre, che deve
     partire da SINISTRA — con flex-end i pulsanti in eccesso sborderebbero
     a sinistra, fuori dalla portata dello scorrimento. */
  .vehicleButton,
  html body.kt-veicoli #kt_demo_panel .vehicleButton {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    align-items: center;
    scrollbar-width: none;
  }
  .vehicleButton::-webkit-scrollbar {
    display: none;
  }
  .vehicleButton .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* form a griglia 2 colonne (profilo/inserimento utente): su mobile una
   colonna OVUNQUE si trovino (la regola storica copriva solo i form
   dentro #kt_demo_panel, ma il form utente vive in un altro pannello) */
@media (max-width: 768px) {
  .profilo-form {
    grid-template-columns: 1fr;
  }
  .biz-card__body,
  .biz-card--new .biz-card__body {
    grid-template-columns: 1fr;
  }
}

/* ---------- 11. SCHEDA VEICOLO: dati rapidi + media (<=576px) ---------- */
@media (max-width: 576px) {
  /* la tabellina "Tipologia/Carrozzeria/Targa/Colore..." aveva 4 celle
     per riga: su telefono diventa griglia 2x leggibile */
  .veichletable table,
  .veichletable tbody {
    display: block !important;
  }
  .veichletable tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
  }
  .veichletable td {
    display: block;
    padding: 2px 0;
  }

  /* carousel foto: le larghezze fisse a gradini (280/370px...) non
     devono mai superare lo schermo */
  .carousel {
    max-width: calc(100vw - 32px) !important;
  }
  .carousel img {
    max-width: 100%;
  }

  /* ---------- 12. TOAST: sotto l'header mobile (50px), dentro lo schermo */
  body.swal2-toast-shown .swal2-container.swal2-top-end {
    top: 60px !important;
    right: 12px !important;
  }
  body .swal2-popup.draive-toast {
    max-width: calc(100vw - 24px) !important;
  }

  /* topbar dentro l'header nero (sezione 4): su telefono i menu testuali
     (Importa/Esporta) si stringono per convivere con logo + hamburger
     nel caso peggiore (showroom tab Nuovo/Km0: 2 menu + "+" = 220px
     contro il cap di 210px). La freccia "›" (kt-menu__ver-arrow, 20px
     l'una) e' decorativa: quei menu sono azioni dirette (vehicleList.js
     fa switch sul testo), nessun sottomenu da segnalare. */
  .kt-header__topbar #kt_header_menu .kt-menu__nav > .kt-menu__item {
    margin: 0;
  }
  .kt-header__topbar #kt_header_menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    padding: 10px 5px;
  }
  .kt-header__topbar #kt_header_menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text {
    font-size: calc(12px * var(--dv-fs,1));
  }
  .kt-header__topbar #kt_header_menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__ver-arrow {
    display: none;
  }
  /* misure alla mano (375px, showroom): menu 136px + ticket + "+" devono
     stare in calc(100vw - 141px) = 234px. Ci stanno solo senza i
     "cuscini" del bundle: item a filo del proprio bottone (40px) e 4px
     di stacco. Con la campanella notifiche attiva il totale sfora
     comunque: e' il caso raro, e a quel punto il menu scorre. */
  /* i prefissi #kt_header e .kt-header__topbar servono a battere
     "#kt_header .kt-header__topbar .kt-header__topbar-item{margin:8px}"
     e ".topbar-add-btn{margin:8px}" dichiarate sopra senza media query */
  .kt-header__topbar .kt-header__topbar-item,
  #kt_header .kt-header__topbar .kt-header__topbar-item {
    margin: 0 0 0 4px;
    padding: 0;
  }
  .kt-header__topbar .kt-header__topbar-item .kt-header__topbar-wrapper {
    margin: 0;
    padding: 0;
  }
  .kt-header__topbar .topbar-add-btn {
    margin: 0;
  }
  /* il logo scende a 64px: leggibile, e libera i 141px del cap sopra */
  .kt-header-mobile .kt-header-mobile__logo a img {
    width: 64px;
  }
  .kt-header__topbar,
  #kt_header .kt-header__topbar {
    max-width: calc(100vw - 141px);
  }
}

/* ---------- 13. TARGET TOUCH (verifica 2026-07-06) ----------
   controlli sotto i ~40px non coperti dalle sezioni precedenti */
@media (max-width: 1024px) {
  /* "+" della topbar (34px !important alla dichiarazione base):
     azione primaria di inserimento su tutte le liste */
  /* toggle di collasso delle sezioni filtro dentro l'aside
     (btn-sm btn-icon, 28px dalla regola pulsanti globale) */
  .kt-inbox__aside [data-ktportlet-tool],
  #kt_inbox_aside [data-ktportlet-tool] {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px;
    min-height: 40px;
  }
  /* Modifica/Elimina delle card sede e utente (32px base) */
  .profilo-card-list__icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* ---------- 13b. TELEFONI STRETTI: topbar che entra davvero ----------
   Sta DOPO la sezione 13 apposta: stessa specificita' e stesso
   !important, vince per ordine. A 44px i due tondi (ticket + "+")
   sommati a Importa/Esporta non entravano in calc(100vw - 152px) su
   ~375px e il menu finiva sempre in scroll; a 40px — ancora sopra la
   soglia touch minima — il caso tipico entra senza scorrere. */

/* ============================================================
   FONT ICONE — OVERRIDE AUTOREVOLE (fix console Firefox, 2026-07-07)
   I bundle Metronic contengono per LineAwesome e keenicons-outline
   una @font-face DUPLICATA solo-SVG dentro
   "@media screen and (-webkit-min-device-pixel-ratio:0)" (vecchio
   hack webkit): Firefox moderno matcha quella media query (alias di
   web-compat) ma non supporta i font SVG -> console error
   "downloadable font: no supported format found". In piu' la face
   keenicons di fallback elenca il TTF prima del WOFF: Firefox carica
   il TTF, che ha 12 glyf con bbox dichiarati errati -> valanga di
   warning "Glyph bbox was incorrect; adjusting".
   Queste face, caricate per ULTIME (draive.core.css chiude la cascata),
   vincono su tutte quelle dei bundle a parita' di family+descriptor.
   I woff2 keenicons sono rigenerati dal TTF di piattaforma con
   fontTools, bbox ricalcolati dai punti reali (vedi anche la copia
   gemella in assets/plugins/global/fonts/keenicons/). Al deploy
   caricare anche assets/css/font-icon/keenicons-outline.woff2.
   ============================================================ */
@font-face {
  font-family: "LineAwesome";
  src: url("../plugins/global/fonts/line-awesome/line-awesome.woff2") format("woff2"),
       url("../plugins/global/fonts/line-awesome/line-awesome.woff") format("woff"),
       url("../plugins/global/fonts/line-awesome/line-awesome.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "keenicons-outline";
  src: url("font-icon/keenicons-outline.woff2") format("woff2"),
       url("font-icon/keenicons-outline.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ============================================================
   VIEW SWITCH TOPBAR (authoritative, 2026-07-23)
   Switch griglia/lista nel topbarQuickactions (Auto di Cortesia:
   planning <-> report). Segmento attivo = pagina corrente (non
   cliccabile), segmento inattivo = link all'altra vista.
   Stessa altezza 34px dei .topbar-add-btn accanto.
   ============================================================ */
/* Segmented control: binario grigio, segmento attivo = "thumb" bianco
   in rilievo (pattern iOS/KTUI). */
.draive-viewswitch {
  display: inline-flex;
  align-items: center;
  height: 34px;
  background: #eef0f4;
  border: 1px solid #e4e6ef;
  border-radius: var(--radius-md);
  padding: 3px;
}
.draive-viewswitch__seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 26px;
  border-radius: 6px;
  color: #8a90a2;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.draive-viewswitch__seg i {
  font-size: calc(15px * var(--dv-fs,1));
  color: inherit;
  line-height: 1;
}
a.draive-viewswitch__seg:hover {
  color: #3f4254;
  text-decoration: none; /* il reboot sottolinea a:hover */
}
.draive-viewswitch__seg.is-active {
  background: #fff;
  color: #111;
  cursor: default;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .14), 0 0 0 1px rgba(16, 24, 40, .03);
}

/* --- Variante con etichetta di testo (2026-08-10) -------------------
   Nata per l'ampiezza della vista nel Planning (1 / 3 / 7 giorni), che
   era tre bottoni sciolti di cui uno NERO: si leggeva come un'azione
   primaria piu' due link, e sulla stessa pagina litigava con lo switch
   planning/report qui sopra, che e' lo stesso gesto — scegli una vista
   fra poche.
   Cambia SOLO la geometria: pista, "thumb" bianco, colori e ombra
   restano quelli del blocco qui sopra, quindi i due switch non possono
   divergere. La larghezza torna automatica perche' qui l'etichetta e'
   una parola, non una icona da 36px.
   Gli azzeramenti del <button> stanno piu' sotto, su
   button.draive-viewswitch__seg: valgono anche per i segmenti a icona. */
.draive-viewswitch__seg--text {
  width: auto;
  gap: var(--space-xs); /* icona o logo prima dell'etichetta */
  padding: 0 var(--space-base);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.draive-viewswitch__seg--text.is-active { font-weight: var(--fw-semi); }

/* Il grigio del segmento a icona (#8a90a2) sulla pista misura 2,8:1.
   Su una icona passa; qui le voci non scelte sono TESTO che si legge
   ("3 giorni", "7 giorni"), quindi vale la soglia dei 4,5:1 e serve
   --ink-body, che ne fa circa 9. A dire quale sia scelta bastano il
   quadratino bianco e il peso: il colore non deve fare quel lavoro. */
.draive-viewswitch__seg--text:not(.is-active) { color: var(--ink-body); }

button.draive-viewswitch__seg--text:hover:not(.is-active) { color: var(--ink); }

/* Qui il segmento non scelto e' cliccabile (cambia vista senza cambiare
   pagina), a differenza dello switch planning/report dove il segmento
   inattivo e' un link ad un'altra pagina: il puntatore deve dirlo.
   Un segmento <button> (quelli del planning: ampiezza e, dal 25/10/2026,
   Planning/Agenda in testata) perde cornice, fondo e font del bottone
   dell'UA: senza, i due a icona in testata uscivano come riquadri. Il
   fondo bianco del segmento scelto resta a .is-active, che pesa di piu'. */
button.draive-viewswitch__seg {
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: inherit;
}
button.draive-viewswitch__seg.is-active { cursor: default; }

button.draive-viewswitch__seg:hover:not(.is-active) { color: #3f4254; }

.draive-viewswitch__seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --- Taglia compatta (28px, la sm dei pulsanti): dentro filtri e
   testate strette, accanto a campi e pulsanti sm --- */
.draive-viewswitch--sm { height: var(--btn-h-sm); padding: 2px; }
.draive-viewswitch--sm .draive-viewswitch__seg { height: calc(var(--btn-h-sm) - 6px); border-radius: 5px; }
.draive-viewswitch--sm .draive-viewswitch__seg--text {
  padding: 0 var(--space-sm);
  font-size: calc(var(--btn-fs-sm) * var(--dv-fs,1));
}

/* ============================================================
   DRAIVE ICON STACK — illustrazione empty-state (2026-08-09)
   Ricetta ReUI "icon-stack" (registry, icon-stack.tsx) portata a
   CSS puro per i dropzone della scheda veicolo: Immagini (reale e
   virtuale) e tab Documenti (documenti/ispezione/certificato, solo
   reale — la scheda virtuale non ha quel tab). Cambia solo l'icona
   keenicons dentro __icon; l'artwork e' identico ovunque.
   Tre piastre isometriche impilate: ogni piastra sono
   DUE path (fianco + faccia) riempiti col bianco del pannello —
   il fill e' cio' che fa occludere la piastra davanti a quella
   dietro, senza fill resterebbero solo contorni sovrapposti —
   bordati con currentColor quasi trasparente (.2, .3 su quella
   alta) piu' un'ellisse sfocata come ombra a terra. L'icona e'
   un overlay HTML fuori dall'SVG: skewY(-26deg)+scaleX(.9) la
   adagiano sul piano inclinato della faccia alta e gli offset
   71%/58% la centrano su quella faccia (i valori vengono dal
   componente originale, non sono da "aggiustare a occhio").
   Il wrapper e' decorativo: porta aria-hidden nel markup.
   ============================================================ */
.draive-iconstack {
  position: relative;
  width: 72px;
  height: 80px;
  margin: 0 auto 10px;
  color: var(--ink, #111827); /* currentColor di bordi e ombra */
  pointer-events: none;
}
.draive-iconstack svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible; /* l'ombra a terra sborda dal viewBox */
}
.draive-iconstack__layer {
  fill: #fff;
}
.draive-iconstack__shadow {
  filter: blur(4px);
}
.draive-iconstack__icon {
  position: absolute;
  top: 58%;
  left: 71%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scaleX(.9) skewY(-26deg);
  color: var(--ink-muted, #6b7280);
}
.draive-iconstack__icon i {
  font-size: calc(17px * var(--dv-fs,1));
  line-height: 1;
  color: inherit;
}
/* Il dropzone che ospita l'illustrazione abbandona il verde
   Metronic (dropzone-success) per il linguaggio DRAIVE: tratteggio
   grigio quieto, angoli --radius-lg. Scopato con :has() cosi' i
   dropzone senza icon-stack (documenti, altri moduli) non cambiano. */
.dropzone.dropzone-default:has(.draive-iconstack) {
  border-color: #d8dbe2;
  border-radius: var(--radius-lg, 12px);
  padding: 28px 20px;
  transition: border-color .15s ease;
}
.dropzone.dropzone-default:has(.draive-iconstack):hover,
.dropzone.dropzone-default.dz-drag-hover:has(.draive-iconstack) {
  border-color: var(--ink-faint, #9ca3af);
}

/* ============================================================
   DRAIVE IMAGE DROP — la zona di caricamento per UNA immagine
   (authoritative, 2026-09-05)

   La costruisce DraiveForms.imageDrop() (assets/js/draive-forms.js)
   riusando le classi del dropzone qui sopra: la cornice tratteggiata,
   il titolo e la descrizione arrivano da li' e da style.bundle.css,
   quindi qui NON si ridichiara niente di quello. Restano solo i due
   stati che il dropzone dello showroom non ha, perche' li' l'anteprima
   la disegna Dropzone.js in una riga a parte:

   - `.has-img`  il messaggio lascia il posto alla miniatura;
   - `.is-drop`  il file e' sopra la zona (l'equivalente di
                 .dz-drag-hover, che senza il plugin non arriva mai).

   Il riquadro NON cambia altezza fra i due stati: e' dentro un form di
   modale, e un salto di 100px sposterebbe i bottoni sotto il dito.
   ============================================================ */
.draive-imgdrop__zone {
  position: relative;
  /* 192 - 56 di padding - 4 di bordo = 132 di contenuto, che e' esatta-
     mente quanto misura lo stato pieno (96 foto + 8 gap + 28 meta). Con
     176 la min-height non governava NESSUNO dei due stati e il riquadro
     saltava di 24px: v. la nota su __msg qui sotto. */
  min-height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.draive-imgdrop.is-drop .draive-imgdrop__zone {
  border-color: var(--ink-faint, #9ca3af);
}
.draive-imgdrop.is-busy {
  opacity: .6;
  pointer-events: none;
}
/* Il `margin: 2em 0` che .dropzone .dz-message porta da plugins.bundle.css
   e' cio' che rendeva lo stato vuoto 24px piu' alto del pieno: in flex i
   margini non collassano, si sommano. Qui Dropzone.js non gira e quel
   respiro lo da' gia' il padding della zona. Servono DUE classi: con una
   sola, la regola del plugin (0,2,0) vince. */
.draive-imgdrop__zone .draive-imgdrop__msg { width: 100%; margin: 0; }
.draive-imgdrop__prev { display: none; }
.draive-imgdrop.has-img .draive-imgdrop__msg { display: none; }
.draive-imgdrop.has-img .draive-imgdrop__prev {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm, 8px);
  width: 100%;
}
.draive-imgdrop__img {
  max-width: 100%;
  /* 96 e non 120: sommato a gap 8 e meta 28 fa 132, cioe' il contenuto
     che la min-height della zona riserva anche allo stato vuoto. I due
     stati misurano cosi' identico, con qualunque proporzione di foto. */
  max-height: 96px;
  border-radius: var(--radius-md, 8px);
  /* `contain`: e' una foto di prodotto, tagliarla per riempire il
     riquadro nasconderebbe proprio il muso dell'auto. */
  object-fit: contain;
}
.draive-imgdrop__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs, 6px) var(--space-sm, 8px);
  max-width: 100%;
}
.draive-imgdrop__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(12.5px * var(--dv-fs,1));
  color: var(--ink-muted, #6b7280);
}
.draive-imgdrop__acts {
  display: inline-flex;
  gap: var(--space-xs, 6px);
}
/* L'anteprima e' dentro la zona cliccabile quanto il messaggio: cliccare
   la miniatura o il nome del file apre il selettore, quindi il cursore lo
   deve dire. plugins.bundle.css lo spegne con
   `.dropzone.dz-clickable * { cursor: default }`, che vale (0,2,0).

   ATTENZIONE ALLA MISURA: `.draive-imgdrop__prev *` vale (0,1,0), NON
   (0,2,0) — l'universale non pesa. Scritto cosi' perdeva, in silenzio e
   in modo credibile (misurato: cursore ancora `default`). Ancorando alle
   due classi che la zona porta comunque si arriva a (0,3,0) e si vince
   senza dipendere dall'ordine dei fogli. I bottoni sono dentro __prev,
   quindi questa regola copre anche loro: il click lo ferma il JS.
   Lo spazio fra icona e testo NON si scrive: lo da' gia' il `gap` del
   blocco DRAIVE BUTTONS, che con (0,2,2) batte qualunque margine. */
.dropzone.dz-clickable .draive-imgdrop__prev,
.dropzone.dz-clickable .draive-imgdrop__prev * { cursor: pointer; }

/* La riga d'errore vive sotto la zona e non in un dialogo: e' un
   problema di QUESTO campo, e il form deve restare aperto. */
.draive-imgdrop__err { display: none; }
.draive-imgdrop.has-err .draive-imgdrop__err {
  display: block;
  margin-top: var(--space-xs, 6px);
  font-size: calc(12.5px * var(--dv-fs,1));
  color: var(--danger-text, #b0134e);
}
/* Ancorata alle classi che la zona porta comunque (`dropzone
   dropzone-default`) per arrivare a (0,5,0): la regola
   `.dropzone.dropzone-default:has(.draive-iconstack):hover` qui sopra
   vale (0,4,0) — :has() conta come una classe, :hover ne aggiunge
   un'altra — e vinceva a prescindere dall'ordine. Proprio nell'attimo in
   cui l'errore compare il puntatore e' sopra la zona, quindi il bordo
   rosa non si vedeva mai. */
.draive-imgdrop.has-err .dropzone.dropzone-default.draive-imgdrop__zone {
  border-color: var(--danger-bg-tint, #f6c9d8);
}

/* ============================================================
   DRAIVE SCROLLBAR — una sola barra per tutto il prodotto
   (authoritative, 2026-08-10)

   Prima di questo blocco la barra la disegnava il sistema operativo:
   su macOS una barra a scomparsa larga zero, su Windows quella di
   sistema da 15-17px con le frecce. Stessa pagina, due prodotti
   diversi — e dentro l'applicazione convivevano barre di sistema e
   contenitori che la nascondono a mano (rail della sidebar, tab dei
   portlet, .vehicleButton: quelle regole restano e continuano a
   vincere, hanno una specificita' piu' alta di queste).

   PERCHE' IL SELETTORE E' `*`. La `scrollbar-width` non si eredita:
   scritta su html non arriverebbe ai contenitori interni, che sono
   la maggior parte delle barre del prodotto (pannello filtri, drawer,
   corpo dei dialoghi). Il carattere jolly ha specificita' ZERO,
   quindi qualunque regola gia' scritta su un contenitore — comprese
   tutte le "scrollbar-width: none" in giro per i fogli — la batte
   senza bisogno di !important.

   LE DUE SINTASSI NON SI SOMMANO, SI ESCLUDONO. Dove `scrollbar-width`
   o `scrollbar-color` sono dichiarate, il motore IGNORA i pseudo
   elementi `::-webkit-scrollbar` di quell'elemento (Chrome dal 121).
   Quindi qui comanda la coppia standard e il blocco webkit sotto e'
   la riserva per chi non la conosce (Safari fino alla 18.1). Vale
   anche al contrario: `.supcfg-tabs` e `.acdg-tabs` dichiarano
   `scrollbar-width: thin` per conto loro e i loro
   `::-webkit-scrollbar {height: 4px}` erano gia' inerti prima di
   questo blocco — adesso almeno prendono il colore comune.
   Le regole che NASCONDONO la barra non ne risentono: le sette in
   circolazione dichiarano tutte `scrollbar-width: none` accanto al
   loro `::-webkit-scrollbar`, quindi restano piene di effetto.

   COSA CAMBIA NEL LAYOUT: niente su macOS, dove la barra resta
   sovrapposta al contenuto (larga zero nel flusso) e cambia solo
   spessore e colore; su Windows la barra di sistema da 15-17px con
   le frecce diventa sottile, quindi i contenitori che scorrono
   GUADAGNANO larghezza utile. Se un elenco sborda in orizzontale la
   causa non e' qui: v. la nota su .kt-datatable, dove la tabella
   misurava piu' delle righe che contiene.
   ============================================================ */

/* La coppia standard: la traccia e' trasparente, il colore lo porta
   solo il pollice. E' questa a valere su Chrome, Edge e Firefox. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #c7cbd6) transparent;
}

/* Riserva per i motori senza la coppia standard (Safari <= 18.1):
   stessa lettura — corsia 10px, pollice 6px arrotondato. */
::-webkit-scrollbar {
  width: var(--scrollbar-size, 10px);
  height: var(--scrollbar-size, 10px);
  background-color: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* Il bordo trasparente ritagliato in padding-box e' quello che rende
   il pollice piu' stretto della corsia senza rimpicciolire l'area
   cliccabile: 10px di presa, 6px di inchiostro. */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb, #c7cbd6);
  background-clip: padding-box;
  border: var(--scrollbar-inset, 2px) solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover, #9ca3af);
}

/* Le frecce agli estremi le spegneva gia' style.bundle.css; ripetuto
   qui perche' questo e' il blocco che risponde delle barre. */
::-webkit-scrollbar-button {
  display: none;
}

/* ============================================================
   DRAIVE TOPBAR ACTIONS — sorgente unica delle azioni di testata
   (authoritative, 2026-08-12)

   Le azioni di pagina montate in #kt_header__topbar erano SETTE
   famiglie di classi che disegnavano lo stesso controllo con sette
   geometrie diverse: .topbar-add-btn (34px, raggio 6), .acd-topbtn /
   .acdg-topbtn / .sup-topbtn / .rec-topbtn (40px, raggio 10),
   .do-topbtn (40px, raggio 6) e .po-topbtn (34px ma bianco col
   bordo grigio). Ogni modulo aveva anche il proprio accento di
   hover. Da qui in avanti la forma si scrive solo qui.

   PERCHE' NON SI RINOMINA NIENTE NEL MARKUP. Ogni modulo possiede il
   proprio vocabolario di classi e ha il divieto esplicito di
   ridefinire quello altrui: v. la testata di
   pages/academy/gestione/css/custom.modulo.css, dove il collaudo C-2
   verifica che nel markup dell'authoring non compaia nessuna classe
   acd-. Rinominare le classi per unificarle romperebbe quel patto in
   sette punti. Le famiglie restano quindi in vita coi loro nomi: qui
   si unifica la PELLE, dal foglio globale (che fino al 23/10/2026
   bottomScripts.php rilinkava DOPO i custom.modulo.css).

   !important COME NEL BLOCCO "DRAIVE BUTTONS". Le geometrie di
   modulo hanno specificita' disomogenea — ".do-topbar-actions
   .do-topbtn" vale 0,2,0 e "body.sup-page-config .sup-topbtn" 0,2,1
   — quindi il solo ordine di caricamento non basterebbe, e senza
   !important servirebbe un selettore su misura per famiglia.

   IL PULSANTE TICKET RESTA FANTASMA. "#sup_topbar_ticket
   .topbar-add-btn" vale 1,1,0 e batte queste regole anche a parita'
   di !important: e' esattamente cio' che si vuole, il ticket e'
   un'azione secondaria e non deve riempirsi di nero.

   GEOMETRIA 34px / RAGGIO 6px: e' quella di showroom, la pagina
   presa a modello. NB: diverge di proposito dal blocco DRAIVE
   BUTTONS (32px, --radius-btn 10px), che governa .btn e .kt-btn.
   Questi controlli non sono .btn e non attraversano quel blocco.

   L'ACCENTO E' NERO, NON BLU. Le sei famiglie di modulo viravano al
   #5d78ff di Metronic (#125ef2 in academy/gestione) al passaggio del
   mouse. draive.tokens.css dichiara --action nero, e questo blocco
   lo applica anche alla testata.
   ============================================================ */

/* LE DUE CLASSI GLOBALI. .topbar-add-btn e' l'azione PIENA (nera) e
   .topbar-ghost-btn la SECONDARIA (solo icona): sono le uniche due che
   un modulo nuovo deve usare. Le sei famiglie con prefisso di modulo
   qui sotto sono preesistenti e restano solo perche' rinominarle nel
   markup violerebbe il vocabolario dei rispettivi moduli — non sono un
   esempio da imitare. .topbar-ghost-btn e' nata il 2026-08-12 per i due
   pulsanti di marketing/annunci: senza, l'unico modo di avere un
   fantasma globale era inventare una settima famiglia. */

/* --- Geometria comune (fantasma e pieno) ------------------------ */
.topbar-add-btn,
.topbar-ghost-btn,
.acd-topbtn,
.acdg-topbtn,
.sup-topbtn,
.rec-topbtn,
.do-topbtn,
.do-topbar-actions .do-topbtn,
.po-topbtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  text-decoration: none;
  cursor: pointer;
  position: relative; /* ancora delle pastiglie .acd-topbtn-n / .sup-topbtn-n */
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .05s ease;
}

/* Il margine orizzontale lo fa il gap del contenitore (sotto), non il
   bottone: .po-topbtn portava un margin-left:5px proprio e "body
   button" del blocco DRAIVE BUTTONS ne aggiunge 2 a chiunque sia un
   <button>. .topbar-add-btn e' escluso: i suoi due usi in showroom
   stanno in .kt-header__topbar-item separati, dove la distanza la
   tiene il margin-right: 8px dichiarato nella sezione 04. */
.acd-topbtn,
.acdg-topbtn,
.sup-topbtn,
.rec-topbtn,
.do-topbtn,
.do-topbar-actions .do-topbtn,
.po-topbtn {
  margin: 0 !important;
}

/* Come .topbar-add-btn, il fantasma globale sta in un
   .kt-header__topbar-item per conto suo (non in un wrapper con gap):
   la distanza dal vicino la tiene il proprio margine. */
.topbar-ghost-btn {
  margin-right: 8px;
}

/* --- Icona: 16px come ogni altra icona di bottone del prodotto --- */
.topbar-ghost-btn i,
.acd-topbtn i,
.acdg-topbtn i,
.sup-topbtn i,
.rec-topbtn i,
.do-topbtn i,
.po-topbtn i {
  font-size: calc(16px * var(--dv-fs,1)) !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: inherit;
}

/* --- Stato fantasma (azione secondaria) ------------------------- */
.topbar-ghost-btn,
.acd-topbtn,
.acdg-topbtn,
.sup-topbtn,
.rec-topbtn,
.do-topbtn,
.do-topbar-actions .do-topbtn,
.po-topbtn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-muted, #6b7280) !important;
}

.topbar-ghost-btn:hover,
.topbar-ghost-btn:focus,
.acd-topbtn:hover,
.acd-topbtn:focus,
.acdg-topbtn:hover,
.acdg-topbtn:focus,
.sup-topbtn:hover,
.sup-topbtn:focus,
.rec-topbtn:hover,
.rec-topbtn:focus,
.do-topbtn:hover,
.do-topbtn:focus,
.do-topbar-actions .do-topbtn:hover,
.po-topbtn:hover,
.po-topbtn:focus {
  background: var(--surface-alt, #f3f4f6) !important;
  border-color: transparent !important;
  color: var(--ink, #111827) !important;
  text-decoration: none;
}

/* --- Stato pieno (azione principale) ----------------------------
   Sta DOPO il fantasma di proposito: l'elemento primario porta
   entrambe le classi (".sup-topbtn sup-topbtn--primary"), quindi a
   parita' di specificita' e di !important vince per ordine. */
.topbar-add-btn,
.acd-topbtn--primary,
.acdg-topbtn--primary,
.sup-topbtn--primary,
.rec-topbtn--primary,
.po-topbtn.active {
  background: var(--action, #09090b) !important;
  border-color: var(--action, #09090b) !important;
  color: #fff !important;
}

.topbar-add-btn:hover,
.topbar-add-btn:focus,
.acd-topbtn--primary:hover,
.acd-topbtn--primary:focus,
.acdg-topbtn--primary:hover,
.acdg-topbtn--primary:focus,
.sup-topbtn--primary:hover,
.sup-topbtn--primary:focus,
.rec-topbtn--primary:hover,
.rec-topbtn--primary:focus,
.po-topbtn.active:hover,
.po-topbtn.active:focus {
  background: var(--action-hover, #1d1d20) !important;
  border-color: var(--action-hover, #1d1d20) !important;
  color: #fff !important;
}

.acd-topbtn--primary i,
.acdg-topbtn--primary i,
.sup-topbtn--primary i,
.rec-topbtn--primary i,
.po-topbtn.active i {
  color: #fff;
}

/* --- Disabilitato: sono spesso <a>, si spengono con .disabled --- */
.topbar-add-btn.disabled, .topbar-ghost-btn.disabled, .acd-topbtn.disabled,
.acdg-topbtn.disabled, .sup-topbtn.disabled, .rec-topbtn.disabled,
.do-topbtn.disabled, .po-topbtn.disabled {
  opacity: var(--btn-disabled-opacity, .5);
  pointer-events: none;
}

/* --- Spaziatura del gruppo -------------------------------------- */
.acd-topbar-actions .kt-header__topbar-wrapper,
.acdg-topbar .kt-header__topbar-wrapper,
.sup-topbar-actions .kt-header__topbar-wrapper,
.rec-topbar-actions .kt-header__topbar-wrapper,
.do-topbar-actions .kt-header__topbar-wrapper,
.po-topbar-actions .kt-header__topbar-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Bersaglio touch --------------------------------------------
   VA RIDICHIARATA QUI, e non basta quella che gia' esiste nelle
   sezioni 13/13b: quelle stanno piu' su nel file, e la geometria a
   34px scritta sopra — stessa specificita', stesso !important —
   le batterebbe per ordine, riportando i bottoni a 34px anche sul
   telefono. Stessa scala di prima: 44px fino a 1024, 40 sotto i 576
   perche' a 44 la testata non entrava piu' su ~375px. */
@media (max-width: 1024px) {
  .topbar-add-btn,
  .topbar-ghost-btn,
  .acd-topbtn,
  .acdg-topbtn,
  .sup-topbtn,
  .rec-topbtn,
  .do-topbtn,
  .do-topbar-actions .do-topbtn,
  .po-topbtn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 576px) {
  .topbar-add-btn,
  .topbar-ghost-btn,
  .acd-topbtn,
  .acdg-topbtn,
  .sup-topbtn,
  .rec-topbtn,
  .do-topbtn,
  .do-topbar-actions .do-topbtn,
  .po-topbtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
}

/* ============================================================
   DRAIVE PAGE TABS — la riga di tab sotto il titolo
   (authoritative, 2026-08-12)

   ATTENZIONE AL NOME DELLA SEZIONE 15. Piu' su nel file c'e'
   "15 — COMPONENTI: TABS / WIZARD (kt-wizard, nav-tabs)": quel
   titolo mente, il suo contenuto e' esclusivamente kt-wizard-v3,
   .kt-portlet.wizard e .progress-circle. Sulle nav-tabs non c'e'
   una riga. Questo e' il primo blocco che se ne occupa davvero.

   COSA UNIFICA. Le quattro famiglie che reimplementavano la riga di
   tab con valori propri: .supcfg-tabs e .acdg-tabs (quasi gemelle ma
   non identiche: 11px/16px di padding, 12.5px/600, angoli superiori
   arrotondati, filetto attivo nero), .acdc-tabs (9px/14px, 13px, peso
   che passa a 700 sull'attiva) e .eh-tabs, che non avendo
   "nav-tabs-line" ricadeva nelle tab SCATOLATE di Bootstrap ed era la
   piu' lontana di tutte.

   IL MODELLO E' SHOWROOM, E SHOWROOM NON VIENE TOCCATO. Il linguaggio
   e' quello gia' documentato in pages/showroom/css/custom.modulo.css:
   un solo colore (#595d6e) per attive e inattive, e l'attiva che si
   distingue SOLO per il filetto inferiore 2px #125ef2. Le regole qui
   sotto non nominano ne' .nav-tabs-line ne' le classi di showroom:
   la pagina di riferimento continua a prendere il proprio aspetto da
   style.bundle.css come prima.

   COSA NON SI TOCCA, E PERCHE':
   - Le Anagrafiche logistica (dal 26/10/2026) usano la colonna a voci
     del Profilo (#kt_user_profile_aside), non una riga di tab.
   - .sd-tabnav (social-dashboard) sono pillole dentro una card
     bianca: idem.
   - Le tab di drawer, modali e wizard (.nav-tabs-bold,
     .dashboard-tabs, .cr-obj-nav) vivono in un contenitore che non e'
     la testata di pagina.
   - overflow-x e scrollbar-width NON sono dichiarati qui: .supcfg-tabs
     e .acdg-tabs mostrano di proposito una barra sottile da 4px quando
     le schede non ci stanno, e .acdc-tabs va a capo invece di
     scorrere. Non dichiarandoli, ogni famiglia conserva il suo.

   !important OVUNQUE: le famiglie sono scoscese sotto una classe di
   pagina ("body.sup-page-config .sup-topbtn" vale 0,2,1,
   ".acd-page-certificazioni .acdc-tab" 0,2,0), e .acdc-tab e' un
   <button>, quindi prende anche padding, margine, raggio e peso dal
   blocco DRAIVE BUTTONS. E' lo stesso motivo per cui
   .showroom-filter-tabs__btn ha dovuto difendersi allo stesso modo.
   ============================================================ */

/* --- La striscia ------------------------------------------------- */
.supcfg-tabs,
.acdg-tabs,
.acdc-tabs,
.acd-page-certificazioni .acdc-tabs,
.eh-tabs,
.kt-emailhub .eh-tabs {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  /* 20 / 18 / 12px erano i tre stacchi in circolazione, uno per
     modulo. Nessuno dei tre e' piu' giusto degli altri: si sceglie il
     maggiore, che e' anche quello della famiglia piu' usata. */
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-soft, #ebedf2) !important;
  list-style: none;
}

.supcfg-tabs > .nav-item,
.acdg-tabs > .nav-item,
.eh-tabs > .nav-item,
.kt-emailhub .eh-tabs > .nav-item {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* --- La singola scheda ------------------------------------------- */
.supcfg-tabs .nav-link,
.acdg-tabs .nav-link,
.eh-tabs .nav-link,
.kt-emailhub .eh-tabs .nav-link,
.acdc-tabs .acdc-tab,
.acd-page-certificazioni .acdc-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #595d6e !important;
  font-size: calc(var(--fs-table, 12.5px) * var(--dv-fs,1)) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

/* Il filetto compare anche al passaggio del mouse: e' cio' che fanno
   le nav-tabs-line del bundle, dove hover e active condividono la
   stessa dichiarazione. */
.supcfg-tabs .nav-link:hover,
.acdg-tabs .nav-link:hover,
.eh-tabs .nav-link:hover,
.kt-emailhub .eh-tabs .nav-link:hover,
.acdc-tabs .acdc-tab:hover,
.acd-page-certificazioni .acdc-tab:hover,
.supcfg-tabs .nav-link.active,
.acdg-tabs .nav-link.active,
.eh-tabs .nav-link.active,
.kt-emailhub .eh-tabs .nav-link.active,
.acdc-tabs .acdc-tab--attiva,
.acd-page-certificazioni .acdc-tab--attiva {
  background: transparent !important;
  border-bottom-color: #125ef2 !important;
  color: #595d6e !important;
  font-weight: 400 !important;
}

/* --- L'icona dentro la scheda ------------------------------------ */
.supcfg-tabs .nav-link i,
.acdg-tabs .nav-link i,
.eh-tabs .nav-link i,
.kt-emailhub .eh-tabs .nav-link i,
.acdc-tabs .acdc-tab i,
.acd-page-certificazioni .acdc-tab i {
  margin: 0 !important;
  font-size: calc(16px * var(--dv-fs,1)) !important;
  line-height: 1 !important;
  color: #a2a5b9 !important;
}

.supcfg-tabs .nav-link:hover i,
.acdg-tabs .nav-link:hover i,
.eh-tabs .nav-link:hover i,
.kt-emailhub .eh-tabs .nav-link:hover i,
.acdc-tabs .acdc-tab:hover i,
.acd-page-certificazioni .acdc-tab:hover i,
.supcfg-tabs .nav-link.active i,
.acdg-tabs .nav-link.active i,
.eh-tabs .nav-link.active i,
.kt-emailhub .eh-tabs .nav-link.active i,
.acdc-tabs .acdc-tab--attiva i,
.acd-page-certificazioni .acdc-tab--attiva i {
  color: #125ef2 !important;
}

@media (max-width: 978px) {
  .supcfg-tabs .nav-link,
  .acdg-tabs .nav-link,
  .eh-tabs .nav-link,
  .kt-emailhub .eh-tabs .nav-link,
  .acdc-tabs .acdc-tab,
  .acd-page-certificazioni .acdc-tab {
    padding: 0 8px !important;
  }
}

/* ============================================================
   TOPBAR — pulsante "+" con menu   (condiviso, 2026-09-04)
   Le stesse regole vivevano IDENTICHE in due fogli di modulo
   (pages/commerciale/autodemo e pages/officina/autocortesia): due
   copie della stessa cosa, e chiunque ne avesse voluto una terza
   avrebbe fatto la terza. Ora stanno qui una volta sola.

   Il markup e' quello del planning auto: un .kt-header__topbar-item
   con .dropdown, il "+" veste la classe globale .topbar-add-btn
   (geometria e colori gia' in draive.core.css) e il menu si apre con la
   classe .is-open sul contenitore, messa dal JS del modulo.

   I nomi nuovi sono neutri (.topbar-addwrap / .topbar-menu /
   .topbar-menu-item); i vecchi .planning__topbar-* restano come
   alias perche' i due moduli storici usano ancora quel markup e non
   c'e' ragione di riscriverli per un rename.
   ============================================================ */
.topbar-addwrap,
.planning__topbar-addwrap { position: relative; }

.topbar-addwrap .kt-header__topbar-wrapper,
.planning__topbar-addwrap .kt-header__topbar-wrapper { display: flex; align-items: center; }

/* il "+" diventa una "x" quando il menu e' aperto */
.topbar-addwrap.is-open .topbar-add-btn i,
.planning__topbar-addwrap.is-open .planning__topbar-add i { transform: rotate(45deg); }

.topbar-menu,
.planning__topbar-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 6px;
  min-width: 240px;
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 14px 32px -12px rgba(16,24,40,.22), 0 4px 12px rgba(16,24,40,.08);
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1050;
}
.topbar-addwrap.is-open .topbar-menu,
.planning__topbar-addwrap.is-open .planning__topbar-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.topbar-menu-item,
.planning__topbar-menu-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink) !important;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease;
}
.topbar-menu-item:hover,
.planning__topbar-menu-item:hover{
  background: var(--surface-alt);
  color: var(--ink) !important;
  text-decoration: none;
}
.topbar-menu-item i,
.planning__topbar-menu-item i{ color: var(--ink-body); }
.topbar-menu-item small{
  display: block;
  font-size: calc(var(--fs-caption) * var(--dv-fs,1));
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  margin-top: 1px;
}
.topbar-menu-sep{ height: 1px; background: var(--hairline); margin: 5px 8px; }

@media (max-width: 576px){
  .topbar-menu,
  .planning__topbar-menu{ right: 0; min-width: 200px; }
}

/* --- «Esporta» accanto al «+» (28/10/2026) -------------------------
   Un comando da barra strumenti della testata, alto come il «+»
   (34px), bianco col bordo. Lo montano Perizie usato, Annunci e portali
   e Recensioni nel loro topbarQuickactions.php (.sr-esporta /
   .sr-esporta__btn). Fino al 15/10 la regola stava nel foglio dello
   Showroom, sotto "body.kt-veicoli #sr_esporta", e se n'e' andata col
   SUO Esporta, tolto quella sera: le altre pagine sono rimaste col
   pulsante nativo del browser, bordo nero a rilievo. Ora sta qui, per
   classe e non per id, cosi' vale anche per Recensioni che l'id non ce
   l'ha. Mostrarlo o nasconderlo resta ai fogli di modulo. */
.kt-header__topbar-item.sr-esporta .kt-header__topbar-wrapper{ display: flex; align-items: center; }
.kt-header__topbar-item.sr-esporta .sr-esporta__btn{
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--draive-control-height-sm, 34px);
  padding: 0 12px; margin: 0 8px 0 0;
  background: var(--canvas);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: calc(var(--fs-body) * var(--dv-fs,1));
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--motion-base), background var(--motion-base);
}
.kt-header__topbar-item.sr-esporta .sr-esporta__btn:hover{ border-color: var(--grey-mid); background: var(--surface-alt); }
.kt-header__topbar-item.sr-esporta .sr-esporta__btn i{ font-size: calc(15px * var(--dv-fs,1)); line-height: 1; color: var(--ink-muted); }

/* --- Variante ALLARME del pulsante di testata (2026-09-10) ---------
   Stessa geometria del "+" (34px, raggio 6): si vestono tutte e due le
   classi, .topbar-add-btn porta la forma e questa solo il colore. Non
   e' l'azione nera perche' qui il colore E' il messaggio — il pulsante
   esiste solo quando c'e' qualcosa da sistemare, se no la pagina lo
   nasconde del tutto.

   ROSSO PASTELLO, NON PIENO. E' la "terna rossa" di draive.tokens.css
   (--danger-bg fondo, --danger-bg-tint bordo, --danger-text glifo), la
   stessa che veste Stock180 nei filtri veicoli e la voce accesa del
   menu qui sotto: il pulsante e cio' che apre si leggono come una cosa
   sola. Il rosso pieno --danger resta ai divieti e agli errori, dove
   deve fermare qualcuno; questo avvisa e basta, e un tondo saturo in
   testata griderebbe piu' forte di quanto abbia da dire.

   Selettore composto (0,2,0) e !important: i colori di .topbar-add-btn
   sono dichiarati !important nel blocco DRAIVE BUTTONS, in coda a questo
   file, quindi una classe sola non basterebbe a scavalcarli.

   La rotazione a 45 gradi del blocco qui sopra si annulla: trasforma il
   "+" in una "x" ed e' giusto per il "+", ma su un glifo di avviso
   girato di sbieco sembrerebbe solo un difetto. */
.topbar-add-btn.topbar-alert-btn{
  background: var(--danger-bg, #ffe3ec) !important;
  border-color: var(--danger-bg-tint, #f6c9d8) !important;
  color: var(--danger-text, #b0134e) !important;
}
/* Un gradino dentro la stessa terna, non un colore nuovo: al passaggio
   del mouse e a menu aperto il fondo prende il tono del bordo. */
.topbar-add-btn.topbar-alert-btn:hover,
.topbar-add-btn.topbar-alert-btn:focus,
.topbar-addwrap.is-open .topbar-add-btn.topbar-alert-btn{
  background: var(--danger-bg-tint, #f6c9d8) !important;
  border-color: var(--danger-bg-tint, #f6c9d8) !important;
  color: var(--danger-text, #b0134e) !important;
}
.topbar-add-btn.topbar-alert-btn i{ color: var(--danger-text, #b0134e) !important; }
.topbar-addwrap.is-open .topbar-alert-btn i{ transform: none !important; }

/* =========================================================================
   FULLCALENDAR — la veste condivisa (28/09/2026)
   =========================================================================
   FullCalendar 4.3 (assets/plugins/custom/fullcalendar) lo usano due pagine:
   la Bacheca (vista mese ed elenco) e l'Agenda commerciale (giorno,
   settimana con le ore, mese). Fino a oggi la veste stava nel foglio della
   Bacheca, dentro `.bch-cal-wrap`: una seconda pagina l'avrebbe ricopiata.
   Adesso sta qui, per `.fc`, e i due calendari sono lo stesso calendario.
   Al modulo resta solo il contenitore (la scheda bianca della Bacheca) e il
   contenuto dei propri eventi.

   Il pacchetto del tema non ha i file di lingua: i testi italiani li passano
   le opzioni del modulo (buttonText, allDayText, columnHeaderText…), non
   questo foglio. */
.fc { font-family: inherit; }
.fc td, .fc th,
.fc-unthemed td, .fc-unthemed th,
.fc-unthemed thead, .fc-unthemed tbody,
.fc-unthemed .fc-divider, .fc-unthemed .fc-row,
.fc-unthemed .fc-content, .fc-unthemed .fc-popover,
.fc-unthemed .fc-list-view { border-color: var(--hairline); }
.fc .fc-toolbar h2 { font-size: calc(17px * var(--dv-fs,1)); font-weight: 600; color: var(--ink); }

/* Intestazione dei giorni: maiuscoletto grigio come le testate di tabella. */
.fc .fc-day-header {
  font-size: calc(11px * var(--dv-fs,1)); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); padding: 10px 6px; text-align: center;
}
/* La testata a due righe della settimana (numero grande, giorno sotto), come
   nel planning: la scrive il modulo con columnHeaderHtml. */
.fc .fc-hd-num { display: block; font-size: calc(20px * var(--dv-fs,1)); font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.fc .fc-hd-gg  { display: inline-block; font-size: calc(10.5px * var(--dv-fs,1)); letter-spacing: .08em; color: var(--ink-muted-soft); padding-bottom: 3px; }
.fc .fc-day-header.fc-today .fc-hd-num,
.fc .fc-day-header.fc-today .fc-hd-gg { color: var(--accent); }
.fc .fc-day-header.fc-today .fc-hd-gg { box-shadow: 0 2px 0 var(--accent); }

/* Il calendario e' BIANCO (Daniele, 28/09/2026: «il calendario lo voglio in
   bianco»). Oggi non si tinge — nella vista Giorno la tinta copriva tutto
   il calendario: lo dicono il numero blu sottolineato in testata, il cerchio
   blu nel mese e la linea rossa dell'ora. Il giallo di serie del pacchetto
   (#fcf8e3) va spento esplicitamente. */
.fc-unthemed td.fc-today { background: var(--canvas); }
.fc .fc-day-top.fc-other-month { opacity: .45; }
/* Il numero del giorno in alto a SINISTRA, dove si comincia a leggere la
   cella (il pacchetto lo mette a destra). */
.fc-ltr .fc-dayGridMonth-view .fc-day-top .fc-day-number { float: left; }
.fc .fc-day-number {
  font-size: calc(13px * var(--dv-fs,1)); font-weight: 600; color: var(--ink);
  padding: 4px 8px; margin: 4px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums;
}
.fc .fc-day-top.fc-today .fc-day-number { background: var(--accent); color: var(--on-action); }
.fc a.fc-day-number:hover { text-decoration: none; background: var(--surface-alt); }
.fc .fc-day-top.fc-today a.fc-day-number:hover { background: var(--accent); }

/* IL TEMA METRONIC dava a ogni evento 2rem di margine a sinistra e un
   pallino grigio in ::before (style.bundle.css, «.fc-unthemed .fc-event
   .fc-content»). In una pastiglia stretta lo spazio finiva prima del nome:
   nell'Agenda si leggevano solo le iniziali del venditore. Via tutti e due,
   per ogni calendario. */
.fc-unthemed .fc-event .fc-content,
.fc-unthemed .fc-event-dot .fc-content { padding: 0; }
.fc-unthemed .fc-event .fc-content::before,
.fc-unthemed .fc-event-dot .fc-content::before { display: none; }

/* Gli eventi: la forma di base. Colori e contenuto li decide il modulo. */
.fc .fc-event {
  border-radius: 6px; font-size: calc(12px * var(--dv-fs,1)); cursor: pointer;
  border-width: 1px; line-height: 1.35;
}
.fc .fc-day-grid-event { padding: 2px 6px; margin: 1px 3px 0; }
.fc .fc-more { font-size: calc(11.5px * var(--dv-fs,1)); font-weight: 600; color: var(--ink-muted); padding: 1px 6px; }
.fc .fc-more:hover { color: var(--accent); text-decoration: none; }
.fc .fc-popover {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 12px 32px rgba(16,24,40,.14); border-color: var(--grey-line);
}
.fc .fc-popover .fc-header { background: var(--surface-soft); padding: 8px 10px; font-weight: 600; color: var(--ink); }

/* La settimana e il giorno con le ore. */
.fc .fc-axis { font-size: calc(11px * var(--dv-fs,1)); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.fc .fc-time-grid .fc-slats td { height: 24px; }
.fc-unthemed .fc-time-grid .fc-slats .fc-minor td { border-top-style: dashed; border-top-color: var(--hairline); }
.fc .fc-time-grid .fc-slats .fc-axis { vertical-align: top; padding: 0 8px 0 0; text-align: right; }
.fc .fc-time-grid .fc-slats .fc-axis span { position: relative; top: -8px; background: var(--canvas); padding: 0 2px; }
.fc .fc-time-grid .fc-slats tr:first-child .fc-axis span { top: 0; }
.fc .fc-day-grid .fc-axis { font-size: calc(10.5px * var(--dv-fs,1)); color: var(--ink-muted-soft); line-height: 1.2; }
.fc .fc-time-grid-event { border-radius: 7px; }
.fc .fc-time-grid-event.fc-selected, .fc .fc-time-grid .fc-highlight { opacity: 1; }
.fc .fc-highlight { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* L'ORA ADESSO: rossa, come nel planning dell'officina ma orizzontale. Il
   triangolo del pacchetto sparisce, al suo posto un punto all'inizio della
   linea. */
.fc .fc-now-indicator-line { border-color: var(--danger); border-top-width: 2px; z-index: 4; }
.fc .fc-now-indicator-line::before {
  content: ""; position: absolute; left: -5px; top: -6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger);
}
.fc .fc-now-indicator-arrow { display: none; }


/* ============================================================
   C — COMPONENTI dv-*
   Si adottano nel markup al posto delle copie di modulo.
   ============================================================ */

/* ============================================================
   1 — SHELL DI PAGINA — SOLO COLORE
   Il 2026-08-07 un corpo del titolo a 22px e 24px di respiro sul
   contenitore spostavano il contenuto di tutte le pagine (il contatore
   finiva a capo): qui si da' solo colore alle classi di Metronic.
   ============================================================ */

/* Colore soltanto: nessuna misura, nessun peso, nessun margine.
   La specificita' ricalca quella di Metronic (.kt-subheader
   .kt-subheader__main .kt-subheader__title) perche' altrimenti la
   regola e' inerte: misurato, il titolo restava #333. */
.kt-subheader .kt-subheader__main .kt-subheader__title { color: var(--ink); }
.kt-subheader .kt-subheader__desc { color: var(--ink-muted); }
.kt-subheader .kt-subheader__separator--v { background: var(--hairline); }


/* ============================================================
   2 — BADGE E PILLOLE DI STATO
   Riferimento d'impianto: ReUI "badge". Fondo chiaro, testo scuro
   della stessa famiglia, raggio pieno.

   Attenzione: gli stati configurati dall'amministratore portano il
   colore dalla banca dati. Queste classi servono agli stati
   CALCOLATI (soglie di giacenza, completezza, avvisi). Non cablare
   qui un colore che il dato porta con se'.
   ============================================================ */

/* Tre trattamenti per ogni significato, come in ReUI: tenue (il
   predefinito, gia' la forma della casa), pieno e contornato. Il
   significato lo dice il colore, l'enfasi la dice il trattamento —
   cosi' due badge vicini possono avere lo stesso senso e un peso
   diverso senza inventare una tinta nuova.

     .dv-badge                   tenue, neutro
     .dv-badge--success          tenue, verde
     .dv-badge--success.is-solid pieno
     .dv-badge--success.is-outline contornato

   Il raggio predefinito e' la pillola, che e' quello che il progetto
   usa ovunque; .dv-badge--sq lo porta al raggio delle schede per i
   casi in cui il badge sta dentro una cella stretta. */

.dv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: 2px var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: calc(var(--fs-badge) * var(--dv-fs,1));
  font-weight: var(--fw-badge);
  line-height: var(--lh-badge);
  white-space: nowrap;
  background: var(--surface-alt);
  color: var(--ink-body);
}

/* --- tenue: fondo chiaro, testo scuro, bordo della stessa famiglia --- */
.dv-badge--success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg-tint); }
.dv-badge--warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-bg-strong); }
.dv-badge--danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-bg-tint); }
.dv-badge--info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-bg-soft); }

/* --- pieno: per il badge che deve vincere sulla riga --------------
   I fondi sono i colori di TESTO delle rampe, non quelli di fondo:
   sono gli unici che reggono il bianco sopra (da 5.04:1 a 6.89:1). */
.dv-badge.is-solid            { background: var(--ink-body);      color: var(--canvas); border-color: transparent; }
.dv-badge--success.is-solid   { background: var(--success-text);  color: var(--canvas); }
.dv-badge--warning.is-solid   { background: var(--warning-text);  color: var(--canvas); }
.dv-badge--danger.is-solid    { background: var(--danger-text);   color: var(--canvas); }
.dv-badge--info.is-solid      { background: var(--info-text);     color: var(--canvas); }

/* --- contornato: per quando il fondo sotto e' gia' colorato -------- */
.dv-badge.is-outline          { background: transparent; color: var(--ink-body);     border-color: var(--grey-line); }
.dv-badge--success.is-outline { background: transparent; color: var(--success-text); border-color: currentColor; }
.dv-badge--warning.is-outline { background: transparent; color: var(--warning-text); border-color: currentColor; }
.dv-badge--danger.is-outline  { background: transparent; color: var(--danger-text);  border-color: currentColor; }
.dv-badge--info.is-outline    { background: transparent; color: var(--info-text);    border-color: currentColor; }

/* --- taglie e forma --- */
.dv-badge--sm { padding: 1px var(--space-xs); font-size: calc(var(--fs-micro) * var(--dv-fs,1)); }
.dv-badge--lg { padding: var(--space-xxs) var(--space-md); font-size: calc(var(--fs-meta) * var(--dv-fs,1)); }
.dv-badge--sq { border-radius: var(--radius-sm); }


/* Numeri in colonna: cifre a larghezza fissa, cosi' importi e contatori
   si incolonnano invece di ballare. */
.dv-num { font-variant-numeric: tabular-nums; }


/* ============================================================
   3 — TESSERA DATO (KPI)
   Una sola anatomia in tutto il prodotto (23/10/2026): quadrotto
   icona BORDATO a sinistra, etichetta maiuscoletta SOPRA il numero,
   dettaglio sotto. Il colore sta solo nel quadrotto. Prima era
   ricopiata in 20 fogli di modulo con 13 prefissi (cr-, pl-, bd-,
   hm-, sup-, lr-, eh-, rc-, do-...) e differenze di 2-4px.

     <div class="dv-kpi-row dv-kpi-row--4">
       <div class="dv-kpi">                      (o <button>/<a>: cliccabile)
         <span class="dv-kpi__ico dv-kpi__ico--success"><i class="ki-outline ki-check"></i></span>
         <span class="dv-kpi__body">
           <span class="dv-kpi__label">Chiusi</span>
           <span class="dv-kpi__value">12<span class="dv-kpi__den">/ 20</span></span>
           <span class="dv-kpi__hint">negli ultimi 30 giorni</span>
         </span>
       </div>
     </div>

   In PHP: dvKpi() di inc/ui.php. In JS: Draive.kpi() di
   assets/js/custom.functions.js. --flat toglie la scheda quando la
   tessera sta gia' dentro un riquadro (i box dei cruscotti).
   Niente bordo d'accento laterale: dove serve un colore di stato lo
   porta il quadrotto o il numero.
   ============================================================ */

.dv-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
/* Colonne DICHIARATE quando il numero di tessere e' fisso: con auto-fit
   sei tessere su uno schermo largo diventano 4+2, e due tessere e mezzo
   riquadro vuoto si leggono come un caricamento a meta'. */
.dv-kpi-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-kpi-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dv-kpi-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dv-kpi-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dv-kpi-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1199px) {
  .dv-kpi-row--5, .dv-kpi-row--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .dv-kpi-row--3, .dv-kpi-row--4, .dv-kpi-row--5, .dv-kpi-row--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .dv-kpi-row[class*="dv-kpi-row--"] { grid-template-columns: minmax(0, 1fr); }
}

.dv-kpi {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  min-width: 0;
  margin: 0;
  padding: var(--space-md) var(--space-base);
  background: var(--canvas);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: inherit;
  font: inherit;
  text-align: left;
}
.dv-kpi--flat { padding: 0; background: none; border: 0; box-shadow: none; }

/* Il quadrotto: l'unica cosa della tessera che non si comprime mai,
   l'ellissi se la prende il testo. Le terne fondo/bordo/glifo sono
   quelle dei token semantici. */
.dv-kpi__ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
  color: var(--ink-body);
  font-size: calc(20px * var(--dv-fs,1));
}
.dv-kpi__ico--success { background: var(--success-bg); border-color: var(--success-bg-tint);   color: var(--success); }
.dv-kpi__ico--info    { background: var(--info-bg);    border-color: var(--info-bg-soft);      color: var(--accent-soft); }
.dv-kpi__ico--warning { background: var(--warning-bg); border-color: var(--warning-bg-strong); color: var(--warning-strong); }
.dv-kpi__ico--danger  { background: var(--danger-bg);  border-color: var(--danger-bg-tint);    color: var(--danger-strong); }

.dv-kpi__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* Sulle etichette lunghe va a capo: due righe leggibili, mai ellissi. */
.dv-kpi__label {
  margin: 0 0 2px;
  font-size: calc(var(--fs-micro) * var(--dv-fs,1));
  font-weight: var(--fw-micro);
  line-height: 1.25;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-muted-soft);
}
.dv-kpi__value {
  font-size: calc(var(--fs-kpi) * var(--dv-fs,1));
  font-weight: var(--fw-kpi);
  line-height: var(--lh-kpi);
  letter-spacing: -.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dv-kpi__value.is-testo { font-size: calc(20px * var(--dv-fs,1)); letter-spacing: 0; }
/* «7 / 11»: il denominatore piu' piccolo, se no si legge un numero solo. */
.dv-kpi__den { font-size: .66em; font-weight: var(--fw-semi); letter-spacing: 0; color: var(--ink-muted); }
.dv-kpi__hint {
  display: -webkit-box;
  padding-top: 2px;
  overflow: hidden;
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
  line-height: 1.35;
  color: var(--ink-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Cliccabile (filtra o porta altrove): l'hover parla col bordo, niente
   sollevamento; attiva = bordo e anello color inchiostro; a zero il
   fondo grigio, cosi' si vede da lontano dove non c'e' niente. */
button.dv-kpi, a.dv-kpi, .dv-kpi.is-clickable {
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--motion-base), border-color var(--motion-base), background var(--motion-base);
}
button.dv-kpi:hover, a.dv-kpi:hover, .dv-kpi.is-clickable:hover {
  border-color: var(--grey-mid);
  box-shadow: 0 2px 6px rgba(16,24,40,.08);
  color: inherit;
}
button.dv-kpi:focus { outline: none; }
.dv-kpi:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dv-kpi.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset, 0 4px 10px rgba(16,24,40,.08); }
.dv-kpi.is-zero { background: var(--surface-alt); }
.dv-kpi.is-zero .dv-kpi__value { color: var(--ink-muted); }
.dv-kpi.is-zero .dv-kpi__ico { background: var(--canvas); border-color: var(--grey-line); color: var(--grey-mid); }

@media (max-width: 767px) {
  .dv-kpi__value { font-size: calc(22px * var(--dv-fs,1)); }
  .dv-kpi__ico { width: 40px; height: 40px; font-size: calc(18px * var(--dv-fs,1)); }
}


/* ============================================================
   4 — NAVIGATORE DI PERIODO (23/10/2026)
   «‹ agosto 2026 › Oggi» accanto al titolo della pagina: frecce,
   periodo, ritorno al presente. Era ricopiato in pipeline, BDC,
   cruscotto (mese) e costi (anno) con quattro prefissi.

     <div class="dv-mesenav">
       <button type="button" class="dv-mesenav__b"><i class="ki-outline ki-left"></i></button>
       <span class="dv-mesenav__v">agosto 2026</span>
       <button type="button" class="dv-mesenav__b"><i class="ki-outline ki-right"></i></button>
       <button type="button" class="dv-mesenav__oggi">Oggi</button>
     </div>

   .is-off (o disabled) sul bottone che non porta da nessuna parte (gia'
   sul presente, intervallo libero, storico non concesso); --anno per
   l'etichetta corta.
   ============================================================ */

.dv-mesenav { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--space-lg); white-space: nowrap; }
.dv-mesenav__b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-md);
  background: var(--canvas);
  color: var(--ink-body);
  cursor: pointer;
}
.dv-mesenav__b i { font-size: calc(13px * var(--dv-fs,1)); line-height: 1; color: inherit; }
.dv-mesenav__b:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.dv-mesenav__v {
  min-width: 118px;
  padding: 0 var(--space-xxs);
  text-align: center;
  font-size: calc(var(--fs-meta) * var(--dv-fs,1));
  font-weight: var(--fw-bold);
  color: var(--ink-body);
}
.dv-mesenav--anno .dv-mesenav__v { min-width: 64px; }
.dv-mesenav__oggi {
  margin-left: var(--space-xs);
  padding: var(--space-xxs) 9px;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-md);
  background: var(--canvas);
  color: var(--accent-soft);
  font-size: calc(var(--fs-caption) * var(--dv-fs,1));
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.dv-mesenav__oggi:hover { background: var(--info-bg); color: var(--accent-soft); text-decoration: none; }
.dv-mesenav__b.is-off, .dv-mesenav__b:disabled, .dv-mesenav__oggi.is-off { cursor: default; opacity: .45; }
.dv-mesenav__b.is-off:hover, .dv-mesenav__b:disabled:hover, .dv-mesenav__oggi.is-off:hover { background: var(--canvas); color: var(--ink-body); }
.dv-mesenav__oggi.is-off:hover { color: var(--accent-soft); }
@media (max-width: 767px) { .dv-mesenav { margin-left: 0; } }


/* ============================================================
   5 — FOGLIO CON LE SCHEDE IN TESTA (23/10/2026)
   La riga delle schede (Pipeline · Venditori · Funnel...) incollata
   sotto la banda alta 64px mentre la lista scorre, sul grigio del
   foglio, con l'angolo stondato in alto a sinistra. Era scritta
   identica in sei moduli; ora si chiede con .dv-schede sul portlet:

     <div id="kt_inbox_list" ...>
       <div class="kt-portlet kt-portlet--tabs dv-schede">
         <div class="kt-portlet__head"> ...nav-tabs... </div>

   Il ::before copre i 64px sopra la riga, dove la banda della pagina
   e' trasparente: senza, scorrendo, le righe della lista passerebbero
   tra la testata e le schede.
   ============================================================ */

@media (min-width: 1025px) {
  #kt_inbox_list .kt-portlet--tabs.dv-schede > .kt-portlet__head {
    position: sticky;
    top: 64px;
    left: auto;
    right: auto;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 61px;
    min-height: 61px;
    margin: 0;
    padding: 0 9px;
    border-bottom: 0;
    border-top-left-radius: 16px;
    background: var(--surface-tint);
  }
  #kt_inbox_list .kt-portlet--tabs.dv-schede > .kt-portlet__head::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 0;
    right: 0;
    height: 64px;
    border-top-left-radius: 16px;
    background: var(--surface-tint);
    pointer-events: none;
  }
}
@media (max-width: 1024px) {
  #kt_inbox_list .kt-portlet--tabs.dv-schede > .kt-portlet__head { position: relative; flex-wrap: nowrap; padding: 0 9px; }
}
/* La riga del titolo resta leggibile sopra la maschera (::before): di
   default ha z-index 2, la testata a schede 3. */
@media (min-width: 1025px) {
  body:has(.dv-schede) #kt_subheader { z-index: 5; }
}
/* Le schede stanno su una riga sola e scorrono di lato, senza barra di
   scorrimento; la riga grigia sotto e' del border-bottom della UL
   .nav-tabs-line del tema, l'underline della scheda attiva resta. */
.kt-portlet--tabs.dv-schede > .kt-portlet__head .kt-portlet__head-toolbar { min-width: 0; max-width: 100%; flex: 1 1 100%; overflow: hidden; margin: 0; }
.kt-portlet--tabs.dv-schede > .kt-portlet__head .nav.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kt-portlet--tabs.dv-schede > .kt-portlet__head .nav.nav-tabs::-webkit-scrollbar { display: none; }
.kt-portlet--tabs.dv-schede > .kt-portlet__head .nav.nav-tabs .nav-item { flex: 0 0 auto; }
.kt-portlet--tabs.dv-schede > .kt-portlet__head .nav.nav-tabs .nav-link { white-space: nowrap; }
.kt-portlet--tabs.dv-schede > .kt-portlet__head .nav.nav-tabs.nav-tabs-line { border-bottom-color: transparent !important; }


/* ============================================================
   6 — RIQUADRO (26/10/2026)
   La superficie bianca dei cruscotti: grafici, tabelle, elenchi. Stessa
   veste della tessera .dv-kpi, che spesso le sta sopra. Era ricopiata in
   quattro moduli (.cr-box/.cr-card del Cruscotto, .bd-card della
   Dashboard BDC, .do-box dell'Officina, .ld-box della Logistica) con due
   grigi di filo e tre spaziature.

     <section class="dv-box">
       <div class="dv-box__h">Titolo <small>ultimi 30 giorni</small>
         <div class="dv-box__act">...comandi...</div>
       </div>
       ...contenuto...
     </section>

   .cr-box, .cr-card, .cr-card-h e .cr-card-act sono i nomi del Cruscotto,
   che Recensioni, Meta, Social e Report vendite usano caricando il suo
   foglio: restano come alias, cosi' quelle pagine non cambiano markup.
   Griglia, altezze e maniglie restano del modulo, sotto il suo prefisso.
   ============================================================ */

.dv-box, .cr-box, .cr-card {
  min-width: 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--canvas);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.dv-box__h, .cr-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-base);
  margin: 0 0 var(--space-lg);
  font-size: calc(var(--fs-subtitle) * var(--dv-fs,1));
  font-weight: var(--fw-subtitle);
  color: var(--ink);
}
.dv-box__h > *, .cr-card-h > * { min-width: 0; }
.dv-box__h small, .cr-card-h small { font-size: calc(var(--fs-meta) * var(--dv-fs,1)); font-weight: var(--fw-body); color: var(--ink-muted); }
.dv-box__act, .cr-card-act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-left: auto; }


/* ============================================================
   7 — ACCESSIBILITA' TRASVERSALE
   ============================================================ */

/* Chi disattiva le animazioni non deve vederne nessuna. Il progetto
   lo faceva gia' in 6 punti sparsi: qui vale ovunque. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Etichetta per soli lettori di schermo: serve ai bottoni con la
   sola icona, che nel progetto sono 317 e spesso non dicono nulla. */
.dv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}