/* ==========================================================================
   VIBI — componenti del gestionale e dei tablet
   Il tema e' quello di default di Velzon (bootstrap.min.css, app.min.css, custom.css): qui ci
   sono solo i componenti che Velzon non ha, e ogni colore e font viene dalle variabili del
   tema (--vz-*), cosi' l'interfaccia resta quella del pannello. Niente regole su body, card,
   badge, tabelle, titoli, topbar o sidebar: quelle restano del tema.
   L'arancione del design handoff (#F06548) e' il danger del tema: dove indicava un'attenzione
   accanto a un errore (ok / attenzione / errore) qui diventa warning.
   ========================================================================== */

/* Tabelle: header con thead.table-light come nelle pagine del framework */
.table-vibi { margin-bottom: 0; }
.table-vibi > tbody > tr > td { vertical-align: middle; }
.table-vibi > tbody > tr.riga-link { cursor: pointer; }
.table-vibi > tbody > tr.riga-link:hover > * { --vz-table-bg-state: var(--vz-table-hover-bg); }
.table-vibi tfoot td { font-weight: 600; background-color: var(--vz-light); }

/* Testo monospace: FIR, matricole, OCR, display della pesa */
.mono, .vibi-mono { font-family: var(--vz-font-monospace); }
.text-muted-2 { color: var(--vz-secondary-color) !important; }
.text-orange { color: var(--vz-danger) !important; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-alt { background-color: var(--vz-light); }

/* Badge soft: gli stessi colori di bg-X-subtle text-X del tema */
.badge-soft-primary   { background-color: var(--vz-primary-bg-subtle);   color: var(--vz-primary); }
.badge-soft-secondary { background-color: var(--vz-secondary-bg-subtle); color: var(--vz-secondary); }
.badge-soft-success   { background-color: var(--vz-success-bg-subtle);   color: var(--vz-success); }
.badge-soft-info      { background-color: var(--vz-info-bg-subtle);      color: var(--vz-info); }
.badge-soft-warning   { background-color: var(--vz-warning-bg-subtle);   color: var(--vz-warning); }
.badge-soft-danger,
.badge-soft-orange    { background-color: var(--vz-danger-bg-subtle);    color: var(--vz-danger); }
.badge-soft-gray      { background-color: var(--vz-light);               color: var(--vz-secondary-color); }

/* Badge di flusso AUTO / UMANO */
.badge-auto  { background-color: var(--vz-info); }
.badge-umano { background-color: var(--vz-secondary); }

/* Badge di provenienza dei valori */
.prov {
	display        : inline-block;
	font-size      : 10.5px;
	font-weight    : 600;
	text-transform : uppercase;
	border-radius  : var(--vz-border-radius);
	padding        : .15em .45em;
	white-space    : nowrap;
}
.prov-ocr      { background-color: var(--vz-info-bg-subtle);      color: var(--vz-info-text-emphasis); }
.prov-tabella  { background-color: var(--vz-primary-bg-subtle);   color: var(--vz-primary); }
.prov-regola   { background-color: var(--vz-secondary-bg-subtle); color: var(--vz-secondary-text-emphasis); }
.prov-calcolo  { background-color: var(--vz-light);               color: var(--vz-secondary-color); }
.prov-manuale  { background-color: var(--vz-danger-bg-subtle);    color: var(--vz-danger-text-emphasis); }
.prov-soglia   { background-color: var(--vz-warning-bg-subtle);   color: var(--vz-warning-text-emphasis); }
.prov-nonletto { background-color: var(--vz-light);               color: var(--vz-gray-500); }

/* Chip delle fasce kVA: colori con nome del tema (viola, rosso, ciano, verde, arancio, giallo, rosa) */
.chip-kva {
	display       : inline-block;
	border-radius : var(--vz-border-radius);
	padding       : .15em .5em;
	font-size     : 12px;
	font-weight   : 600;
	color         : #fff;
	white-space   : nowrap;
	border        : 1px solid transparent;
}
.kva-25  { background-color: var(--vz-purple); border-color: var(--vz-purple); }
.kva-50  { background-color: var(--vz-red);    border-color: var(--vz-red); }
.kva-100 { background-color: var(--vz-cyan);   border-color: var(--vz-cyan); }
.kva-160 { background-color: var(--vz-green);  border-color: var(--vz-green); }
.kva-250 { background-color: var(--vz-orange); border-color: var(--vz-orange); }
.kva-400 { background-color: var(--vz-yellow); border-color: var(--vz-yellow); color: var(--vz-dark); }
.kva-630 { background-color: var(--vz-pink);   border-color: var(--vz-pink); }
.kva-custom { background-color: var(--vz-secondary-bg); border-color: var(--vz-border-color); color: var(--vz-body-color); }

/* Chip di esito / stato con tono */
.chip {
	display       : inline-block;
	border-radius : var(--vz-border-radius);
	padding       : .2em .55em;
	font-size     : 12px;
	font-weight   : 500;
	white-space   : nowrap;
	border        : 1px solid transparent;
}
.chip-ok   { background-color: var(--vz-success-bg-subtle); border-color: var(--vz-success-border-subtle); color: var(--vz-success-text-emphasis); }
.chip-warn { background-color: var(--vz-warning-bg-subtle); border-color: var(--vz-warning-border-subtle); color: var(--vz-warning-text-emphasis); }
.chip-err  { background-color: var(--vz-danger-bg-subtle);  border-color: var(--vz-danger-border-subtle);  color: var(--vz-danger-text-emphasis); }
.chip-info { background-color: var(--vz-primary-bg-subtle); border-color: var(--vz-primary-border-subtle); color: var(--vz-primary); }
.chip-gray { background-color: var(--vz-light);             border-color: var(--vz-border-color);          color: var(--vz-secondary-color); }
.chip-cyan { background-color: var(--vz-info-bg-subtle);    border-color: var(--vz-info-border-subtle);    color: var(--vz-info-text-emphasis); }

/* Colori dei materiali: sono dati (ext_articoli.art_colore, modificabili dalle Impostazioni),
   usati solo nelle legende e nei grafici */
.mat { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.mat-olio { background: #F59E0B; } .mat-ottone { background: #B08D2E; } .mat-ceramica { background: #D9C4A3; }
.mat-banco { background: #8E8CD8; } .mat-ferro { background: #607D8B; } .mat-alluminio { background: #B0BEC5; }
.mat-elettrico { background: #26A69A; } .mat-rame { background: #C46A2D; } .mat-lamierini { background: #455A64; }
.mat-sporco { background: #9E9E9E; } .mat-nucleo { background: #212529; }

/* Barra della composizione */
.barra-comp { display: flex; height: 14px; border-radius: var(--vz-border-radius); overflow: hidden; background-color: var(--vz-light); }
.barra-comp > span { display: block; height: 100%; }

/* Binari: ambientale (verde) e fiscale (primario) */
.binario-ww  { background-color: var(--vz-success-bg-subtle); border: 1px solid var(--vz-success-border-subtle); color: var(--vz-success-text-emphasis); border-radius: var(--vz-border-radius); }
.binario-uno { background-color: var(--vz-primary-bg-subtle); border: 1px solid var(--vz-primary-border-subtle); color: var(--vz-primary-text-emphasis); border-radius: var(--vz-border-radius); }
.binario-ww .binario-titolo, .binario-uno .binario-titolo { font-weight: 600; font-size: 13px; text-transform: uppercase; }

/* KPI: riquadri come quelli delle dashboard di Velzon */
.kpi { cursor: default; }
.kpi[data-href] { cursor: pointer; }
.kpi .kpi-etichetta { text-transform: uppercase; font-weight: 500; color: var(--vz-secondary-color); }
.kpi .kpi-valore { font-size: 22px; font-weight: 600; }
.kpi .kpi-nota { color: var(--vz-secondary-color); }
/* riquadri in riga: stessa altezza anche con etichette e note di lunghezza diversa */
.vibi-kpi-riga > [class*="col"] { display: flex; }
.vibi-kpi-riga > [class*="col"] > .card { flex: 1 1 auto; }

/* tab verticali di una pagina (Magazzino fiscale): menu largo quanto le voci, il resto al contenuto,
   che si stringe (le tabelle larghe scorrono dentro il loro riquadro invece di andare sotto il menu) */
@media (min-width: 992px) {
	.vibi-tab-menu { flex: 0 0 auto; width: 220px; }
}
.vibi-tab-contenuto { min-width: 0; }
/* card dentro una tab: riquadri con il bordo, senza l'ombra della card che li contiene */
.vibi-tab-contenuto .card { box-shadow: none; border: 1px solid var(--vz-border-color); }
/* pratica: step raggruppati sotto gli stati, piu' fitti delle tab di gest (sono 9 step) */
.vertical-navs-step .nav.vibi-passi { gap: 6px; }
.vibi-passi .nav-link { padding: .45rem .75rem; font-size: 13px; }
.vibi-passi-stato { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--vz-secondary-color); margin-top: 10px; }

/* Wizard della pratica */
.wizard-steps { display: grid; gap: 0; position: relative; margin: 6px 0 4px; }
.wizard-steps .wz-traccia { position: absolute; top: 15px; height: 2px; background-color: var(--vz-border-color); }
.wizard-steps .wz-riempimento { position: absolute; top: 0; left: 0; height: 2px; background-color: var(--vz-primary); }
.wizard-steps .wz-step { position: relative; text-align: center; cursor: pointer; padding: 0 4px; }
.wizard-steps .wz-num {
	width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 13px; background-color: var(--vz-light); border: 2px solid var(--vz-border-color);
	color: var(--vz-secondary-color); position: relative; z-index: 1;
}
.wizard-steps .wz-step.fatto .wz-num { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
.wizard-steps .wz-step.attivo .wz-num { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; box-shadow: 0 0 0 4px rgba(var(--vz-primary-rgb), .15); }
.wizard-steps .wz-etichetta { font-size: 12px; color: var(--vz-secondary-color); line-height: 1.25; }
.wizard-steps .wz-step.attivo .wz-etichetta { color: var(--vz-body-color); font-weight: 500; }
.wz-guida { background-color: var(--vz-secondary-bg); border-left: 3px solid var(--vz-primary); padding: 10px 14px; border-radius: var(--vz-border-radius); }
.wz-guida .wz-passo { font-size: 11px; font-weight: 700; color: var(--vz-primary); }

/* Flusso della pratica (Mappa processi): gli stati, con sopra WinWaste · RENTRI e sotto Magazzino · UNO;
   su schermi stretti scorre in orizzontale */
.vibi-flusso .flusso-scorri { overflow-x: auto; }
.vibi-flusso .flusso-riga { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.vibi-flusso .flusso-riga + .flusso-riga { margin-top: 8px; }
.vibi-flusso .flusso-etichetta { align-self: center; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--vz-secondary-color); }
.vibi-flusso .flusso-ww .flusso-etichetta { color: var(--vz-success-text-emphasis); }
.vibi-flusso .flusso-uno .flusso-etichetta { color: var(--vz-primary-text-emphasis); }
.vibi-flusso .flusso-celle { display: grid; gap: 8px; }
.vibi-flusso .flusso-stato {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px;
	text-align: center; text-decoration: none; color: var(--vz-secondary-color); border-radius: var(--vz-border-radius);
}
.vibi-flusso .flusso-stato:hover { background-color: var(--vz-light); }
.vibi-flusso .flusso-stato:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 50%; width: calc(100% + 8px); height: 2px; background-color: var(--vz-border-color); }
.vibi-flusso .flusso-stato.fatto:not(:last-child)::after { background-color: var(--vz-primary); }
.vibi-flusso .flusso-num {
	position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 13px; background-color: var(--vz-light); border: 2px solid var(--vz-border-color); color: var(--vz-secondary-color);
}
.vibi-flusso .flusso-stato.fatto .flusso-num { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; }
.vibi-flusso .flusso-stato.attuale .flusso-num { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; box-shadow: 0 0 0 4px rgba(var(--vz-primary-rgb), .15); }
.vibi-flusso .flusso-nome { font-size: 12px; line-height: 1.25; }
.vibi-flusso .flusso-stato.attuale .flusso-nome { color: var(--vz-body-color); font-weight: 600; }
.vibi-flusso .flusso-stato.selezionato { background-color: var(--vz-primary-bg-subtle); }
.vibi-flusso .flusso-stato.selezionato .flusso-nome { color: var(--vz-primary-text-emphasis); font-weight: 600; }
.vibi-flusso .flusso-evento {
	display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 8px; font-size: 12px; line-height: 1.3;
	border: 1px dashed var(--vz-border-color); border-radius: var(--vz-border-radius); color: var(--vz-secondary-color);
}
.vibi-flusso .flusso-evento.vuoto { border: 0; padding: 0; }
.vibi-flusso .flusso-evento-nome { font-weight: 600; }
.vibi-flusso .flusso-evento-nota { overflow-wrap: break-word; }
.vibi-flusso .flusso-ww .flusso-evento.fatto { border-style: solid; background-color: var(--vz-success-bg-subtle); border-color: var(--vz-success-border-subtle); color: var(--vz-success-text-emphasis); }
.vibi-flusso .flusso-uno .flusso-evento.fatto { border-style: solid; background-color: var(--vz-primary-bg-subtle); border-color: var(--vz-primary-border-subtle); color: var(--vz-primary-text-emphasis); }
.vibi-flusso .flusso-evento.ritardo { border-style: solid; background-color: var(--vz-danger-bg-subtle); border-color: var(--vz-danger-border-subtle); color: var(--vz-danger-text-emphasis); }
.vibi-flusso .flusso-evento.info { border-style: solid; background-color: var(--vz-info-bg-subtle); border-color: var(--vz-info-border-subtle); color: var(--vz-info-text-emphasis); }
/* uscite dal percorso: tratteggiate, come nella mappa */
.vibi-flusso .flusso-uscite .flusso-celle > div { display: flex; flex-direction: column; gap: 4px; }
.vibi-flusso .flusso-uscita { padding: 4px 8px; font-size: 12px; border: 1px dashed var(--vz-warning-border-subtle); border-radius: var(--vz-border-radius); background-color: var(--vz-warning-bg-subtle); color: var(--vz-warning-text-emphasis); }
.vibi-flusso .flusso-passi .nav-link { padding: .25rem .75rem; font-size: 13px; }

/* Avvisi di quadratura */
.quadra-ok  { background-color: var(--vz-success-bg-subtle); border: 1px solid var(--vz-success-border-subtle); color: var(--vz-success-text-emphasis); border-radius: var(--vz-border-radius); }
.quadra-ko  { background-color: var(--vz-warning-bg-subtle); border: 1px solid var(--vz-warning-border-subtle); color: var(--vz-warning-text-emphasis); border-radius: var(--vz-border-radius); }
.quadra-err { background-color: var(--vz-danger-bg-subtle);  border: 1px solid var(--vz-danger-border-subtle);  color: var(--vz-danger-text-emphasis); border-radius: var(--vz-border-radius); }

/* Interruttore compatto delle rese */
.form-switch-sm .form-check-input { width: 2em; height: 1.1em; }

/* Lucchetto delle sezioni riservate */
.lucchetto { text-align: center; padding: 60px 20px; color: var(--vz-secondary-color); }
.lucchetto i { font-size: 42px; color: var(--vz-gray-500); }

/* Pill di contesto (pratica aperta) nella topbar */
.vibi-contesto {
	background-color : var(--vz-primary-bg-subtle);
	color            : var(--vz-primary);
	border-radius    : var(--vz-border-radius);
	padding          : 4px 10px;
	font-family      : var(--vz-font-monospace);
	font-size        : 12px;
	white-space      : nowrap;
}

/* Toast in alto al centro */
.toastify.vibi-toast { max-width: 640px; }
.toastify.vibi-toast a { color: #fff; text-decoration: underline; font-weight: 600; margin-left: 8px; }

/* Righe di elenco compatte nei pannelli */
.lista-vibi .lv-riga { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--vz-border-color); }
.lista-vibi .lv-riga:last-child { border-bottom: 0; }

/* Area di caricamento */
.dropzone-vibi { border: 2px dashed var(--vz-input-border-custom); border-radius: var(--vz-border-radius); padding: 18px; text-align: center; color: var(--vz-secondary-color); cursor: pointer; background-color: var(--vz-light); }
.dropzone-vibi:hover { border-color: var(--vz-primary); color: var(--vz-primary); }

@media (max-width: 1099.98px) {
	.wizard-steps .wz-etichetta { display: none; }
}

/* ==========================================================================
   Tablet (piazzale e pesa): schermo intero senza sidebar, topbar uguale a quella del
   pannello, bersagli touch di almeno 44 px, bottoni principali alti 60-68 px
   ========================================================================== */
body.vibi-tablet { background-color: var(--vz-body-bg); min-height: 100vh; }
.tablet-topbar {
	position: sticky; top: 0; z-index: 1020; height: 70px;
	background-color: var(--vz-header-bg); color: var(--vz-header-item-color);
	border-bottom: 1px solid var(--vz-header-border); box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
	display: flex; align-items: center; gap: 14px; padding: 0 18px;
	padding-top: env(safe-area-inset-top, 0px);
}
/* come .navbar-header .btn-topbar della topbar del pannello (grigio, sfondo all'hover) */
.tablet-topbar .btn-topbar { color: var(--vz-header-item-sub-color); min-width: 44px; min-height: 44px; }
.tablet-topbar .btn-topbar:hover, .tablet-topbar .btn-topbar:focus, .tablet-topbar .btn-topbar.active { background-color: var(--vz-header-item-bg); }
.tablet-titolo-1 { font-weight: 700; font-size: 15px; text-transform: uppercase; }
.tablet-titolo-2 { font-size: 12px; color: var(--vz-header-item-sub-color); }
.tablet-coda { background-color: var(--vz-warning-bg-subtle); color: var(--vz-warning-text-emphasis); border-radius: var(--vz-border-radius); padding: 4px 10px; font-size: 13px; font-weight: 600; }
.tablet-coda.offline { background-color: var(--vz-danger-bg-subtle); color: var(--vz-danger-text-emphasis); }
.tablet-utente { display: flex; align-items: center; background-color: var(--vz-topbar-user-bg); border-radius: var(--vz-border-radius); padding: 6px 12px; color: var(--vz-header-item-color); font-size: 13px; }
.tablet-utente .avatar-initials { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--vz-primary); color: #fff; font-weight: 600; font-size: 12px; }
.tablet-main { max-width: 1180px; margin: 0 auto; padding: 20px 18px calc(110px + env(safe-area-inset-bottom, 0px)); }
.tablet-intest { margin-bottom: 16px; }
.tablet-intest h3 { margin-bottom: 4px; }
.tablet-intest p { color: var(--vz-secondary-color); margin-bottom: 0; font-size: 15px; }
.tablet-card { margin-bottom: 16px; }
.tablet-progress { height: 10px; border-radius: 5px; background-color: var(--vz-light); max-width: 520px; }
.tablet-numero { border-left: 4px solid var(--vz-primary); }
.btn-tablet { min-height: 60px; font-size: 17px; font-weight: 500; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; }
.btn-tablet-sm { min-height: 48px; font-size: 15px; min-width: 88px; }
.tablet-azioni {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010;
	background-color: var(--vz-secondary-bg); border-top: 1px solid var(--vz-border-color);
	display: flex; gap: 12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -1px 2px rgba(56, 65, 74, .15);
}
.tablet-azioni > * { min-width: 0; }
@media (min-width: 1216px) { .tablet-azioni { left: calc((100vw - 1180px) / 2); right: calc((100vw - 1180px) / 2); border-left: 1px solid var(--vz-border-color); border-right: 1px solid var(--vz-border-color); } }
.tablet-riga { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; }
.tablet-riga.cliccabile, button.tablet-riga { cursor: pointer; }
.tablet-riga.cliccabile:hover { background-color: var(--vz-table-hover-bg); }
.tablet-riga-n { width: 32px; height: 32px; border-radius: 50%; background-color: var(--vz-light); color: var(--vz-secondary-color); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.tablet-riga-stato { min-width: 200px; text-align: right; }
.tablet-foto { background-color: var(--vz-dark); border-radius: var(--vz-border-radius); min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.tablet-foto img { max-width: 100%; max-height: 58vh; object-fit: contain; }
.tablet-qualita { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.tablet-scatta { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; cursor: pointer; padding: 60px; }
.tablet-scatta i { font-size: 72px; color: var(--vz-gray-500); }
.tablet-scatta span { font-size: 20px; font-weight: 500; }
.tablet-attesa { text-align: center; color: var(--vz-gray-500); padding: 60px 0; }
.tablet-input { font-size: 22px; min-height: 60px; }
.tablet-switch .form-check-input { width: 3em; height: 1.6em; }
.tablet-switch .form-check-label { font-size: 16px; padding-left: 8px; padding-top: 4px; }
.tablet-segmenti { gap: 8px; }
.tablet-segmenti .btn { border-radius: var(--vz-border-radius) !important; }
.tablet-mini { width: 96px; height: 72px; object-fit: cover; border-radius: var(--vz-border-radius); border: 1px solid var(--vz-border-color); }
.tablet-domanda { background-color: var(--vz-card-bg); border-radius: var(--vz-border-radius); padding: 20px; box-shadow: var(--vz-card-box-shadow); margin-bottom: 16px; }
.tablet-successo { text-align: center; padding: 40px 10px; }
.tablet-successo > i { font-size: 72px; color: var(--vz-success); display: block; }
.tablet-numero-grande { font-size: 64px; font-weight: 600; color: var(--vz-body-color); }
.tablet-vuoto { text-align: center; padding: 80px 20px; color: var(--vz-secondary-color); }
.tablet-vuoto > i { font-size: 56px; color: var(--vz-gray-500); }
.min-w-0 { min-width: 0; }
@media (max-width: 767.98px) {
	.tablet-riga-stato { min-width: 0; }
	.tablet-riga { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- magazzino fiscale */
.vibi-etichetta { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--vz-secondary-color); }
.vibi-passo { border-top: 1px solid var(--vz-border-color); padding-top: 14px; margin-top: 14px; }
.vibi-passo-titolo { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--vz-heading-color); }
.vibi-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.vibi-tile { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--vz-border-color); border-radius: var(--vz-border-radius); background-color: var(--vz-secondary-bg); cursor: pointer; font-size: 13px; margin: 0; }
.vibi-tile.attivo { background-color: var(--vz-primary-bg-subtle); border-color: var(--vz-primary-border-subtle); }
.vibi-tile.spento { background-color: var(--vz-light); opacity: .6; cursor: not-allowed; }
.vibi-tile .form-check-input { margin-top: 2px; flex-shrink: 0; }
.vibi-totali { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.vibi-totale { background-color: var(--vz-light); border-radius: var(--vz-border-radius); padding: 10px 12px; }
.vibi-opzione { border: 1px solid var(--vz-border-color); border-radius: var(--vz-border-radius); padding: 10px 12px; height: 100%; }
.vibi-opzione.attiva { border-color: var(--vz-primary); background-color: rgba(var(--vz-primary-rgb), .06); }
.vibi-opzione.spenta { color: var(--vz-gray-500); background-color: var(--vz-light); }
.causa-mancante { outline: 2px solid rgba(var(--vz-danger-rgb), .55); outline-offset: 1px; border-radius: var(--vz-border-radius); }
.registro-mov { font-size: 12.5px; }
.registro-mov > thead th, .registro-mov > tbody > tr > td { padding-left: .45rem; padding-right: .45rem; }
.registro-mov td[data-colonna="documento"] { min-width: 180px; }
.registro-mov td[data-colonna="numero"], .registro-mov td[data-colonna="carico"], .registro-mov td[data-colonna="scarico"], .registro-mov td[data-colonna="progressiva"] { white-space: nowrap; }

/* ---------------------------------------------------------------- tracciabilità */
.vibi-catena { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.vibi-nodo { flex: 1 1 0; min-width: 132px; border: 1px solid var(--vz-border-color); border-radius: var(--vz-border-radius); background-color: var(--vz-secondary-bg); padding: 10px 12px; color: var(--vz-body-color); text-decoration: none; display: block; }
.vibi-nodo:hover { border-color: var(--vz-input-border-custom); background-color: rgba(var(--vz-primary-rgb), .04); color: var(--vz-body-color); }
.vibi-nodo.attivo { border: 2px solid var(--vz-primary); background-color: rgba(var(--vz-primary-rgb), .1); }
.vibi-freccia { align-self: center; color: var(--vz-gray-500); font-size: 14px; flex: 0 0 auto; }
.binario-mini { font-size: 11.5px; line-height: 1.35; border-radius: var(--vz-border-radius); padding: 3px 6px; margin-top: 4px; }
.binario-mini.ww { background-color: var(--vz-info-bg-subtle); color: var(--vz-info-text-emphasis); }
.binario-mini.uno { background-color: var(--vz-primary-bg-subtle); color: var(--vz-primary); }
.vibi-striscia { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.vibi-striscia-voce { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--vz-border-color); border-radius: var(--vz-border-radius); color: var(--vz-heading-color); text-decoration: none; flex: 0 0 auto; }
.vibi-striscia-voce.attivo { border: 2px solid var(--vz-primary); background-color: rgba(var(--vz-primary-rgb), .1); }
.vibi-targa { width: 96px; height: 54px; border-radius: 3px; background: linear-gradient(160deg, #EDEFF1, #D5D9DD); border: 1px solid #C5CBD1; display: flex; flex-direction: column; justify-content: center; padding: 2px 6px; font-size: 10px; line-height: 1.25; color: var(--vz-heading-color); overflow: hidden; }
.vibi-targa span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vibi-targa.grande { width: 100%; height: 150px; font-size: 15px; padding: 10px 14px; }

/* ---------------------------------------------------------------- registro attività */
.vibi-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------------------------------------------------------------- dashboard */
.dash-foto { width: 96px; height: 64px; border-radius: var(--vz-border-radius); overflow: hidden; background-color: var(--vz-light); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.dash-foto.grande { width: 150px; height: 110px; }
.dash-foto-etichetta { position: absolute; left: 6px; bottom: 6px; background: rgba(33, 37, 41, .7); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; }

/* ---------------------------------------------------------------- panoramica */
.pano-passo { display: flex; gap: 12px; align-items: flex-start; }
.pano-num { width: 34px; height: 34px; border-radius: 50%; background-color: var(--vz-primary-bg-subtle); color: var(--vz-primary); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pano-num.piccolo { width: 22px; height: 22px; font-size: 11px; }
.pano-foto { position: relative; border-radius: var(--vz-border-radius); overflow: hidden; box-shadow: var(--vz-card-box-shadow); }
.pano-foto > img { width: 100%; display: block; }
.pano-scan { position: absolute; left: 0; right: 0; top: 0; height: 14%; pointer-events: none; z-index: 8; background: linear-gradient(180deg, rgba(var(--vz-info-rgb), 0) 0%, rgba(var(--vz-info-rgb), .16) 70%, rgba(var(--vz-info-rgb), .5) 100%); border-bottom: 2px solid var(--vz-info); box-shadow: 0 8px 22px rgba(var(--vz-info-rgb), .45); animation: vibiScan 1400ms cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes vibiScan { from { top: 0; opacity: 1; } 90% { top: 86%; opacity: 1; } to { top: 86%; opacity: 0; } }
.pano-box { position: absolute; border: 2px dashed #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(56, 65, 74, .55), inset 0 0 0 1px rgba(56, 65, 74, .4); opacity: 0; transform: scale(.96); animation: vibiBox .35s ease-out forwards; z-index: 1; }
a.pano-box:hover { border-style: solid; border-width: 3px; box-shadow: 0 0 0 1px rgba(56, 65, 74, .6), 0 0 22px rgba(var(--vz-info-rgb), .75); z-index: 5; }
@keyframes vibiBox { to { opacity: 1; transform: scale(1); } }
.pano-chip { position: absolute; white-space: nowrap; background-color: var(--vz-secondary-bg); color: var(--vz-body-color); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; box-shadow: 0 1px 2px rgba(56, 65, 74, .3); }
.pano-tip { position: absolute; display: none; background-color: var(--vz-secondary-bg); color: var(--vz-body-color); padding: 8px 10px; border-radius: var(--vz-border-radius); box-shadow: 0 4px 16px rgba(56, 65, 74, .25); min-width: 160px; font-size: 12px; z-index: 6; }
a.pano-box:hover .pano-tip { display: block; }
.pano-centro { background-color: var(--vz-light); border-radius: var(--vz-border-radius); padding: 14px 16px; }
.pano-banda { display: flex; gap: 14px; align-items: flex-start; background-color: rgba(var(--vz-primary-rgb), .08); border: 1px solid var(--vz-primary-border-subtle); border-radius: var(--vz-border-radius); padding: 14px 18px; margin-top: 16px; color: var(--vz-body-color); }
.pano-banda > i { color: var(--vz-primary); }

/* ---------------------------------------------------------------- tipologie */
.tip-card { cursor: pointer; transition: box-shadow .15s; }
.tip-card:hover { box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), .15), var(--vz-card-box-shadow); border-color: var(--vz-primary) !important; }
.tip-img { height: 170px; background-color: var(--vz-light); display: flex; align-items: center; justify-content: center; border-radius: var(--vz-border-radius) var(--vz-border-radius) 0 0; overflow: hidden; }
.tip-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ---------------------------------------------------------------- trafo grossi */
.wz-info { background-color: var(--vz-primary-bg-subtle); border: 1px solid var(--vz-primary-border-subtle); color: var(--vz-primary-text-emphasis); border-radius: var(--vz-border-radius); font-size: 14px; line-height: 1.5; }
.doc-evidenza { background-color: rgba(var(--vz-danger-rgb), .06); border: 1px solid var(--vz-danger-border-subtle); }
#scheda-lavorazione input.form-control { min-width: 90px; }

/* ---------------------------------------------------------------- destinatari a chip */
.vibi-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; min-height: 38px; background-color: var(--vz-input-bg-custom); border: 1px solid var(--vz-input-border-custom); border-radius: var(--vz-border-radius); }
.vibi-chips-lista { display: contents; }
.vibi-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; border-radius: 12px; background-color: var(--vz-primary-bg-subtle); color: var(--vz-primary); font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
.vibi-chip-x { border: 0; background: transparent; color: inherit; padding: 0 6px; line-height: 1; font-size: 15px; cursor: pointer; }
.vibi-chip-x:hover { color: var(--vz-danger); }
.vibi-chips-nuovo { display: inline-flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.vibi-chips-nuovo input { border: 0; box-shadow: none; min-width: 0; padding-left: 4px; }

/* ---------------------------------------------------------------- materiale misto e tablet pesa */
.misto-foto { position: relative; border-radius: var(--vz-border-radius); overflow: hidden; background-color: var(--vz-dark); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--vz-gray-500); }
.misto-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.misto-foto > i { font-size: 3rem; }
.misto-foto.vuota { flex-direction: column; gap: 8px; padding: 24px; text-align: center; background-color: var(--vz-light); color: var(--vz-secondary-color); border: 1px dashed var(--vz-input-border-custom); }
.misto-foto.piccola { aspect-ratio: 16 / 10; }
.misto-foto-etichetta, .misto-foto-peso, .misto-foto-nota { position: absolute; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 3px; padding: 3px 8px; }
.misto-foto-etichetta { left: 10px; top: 10px; font-family: var(--vz-font-monospace); font-size: 12px; }
.misto-foto-peso { right: 10px; top: 10px; font-family: var(--vz-font-monospace); font-weight: 600; font-size: 15px; color: var(--vz-success); }
.misto-foto-nota { left: 10px; bottom: 10px; font-size: 12px; }
.pesa-display { background-color: var(--vz-dark); color: #fff; border-radius: var(--vz-border-radius); padding: 22px 26px; }
.pesa-display-etichetta { font-size: 12px; color: var(--vz-gray-500); font-weight: 600; text-transform: uppercase; }
.pesa-display-netto { font-family: var(--vz-font-monospace); font-size: 64px; font-weight: 600; line-height: 1.1; }
.pesa-display-netto.fatto { color: var(--vz-success); }
.pesa-display .form-control { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; font-family: var(--vz-font-monospace); font-size: 24px; }
.pesa-passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.pesa-passo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 3px solid transparent; background-color: var(--vz-card-bg); border-radius: var(--vz-border-radius); color: var(--vz-secondary-color); text-align: left; border-top: 0; border-left: 0; border-right: 0; }
.pesa-passo.attivo { border-bottom-color: var(--vz-primary); color: var(--vz-body-color); }
.pesa-passo-n { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: var(--vz-light); color: var(--vz-secondary-color); font-weight: 600; flex-shrink: 0; }
.pesa-passo.attivo .pesa-passo-n { background-color: var(--vz-primary); color: #fff; }
.pesa-passo.fatto .pesa-passo-n { background-color: var(--vz-success); color: #fff; }
.pesa-passo-sub { display: block; font-size: 12px; color: var(--vz-secondary-color); }
@media (max-width: 767.98px) { .pesa-passo-sub { display: none; } .pesa-display-netto { font-size: 44px; } }