/*
 * Reskin moderno H2O sopra Bootstrap 3 / AdminLTE 2 (nessun cambio di framework).
 * Layer di override caricato per ULTIMO in header.php: usa !important sulle
 * proprietà strutturali (sfondi/testo/bordi) perché deve vincere in modo
 * affidabile sulla cascata esistente (skin AdminLTE + colore azienda inline
 * in header.php), senza dover riscrivere quella cascata legacy.
 *
 * Palette neutra "slate" per superfici/testo. Colore accento fisso
 * (var --h2o-accent, valorizzato in header.php) per link/hover/badge di
 * stato — non più selezionabile dal cliente (era $admin_aziend['colore'],
 * causava conflitti di contrasto con vari accenti e col tema scuro; il
 * campo esiste ancora lato dati ma l'input è nascosto in admin_aziend.php).
 *
 * Tema: attributo data-theme="light|dark" sul <body>, calcolato server-side
 * in header.php da $admin_aziend['skin'] e cambiabile a runtime dallo switch
 * nell'header (vedi modules/config/set_theme.php per la persistenza).
 */

:root,
body[data-theme="light"] {
  /* Dice al browser il tema attivo per i controlli nativi che CSS non può
     ridipingere via background/color (icona del datepicker, scrollbar,
     checkbox/radio non ancora skinnati) — senza, l'icona calendario di
     <input type="date"> resta sempre nera e sparisce su sfondo scuro. */
  color-scheme: light;
  --h2o-bg: #F8FAFC;
  --h2o-surface: #FFFFFF;
  --h2o-surface-alt: #F1F5F9;
  --h2o-border: #E2E8F0;
  --h2o-text: #0F172A;
  --h2o-text-muted: #475569;
  --h2o-sidebar-bg: #FFFFFF;
  --h2o-sidebar-text: #334155;
  --h2o-sidebar-border: #E2E8F0;
  /* Sfondo del sottomenu aperto — distinto sia dallo sfondo sidebar sia da
     --h2o-surface-alt (già usato per hover/active delle voci, altrimenti le
     voci attive sparirebbero dentro lo sfondo del vassoio). */
  --h2o-sidebar-tray-bg: rgba(15, 23, 42, 0.045);
  --h2o-navbar-bg: #FFFFFF;
  --h2o-navbar-text: #0F172A;
  --h2o-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --h2o-input-bg: #FFFFFF;
  --h2o-link: #1D4ED8;
  --h2o-accent: #334155;
  --h2o-accent-glow: rgba(51, 65, 85, 0.25);
  /* Colori semantici (badge di stato, icone KPI): sempre come accento
     circoscritto (icona, bordo, sfondo a bassa opacità) — MAI come sfondo
     pieno con testo sopra, che è la causa dei problemi di contrasto delle
     vecchie card AdminLTE (bg-yellow/bg-red a piena tinta + testo bianco). */
  --h2o-warn: #B45309;
  --h2o-warn-bg: rgba(180, 83, 9, 0.12);
  --h2o-info: #1D4ED8;
  --h2o-info-bg: rgba(29, 78, 216, 0.10);
  --h2o-danger: #B91C1C;
  --h2o-danger-bg: rgba(185, 28, 28, 0.10);
  --h2o-success: #15803D;
  --h2o-success-bg: rgba(21, 128, 61, 0.10);
  --h2o-row-hover: rgba(51, 65, 85, 0.06);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --h2o-bg: #0F172A;
  --h2o-surface: #1E293B;
  --h2o-surface-alt: #273449;
  --h2o-border: #334155;
  --h2o-text: #F1F5F9;
  --h2o-text-muted: #CBD5E1;
  --h2o-sidebar-bg: #0B1220;
  --h2o-sidebar-text: #CBD5E1;
  --h2o-sidebar-border: #1E293B;
  --h2o-sidebar-tray-bg: rgba(255, 255, 255, 0.045);
  --h2o-navbar-bg: #1E293B;
  --h2o-navbar-text: #F1F5F9;
  --h2o-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --h2o-input-bg: #0F172A;
  --h2o-link: #60A5FA;
  --h2o-accent: #94A3B8;
  --h2o-accent-glow: rgba(148, 163, 184, 0.35);
  --h2o-warn: #FBBF24;
  --h2o-warn-bg: rgba(251, 191, 36, 0.16);
  --h2o-info: #60A5FA;
  --h2o-info-bg: rgba(96, 165, 250, 0.16);
  --h2o-danger: #F87171;
  --h2o-danger-bg: rgba(248, 113, 113, 0.16);
  --h2o-success: #4ADE80;
  --h2o-success-bg: rgba(74, 222, 128, 0.16);
  --h2o-row-hover: rgba(148, 163, 184, 0.12);
}

/* -------------------------------------------------------------------- */
/* Superficie di base                                                   */
/* -------------------------------------------------------------------- */
body.adminlte-gazie,
.adminlte-gazie .content-wrapper,
.adminlte-gazie .wrapper {
  background-color: var(--h2o-bg) !important;
  color: var(--h2o-text) !important;
}
.adminlte-gazie .content-wrapper > .content,
.adminlte-gazie .content-wrapper > .content-header {
  padding: 20px 20px 1px;
}

/* Margine sotto ogni card/pannello, così le sezioni impilate verticalmente
   non restano attaccate tra loro. */
.adminlte-gazie .box,
.adminlte-gazie .panel {
  margin-bottom: 20px;
}

/* Link generici: colore neutro, NON l'accento — quello resta riservato a
   stato attivo/hover della sidebar, bottoni e focus (vedi sotto), altrimenti
   l'accento finisce ovunque ci sia un link, anche dove non è un vero accento. */
.adminlte-gazie a {
  color: var(--h2o-link);
}

/* -------------------------------------------------------------------- */
/* Sidebar                                                              */
/* -------------------------------------------------------------------- */
.adminlte-gazie .main-sidebar,
.adminlte-gazie .left-side,
.adminlte-gazie .sidebar,
.adminlte-gazie .sidebar-menu,
.adminlte-gazie .sidebar-menu > li {
  background-color: var(--h2o-sidebar-bg) !important;
  background-image: none !important;
}
.adminlte-gazie .main-sidebar {
  border-right: 1px solid var(--h2o-sidebar-border);
}
/* Footer di pagina ("Version x.xx"): stessa svista del vecchio th nero —
   nessun override qui finora, restava sullo sfondo scuro fisso dello skin
   AdminLTE invece di seguire il tema chiaro/scuro. */
.adminlte-gazie .main-footer {
  background-color: var(--h2o-surface) !important;
  color: var(--h2o-text-muted) !important;
  border-top: 1px solid var(--h2o-border) !important;
}
.adminlte-gazie .sidebar-menu > li > a {
  color: var(--h2o-sidebar-text) !important;
  border-left: 3px solid transparent;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
/* Icone a font dei moduli (sostituiscono i vecchi PNG, vedi function.php):
   ereditano il colore del testo sidebar, quindi seguono il tema chiaro/scuro
   senza bisogno di più versioni della stessa immagine. */
.adminlte-gazie .sidebar-menu > li > a > .h2o-sidebar-icon {
  width: 24px;
  text-align: center;
  margin-right: 6px;
  font-size: 16px;
}
.adminlte-gazie .sidebar-menu > li:hover > a,
.adminlte-gazie .sidebar-menu > li.active > a {
  background-color: var(--h2o-surface-alt) !important;
  /* Colore principale (var --h2o-link, l'azzurro già usato per i link —
     non --h2o-accent: quello è deliberatamente neutro/slate, v. commento
     in cima al file) invece del grigio-slate di prima: unico punto della
     sidebar dove serve un vero colore di brand, non un neutro. */
  border-left-color: var(--h2o-link) !important;
  color: var(--h2o-text) !important;
}
.adminlte-gazie .sidebar-menu > li.header {
  color: var(--h2o-text-muted) !important;
  background: transparent !important;
}
/* Riga "Menu" in cima alla sidebar: comprime/espande il menu (stesso
   data-toggle="offcanvas" del vecchio hamburger nell'header — spostato qui
   perché lì non si capiva a cosa servisse ed era sempre scuro, tema o non
   tema). Struttura identica a una voce di menu normale (li > a > icona +
   span + pull-right, v. function.php) invece di li.header: è quella che
   AdminLTE già sa gestire da sola quando la sidebar si comprime a icone
   (icona sempre visibile, span nascosto, pull-right nascosto) — niente
   eccezioni CSS nostre da mantenere in sincrono con la struttura sbagliata
   di prima. Solo lo sfondo leggermente più scuro per distinguerla. */
.adminlte-gazie .h2o-sidebar-menu-toggle {
  background-color: var(--h2o-surface-alt) !important;
  margin-bottom: 8px;
}
/* Testo/icona meno evidenti delle voci di menu vere e proprie sotto: è un
   controllo di UI, non una destinazione. Non uso var(--h2o-text-muted) come
   altrove (es. li.header): in tema scuro coincide esattamente con
   var(--h2o-sidebar-text) (#CBD5E1 entrambe), quindi non si vedrebbe nessuna
   differenza. Opacity invece funziona a prescindere dai valori dei singoli
   token colore, in entrambi i temi. Selettore con "li.h2o-sidebar-menu-toggle"
   (non solo ".h2o-sidebar-menu-toggle") per pareggiare la specificità di
   ".sidebar-menu > li > a" qui sopra. */
.adminlte-gazie .sidebar-menu > li.h2o-sidebar-menu-toggle > a {
  opacity: 0.6 !important;
}
/* Da collassata, AdminLTE mostra il testo di una voce come flyout flottante
   mentre il mouse resta sopra quella riga (preview via :hover, utile per le
   voci con sottomenu — v. AdminLTE.css blocco .sidebar-mini.sidebar-collapse
   ... li:hover > a > span). Per QUESTA voce non serve: non ha un sottomenu
   da mostrare, ed è proprio quel flyout ad "aprirsi avvicinandosi e
   chiudersi allontanandosi" impedendo di cliccarla con calma (il problema
   segnalato). L'icona resta comunque sempre cliccabile in qualsiasi caso:
   qui disattiviamo solo l'anteprima del testo, non il click. */
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .sidebar-menu > li.h2o-sidebar-menu-toggle:hover > a > span {
    display: none !important;
  }
}
/* Vassoio del sottomenu aperto: uno sfondo leggero (--h2o-sidebar-tray-bg,
   diverso da --h2o-surface-alt usato per hover/active del modulo sopra)
   così le sue voci si staccano visivamente dalle altre voci di primo
   livello del menu principale. Niente più radius/margini laterali su
   richiesta: il vassoio resta un blocco piatto, a tutta larghezza, invece
   di un riquadro fluttuante staccato dal bordo della sidebar. */
.adminlte-gazie .sidebar-menu .treeview-menu {
  background: var(--h2o-sidebar-tray-bg) !important;
  border-radius: 0;
  margin: 0;
  padding: 4px 0 !important;
}
.adminlte-gazie .sidebar-menu .treeview-menu .treeview-menu {
  margin: 0;
}
.adminlte-gazie .sidebar-menu .treeview-menu .treeview-menu > li > a {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Freccia dei sottomenu ad accordion (icona fa-angle-left generata in
   function.php, submenu()): di default AdminLTE la lascia rivolta a
   sinistra da chiusa e la ruota -90° (in giù) solo da aperta — non comunica
   "clicca per aprire". Qui: in giù da chiusa, in su da aperta (li.active,
   v. adminlte/dist/js/app.js). */
.adminlte-gazie .sidebar-menu li > a > .fa-angle-left {
  transition: transform 200ms ease;
  transform: rotate(-90deg) !important;
}
.adminlte-gazie .sidebar-menu li.active > a > .fa-angle-left {
  transform: rotate(90deg) !important;
}
.adminlte-gazie .sidebar-menu .treeview-menu > li > a {
  color: var(--h2o-text-muted) !important;
}
/* Voce foglia (destinazione vera, es. "Lista Preventivi", "Ordine da
   cliente"): niente più background su hover/active — usava lo stesso
   --h2o-surface-alt della voce "ramo" (Preventivi/Ordini, sotto) e delle
   voci di modulo (Vendite, sopra), tre livelli diversi con la stessa
   identica evidenza, indistinguibili tra loro. Qui solo colore pieno +
   sottolineatura: hover = sottolineatura semplice (passaggio), active =
   sottolineatura nel colore link, così la voce corrente resta
   riconoscibile anche senza passarci sopra col mouse. "background:
   transparent !important" esplicito (non basta ometterlo): skins/default.css
   e skins/black.css hanno entrambi ".treeview-menu > li.active > a,
   li > a:hover { background: linear-gradient(180deg,#ffffff40,#000,
   #ffffff40) }" — un gradiente bianco-nero-bianco fisso, uguale in entrambi
   i temi. Senza una dichiarazione esplicita qui la cascata lo lasciava
   passare (nessun'altra regola tocca più "background" su questo
   selettore), riapparso quando lo sfondo pieno è stato tolto sotto. */
.adminlte-gazie .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--h2o-text) !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.adminlte-gazie .sidebar-menu .treeview-menu > li.active > a {
  color: var(--h2o-text) !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-decoration-color: var(--h2o-link) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}
/* Voce "ramo" (Preventivi/Ordini...): ha una propria <ul class="treeview-menu">
   annidata sotto (v. function.php, submenu() — un <li> con "count($mnu)>7"),
   quindi anche un proprio stato attivo/hover, distinto da quello delle sue
   foglie sopra. Overlay nero a bassa opacità invece di un colore fisso: si
   scurisce da sé sopra qualunque sfondo sia sotto, in entrambi i temi, senza
   bisogno di un secondo token — un solo filo più scuro della pillola della
   voce di modulo (Vendite), per leggersi come un livello annidato sotto di
   essa invece che come la stessa identica evidenza. Niente sottolineatura
   qui: quella resta riservata alle foglie sopra. */
.adminlte-gazie .sidebar-menu .treeview-menu > li:has(> .treeview-menu):hover > a,
.adminlte-gazie .sidebar-menu .treeview-menu > li:has(> .treeview-menu).active > a {
  background-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--h2o-text) !important;
  text-decoration: none !important;
}
.adminlte-gazie .user-panel > .info,
.adminlte-gazie .user-panel > .info > a {
  color: var(--h2o-sidebar-text) !important;
}
/* Shortcut: griglia 2 colonne di scorciatoie (Giri/Ordini/Clienti/
   Magazzini) tra il toggle "Menu" e le voci vere e proprie, v. header.php.
   Nascosta da sidebar collassata a icone: con solo ~50px di larghezza il
   testo delle card non ci starebbe (le voci di menu normali risolvono lo
   stesso problema nascondendo lo <span> via le regole di AdminLTE, qui la
   struttura è diversa quindi serve una regola esplicita). */
.adminlte-gazie .h2o-sidebar-shortcuts {
  padding: 4px 15px 12px;
  margin-bottom: 10px;
}
.h2o-shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.h2o-shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  padding: 10px 4px;
  border-radius: 10px;
  background-color: var(--h2o-surface-alt);
  color: var(--h2o-sidebar-text);
  text-decoration: none !important;
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
  transition: transform 150ms ease, background-color 150ms ease;
}
.h2o-shortcut-btn:hover,
.h2o-shortcut-btn:focus {
  background-color: var(--h2o-accent-glow);
  color: var(--h2o-text) !important;
  transform: translateY(-2px);
}
.h2o-shortcut-btn > .fa {
  font-size: 20px;
}
.sidebar-collapse .h2o-sidebar-shortcuts {
  display: none;
}

/* -------------------------------------------------------------------- */
/* Azioni di pagina (ex "breadcrumb")                                   */
/* -------------------------------------------------------------------- */
/* function.php genera qui non un vero breadcrumb (percorso di
   navigazione) ma un elenco di scorciatoie alle altre pagine della stessa
   sezione (es. "Nuovo cliente", "Lista dei crediti", ...), più due icone
   fisse in coda (Home e l'ingranaggio per configurare queste stesse
   voci). Il markup riusa ancora <ol>/<li> ma non più la classe
   "breadcrumb": qui la trattiamo come una riga di pulsantini allineata a
   destra, che va a capo quando le voci sono troppe (es. sezione Clienti,
   10+ voci) invece del trail con "/" tra le voci. */
.adminlte-gazie .content-header > .h2o-page-actions,
.adminlte-gazie .h2o-page-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  list-style: none !important;
  /* Ora sotto il titolo h1 (v. function.php): margine sopra per staccarla
     dal titolo, sotto per staccarla dal contenuto della pagina. */
  margin: 14px 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  float: none !important;
}
.adminlte-gazie .h2o-page-actions > li {
  float: none !important;
  padding: 0 !important;
}
.adminlte-gazie .h2o-page-actions > li + li::before {
  content: none !important;
}
.adminlte-gazie .h2o-page-actions > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background-color: var(--h2o-surface-alt);
  color: var(--h2o-text) !important;
  font-size: 12px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 150ms ease;
}
.adminlte-gazie .h2o-page-actions > li > a:hover,
.adminlte-gazie .h2o-page-actions > li > a:focus {
  background-color: var(--h2o-accent-glow);
}
/* Le due icone fisse (Home / ingranaggio configurazione voci) sono
   utility, non azioni della pagina: le stacco con un separatore e le
   rendo icon-only, più compatte e trasparenti finché non ci passi sopra. */
.adminlte-gazie .h2o-page-actions > li.h2o-page-actions-utility {
  margin-left: 4px;
  padding-left: 10px !important;
  border-left: 1px solid var(--h2o-border);
}
.adminlte-gazie .h2o-page-actions > li.h2o-page-actions-utility > a {
  padding: 5px 8px;
  background: transparent;
}
.adminlte-gazie .h2o-page-actions > li.h2o-page-actions-utility > a:hover {
  background-color: var(--h2o-surface-alt);
}

/* -------------------------------------------------------------------- */
/* Navbar in alto                                                       */
/* -------------------------------------------------------------------- */
.adminlte-gazie .main-header .navbar {
  background-color: var(--h2o-navbar-bg) !important;
}
.adminlte-gazie .main-header .navbar .nav > li > a {
  color: var(--h2o-navbar-text) !important;
}
/* Le skin storiche di GAzie (skins/default.css, skins/black.css) e
   AdminLTE.css fissano l'hover di questi trigger a un grigio chiaro fisso
   (#f7f7f7), pensato per il loro schema originale: in dark mode risultava
   una macchia chiara fuori tema. Qui lo rendiamo dipendente da --h2o-*. */
.adminlte-gazie .main-header .navbar .nav > li > a:hover,
.adminlte-gazie .main-header .navbar .nav > li > a:focus,
.adminlte-gazie .main-header .navbar .nav > li > a:active,
.adminlte-gazie .main-header .navbar .nav > li.open > a {
  color: var(--h2o-navbar-text) !important;
  background-color: var(--h2o-surface-alt) !important;
}
/* Il logo è un <a> (link alla home): senza queste regole il nome azienda
   accanto erediterebbe il colore blu dei link generici (sopra) o il
   color:black fisso di .company-color-logo (inline in questo file) —
   deve leggersi come testo/brand normale in entrambi i temi, non come un
   link cliccabile colorato. */
.adminlte-gazie .main-header .logo {
  background-color: var(--h2o-navbar-bg) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: var(--h2o-text) !important;
}

/* -------------------------------------------------------------------- */
/* Titoli/intestazioni legacy (.FacetFormHeaderFont)                    */
/* -------------------------------------------------------------------- */
/* scheletons/default.css/abc.css: "text-align:center" di default — quasi
   ogni pagina di inserimento/ricerca di GAzie la usa per il proprio
   titolo in cima al form (admin_broven.php, select_evaord_gio.php,
   report_client.php...), e ogni volta il testo/i controlli dentro
   finiscono centrati invece che allineati a sinistra col resto del design
   moderno. Overridato qui una volta per tutte invece di sistemarlo pagina
   per pagina con stili inline o classi scoped: h2o-modern.css è caricato
   per ultimo (v. header.php), quindi questa regola vince sulla cascata
   legacy senza bisogno di !important. */
.FacetFormHeaderFont {
  text-align: left;
}

/* -------------------------------------------------------------------- */
/* Card / pannelli / box statistici                                     */
/* -------------------------------------------------------------------- */
.adminlte-gazie .box,
.adminlte-gazie .panel,
.adminlte-gazie .panel-default {
  background-color: var(--h2o-surface) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--h2o-shadow) !important;
}
.adminlte-gazie .panel-default > .panel-heading,
.adminlte-gazie .panel-info > .panel-heading {
  background-color: var(--h2o-surface-alt) !important;
  border-color: var(--h2o-border) !important;
  color: var(--h2o-text) !important;
  border-radius: 8px 8px 0 0 !important;
}
.adminlte-gazie .gaz-table-form h4,
.adminlte-gazie .gaz-table-form h3,
.adminlte-gazie .gaz-table-form h5 {
  color: var(--h2o-text) !important;
}

/* -------------------------------------------------------------------- */
/* Tabelle                                                              */
/* -------------------------------------------------------------------- */
.adminlte-gazie .table {
  color: var(--h2o-text) !important;
}
.adminlte-gazie .table > thead > tr > th {
  border-bottom: 2px solid var(--h2o-border) !important;
  color: var(--h2o-text-muted) !important;
}
.adminlte-gazie .table > tbody > tr > td,
.adminlte-gazie .table > tbody > tr > th {
  border-top: 1px solid var(--h2o-border) !important;
}
.adminlte-gazie .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--h2o-surface-alt) !important;
}
/* .FacetDataTDred (es. "* NO *" per P.IVA/C.F. mancante in report_client.php,
   usata anche altrove — classe legacy "condivisa" come FacetFieldCaptionTD/
   Tlarge, v. commenti su admin_broven.php più sotto nel file): la skin
   legacy le dà uno sfondo grigio chiaro fisso (skins/black.css: #c4c7ca, mai
   adattato al tema scuro) + testo rosso — ma il testo rosso viene
   sovrascritto dal colore generico che ogni "sapore" di tabella dell'app
   forza col proprio !important (".table {color: var(--h2o-text)}" qui
   sopra, ".h2o-table td {color: var(--h2o-text)}" più sotto nel file, e
   verosimilmente altre varianti non ancora censite). Risultato in dark:
   testo quasi bianco su grigio chiaro fisso, contrasto quasi nullo.
   Selettore volutamente SENZA antenato "table"/"h2o-table" — vale ovunque
   compaia ".FacetDataTDred", indipendentemente da quale delle tabelle
   dell'app la contiene — con gli stessi token --h2o-danger/--h2o-danger-bg
   già usati per badge/icone di errore altrove, calibrati per restare
   leggibili in entrambi i temi. */
.adminlte-gazie td.FacetDataTDred {
  background-color: var(--h2o-danger-bg) !important;
  color: var(--h2o-danger) !important;
}
.adminlte-gazie .table > tbody > tr.danger > td {
  background-color: rgba(220, 53, 69, 0.12) !important;
}
/* Hover righe tabella: le skin legacy (skins/default.css e skins/black.css,
   stesso selettore in entrambe) mettono su ogni "table.Tlarge"/"table.
   dataTable" al passaggio del mouse un gradiente verticale chiaro-scuro-
   chiaro (in black.css: "linear-gradient(180deg, #ffffff20,#060606,
   #ffffff20)") più un text-shadow blu in default.css — pensato per la skin
   scura originale di AdminLTE, stona con la palette flat del resto del
   redesign. h2o-modern.css è caricato per ultimo (v. testata del file),
   quindi questa regola con lo stesso identico selettore vince sulla
   cascata legacy senza bisogno di !important; tinta piatta invece del
   gradiente, stesso var(--h2o-row-hover) in entrambi i temi. */
div.table-responsive table.Tlarge tr:hover,
div.table-responsive table.Tlarge tbody tr:hover,
div.table-responsive table.dataTable tbody tr:hover,
div.box-body table.dataTable tbody tr:hover {
  background: var(--h2o-row-hover);
  text-shadow: none;
}

/* -------------------------------------------------------------------- */
/* Form                                                                 */
/* -------------------------------------------------------------------- */
.adminlte-gazie .form-control,
.adminlte-gazie select.form-control,
.adminlte-gazie input.form-control {
  background-color: var(--h2o-input-bg) !important;
  color: var(--h2o-text) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 6px !important;
  /* height:auto invece del 34px fisso di Bootstrap: così il rigo in più di
     padding vale per input/select E textarea allo stesso modo (Bootstrap
     forza già "height:auto" sulle sole textarea, qui lo estendiamo a
     tutti). Risultato ~42px totali, stessa altezza già usata per gli
     input della card di login. */
  height: auto !important;
  padding: 10px 12px !important;
}
.adminlte-gazie .form-control:focus {
  border-color: var(--h2o-accent) !important;
  box-shadow: 0 0 0 3px var(--h2o-accent-glow) !important;
}
/* input[type=date/time]: il widget nativo (icona calendario/orologio
   inclusa) è già più alto di una riga di testo semplice, lo stesso
   padding usato per testo/select lo fa risultare più alto di loro — qui
   un po' meno per tornare alla stessa altezza percepita. */
.adminlte-gazie input[type="date"].form-control,
.adminlte-gazie input[type="time"].form-control {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
/* Form di modifica record (admin_client.php e la stessa famiglia di ~65
   pagine "gaz-table-form" in tutto GAzie, v. panel.gaz-table-form): i
   singoli <input>/<textarea>/<select> generati da queste pagine NON hanno
   mai la classe "form-control" (usano solo classi grid col-sm-N per la
   larghezza), quindi restano all'altezza nativa del browser (~20px) invece
   dei ~42px del resto dell'app — con molti campi in fila il risultato è
   una griglia bassa e ravvicinata, poco leggibile. Qui li portiamo alla
   stessa altezza/bordo/sfondo di .form-control senza dover toccare
   centinaia di tag <input> in decine di pagine diverse. */
.adminlte-gazie .gaz-table-form input[type="text"],
.adminlte-gazie .gaz-table-form input[type="number"],
.adminlte-gazie .gaz-table-form input[type="email"],
.adminlte-gazie .gaz-table-form input[type="tel"],
.adminlte-gazie .gaz-table-form input[type="password"],
.adminlte-gazie .gaz-table-form input[type="date"],
.adminlte-gazie .gaz-table-form input[type="time"],
.adminlte-gazie .gaz-table-form textarea,
.adminlte-gazie .gaz-table-form select,
.adminlte-gazie .gaz-table-form .FacetSelect {
  background-color: var(--h2o-input-bg) !important;
  color: var(--h2o-text) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 6px !important;
  height: auto !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}
.adminlte-gazie .gaz-table-form input[type="text"]:focus,
.adminlte-gazie .gaz-table-form input[type="number"]:focus,
.adminlte-gazie .gaz-table-form input[type="email"]:focus,
.adminlte-gazie .gaz-table-form input[type="tel"]:focus,
.adminlte-gazie .gaz-table-form input[type="password"]:focus,
.adminlte-gazie .gaz-table-form input[type="date"]:focus,
.adminlte-gazie .gaz-table-form input[type="time"]:focus,
.adminlte-gazie .gaz-table-form textarea:focus,
.adminlte-gazie .gaz-table-form select:focus,
.adminlte-gazie .gaz-table-form .FacetSelect:focus {
  border-color: var(--h2o-accent) !important;
  box-shadow: 0 0 0 3px var(--h2o-accent-glow) !important;
  outline: none;
}
/* Più respiro tra un campo e l'altro (di default 15px, poco visibile con
   input più alti) e label verticalmente centrata sul campo accanto invece
   che appiccicata al bordo superiore. */
.adminlte-gazie .gaz-table-form .form-group {
  margin-bottom: 18px;
}
/* skins/black.css dà a label.control-label uno sfondo scuro (v.
   .FacetFieldCaptionTD, label.control-label) ma nessun padding verticale:
   il testo resta incollato al bordo superiore del riquadro invece di
   essere centrato, e il riquadro risulta più basso/schiacciato del campo
   affiancato (che invece ha padding:10px 12px, v. sopra). Stesso padding e
   centratura verticale qui per farli combaciare in altezza. */
.adminlte-gazie .gaz-table-form .form-group > label.control-label {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: 6px;
}

/* ======================================================================
   Dashboard H2O (admin_h2o_home.php, container.h2o-dashboard)
   Non usa più .panel/.gaz-table-form (quel binomio arriva da
   scheletons/default.css: max-width:990px + margin:auto pensati per un
   form di modifica di un singolo record, e un'indentazione doppia da
   container-fluid annidato — entrambe cose sbagliate per un elenco/
   dashboard). Sistema di card proprio, scoped a .h2o-dashboard, così non
   tocca gli altri form di GAzie che contano su quel comportamento.
   ====================================================================== */

.h2o-dashboard,
.h2o-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Ogni pagina restylata avvolge questo contenuto in <div class="container-fluid
   h2o-page/h2o-dashboard"> (v. admin_h2o_home.php, report_broven.php,
   report_client.php, admin_broven.php, admin_client.php, admin_docven.php,
   select_evaord_gio.php, admin_route.php, report_artico.php...): il padding
   orizzontale di Bootstrap ".container-fluid" (15px) si sommava a quello già
   dato da .content-wrapper > .content (20px, v. "Superficie di base" più
   sopra), disallineando il bordo sinistro di card/tabelle da quello del
   titolo h1 e delle pillole azioni sopra di esse (quelli NON sono dentro un
   .container-fluid). Azzerato qui una volta sola invece di togliere la
   classe da ogni pagina che la usa (e da quelle non ancora restylate). */
.adminlte-gazie .container-fluid.h2o-page,
.adminlte-gazie .container-fluid.h2o-dashboard {
  padding-left: 0;
  padding-right: 0;
}
.h2o-dashboard h3:first-child,
.h2o-page h3:first-child {
  margin: 0;
}

/* Card generica: stessa superficie/bordo/ombra di .panel, ma padding
   interno unico (niente più container-fluid annidato) e sempre larga
   quanto il suo contenitore. */
.h2o-card {
  background-color: var(--h2o-surface);
  border: 1px solid var(--h2o-border);
  border-radius: 10px;
  box-shadow: var(--h2o-shadow);
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}
.h2o-card + .h2o-card {
  margin-top: 0;
}
.h2o-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.h2o-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--h2o-text);
}
.h2o-card-title .fa {
  color: var(--h2o-text-muted);
  margin-right: 6px;
  font-size: 14px;
}

/* Badge conteggio accanto al titolo card (es. "Ordini da assegnare  5") */
.h2o-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background-color: var(--h2o-surface-alt);
  color: var(--h2o-text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* Badge di stato (ordini, giri): pillola a bassa opacità, mai sfondo pieno
   con testo bianco sopra — deve restare leggibile in entrambi i temi. */
.h2o-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.h2o-badge--neutral {
  background-color: var(--h2o-surface-alt);
  color: var(--h2o-text-muted);
}
.h2o-badge--warn {
  background-color: var(--h2o-warn-bg);
  color: var(--h2o-warn);
}
.h2o-badge--info {
  background-color: var(--h2o-info-bg);
  color: var(--h2o-info);
}
.h2o-badge--danger {
  background-color: var(--h2o-danger-bg);
  color: var(--h2o-danger);
}
.h2o-badge--success {
  background-color: var(--h2o-success-bg);
  color: var(--h2o-success);
}

/* -- KPI --------------------------------------------------------------- */
/* Griglia di card statistiche: sostituisce i vecchi .small-box a tinta
   piena (bg-yellow/bg-red + testo bianco, il problema di contrasto
   segnalato) con card dal fondo neutro — il colore resta confinato
   all'icona, il testo usa sempre --h2o-text ad alto contrasto. */
.h2o-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 992px) {
  .h2o-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .h2o-kpi-grid {
    grid-template-columns: 1fr;
  }
}
.h2o-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: var(--h2o-surface);
  border: 1px solid var(--h2o-border);
  border-radius: 10px;
  box-shadow: var(--h2o-shadow);
  padding: 18px;
  text-decoration: none !important;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.h2o-kpi-card:hover,
.h2o-kpi-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), var(--h2o-shadow);
}
.h2o-kpi-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.h2o-kpi-icon--warn { background-color: var(--h2o-warn-bg); color: var(--h2o-warn); }
.h2o-kpi-icon--info { background-color: var(--h2o-info-bg); color: var(--h2o-info); }
.h2o-kpi-icon--danger { background-color: var(--h2o-danger-bg); color: var(--h2o-danger); }
.h2o-kpi-icon--success { background-color: var(--h2o-success-bg); color: var(--h2o-success); }
.h2o-kpi-body {
  min-width: 0;
}
.h2o-kpi-value {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--h2o-text) !important;
}
.h2o-kpi-label {
  font-size: 13px;
  color: var(--h2o-text-muted) !important;
  margin: 2px 0 0;
}
.h2o-kpi-sub {
  font-size: 12px;
  color: var(--h2o-text-muted) !important;
  margin-top: 2px;
}
.h2o-kpi-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--h2o-link) !important;
  margin-top: 8px;
}

/* -- Barra filtri -------------------------------------------------------- */
/* Tutti i campi su una riga, larga al 100%, con label sopra ciascun input
   così input e bottoni restano alla stessa altezza (allineati sul fondo,
   non sul centro della label). */
.h2o-filter-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
.h2o-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.h2o-filter-field label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2o-text-muted);
}
/* Senza una larghezza minima un input/select senza width esplicita si
   restringe al contenuto del suo attributo size/value (es. gaz_flt_disp_int
   usa size="5"), troncando visivamente il placeholder — v. report_client.php. */
.h2o-filter-field input,
.h2o-filter-field select {
  min-width: 150px;
}
.h2o-filter-bar .h2o-filter-submit {
  /* Stessa altezza "auto" degli input della barra (v. .form-control più
     sopra: padding 10px 12px, niente più 34px fisso), per restare
     allineati sulla stessa riga. */
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-flex;
  align-items: center;
}

/* -- Tabelle elenco (ordini/tappe) --------------------------------------- */
.h2o-table-wrap {
  overflow-x: auto;
}
/* Riga di filtri sopra l'intestazione della tabella (es. report_broven.php):
   select/input e pulsanti allineati sulla stessa riga, altezza coerente coi
   .form-control (v. regola globale più sotto, altezza "auto" + padding
   10px 12px) invece della bassezza nativa Bootstrap dei <button>/<input
   type=submit>. */
.h2o-filter-row td {
  padding-bottom: 6px;
}
/* .h2o-table th ha padding-top:0 (v. sotto) perché nelle tabelle senza
   barra filtri sopra (es. Giri) l'intestazione è la prima riga della
   tabella e non le serve staccarsi da nulla. Qui invece il <th> segue
   subito la riga filtri (v. h2o-filter-row sopra): un modificatore sul
   <table> gli ridà un padding-top per non restare incollato alla barra
   filtri. Selettore a due classi (non solo ".h2o-table--with-filters th")
   per avere specificità maggiore di ".h2o-table th" più sotto, che usa lo
   shorthand "padding" e altrimenti vincerebbe per ordine nel file pur
   avendo la stessa specificità. */
.h2o-table.h2o-table--with-filters th {
  padding-top: 10px;
}
/* TableSorter::count_header() (function.inc.php, condivisa da molti report,
   non modificabile qui senza toccare anche pagine non ancora restylate)
   stampa "<div align='center'>...</div>": l'attributo HTML "align" ha
   priorità bassissima nella cascata (trattato come se fosse in cima al
   foglio di stile dell'autore), quindi basta questa regola per vincerlo
   senza !important. */
.h2o-record-count div {
  text-align: left;
}
/* Thumbnail magazzino (report_warehouse.php): l'immagine cambia width
   inline via onclick/ondblclick per lo zoom (v. PHP), qui solo la cornice —
   coerente col resto delle miniature dell'app senza serve toccare quel
   comportamento di zoom già funzionante. */
.h2o-warehouse-thumb {
  border: 1px solid var(--h2o-border);
  border-radius: 6px;
  background-color: var(--h2o-surface-alt);
}
.h2o-inline-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.h2o-inline-filter-group .form-control {
  flex: 1;
}
.h2o-filter-row .btn {
  padding-top: 10px;
  padding-bottom: 10px;
}
.h2o-table {
  width: 100%;
  border-collapse: collapse;
}
.h2o-table th {
  /* Sovrascrive "th { background-color: #201e1d }" dello skin AdminLTE
     "black" (skins/black.css) — regola generica su tutti i <th> della
     pagina, pensata per le tabelle Bootstrap dove veniva già schiacciata
     dal CSS di .table; qui serve esplicita perché non usiamo quella classe. */
  background-color: var(--h2o-surface);
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--h2o-text-muted) !important;
  padding: 0 12px 10px;
  border-bottom: 2px solid var(--h2o-border);
  white-space: nowrap;
}
.h2o-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--h2o-border);
  color: var(--h2o-text) !important;
  vertical-align: middle;
}
.h2o-table tbody tr:hover td {
  background-color: var(--h2o-surface-alt);
}
/* Riga con la checkbox selezionata: riscontro visivo immediato di cosa sta
   per finire nell'assegnazione bulk sotto la tabella. */
.h2o-table tbody tr:has(.order-checkbox:checked) td {
  background-color: var(--h2o-info-bg);
}
.h2o-table tbody tr:last-child td {
  border-bottom: none;
}
/* Ordine scaduto (data prevista già passata, ancora non assegnato): accento
   sul bordo sinistro della riga invece di colorare l'intera riga di rosso —
   resta leggibile e non compete visivamente col resto della tabella. */
.h2o-table tr.h2o-row--overdue td:first-child {
  box-shadow: inset 3px 0 0 var(--h2o-danger);
}
/* Icona bottiglia nella colonna "Prodotti": né Font Awesome 4.5 né Ionicons
   (le due librerie caricate) hanno un'icona bottiglia — SVG inline invece
   di aggiungere una libreria nuova solo per questa. fill="currentColor" la
   fa seguire il colore qui sotto, quindi il tema chiaro/scuro. */
.h2o-qty-icon {
  color: var(--h2o-info);
  vertical-align: -3px;
  margin-right: 4px;
}
.h2o-table-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--h2o-text-muted) !important;
}
/* Pulsanti azione di riga (es. "Dettagli ordine" / "Elimina" nella lista
   tappe di un giro): staccati fra loro invece di stare attaccati come con
   il solo "display:inline" del <form> che li avvolge. */
.h2o-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* Icona elimina rossa: distingue a colpo d'occhio l'azione distruttiva
   dalle altre (stampa/mail/duplica) raggruppate nella stessa colonna
   "Opzioni" (report_broven.php), che restano btn-default neutri. */
.btn-elimina {
  color: var(--h2o-danger) !important;
}
/* Evidenzia un campo appena compilato in automatico (es. via/comune dopo
   aver scelto un indirizzo dall'autocomplete Google in "Aggiungi tappa") —
   conferma visiva di cosa è stato riempito da solo, sfuma via da sé. */
.h2o-field-filled {
  background-color: var(--h2o-success-bg) !important;
  border-color: var(--h2o-success) !important;
  transition: background-color 1.5s ease, border-color 1.5s ease;
}
/* Il menu suggerimenti di Google Places Autocomplete (.pac-container) viene
   aggiunto direttamente sotto <body>, con z-index 100 di default — dentro un
   modale Bootstrap (z-index 1050, backdrop 1040) restava tecnicamente
   presente ma nascosto dietro, invisibile pur funzionando. */
.pac-container {
  z-index: 1100 !important;
}
/* Annotazione sotto la data nella lista giri (arretrato/oggi): solo testo
   colorato, senza sfondo a pillola — a differenza del badge di stato "vero"
   (colonna Stato). "Arretrato" in rosso, non nell'arancione di "Pianificato"
   con cui si confondeva. Padding a zero, altrimenti non resterebbe allineato
   a sinistra con la data sulla riga sopra. */
.h2o-date-note {
  display: inline-block;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}
.h2o-date-note--danger { color: var(--h2o-danger); }
.h2o-date-note--info { color: var(--h2o-info); }

/* Riga del giro di oggi nella lista: sfondo leggerissimo nello stesso
   celeste della dicitura "oggi" sotto la data, per farla notare scorrendo
   l'elenco senza gareggiare in intensità coi badge di stato. */
.h2o-row--oggi {
  background-color: var(--h2o-info-bg);
}

/* Ora di consegna modificabile nella tabella tappe del giro (admin_route.php,
   solo a giro "planned"): l'input time va tenuto stretto, altrimenti un
   form-control normale si allarga quanto la cella e sbilancia la colonna. */
.h2o-inline-time-form input[type="time"] {
  width: 96px;
}

/* -- Toolbar di assegnazione (sotto la tabella ordini) ------------------- */
.h2o-toolbar {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--h2o-border);
}
.h2o-toolbar-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--h2o-text);
}
.h2o-toolbar-mode {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
}
.h2o-toolbar-mode label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--h2o-text);
  cursor: pointer;
}
.h2o-toolbar-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.h2o-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.h2o-toolbar-field label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2o-text-muted);
}
.h2o-toolbar-submit {
  margin-top: 16px;
}

/* -- Accordion "Giri già pianificati" ------------------------------------ */
/* Riusa il plugin collapse di Bootstrap (già caricato in footer.php),
   nessun JS nuovo — solo lo stile e la rotazione della freccia, gestita in
   CSS puro dalla classe .collapsed che Bootstrap aggiunge/toglie da sé sul
   trigger. Utile quando i giri pianificati sono tanti: solo il riepilogo
   resta sempre visibile, il dettaglio tappe si apre a richiesta. */
.h2o-accordion-item {
  border: 1px solid var(--h2o-border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.h2o-accordion-item:last-child {
  margin-bottom: 0;
}
.h2o-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background-color: var(--h2o-surface-alt);
  text-decoration: none !important;
  cursor: pointer;
}
.h2o-accordion-toggle:hover {
  filter: brightness(1.04);
}
.h2o-accordion-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.h2o-accordion-route {
  font-weight: 700;
  color: var(--h2o-text) !important;
  font-size: 13px;
}
.h2o-accordion-date {
  color: var(--h2o-text-muted) !important;
  font-size: 13px;
}
.h2o-accordion-chevron {
  flex: none;
  color: var(--h2o-text-muted);
  transition: transform 200ms ease;
}
.h2o-accordion-toggle.collapsed .h2o-accordion-chevron {
  transform: rotate(-90deg);
}
.h2o-accordion-body {
  padding: 14px;
  border-top: 1px solid var(--h2o-border);
}
.h2o-accordion-meta {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--h2o-text-muted) !important;
}
.h2o-accordion-meta a {
  font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Bottoni                                                              */
/* -------------------------------------------------------------------- */
.adminlte-gazie .btn {
  border-radius: 6px;
}
.adminlte-gazie .btn-default {
  background-color: var(--h2o-surface-alt);
  border-color: var(--h2o-border);
  color: var(--h2o-text);
}
.adminlte-gazie .btn-default:hover {
  background-color: var(--h2o-border);
}

/* -------------------------------------------------------------------- */
/* Bottoni contestuali (info/warning/danger/success + il vecchio        */
/* .btn-edit) — GLOBALE, non scoped a nessuna pagina: sono usati in      */
/* decine di punti diversi (liste, form, righe tabella...) e senza una   */
/* regola qui sopra ciascuno prende il colore che gli capita dallo skin  */
/* attivo (skins/black.css: blu/arancio/verde spenti pensati per lo      */
/* sfondo scuro fisso del vecchio tema, quasi invisibili sulla nuova     */
/* card scura; skins/default.css: .btn-warning/.btn-info/.btn-danger non */
/* sono nemmeno ridefiniti lì, restano il ciano/arancio acceso di        */
/* AdminLTE.css con contrasto insufficiente per testo bianco; .btn-edit  */
/* invece esiste SOLO in skins/default.css, quindi in scuro sparisce del */
/* tutto). Qui invece un solo posto, riusando i token semantici già      */
/* usati per badge/icone KPI (v. sopra) — niente aggiustature ripetute   */
/* pagina per pagina ogni volta che se ne aggiunge uno nuovo.            */
/* --h2o-info/--h2o-warn/--h2o-danger/--h2o-success sono già calibrati   */
/* per un testo leggibile sopra: scuri (contrasto ~5-6.7:1 con testo     */
/* bianco) in chiaro, chiari (contrasto ~6.5-10:1 con testo scuro, v.    */
/* override tema scuro sotto) in scuro — stesso principio già usato per  */
/* .btn-h2o-action.                                                      */
.adminlte-gazie .btn-info,
.adminlte-gazie .btn-warning,
.adminlte-gazie .btn-danger,
.adminlte-gazie .btn-success,
.adminlte-gazie .btn-edit {
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}
.adminlte-gazie .btn-info { background-color: var(--h2o-info); }
.adminlte-gazie .btn-warning { background-color: var(--h2o-warn); }
.adminlte-gazie .btn-danger { background-color: var(--h2o-danger); }
.adminlte-gazie .btn-success,
.adminlte-gazie .btn-edit { background-color: var(--h2o-success); }
.adminlte-gazie .btn-info:hover,
.adminlte-gazie .btn-info:focus,
.adminlte-gazie .btn-warning:hover,
.adminlte-gazie .btn-warning:focus,
.adminlte-gazie .btn-danger:hover,
.adminlte-gazie .btn-danger:focus,
.adminlte-gazie .btn-success:hover,
.adminlte-gazie .btn-success:focus,
.adminlte-gazie .btn-edit:hover,
.adminlte-gazie .btn-edit:focus {
  filter: brightness(1.1);
  color: #fff;
}
/* In scuro i 4 token diventano chiari (per restare leggibili come testo/
   badge su sfondo scuro, v. definizione in cima al file): usati come
   sfondo pieno di un bottone, il testo deve girare scuro invece che
   restare bianco, stesso trattamento di .btn-h2o-action sotto. */
body[data-theme="dark"].adminlte-gazie .btn-info,
body[data-theme="dark"].adminlte-gazie .btn-warning,
body[data-theme="dark"].adminlte-gazie .btn-danger,
body[data-theme="dark"].adminlte-gazie .btn-success,
body[data-theme="dark"].adminlte-gazie .btn-edit {
  color: var(--h2o-bg) !important;
}
body[data-theme="dark"].adminlte-gazie .btn-info:hover,
body[data-theme="dark"].adminlte-gazie .btn-info:focus,
body[data-theme="dark"].adminlte-gazie .btn-warning:hover,
body[data-theme="dark"].adminlte-gazie .btn-warning:focus,
body[data-theme="dark"].adminlte-gazie .btn-danger:hover,
body[data-theme="dark"].adminlte-gazie .btn-danger:focus,
body[data-theme="dark"].adminlte-gazie .btn-success:hover,
body[data-theme="dark"].adminlte-gazie .btn-success:focus,
body[data-theme="dark"].adminlte-gazie .btn-edit:hover,
body[data-theme="dark"].adminlte-gazie .btn-edit:focus {
  color: var(--h2o-bg) !important;
}

/* -------------------------------------------------------------------- */
/* Bottone di azione primaria H2O (crea/aggiungi)                       */
/* .btn-warning/.btn-success/.btn-danger/.btn-info/.btn-default sono     */
/* tutti ridefiniti da skins/*.css (scelta per-admin, indipendente dal   */
/* toggle chiaro/scuro nuovo) con colori spenti pensati per il vecchio   */
/* tema scuro fisso — es. skins/black.css porta btn-warning da           */
/* #f39c12 a #5b3c0c. Per le azioni primarie serve un bottone gestito    */
/* per intero da qui, così resta coerente qualunque skin l'admin abbia   */
/* scelto in gaz_admin.skin.                                             */
/* -------------------------------------------------------------------- */
.adminlte-gazie .btn-h2o-action {
  background-color: var(--h2o-accent) !important;
  border-color: var(--h2o-accent) !important;
  color: #fff !important;
}
.adminlte-gazie .btn-h2o-action:hover,
.adminlte-gazie .btn-h2o-action:focus {
  filter: brightness(1.12);
}
.adminlte-gazie .btn-h2o-action:disabled,
.adminlte-gazie .btn-h2o-action.disabled {
  opacity: 0.55;
  filter: none;
}
/* In scuro --h2o-accent si schiarisce (slate chiaro): il testo bianco
   perderebbe contrasto, qui diventa scuro. Selettore composto (niente
   spazio fra body e .adminlte-gazie): sono lo stesso elemento — un
   discendente non lo troverebbe mai. */
body[data-theme="dark"].adminlte-gazie .btn-h2o-action {
  color: var(--h2o-bg) !important;
}

/* -------------------------------------------------------------------- */
/* Switch tema chiaro/scuro nell'header                                 */
/* -------------------------------------------------------------------- */
.h2o-theme-toggle {
  background: transparent;
  border: none;
  color: var(--h2o-navbar-text);
  padding: 15px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.h2o-theme-toggle:hover {
  background-color: var(--h2o-surface-alt);
}
.h2o-theme-toggle:focus {
  outline: 2px solid var(--h2o-accent);
  outline-offset: -2px;
}
body[data-theme="dark"] .h2o-theme-toggle .h2o-icon-sun,
body[data-theme="light"] .h2o-theme-toggle .h2o-icon-moon {
  display: inline;
}
body[data-theme="dark"] .h2o-theme-toggle .h2o-icon-moon,
body[data-theme="light"] .h2o-theme-toggle .h2o-icon-sun {
  display: none;
}

/* -------------------------------------------------------------------- */
/* Pagina di login (e reset/cambio password, registrazione — stesso      */
/* _header.php): card singola centrata, essenziale, senza animazioni.    */
/* -------------------------------------------------------------------- */
.h2o-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.h2o-login-card {
  width: 100%;
  max-width: 380px;
  background-color: var(--h2o-surface);
  border: 1px solid var(--h2o-border);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12), var(--h2o-shadow);
  padding: 40px 32px;
  box-sizing: border-box;
}
.h2o-login-logo {
  text-align: center;
  margin-bottom: 20px;
}
.h2o-login-logo img {
  max-height: 64px;
  max-width: 100%;
}
.h2o-login-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background-color: var(--h2o-accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.h2o-login-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--h2o-text);
  margin: 0 0 24px;
}
.h2o-login-card .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--h2o-text-muted);
  margin-bottom: 4px;
}
.h2o-login-submit {
  width: 100%;
  margin-top: 8px;
  background-color: var(--h2o-accent);
  border-color: var(--h2o-accent);
}
.h2o-login-actions {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}
.h2o-login-actions-secondary {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--h2o-border);
}
#login-alert {
  margin-bottom: 16px;
}

/* -------------------------------------------------------------------- */
/* Login split-screen: pagina intera divisa a metà, niente card/angoli   */
/* arrotondati — form a sinistra, foto a destra, edge-to-edge. Sotto i   */
/* 768px la foto si nasconde e il form occupa tutta la larghezza.        */
/* -------------------------------------------------------------------- */
.h2o-split-wrap {
  min-height: 100vh;
  display: flex;
}
.h2o-split-form {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  box-sizing: border-box;
  background-color: var(--h2o-bg);
}
.h2o-split-inner {
  width: 100%;
  max-width: 360px;
}
.h2o-login-logo-left {
  text-align: left;
  margin-bottom: 32px;
}
.h2o-login-title-left {
  text-align: left;
}
.h2o-split-photo {
  flex: 1 1 50%;
  background-color: var(--h2o-surface-alt);
  background-size: cover;
  background-position: center;
}
.h2o-split-photo-placeholder {
  background-image: linear-gradient(160deg, var(--h2o-accent) 0%, var(--h2o-surface-alt) 100%);
}
@media (max-width: 768px) {
  .h2o-split-photo {
    display: none;
  }
  .h2o-split-form {
    padding: 32px 24px;
  }
}

/* -------------------------------------------------------------------- */
/* Menu utente nell'header: card identità + voci piatte, stile "profilo  */
/* Google del browser" invece del vecchio pannello a blocchi.            */
/* -------------------------------------------------------------------- */
.h2o-user-dropdown.dropdown-menu {
  width: 280px;
  padding: 8px;
  background-color: var(--h2o-surface) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2), var(--h2o-shadow) !important;
}
.h2o-user-card {
  padding: 0 0 8px;
}
.h2o-user-card > a {
  display: block;
  text-align: center;
  padding: 20px 16px !important;
  border-radius: 8px;
  background-color: var(--h2o-surface-alt) !important;
  white-space: normal !important;
}
.h2o-user-card > a:hover {
  background-color: var(--h2o-surface-alt) !important;
  filter: brightness(1.08);
}
.h2o-user-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
}
.h2o-user-card-name {
  color: var(--h2o-text);
  font-weight: 600;
  font-size: 15px;
}
.h2o-user-card-meta {
  color: var(--h2o-text-muted);
  font-size: 12px;
  margin-top: 4px;
}
.h2o-user-item {
  margin-top: 2px;
}
.h2o-user-item > a,
.h2o-user-item > button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent !important;
  border: none;
  padding: 10px 12px !important;
  border-radius: 6px;
  color: var(--h2o-text) !important;
  font-size: 14px;
  cursor: pointer;
  white-space: normal;
}
.h2o-user-item > a:hover,
.h2o-user-item > button:hover {
  background-color: var(--h2o-surface-alt) !important;
  text-decoration: none;
}
.h2o-user-item i {
  width: 20px;
  text-align: center;
  margin-right: 8px;
  color: var(--h2o-text-muted);
}
.h2o-user-item-company > a {
  display: flex !important;
  align-items: center;
}
.h2o-user-item-company-logo {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.h2o-user-divider {
  height: 1px;
  margin: 8px 4px;
  background-color: var(--h2o-border);
}

/* -------------------------------------------------------------------- */
/* Modali (Bootstrap .modal): stesso trattamento "card" di panel/dropdown */
/* utente sopra — superficie/bordo/ombra da variabili, per seguire il      */
/* tema chiaro/scuro invece del bianco fisso di Bootstrap.                */
/* -------------------------------------------------------------------- */
.adminlte-gazie .modal-content {
  background-color: var(--h2o-surface) !important;
  color: var(--h2o-text) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2), var(--h2o-shadow) !important;
}
.adminlte-gazie .modal-header {
  background-color: var(--h2o-surface-alt) !important;
  border-bottom: 1px solid var(--h2o-border) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 16px 20px;
}
.adminlte-gazie .modal-title {
  color: var(--h2o-text) !important;
  font-weight: 600;
}
.adminlte-gazie .modal-header .close {
  color: var(--h2o-text) !important;
  opacity: 0.5;
  text-shadow: none;
}
.adminlte-gazie .modal-header .close:hover,
.adminlte-gazie .modal-header .close:focus {
  opacity: 1;
}
.adminlte-gazie .modal-body {
  padding: 20px;
}
.adminlte-gazie .modal-footer {
  border-top: 1px solid var(--h2o-border) !important;
  padding: 12px 20px;
}
.adminlte-gazie .modal-backdrop.in {
  opacity: .6;
}

/* Modale "Ordine" (fast-edit) in admin_route.php: tabella righe + stepper
   quantità + autocomplete prodotto. */
.adminlte-gazie #order-rows-table .input-group-btn .btn {
  border-radius: 4px !important;
  padding: 6px 10px;
}
.adminlte-gazie #order-rows-table .qty-input {
  border-radius: 0 !important;
}
/* Etichetta compatta (orario + cliente) accanto ai marker nella mappa del
   giro (admin_route.js, MapLabel): overlay proprio invece di InfoWindow, per
   non ereditarne il padding/chrome fissi di Google (sproporzionati per un
   singolo rigo di testo). pointer-events:none perché è solo informativa —
   il click sul pin sottostante deve continuare a funzionare. */
.h2o-map-label {
  position: absolute;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  padding: 2px 7px;
  font: 600 12px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  white-space: nowrap;
  pointer-events: none;
}
.h2o-map-label strong {
  font-weight: 700;
}

.adminlte-gazie .h2o-suggest-list.list-group {
  background-color: var(--h2o-surface) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), var(--h2o-shadow);
  overflow: hidden;
}
.adminlte-gazie .h2o-suggest-list .list-group-item {
  background-color: var(--h2o-surface) !important;
  color: var(--h2o-text) !important;
  border-color: var(--h2o-border) !important;
}
.adminlte-gazie .h2o-suggest-list .list-group-item:hover {
  background-color: var(--h2o-surface-alt) !important;
}

/* ======================================================================
   Tabs e paginazione (Bootstrap .nav-tabs / .nav-pills / .pagination):
   componenti generici, riusati da qualunque pagina elenco/dettaglio (giri,
   ordini, magazzino...) — non solo admin_route.php. Selettori doppiati su
   .nav-tabs E .nav-pills: sono due componenti Bootstrap diversi ma nel
   nostro design devono leggersi identici (stessa sottolineatura piatta),
   così qualunque pagina — presente o futura — li ottiene gratis a
   prescindere da quale dei due usi nel markup, senza dover intervenire
   pagina per pagina ogni volta che se ne trova una nuova (v. admin_group.php,
   admin_ecr.php, admin_utente.php, admin_aziend.php, admin_staff.php,
   admin_fornit.php... tutte già a posto da qui, zero modifiche loro). */
/* skins/black.css fissa ".tab-content{background-color:#000}" e un accento a
   righe alterne sul ".tab-pane > div.row" per il vecchio tema scuro fisso:
   qui il contenuto delle tab deve restare trasparente e mostrare la
   superficie della card sotto (bianca in chiaro, scura in scuro), non un
   nero fisso indipendente dal tema. */
.adminlte-gazie .tab-content,
.adminlte-gazie .tab-content > .tab-pane > div.row:nth-of-type(odd) {
  background-color: transparent !important;
}
.adminlte-gazie .nav-tabs,
.adminlte-gazie .nav-pills {
  border-bottom: 1px solid var(--h2o-border);
}
/* skins/black.css mette un riquadro (bordo + sfondo) su ogni <li> delle
   tab — qui l'unico bordo voluto è la sottolineatura sulla tab attiva,
   gestita sotto sull'<a>: niente riquadro attorno a ciascuna voce. Azzera
   anche il border-radius "a pillola" che Bootstrap dà di default a
   .nav-pills > li > a: qui le pillole devono leggersi come tab piatte,
   non come pillole arrotondate. */
.adminlte-gazie .nav-tabs > li,
.adminlte-gazie .nav-pills > li {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.adminlte-gazie .nav-tabs > li > a,
.adminlte-gazie .nav-pills > li > a {
  color: var(--h2o-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  margin-right: 4px;
  padding: 10px 14px;
  background: transparent !important;
}
.adminlte-gazie .nav-tabs > li > a:hover,
.adminlte-gazie .nav-pills > li > a:hover {
  color: var(--h2o-text);
  background: transparent !important;
  border-color: transparent;
}
.adminlte-gazie .nav-tabs > li.active > a,
.adminlte-gazie .nav-tabs > li.active > a:hover,
.adminlte-gazie .nav-tabs > li.active > a:focus,
.adminlte-gazie .nav-pills > li.active > a,
.adminlte-gazie .nav-pills > li.active > a:hover,
.adminlte-gazie .nav-pills > li.active > a:focus {
  color: var(--h2o-text) !important;
  font-weight: 600;
  background: transparent !important;
  border: none;
  border-bottom: 2px solid var(--h2o-accent) !important;
}
.adminlte-gazie .nav-tabs > li > a .badge,
.adminlte-gazie .nav-pills > li > a .badge {
  background-color: var(--h2o-surface-alt);
  color: var(--h2o-text-muted);
}

.adminlte-gazie .pagination > li > a,
.adminlte-gazie .pagination > li > span {
  color: var(--h2o-link);
  background-color: var(--h2o-surface);
  border: 1px solid var(--h2o-border);
}
.adminlte-gazie .pagination > li > a:hover {
  background-color: var(--h2o-surface-alt);
  border-color: var(--h2o-border);
}
.adminlte-gazie .pagination > li.disabled > a,
.adminlte-gazie .pagination > li.disabled > span,
.adminlte-gazie .pagination > li.disabled > a:hover {
  color: var(--h2o-text-muted);
  background-color: var(--h2o-surface);
  border-color: var(--h2o-border);
}

/* -- Campi di un form "crea record" dentro una .h2o-card, uno sotto
   l'altro: gli input restano stretti (max 33%) anche quando il campo
   occupa tutta la larghezza della colonna, altrimenti su una form-grid a
   colonna singola ogni input si stirerebbe inutilmente a tutta larghezza. */
.h2o-form-grid .form-group {
  margin: 0 0 16px;
}
.h2o-form-grid .form-group:last-child {
  margin-bottom: 0;
}
.h2o-form-grid label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2o-text-muted);
  margin-bottom: 4px;
}
.h2o-form-grid .form-control {
  max-width: 66%;
}
.h2o-form-grid .btn {
  height: 34px;
}

/* -- Riga di pulsanti azione sopra una tabella/tabs ----------------------- */
.h2o-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

/* -- Intestazione di una pagina di dettaglio (giro, ordine...): titolo +
   badge di stato + riga di metadati ---------------------------------------- */
.h2o-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Titolo + info raccolti in un unico blocco a sinistra: con
   justify-content:space-between su .h2o-detail-header, questo è un solo
   elemento flex, quindi resta sempre a sinistra a prescindere da quanto è
   lungo il testo di .h2o-detail-meta al suo interno — i pulsanti a destra
   (.h2o-detail-actions) restano sul bordo vero, non a "distanza variabile"
   come con margin-left:auto su tre elementi in fila. */
.h2o-detail-title-group {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.h2o-detail-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--h2o-text);
}
.h2o-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--h2o-text-muted);
  font-size: 13px;
}
.h2o-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Riga "muta" in una .h2o-table (es. partenza/rientro deposito): stessa
   superficie della tabella ma testo secondario, per distinguerla dalle
   tappe vere senza spezzare la griglia di colonne. */
.h2o-table tr.h2o-row--muted td {
  color: var(--h2o-text-muted) !important;
  background-color: var(--h2o-surface-alt);
  font-style: italic;
}
.h2o-table tr.h2o-row--muted td:first-child {
  font-style: normal;
}

/* -- Timeline verticale (es. anteprima live di un form in una modale) ---- */
.h2o-timeline-title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--h2o-text-muted);
}
.h2o-timeline {
  list-style: none;
  margin: 0;
  padding: 4px 0 4px 4px;
}
.h2o-timeline-item {
  position: relative;
  padding-left: 50px;
  padding-bottom: 38px;
}
.h2o-timeline-item:last-child {
  padding-bottom: 0;
}
.h2o-timeline-item::before {
  /* Linea di collegamento fra un pallino e il successivo */
  content: '';
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: -6px;
  width: 2px;
  background: var(--h2o-border);
}
.h2o-timeline-item:last-child::before {
  display: none;
}
.h2o-timeline-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--h2o-surface);
  border: 2px solid var(--h2o-border);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--h2o-text-muted);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.h2o-timeline-item.is-filled .h2o-timeline-dot {
  background: var(--h2o-success);
  border-color: var(--h2o-success);
  /* Bianca di default: il verde successo del tema chiaro è scuro (#15803D),
     un'icona scura sopra sparirebbe. Nel tema scuro quel verde diventa
     acceso (#4ADE80) e il bianco si lava — lì l'icona va scura (v. sotto). */
  color: #fff;
  box-shadow: 0 0 0 3px var(--h2o-success-bg);
}
body[data-theme="dark"] .h2o-timeline-item.is-filled .h2o-timeline-dot {
  color: rgba(0, 0, 0, 0.68);
}
.h2o-timeline-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--h2o-text-muted);
}
.h2o-timeline-value {
  font-size: 14px;
  color: var(--h2o-text);
  margin-top: 2px;
  word-break: break-word;
}
.h2o-timeline-item.is-filled .h2o-timeline-value {
  /* Stesso colore evidente del pallino, per leggere a colpo d'occhio quali
     valori sono già stati decisi. */
  color: var(--h2o-success);
  font-weight: 600;
}
.h2o-timeline-item:not(.is-filled) .h2o-timeline-value {
  color: var(--h2o-text-muted);
  font-style: italic;
}

/* Stessa idea del timeline sopra (pallino + linea di collegamento), qui
   applicata alla colonna "#" della tabella tappe di un giro (v.
   admin_route.php) invece che a un elenco <ol> a parte — la tabella resta
   quella che era, solo quella prima colonna cambia aspetto. La linea è
   spezzata in due mezze linee (prima/dopo il pallino) così ogni riga la
   disegna per la propria altezza (variabile, dipende dal contenuto) e si
   incastrano fra loro; niente linea sopra la prima riga o sotto l'ultima
   (tr:first-child/last-child, corretto a prescindere da quali righe
   esistono davvero: partenza/rientro magazzino sono opzionali). */
.h2o-table-timeline-cell {
  position: relative;
  width: 34px;
  text-align: center;
}
.h2o-table-timeline-cell::before,
.h2o-table-timeline-cell::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  background: var(--h2o-border);
  transform: translateX(-1px);
}
.h2o-table-timeline-cell::before {
  top: 0;
  height: calc(50% - 12px);
}
.h2o-table-timeline-cell::after {
  bottom: 0;
  height: calc(50% - 12px);
}
.h2o-table tbody tr:first-child .h2o-table-timeline-cell::before {
  display: none;
}
.h2o-table tbody tr:last-child .h2o-table-timeline-cell::after {
  display: none;
}
.h2o-table-timeline-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--h2o-surface);
  border: 2px solid var(--h2o-border);
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  color: var(--h2o-text-muted);
}
.h2o-table-timeline-dot--depot {
  background: var(--h2o-accent);
  border-color: var(--h2o-accent);
  color: #fff;
  font-size: 12px;
}
/* Stesso motivo di .h2o-timeline-item.is-filled .h2o-timeline-dot sopra:
   --h2o-accent in tema scuro è un grigio-blu chiaro (#94A3B8), l'icona
   bianca sparirebbe per contrasto — lì va scura. */
body[data-theme="dark"] .h2o-table-timeline-dot--depot {
  color: rgba(0, 0, 0, 0.68);
}

/* Indicatore booleano compatto (es. coordinate presenti/assenti in tabella) */
.h2o-status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.h2o-status-dot--ok { color: var(--h2o-success); }
.h2o-status-dot--fail { color: var(--h2o-danger); }

/* -- Mini-timeline orizzontale (es. partenza → arrivo in una riga tabella) */
.h2o-time-track {
  display: inline-flex;
  align-items: center;
  /* Il pallino ::before/::after della linea sporge 8px nel gap (v. sotto):
     con gap:8px finiva praticamente attaccato al testo dell'orario, senza
     respiro visivo. */
  gap: 16px;
  white-space: nowrap;
}
.h2o-time-track-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--h2o-text);
}
.h2o-time-track-line {
  width: 26px;
  height: 2px;
  flex: none;
  background: var(--h2o-border);
  position: relative;
}
.h2o-time-track-line::before,
.h2o-time-track-line::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--h2o-text-muted);
}
.h2o-time-track-line::before { left: -8px; }
.h2o-time-track-line::after { right: -8px; }

/* -- Pallini-tappa cliccabili (elenco giri): un pallino per ordine
   assegnato, apre la stessa modale "Ordine" del dettaglio giro. */
.h2o-stop-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.h2o-stop-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--h2o-border);
  background: var(--h2o-surface-alt);
  color: var(--h2o-text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.h2o-stop-dot:hover,
.h2o-stop-dot:focus {
  background: var(--h2o-info-bg);
  border-color: var(--h2o-info);
  color: var(--h2o-info);
  transform: translateY(-1px);
}

/* ======================================================================
   admin_broven.php (Preventivo/Ordine/Fattura a cliente): pagina di
   inserimento a righi con tabelle HTML scritte a mano (non .gaz-table-form,
   non TableSorter) — le classi FacetFieldCaptionTD/FacetDataTD/Tlarge/
   FacetSelect sono condivise per copia-incolla da ~200 file in tutto GAzie
   (acquisti, fatture, magazzino...), quindi qui tutto è scoped su #broven
   (id del <form>, solo su questa pagina) per non toccare le altre pagine
   che usano lo stesso vocabolario di classi. I wrapper .h2o-card
   (.h2o-broven-search/-header/-corpo/-piede) sono aggiunti direttamente in
   admin_broven.php per separare visivamente ricerca cliente / dati
   testata / righi prodotto / totali, che prima erano un'unica sequenza di
   tabelle senza alcuna separazione.
   ====================================================================== */
/* Layout a 2 colonne: colonna principale (Cliente/Dati testata/Righi/Dati
   piede, in sequenza come prima) + sidebar destra con la sola card
   "Riepilogo importi", agganciata in vista (position: sticky) mentre si
   scorre la colonna principale — il documento può avere molti righi
   prodotto, e senza questo il totale/il pulsante di conferma erano fuori
   vista per gran parte dello scroll. .h2o-page resta il layout verticale
   di default condiviso da ~15 pagine (v. sopra "Superficie di base"), quindi
   il nuovo layout a colonne è un wrapper interno scoped su #broven, non
   una modifica a .h2o-page stesso. align-items:flex-start (non stretch,
   il default flex) è necessario perché sticky richiede che l'elemento NON
   sia forzato alla stessa altezza del fratello — con stretch la sidebar
   sarebbe già alta quanto la colonna principale e non avrebbe mai spazio
   in cui "scorrere" fino ad agganciarsi. */
#broven .h2o-broven-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
#broven .h2o-broven-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#broven .h2o-broven-sidebar {
  flex: 0 0 340px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
/* position:sticky sopra non "stickava": AdminLTE.css mette
   "overflow: hidden" su .wrapper (il contenitore di tutto il body, v.
   adminlte/dist/css/AdminLTE.css riga ~29) come vecchio trucco clearfix —
   ma è ridondante lì (il clearfix vero è già dato da .wrapper:after{clear:
   both} due righe sotto nello stesso file) e un overflow diverso da
   "visible" su QUALSIASI antenato rompe position:sticky su un discendente,
   anche se quell'antenato non scrolla mai da solo (non è .wrapper a
   scrollare, è la finestra). :has() scoped su #broven per non toccare le
   altre ~200 pagine che condividono lo stesso .wrapper. */
.adminlte-gazie .wrapper:has(#broven) {
  overflow: visible;
}
#broven .h2o-riepilogo-sidebar {
  margin: 0;
}
/* Sotto i ~1100px la sidebar torna in flusso sotto la colonna principale
   invece di restare agganciata a fianco: a quella larghezza i 340px fissi
   della sidebar non lascerebbero abbastanza spazio alla tabella righi
   prodotto (v. sotto, colonna Descrizione già ridotta al minimo). */
@media (max-width: 1100px) {
  #broven .h2o-broven-layout {
    flex-direction: column;
  }
  #broven .h2o-broven-sidebar {
    flex-basis: auto;
    width: 100%;
    position: static;
    max-height: none;
  }
}
/* Titoli delle 4 card della pagina (Cliente/Dati testata/Righi/Dati piede):
   prima erano solo testo muted uppercase, indistinguibile a colpo d'occhio
   da un'etichetta di campo qualunque — su una pagina con questa densità di
   input (v. .h2o-testata-field/.h2o-addrow sopra) serve un punto di
   riferimento più forte per capire subito "in quale blocco sto intervenendo".
   Ogni titolo ora porta un pallino numerato (ordine di lettura 1→4, v.
   .h2o-section-badge) + un'icona a colore accent coerente col resto del
   linguaggio della pagina (stesso accent usato per focus/h2o-addrow-title),
   invece di introdurre un colore diverso per sezione: la distinzione viene
   da numero+icona+etichetta, non da una tavolozza arcobaleno che romperebbe
   la coerenza cromatica del tema. */
#broven .h2o-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--h2o-text);
}
#broven .h2o-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--h2o-accent-glow);
  color: var(--h2o-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}
#broven .h2o-card-title .fa,
#broven .h2o-card-title .glyphicon {
  color: var(--h2o-accent);
  font-size: 14px;
}
/* Sotto-intestazione dentro Dati piede: quella card mescola due cose di
   natura diversa (campi trasporto/imballo modificabili, poi la tabella di
   riepilogo importi calcolata) senza alcun confine fra le due — questa
   etichetta segna dove finisce l'area "editabile" e inizia quella
   "risultato", stesso trattamento (badge+icona) del titolo card ma un
   filo più piccolo perché è una sotto-sezione, non una card nuova. */
#broven .h2o-piede-subheading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--h2o-border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--h2o-text-muted);
}
#broven .h2o-piede-subheading .fa {
  color: var(--h2o-accent);
}
/* Card "Inserisci Ordine per il cliente": il contenuto sta dentro un <div
   class="row">, che porta i margini laterali negativi di Bootstrap
   (-15px) pensati per compensare il padding delle colonne .col-* — qui non
   ci sono colonne, quindi i -15px mangiano quasi tutto il padding:20px
   della card, lasciando pochi px di respiro ai lati. */
#broven .h2o-broven-search .row {
  margin-left: 0;
  margin-right: 0;
}
/* Testata e Piede: dati di contesto/riepilogo, non il posto dove l'operatore
   lavora — sfondo attenuato su --h2o-bg (lo sfondo di pagina, non la
   superficie card) invece del bianco/superficie pieno delle altre card, e
   niente ombra, cosa che le fa "arretrare" visivamente dietro al CORPO
   (righi prodotto, sotto), che resta l'unica card a piena evidenza. Sceso
   di un solo livello di superficie (non fino a --h2o-surface-alt, già
   usato dentro per le etichette FacetFieldCaptionTD) per restare
   distinguibile dal contenuto interno invece di confondersi con esso.
   In dark è uno scuro reale (#0F172A contro #1E293B della card normale);
   in light è un grigio molto tenue (#F8FAFC contro #FFFFFF) — stesso
   principio in entrambi i temi, resa diversa per necessità di contrasto. */
#broven .h2o-broven-header,
#broven .h2o-broven-piede {
  background-color: var(--h2o-bg);
  border-color: transparent;
  box-shadow: none;
}
#broven .FacetFieldCaptionTD {
  background-color: var(--h2o-surface-alt) !important;
  color: var(--h2o-text-muted) !important;
  border-color: var(--h2o-border) !important;
  vertical-align: middle;
  padding: 10px 12px !important;
}
#broven .h2o-broven-header .FacetDataTD,
#broven .h2o-broven-piede .FacetDataTD {
  background-color: transparent !important;
  border-color: transparent !important;
  vertical-align: middle;
  padding: 8px 12px !important;
}
#broven table.Tlarge,
#broven table.table {
  border-color: var(--h2o-border) !important;
}
/* Tabella righi prodotto (name="elenco"): l'input Descrizione portava
   l'attributo HTML size=100 (larghezza in caratteri) pensato per una
   colonna a piena pagina — con la sidebar Riepilogo importi a fianco (v.
   .h2o-broven-sidebar sopra) la colonna Descrizione ha meno spazio, e
   quell'input costringeva l'intera tabella a scorrere in orizzontale
   invece di restringersi. width:100% lo fa aderire alla sua <td>, che nel
   table-layout automatico di default si prende lo spazio residuo dopo le
   altre colonne (Rigo/aggiorna/U.M./Quantità/Prezzo/%Sconto/%Provv./
   Importo/IVA/Contropartita/elimina, tutte a contenuto fisso o stretto) —
   min-width:0 impedisce all'input di continuare a imporre una larghezza
   minima al layout automatico della tabella nonostante il width:100%. */
#broven table[name="elenco"] input[name*="[descri]"] {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
/* Dati testata e Piede, versione flat: niente più pillole (bordo+sfondo+
   angoli arrotondati) — solo etichetta e valore separati da spaziatura,
   niente altro. Tentativi precedenti (sfondo attenuato, poi trasparente con
   bordo sottile) erano ancora percepiti come "troppo evidenti"; qui non
   resta furniture visiva da togliere oltre a questa, solo testo e respiro.
   border-collapse: separate + border-spacing restano per lo stacco verticale
   fra un rigo e il successivo (niente margin sulle celle di tabella). */
#broven .h2o-broven-header table.Tlarge,
#broven .h2o-broven-piede table.Tlarge {
  border-collapse: separate !important;
  border-spacing: 0 6px;
}
#broven .h2o-broven-header .FacetFieldCaptionTD,
#broven .h2o-broven-piede .FacetFieldCaptionTD {
  background-color: transparent !important;
  border-color: transparent !important;
}
#broven .h2o-broven-header .FacetDataTD:not(:last-child),
#broven .h2o-broven-piede .FacetDataTD:not(:last-child) {
  border-right: 20px solid transparent !important;
}
/* skins/black.css: ".Tlarge.table-bordered { border: 2px solid #444; }" —
   una cornice scura attorno a tutta la tabella, che romperebbe il trattamento
   flat (senza bordi) voluto per Testata/Piede sopra. */
#broven .Tlarge.table-bordered {
  border: none !important;
}
/* Dati testata: dalla tabella FacetFieldCaptionTD/FacetDataTD (etichetta e
   input in due <td> separate, fino a 3 coppie per riga) a una griglia CSS
   di 2 colonne dove ogni campo è un unico blocco label+controllo, per
   tenere l'etichetta "accorpata" al suo input invece che in una colonna a
   parte. Ogni riga della grid può contenere controlli di larghezza diversa
   (select singola vs 3 select data-mese-anno vs textarea destinazione):
   niente vincolo di allineamento fra le due colonne, ogni campo si
   dimensiona sul proprio contenuto. .h2o-testata-field-wide rompe il
   campo error a piena larghezza (era colspan="2" nella tabella). */
#broven .h2o-testata-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
}
/* flex-wrap (non flex-direction:column): la label ha flex-basis:100% quindi
   occupa sempre una riga tutta sua, ma i controlli che seguono restano in
   flusso inline fra loro invece di impilarsi uno sopra l'altro — necessario
   per i campi con più elementi affiancati (select giorno/mese/anno, o il
   selettore destinazione che stampa un pulsante "→" disabilitato seguito
   dal pulsante col nome del partner: in colonna finivano su due righe
   separate, sembrando due valori scollegati invece di un unico controllo). */
#broven .h2o-testata-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  min-width: 0;
}
#broven .h2o-testata-field-wide {
  grid-column: 1 / -1;
}
#broven .h2o-testata-field label {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--h2o-text-muted);
}
#broven .h2o-testata-field select,
#broven .h2o-testata-field input,
#broven .h2o-testata-field textarea {
  max-width: 100%;
}
#broven .h2o-testata-field textarea {
  flex: 1 1 100%;
}
#broven .h2o-testata-field input[type="submit"] {
  background-color: var(--h2o-surface-alt) !important;
  color: var(--h2o-text) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  cursor: pointer;
}
#broven .h2o-testata-field input[type="submit"]:disabled {
  color: var(--h2o-text-muted) !important;
  cursor: default;
}
#broven .h2o-testata-value {
  color: var(--h2o-text);
  flex: 1 1 100%;
}
#broven .h2o-testata-field-error {
  color: var(--h2o-danger);
  font-weight: 600;
}
@media (max-width: 1100px) {
  #broven .h2o-testata-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  #broven .h2o-testata-grid {
    grid-template-columns: 1fr;
  }
}
#broven input[type="text"],
#broven input[type="number"],
#broven input[type="email"],
#broven input[type="tel"],
#broven input[type="date"],
#broven input[type="time"],
#broven textarea,
#broven select,
#broven .FacetSelect {
  background-color: var(--h2o-input-bg) !important;
  color: var(--h2o-text) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 6px !important;
  height: auto !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
#broven input[type="text"]:focus,
#broven input[type="number"]:focus,
#broven input[type="email"]:focus,
#broven input[type="tel"]:focus,
#broven input[type="date"]:focus,
#broven input[type="time"]:focus,
#broven textarea:focus,
#broven select:focus,
#broven .FacetSelect:focus {
  border-color: var(--h2o-accent) !important;
  box-shadow: 0 0 0 3px var(--h2o-accent-glow) !important;
  outline: none;
}
/* Il vero "scatolone" rimasto nel riepilogo totali del Piede (la table.Tlarge
   di castelletto IVA/totali/pulsanti finali, l'unica parte del Piede rimasta
   tabellare — v. sopra, i campi imballo/spedizione/trasporto/pesi ecc. sono
   ora .h2o-testata-field come la Testata) non era la cella (già flat sopra)
   ma i controlli dentro: la regola generica più sopra dà a ogni input/select
   del form un bordo+sfondo box, necessario nel CORPO dove sono i campi su
   cui si lavora attivamente. Qui, dove il resto è già testo nudo, restava
   l'unico elemento ancora "a scatola" — va dopo la regola generica (non
   prima) perché su selettori a specificità pari (es. "input" qui contro
   "input[type=text]" sopra) vince l'ordine nel foglio, non la sola
   specificità. A riposo diventa testo puro; in focus un sottile sottolineato
   al posto del glow pieno, per non perdere il riferimento di dove si sta
   scrivendo mentre resta comunque editabile.
   Scoped su "table.Tlarge" (non su tutto .h2o-broven-piede) apposta: i campi
   .h2o-testata-field sopra devono restare box pieni come nel CORPO — stesso
   motivo della Testata, un input trasparente senza bordo si confonde con la
   label quando sta impilato sotto di essa invece che in una colonna a
   parte. */
#broven .h2o-broven-piede table.Tlarge input,
#broven .h2o-broven-piede table.Tlarge select,
#broven .h2o-broven-piede table.Tlarge .FacetSelect {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  padding: 2px !important;
}
#broven .h2o-broven-piede table.Tlarge input:focus,
#broven .h2o-broven-piede table.Tlarge select:focus,
#broven .h2o-broven-piede table.Tlarge .FacetSelect:focus {
  border-bottom-color: var(--h2o-accent) !important;
  box-shadow: none !important;
  outline: none;
}
/* "Riepilogo importi": era una tabella a 8 colonne (Imponibile/Aliquota/
   Tot.Corpo/%Sconto/Imponibile/IVA/Bollo/Totale) pensata per la larghezza
   piena della pagina — nella sidebar da 340px (v. .h2o-broven-sidebar sopra)
   si spezzava, colonne che si accavallavano o andavano a capo in modo
   illeggibile. Sostituita con una lista verticale etichetta/valore
   (.h2o-riepilogo-list), il formato "ricevuta" standard per un riepilogo
   importi in una colonna stretta: ogni riga ha tutto lo spazio orizzontale
   per etichetta a sinistra e valore a destra, senza dover incastrare 8
   colonne. Le righe del castelletto IVA (una coppia Imponibile/Imposta per
   aliquota, quando il documento ne usa più di una) sono più piccole e
   attenuate (.h2o-riepilogo-row-sub) per restare visivamente secondarie
   rispetto ai totali sotto. Il Totale (e il Netto a pagare, quando c'è
   ritenuta) resta l'unico valore in accent e più grande — lo stesso
   trattamento "il numero che conta" di prima, adattato dalla cella di
   tabella alla riga di lista. */
#broven .h2o-riepilogo-sconto-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--h2o-border);
}
#broven .h2o-riepilogo-sconto-field label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--h2o-text-muted);
}
#broven .h2o-riepilogo-sconto-field input {
  width: 56px;
  text-align: right;
}
#broven .h2o-riepilogo-list {
  display: flex;
  flex-direction: column;
}
#broven .h2o-riepilogo-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--h2o-border);
  font-size: 13px;
}
#broven .h2o-riepilogo-row:last-child {
  border-bottom: none;
}
#broven .h2o-riepilogo-row-label {
  color: var(--h2o-text-muted);
}
#broven .h2o-riepilogo-row-value {
  color: var(--h2o-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
#broven .h2o-riepilogo-row-sub {
  padding: 4px 0;
  font-size: 12px;
  border-bottom-style: dotted;
}
#broven .h2o-riepilogo-row-sub .h2o-riepilogo-row-label,
#broven .h2o-riepilogo-row-sub .h2o-riepilogo-row-value {
  color: var(--h2o-text-muted);
}
#broven .h2o-riepilogo-row-total {
  border-top: 2px solid var(--h2o-border);
  border-bottom: none;
  margin-top: 6px;
  padding-top: 12px;
}
#broven .h2o-riepilogo-row-total .h2o-riepilogo-row-label {
  color: var(--h2o-text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
}
#broven .h2o-riepilogo-row-total .h2o-riepilogo-row-value {
  color: var(--h2o-accent);
  font-weight: 700;
  font-size: 18px;
}
#broven .h2o-riepilogo-row-netpay {
  margin-top: 2px;
  padding-top: 7px;
}
/* Barra azioni finali del Piede (Prestampa/breve descrizione/conferma/
   genera ordine): prima erano <td> dentro la stessa tabella dei numeri —
   pulsanti e input di testo mescolati a valori calcolati, lo stesso
   problema già risolto per la barra "aggiungi rigo" sopra il CORPO e
   risolto qui allo stesso modo, barra dedicata fuori dalla tabella, con
   il pulsante di conferma (verde/giallo secondo class_btn_confirm, v. PHP)
   spostato a destra come azione primaria della pagina. */
#broven .h2o-piede-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--h2o-border);
}
#broven .h2o-piede-actions-left,
#broven .h2o-piede-actions-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
#broven .h2o-piede-actions .btn {
  min-height: 40px;
}
#broven .h2o-piede-actions input[name="shortdescri"] {
  min-width: 220px;
}
/* Barra "aggiungi rigo" (Tipo/Articolo/Quantità/Ricavo/%Sconto/%Provv./
   %Ritenuta/forza IVA/conferma): era una tabella dove ogni singolo campo
   aveva la propria "casella" indipendente (bordo+sfondo+angoli arrotondati
   per ogni <td>) — un linguaggio visivo completamente diverso dai righi
   prodotto appena sopra, che infatti si leggeva come un widget scollegato
   invece che come "scrivi qui per aggiungere una riga alla tabella sopra".
   Ora è un'unica barra continua agganciata al fondo della card CORPO
   (bleed fino ai bordi della card via margin negativo pari al padding
   della card, angoli arrotondati solo in basso per restare dentro il
   contorno della card), con un titolo esplicito ("+ Aggiungi rigo") e i
   campi in .h2o-testata-field — stessi box pieni (bordo+sfondo, v. sopra)
   usati per i controlli dei righi prodotto e per Testata/Piede, non più
   pillole isolate. Il pulsante di conferma resta l'unico elemento
   ancora "in evidenza" (sfondo pieno colorato, v. class_conf_row in PHP:
   verde se sto aggiungendo, giallo se sto modificando un rigo esistente),
   separato dal resto da un filo tratteggiato per restare l'azione
   primaria della barra. */
#broven .h2o-addrow {
  margin: 16px -20px -20px;
  padding: 16px 20px;
  background-color: var(--h2o-bg);
  border-top: 1px solid var(--h2o-border);
  border-radius: 0 0 9px 9px;
}
#broven .h2o-addrow-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--h2o-accent);
}
#broven .h2o-addrow-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 20px;
  row-gap: 12px;
}
#broven .h2o-addrow-fields .h2o-testata-field {
  flex: 1 1 150px;
}
#broven .h2o-addrow-fields .h2o-addrow-field-wide {
  flex: 3 1 260px;
}
#broven .h2o-addrow-fields .h2o-addrow-field-narrow {
  flex: 0 1 90px;
}
#broven .h2o-addrow-actions-inline {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
}
#broven .h2o-addrow-confirm {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--h2o-border);
}
#broven .h2o-addrow-confirm .btn {
  min-width: 220px;
  min-height: 40px;
}

/* ======================================================================
   select_evaord_gio.php (Evasione ordini settimanali del giorno -> DDT):
   stessa famiglia di tabelle scritte a mano di admin_broven.php (v. sopra)
   — stesso trattamento, scoped su #evaordgio (id del <form>, solo qui) per
   lo stesso motivo: FacetFieldCaptionTD/FacetDataTD/Tlarge sono condivise
   da ~200 pagine in tutto GAzie.
   ====================================================================== */
#evaordgio .h2o-card-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--h2o-text-muted);
}
#evaordgio .FacetFieldCaptionTD {
  background-color: var(--h2o-surface-alt) !important;
  color: var(--h2o-text-muted) !important;
  border-color: var(--h2o-border) !important;
  vertical-align: middle;
  padding: 10px 12px !important;
}
#evaordgio .h2o-evaordgio-header .FacetDataTD {
  background-color: var(--h2o-surface) !important;
  border-color: var(--h2o-border) !important;
  vertical-align: middle;
  padding: 8px 12px !important;
}
#evaordgio table.Tlarge,
#evaordgio table.table {
  border-color: var(--h2o-border) !important;
}
/* Coppie etichetta/valore raggruppate come blocco unico (v. spiegazione
   dettagliata sopra su #broven .h2o-broven-header/-piede): nessun bordo
   tra un'etichetta e il proprio valore, bordo colorato come lo sfondo
   della card tra un blocco e il successivo. */
#evaordgio .h2o-evaordgio-header table.Tlarge {
  border-collapse: separate !important;
  border-spacing: 0 6px;
}
#evaordgio .h2o-evaordgio-header .FacetFieldCaptionTD {
  border-right: none !important;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
#evaordgio .h2o-evaordgio-header .FacetDataTD {
  border-left: none !important;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
#evaordgio .h2o-evaordgio-header .FacetDataTD:not(:last-child) {
  border-right: 10px solid var(--h2o-surface) !important;
}
#evaordgio .Tlarge.table-bordered {
  border: none !important;
}
#evaordgio input[type="text"],
#evaordgio input[type="number"],
#evaordgio textarea,
#evaordgio select,
#evaordgio .FacetSelect,
#evaordgio .FacetText,
#evaordgio .FacetInput {
  background-color: var(--h2o-input-bg) !important;
  color: var(--h2o-text) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 6px !important;
  height: auto !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
#evaordgio input[type="text"]:focus,
#evaordgio input[type="number"]:focus,
#evaordgio textarea:focus,
#evaordgio select:focus {
  border-color: var(--h2o-accent) !important;
  box-shadow: 0 0 0 3px var(--h2o-accent-glow) !important;
  outline: none;
}

/* ======================================================================
   admin_docven.php (Fattura/DDT/altri documenti di vendita): stessa
   famiglia di admin_broven.php/select_evaord_gio.php, scoped su #docven
   (id del <form>, solo qui) per lo stesso motivo — FacetFieldCaptionTD/
   FacetDataTD/Tlarge condivise da ~200 pagine in tutto GAzie.
   Differenza rispetto a #broven: qui la tabella "Dati testata" ha righe
   con un numero variabile di coppie etichetta/valore (in prevalenza 4
   coppie/8 celle, non un 3-coppie fisso), ma il trattamento CSS a coppie
   raggruppate funziona comunque via selettori di adiacenza, indipendente
   dal conteggio celle per riga. La barra "aggiungi rigo" qui invece NON è
   una <table> (a differenza di admin_broven.php) ma già un
   .panel.input-area con .form-group Bootstrap — richiede quindi un
   trattamento diverso (altezza/padding sui controlli, non lo split
   celle-tabella fatto per #broven).
   ====================================================================== */
#docven .h2o-card-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--h2o-text-muted);
}
#docven .FacetFieldCaptionTD {
  background-color: var(--h2o-surface-alt) !important;
  color: var(--h2o-text-muted) !important;
  border-color: var(--h2o-border) !important;
  vertical-align: middle;
  padding: 10px 12px !important;
}
#docven .h2o-docven-header .FacetDataTD,
#docven .h2o-docven-piede .FacetDataTD {
  background-color: var(--h2o-surface) !important;
  border-color: var(--h2o-border) !important;
  vertical-align: middle;
  padding: 8px 12px !important;
}
#docven table.Tlarge,
#docven table.table {
  border-color: var(--h2o-border) !important;
}
#docven .Tlarge.table-bordered {
  border: none !important;
}
/* Coppie etichetta/valore raggruppate come blocco unico (v. spiegazione
   dettagliata su #broven .h2o-broven-header/-piede più sopra). */
#docven .h2o-docven-header table.Tlarge,
#docven .h2o-docven-piede table.Tlarge {
  border-collapse: separate !important;
  border-spacing: 0 6px;
}
#docven .h2o-docven-header .FacetFieldCaptionTD,
#docven .h2o-docven-piede .FacetFieldCaptionTD {
  border-right: none !important;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
#docven .h2o-docven-header .FacetDataTD,
#docven .h2o-docven-piede .FacetDataTD {
  border-left: none !important;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
#docven .h2o-docven-header .FacetDataTD:not(:last-child),
#docven .h2o-docven-piede .FacetDataTD:not(:last-child) {
  border-right: 10px solid var(--h2o-surface) !important;
}
#docven input[type="text"],
#docven input[type="number"],
#docven input[type="email"],
#docven input[type="tel"],
#docven input[type="date"],
#docven input[type="time"],
#docven textarea,
#docven select,
#docven .FacetSelect,
#docven .FacetText,
#docven .FacetInput {
  background-color: var(--h2o-input-bg) !important;
  color: var(--h2o-text) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 6px !important;
  height: auto !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
#docven input[type="text"]:focus,
#docven input[type="number"]:focus,
#docven input[type="email"]:focus,
#docven input[type="tel"]:focus,
#docven input[type="date"]:focus,
#docven input[type="time"]:focus,
#docven textarea:focus,
#docven select:focus,
#docven .FacetSelect:focus {
  border-color: var(--h2o-accent) !important;
  box-shadow: 0 0 0 3px var(--h2o-accent-glow) !important;
  outline: none;
}
/* Barra "aggiungi rigo" (.panel.input-area, Bootstrap .form-group, non una
   tabella qui): etichetta piccola/muted sopra il campo, campi già in
   celle separate quindi basta lo spazio verticale/i colori. */
#docven .input-area {
  background-color: var(--h2o-surface-alt) !important;
  border: 1px solid var(--h2o-border) !important;
  border-radius: 8px;
}
#docven .input-area label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--h2o-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
#docven .input-area .form-group {
  margin-bottom: 14px;
}

/* -- Cassometro: barra di carico casse sul camion -------------------------- */
.h2o-cassometro {
  width: 100%;
  background: var(--h2o-surface-alt);
  border: 1px solid var(--h2o-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.h2o-cassometro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--h2o-text-muted);
  margin-bottom: 8px;
}
.h2o-cassometro-header i {
  margin-right: 5px;
}
.h2o-cassometro-bar-bg {
  height: 10px;
  background: var(--h2o-border);
  border-radius: 6px;
  overflow: hidden;
}
.h2o-cassometro-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease, background 0.4s ease;
}