/* ==========================================================================
   Gestionale Rinfresco — layout + components
   ========================================================================== */

/* FA7 dà alle icone width:1.25em di default (FA6 usava la larghezza naturale),
   il che scentra le icone in bottoni/contenitori dimensionati per la vecchia
   larghezza. Riporto 'auto' globalmente: le icone ereditano la larghezza
   naturale (come FA6), mentre fa-fw ridichiara --fa-width sull'elemento e
   resta a larghezza fissa 1.25em. */
:root { --fa-width: auto; }

/* L'attributo `hidden` vale display:none nel foglio di stile del BROWSER, che
   è il livello di priorità più basso: perde contro le utility display di
   Bootstrap, che sono !important (.d-flex{display:flex!important}). Un elemento
   con hidden + d-flex resta quindi visibile, e nell'HTML sembra il contrario.
   Era il caso del riquadro avvisi CAP nel form ordine, che compariva vuoto —
   solo l'icona del triangolo — su ogni nuovo ordine. Nei template ci sono una
   ventina di elementi accesi e spenti via `.hidden`: questa regola li mette al
   riparo tutti, non solo quello che se n'era accorto. */
[hidden] { display: none !important; }

/* Un figlio flex non scende sotto la larghezza del suo contenuto (min-width:
   auto), quindi `text-truncate` dentro non tronca mai e il testo esce dalla
   card. Bootstrap non ha questa utility: i template la usavano (card
   «Consegne di oggi» in home, card delle consegne) ma non esisteva, e si è
   visto aprendo Maggie, che restringe la pagina (Marco, 20/10). */
.min-width-0 { min-width: 0; }

/* Header tabella ordinabili (macro sortable_th). Freccette su/giù che
   compaiono in hover; la freccia attiva resta evidenziata anche senza hover. */
.th-sort-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; cursor: pointer;
}
.th-sort.text-end .th-sort-link { flex-direction: row-reverse; }
.th-sort-link:hover .th-sort-label { text-decoration: underline; }
.th-sort-ic {
  display: inline-flex; flex-direction: column; line-height: .65;
  font-size: .6em; opacity: 0; transition: opacity .12s ease;
}
.th-sort:hover .th-sort-ic { opacity: .5; }
.th-sort-active .th-sort-ic { opacity: .95; }
.th-sort-ic i { color: var(--color-text-muted); }
.th-sort-ic i.on { color: var(--color-text-primary); }

/* Card-azione (macro action_card): come le kpi della home ma icona PIENA. */
.action-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px; color: inherit;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.action-card-icon { font-size: 1.7rem; line-height: 1; opacity: 1; }
.action-card-label { font-weight: 600; font-size: .95rem; }
.action-card.act-primary .action-card-icon { color: var(--color-primary); }
.action-card.act-success .action-card-icon { color: var(--color-success); }
.action-card.act-info    .action-card-icon { color: var(--color-info); }
.action-card.act-warning .action-card-icon { color: var(--color-warning); }
.action-card.act-secondary .action-card-icon { color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Layout — sidebar + topbar + main grid
   -------------------------------------------------------------------------- */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
.app-sidebar { grid-area: sidebar; background: var(--color-surface); border-right: 1px solid var(--color-border); position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; display: flex; flex-direction: column; z-index: 100; }
.app-topbar { grid-area: topbar; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; height: var(--topbar-height); }
/* `overflow-y: auto` qui non serviva a niente — la pagina scrolla nel
   documento, non dentro questo riquadro (scrollHeight == clientHeight) — e in
   compenso rendeva `.app-main` il contenitore di scorrimento più vicino per
   qualsiasi `position: sticky` interno. Che non scorrendo mai, li congelava:
   il menù delle sezioni in Impostazioni scorreva via con il contenuto. */
.app-main { grid-area: main; padding: 24px; }

.sidebar-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--color-border); }
.sidebar-brand { font-weight: 700; font-size: 1.15rem; color: var(--color-primary); letter-spacing: -0.01em; line-height: 1.15; }
.sidebar-brand small { display: block; font-size: .75rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0; }

.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; overflow-x: hidden; }
.sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--color-text-secondary); font-weight: 500; font-size: .9rem; transition: background .15s, color .15s; border-left: 3px solid transparent; }
.sidebar-nav a:hover { color: var(--color-text-primary); background: var(--color-surface-2); }
.sidebar-nav a.active { color: var(--color-primary); background: var(--color-primary-light); border-left-color: var(--color-accent); }
.sidebar-nav a i { width: 20px; text-align: center; font-size: .95rem; }

.sidebar-group { display: block; }
.sidebar-group > summary { list-style: none; }
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--color-text-secondary); font-weight: 500; font-size: .9rem; cursor: pointer; user-select: none; border-left: 3px solid transparent; transition: background .15s, color .15s; }
.sidebar-group-toggle:hover { color: var(--color-text-primary); background: var(--color-surface-2); }
.sidebar-group-toggle > i:first-child { width: 20px; text-align: center; font-size: .95rem; }
.sidebar-group-label { flex: 1; }
.sidebar-group-chevron { font-size: .7rem; color: var(--color-text-muted); transition: transform .2s ease; }
.sidebar-group[open] > summary .sidebar-group-chevron { transform: rotate(180deg); }
.sidebar-nav .sidebar-group-items a { padding-left: 38px; font-size: .85rem; }
.sidebar-nav .sidebar-group-items a i { font-size: .85rem; }

.sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-2); }
.sidebar-user { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; flex-shrink: 0; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: .85rem; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: .7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
/* Le due scorciatoie in fondo alla sidebar. Sono azioni, non voci di menu:
   si distinguono dal resto della colonna con la cornice e l'oro del brand. */
.sidebar-azioni { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sidebar-azione {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary) !important;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.sidebar-azione:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-primary-dark) !important;
}
.sidebar-azione i { width: 16px; text-align: center; color: var(--color-text-muted); }
.sidebar-azione:hover i { color: var(--color-primary-dark); }
/* Sidebar chiusa: resta l'icona, il testo se ne va con le altre etichette. */
.sidebar-collapsed .sidebar-azione span { display: none; }
.sidebar-collapsed .sidebar-azione { justify-content: center; padding-left: 0; padding-right: 0; }

.sidebar-footer a { color: var(--color-text-muted); font-size: .85rem; }
.sidebar-footer a:hover { color: var(--color-danger); }

/* Transizione di pagina: .app-main viene rimontato a ogni navigazione hx-boost
   (perché il body viene swappato), quindi l'animazione parte naturalmente
   ogni volta. Fade-in + slide-up leggero per dare continuità visiva.

   `backwards` e NON `both`, e non è un dettaglio.

   Con `both` l'animazione resta in "riempimento" per sempre, e finché riempie
   Chrome tiene il transform applicato — anche solo come matrice identità, cioè
   anche scrivendo `transform: none` nell'ultimo fotogramma (verificato: lo
   stile calcolato resta `matrix(1,0,0,1,0,0)`). Un transform applicato rende
   .app-main un CONTESTO DI IMPILAMENTO: lo z-index 1055 della finestra modale
   resta prigioniero lì dentro, mentre il velo di Bootstrap — che sta su <body>
   — le passa sopra. Il risultato è la schermata nera segnalata dalla cliente:
   la finestra c'è, è nel posto giusto, ma è coperta e non si clicca.

   `backwards` applica il primo fotogramma prima della partenza (che è tutto
   quello che serve a una comparsa) e lascia l'elemento tornare al suo stile
   naturale quando ha finito: niente transform, niente contesto di impilamento.

   Il secondo rimedio, indipendente, è in base.html: ogni modale viene
   riattaccato a <body> quando si apre. Ne basterebbe uno, ma coprono casi
   diversi — questo vale per qualsiasi elemento `fixed`, quello vale anche se
   domani un altro antenato tornasse a creare un contesto di impilamento. */
.app-main { animation: rinfresco-page-in .22s cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes rinfresco-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-main { animation: none; }
}

/* Voci sidebar non ancora implementate: stesso layout dei link, ma non interattive */
.sidebar-nav .nav-coming-soon {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  color: var(--color-text-muted); font-weight: 500; font-size: .9rem;
  border-left: 3px solid transparent; cursor: not-allowed; opacity: .7; user-select: none;
}
.sidebar-nav .nav-coming-soon i { width: 20px; text-align: center; font-size: .95rem; flex-shrink: 0; }
.sidebar-nav .nav-coming-soon > span:not(.coming-soon-badge) {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-nav .nav-coming-soon .coming-soon-badge {
  margin-left: auto; flex-shrink: 0;
  background: var(--color-accent-light); color: var(--color-primary-dark);
  font-size: .45rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 10px; white-space: nowrap;
}
.sidebar-nav .sidebar-group-items .nav-coming-soon { padding-left: 38px; font-size: .85rem; }
.sidebar-nav .sidebar-group-items .nav-coming-soon i { font-size: .85rem; }

.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title-wrap { min-width: 0; }
.topbar-title { font-size: 1.1rem; font-weight: 600; color: var(--color-text-primary); margin: 0; }
.topbar-subtitle { font-size: .8rem; color: var(--color-text-muted); margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
/* Slot centrale della topbar (block topbar_actions): occupa lo spazio tra
   titolo e icone e centra i controlli della pagina. Sotto md è nascosto:
   le pagine rendono un fallback d-md-none nel contenuto. */
.topbar-center { display: none; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; padding: 0 12px; }
@media (min-width: 768px) { .topbar-center { display: flex; } }

/* Mobile sidebar backdrop: scurisce il resto, click per chiudere, sotto la sidebar */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 90;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }
@media (min-width: 992px) { .sidebar-backdrop { display: none; } }

/* --------------------------------------------------------------------------
   Layout schermate ordine (modifica + dettaglio): due colonne (info a sinistra,
   articoli a destra) + scroll INDIPENDENTE solo sulla colonna articoli.
   thead e riga di add restano sticky. Classi condivise tra .order-form*
   (modifica) e .order-detail* (dettaglio).
   -------------------------------------------------------------------------- */
.order-form, .order-detail {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-height) - 48px);
}
.order-form-cols, .order-detail-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  flex: 1; min-height: 0;
}
.order-form-left, .order-form-right,
.order-detail-left, .order-detail-right {
  display: flex; flex-direction: column; min-height: 0;
}
.order-form-left, .order-detail-left { overflow-y: auto; padding-right: 4px; }
.order-form-right, .order-detail-right { overflow: hidden; }
/* Articoli card dentro la colonna destra del dettaglio E del form modifica:
   riempie lo spazio rimasto sotto la card Importi, scroll interno per la tabella. */
.order-detail-articles-card,
.order-form-articles-card {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.order-form-articles-scroll, .order-detail-articles-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -20px;
}
/* DETTAGLIO ordine (non il form modifica): pagina scorrevole anziché altezza
   fissa con scroll interno. Le due colonne info stanno in alto; la tabella
   articoli va a tutta larghezza, sotto a tutto, e cresce con la pagina. */
.order-detail { height: auto; }
.order-detail-cols { flex: initial; }
.order-detail-articles-full { margin-top: 20px; }
.order-detail-articles-full table { margin-bottom: 0; }
/* Scheda ordine/preventivo su schermo stretto: la tabella articoli scorre di
   lato dentro la sua card invece di schiacciarsi. Il nome del prodotto non
   scende sotto una larghezza leggibile e la riga non va a capo su ogni parola
   — «questa informazione deve rimanere sempre visibile» (Emiliana, 31/08). */
@media (max-width: 767.98px) {
  .order-detail-articles-full { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .order-detail-articles-full table { min-width: 620px; }
  .order-detail-articles-full th:nth-child(2),
  .order-detail-articles-full td:nth-child(2) { min-width: 180px; }
}
/* Galleria immagini prodotto (scheda prodotto, max 5): tile quadrate
   trascinabili (SortableJS), stella = principale, tile tratteggiata = add. */
.gal-tile {
  position: relative; width: 110px; height: 110px; border-radius: 8px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: grab; padding: 0;
}
.gal-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gal-tile.gal-add { cursor: pointer; color: var(--color-text-muted); background: none; border-style: dashed; }
.gal-tile.gal-add:hover { color: var(--color-primary); border-color: var(--color-primary); }
.gal-tile.sortable-ghost { opacity: .35; }
.gal-primary-badge {
  position: absolute; top: 4px; left: 4px; background: var(--color-accent);
  color: var(--color-primary-dark); font-size: .55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 10px;
}
.gal-actions { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 4px; }
.gal-btn {
  border: 0; background: rgba(255, 255, 255, .92); border-radius: 6px;
  width: 26px; height: 26px; font-size: .72rem; cursor: pointer;
  color: var(--color-text-secondary); box-shadow: var(--shadow-sm);
}
.gal-btn.gal-star.active, .gal-btn.gal-star:hover { color: var(--color-accent-dark); }
.gal-btn.gal-trash:hover { color: var(--color-danger); }
/* Miniatura nel dropdown Select2 dei prodotti (ordini/preventivi/composizione):
   senza questi vincoli l'immagine renderizza a dimensione piena nel menu. */
.prod-thumb {
  width: 28px; height: 28px; border-radius: 4px; margin-right: 8px; flex: none;
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-3);
}
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-thumb-empty { color: var(--color-text-muted); font-size: .7rem; }
/* Lightbox galleria prodotto: overlay a schermo intero al click sull'immagine. */
.gal-tile img { cursor: zoom-in; }
.gal-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1080;
  background: rgba(0, 0, 0, .85); align-items: center; justify-content: center; padding: 32px;
}
.gal-lightbox.show { display: flex; }
.gal-lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.gal-lightbox-close {
  position: fixed; top: 16px; right: 24px; background: none; border: 0;
  color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .85;
}
.gal-lightbox-close:hover { opacity: 1; }

/* Form ordine ristrutturato: pila verticale (Cliente / Articoli /
   Spedizione / Fatturazione / Note). Gli Articoli sono l'area principale:
   flex 1 con scroll interno; le altre sezioni si aprono/chiudono dal header
   (stato per-scheda in localStorage, vedi ofToggle nel template). Se le
   sezioni aperte superano l'altezza, scrolla la pila intera ma gli Articoli
   non scendono sotto i 520px (la pila scrolla se l'altezza non basta). */
.of-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.of-stack > .card-clean { flex-shrink: 0; }
.of-stack > .order-form-articles-card { flex: 1 1 0; min-height: 520px; }
/* Il pulsante-intestazione riempie l'intera card (margini negativi pari al
   padding della card-clean + padding proprio): così l'area cliccabile è tutta
   la barra della sezione, non solo il testo. */
.of-section-head {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% + 40px); margin: -20px; padding: 20px;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.of-section:not(.collapsed) .of-section-head { margin-bottom: 0; }
.of-section-head .of-title { flex-shrink: 0; }
.of-summary {
  font-size: .85rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Il riassunto compare solo a sezione chiusa: aperta, i campi sono visibili */
.of-section:not(.collapsed) .of-summary { display: none; }
.of-chevron { margin-left: auto; color: var(--color-text-muted); transition: transform .18s ease; }
.of-section.collapsed .of-chevron { transform: rotate(-90deg); }
.of-section-body { margin-top: 14px; }
.of-section.collapsed .of-section-body { display: none; }
@media (max-width: 991.98px) {
  .of-stack { overflow-y: visible; }
  .of-stack > .order-form-articles-card { flex: none; min-height: 0; }
}

/* Form ordine: UN SOLO scroll (di pagina). Prima .order-form aveva altezza fissa
   e sia .of-stack sia .order-form-articles-scroll avevano overflow proprio → due
   scrollbar. Ora il form cresce in altezza naturale e scrolla la pagina (.app-main),
   come già fa il layout mobile. Vale solo per il form, non per .order-detail. */
.order-form { height: auto; }
.order-form .of-stack { overflow-y: visible; min-height: 0; }
.order-form .of-stack > .order-form-articles-card { flex: none; min-height: 0; }
.order-form .order-form-articles-scroll { overflow-y: visible; max-height: none; }

/* Add row barra fissa in fondo al card (NON dentro al wrapper di scroll), così
   resta sempre visibile anche se gli articoli sono pochi o nessuno. */
.order-form-articles-add {
  flex-shrink: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin: 0 -20px;
}
.order-form-articles-add table { width: 100%; margin: 0; table-layout: fixed; border-collapse: collapse; }
.order-form-articles-add table td { padding: 14px 8px; vertical-align: middle; border: 0; }
.order-form-articles-add table td:first-child { padding-left: 20px; }
.order-form-articles-add table td:last-child { padding-right: 20px; }
.order-form-articles-scroll table#items-table { table-layout: fixed; }
.order-form-articles-scroll table,
.order-detail-articles-scroll table { margin-bottom: 0; }
.order-form-articles-scroll thead th,
.order-detail-articles-scroll thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.order-form-articles-scroll tfoot td,
.order-detail-articles-scroll tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--color-surface);
  box-shadow: inset 0 1px 0 var(--color-border);
}
/* Riga "+ aggiungi prodotto": padding generoso */
.order-form-articles-scroll tfoot tr.add-item-row td { padding: 14px 8px; vertical-align: middle; }
.order-form-articles-scroll tfoot tr.add-item-row td:first-child,
.order-detail-articles-scroll tfoot tr td:first-child,
.order-form-articles-scroll thead th:first-child,
.order-detail-articles-scroll thead th:first-child,
.order-form-articles-scroll tbody td:first-child,
.order-detail-articles-scroll tbody td:first-child { padding-left: 20px; }
.order-form-articles-scroll tfoot tr.add-item-row td:last-child,
.order-detail-articles-scroll tfoot tr td:last-child,
.order-form-articles-scroll thead th:last-child,
.order-detail-articles-scroll thead th:last-child,
.order-form-articles-scroll tbody td:last-child,
.order-detail-articles-scroll tbody td:last-child { padding-right: 20px; }
.order-form-footer {
  padding-top: 14px; margin-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex; gap: 8px;
}
/* Flash "appena aggiunto": verde chiaro che svanisce in 2s */
@keyframes item-flash-added {
  0%   { background-color: rgba(16, 185, 129, .22); }
  100% { background-color: transparent; }
}
.order-form-articles-scroll tr.item-just-added > td {
  animation: item-flash-added 2s ease-out both;
}

/* Flash "in eliminazione": rosso chiaro + opacità a 0, sparisce in 1s */
@keyframes item-flash-removed {
  0%   { background-color: rgba(239, 68, 68, .28); opacity: 1; }
  55%  { background-color: rgba(239, 68, 68, .28); opacity: 1; }
  100% { background-color: rgba(239, 68, 68, .15); opacity: 0; }
}
.order-form-articles-scroll tr.item-deleting > td {
  animation: item-flash-removed 1s ease-in both;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .order-form-articles-scroll tr.item-just-added > td,
  .order-form-articles-scroll tr.item-deleting > td { animation: none; }
}

/* Prodotti contenuti in un menu: righe di sola lettura appese al menu che le
   ha portate. Non si toccano e non si sommano — il prezzo è quello del menu —
   ma le quantità sono già moltiplicate, così si vede quanti pezzi veri stanno
   entrando nell'ordine senza doverlo calcolare a mente. */
.order-form-articles-scroll tr.item-component > td {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: .85rem;
  padding-top: 2px;
  padding-bottom: 2px;
  border-top: 0;
}
.order-form-articles-scroll tr.item-component .item-component-nome { padding-left: 8px; }
.order-form-articles-scroll tr.item-component .item-component-qta { font-variant-numeric: tabular-nums; }

/* Larghezze delle colonne articolo (form ordine e preventivo).
   La tabella e' `table-layout: fixed` e il nome prodotto era l'unica colonna
   elastica: restringendo la finestra, la somma delle colonne fisse superava lo
   spazio e il nome si riduceva a zero — spariva proprio la cosa che serve
   leggere (Emiliana, 31/08). Ora e' la colonna delle note a cedere per prima,
   e il nome ha un minimo sotto il quale non scende.

   Il minimo del nome sta sopra la larghezza della quantita' a ogni breakpoint:
   «la larghezza del modulo "Nome prodotto" deve essere piu' ampia del modulo
   quantita'» (Emiliana, 02/09). Se cambi una di queste misure, controlla che
   la disuguaglianza regga anche nei media query qui sotto. */
.articoli-cols .col-codice  { width: 120px; }
.articoli-cols .col-nome    { width: auto; }
.articoli-cols .col-qta     { width: 110px; }
.articoli-cols .col-unit    { width: 110px; }
.articoli-cols .col-totale  { width: 120px; }
.articoli-cols .col-note    { width: 300px; }
.articoli-cols .col-azioni  { width: 60px; }
#items-table th:nth-child(2), #items-table td:nth-child(2) { min-width: 220px; }

@media (max-width: 1400px) {
  .articoli-cols .col-note { width: 190px; }
}
@media (max-width: 1200px) {
  .articoli-cols .col-codice { width: 90px; }
  .articoli-cols .col-qta,
  .articoli-cols .col-unit   { width: 90px; }
  .articoli-cols .col-totale { width: 100px; }
  .articoli-cols .col-note   { width: 120px; }
}
/* Sotto i 992px il codice se ne va: e' un dato di servizio, il nome no.

   La cella del codice pero' NON si nasconde con `display: none`. Una cella
   nascosta cosi' non lascia il posto vuoto: sparisce dalla riga, e tutte le
   altre slittano di una colonna prendendo la larghezza di quella prima. Il
   nome finiva nella colonna del codice e la quantita' in quella del nome — da
   qui il campo del nome ridotto a due lettere e quello della quantita' largo
   mezza riga (Emiliana, 02/09). La cella resta al suo posto e si azzera:
   larghezza, padding e contenuto visibile. Gli `input type=hidden` che stanno
   li' dentro (item_id, item_prodotto_id) continuano a essere inviati.

   La tabella resta a larghezze fisse: l'unica colonna elastica e' il nome, e
   le altre non possono rubarle spazio. */
@media (max-width: 991.98px) {
  #items-table th:nth-child(1),
  #items-table td:nth-child(1) { width: 0; padding: 0; font-size: 0; overflow: hidden; }
  #items-table td:nth-child(1) > input:not([type="hidden"]) { display: none; }
  /* Il respiro a sinistra passa alla colonna del nome, che ora e' la prima. */
  #items-table th:nth-child(2),
  #items-table td:nth-child(2) { padding-left: 20px; }
  #items-table .col-codice,
  .order-form-articles-add .col-codice { width: 0; }
  /* Quel tanto che basta a leggere «1.234,50» senza tagliarlo; il resto della
     riga se lo prende il nome, che e' l'unica colonna elastica. */
  .articoli-cols .col-qta    { width: 96px; }
  .articoli-cols .col-unit,
  .articoli-cols .col-totale { width: 104px; }
  .articoli-cols .col-note   { width: 88px; }
  .articoli-cols .col-azioni { width: 44px; }
  /* Il minimo del nome sta sulla TABELLA e non sulla cella: nel layout fisso
     Chrome il `min-width` di una cella lo ignora, e sotto i 560px il campo del
     nome tornava a zero. Cosi' invece la tabella smette di stringersi e quello
     che avanza lo scorre la card. */
  #items-table,
  .order-form-articles-add table { min-width: 580px; }
  #items-table th:nth-child(2), #items-table td:nth-child(2) { min-width: 140px; }
  /* Su uno schermo davvero stretto le colonne, tutte insieme, non ci stanno:
     invece di schiacciarle (e far sparire il nome) la tabella scorre in
     orizzontale. Lo scorrimento sta sulla card e non sulle due tabelle, o
     quella delle righe e quella di inserimento scorrerebbero ognuna per conto
     suo e le colonne non sarebbero piu' incolonnate. */
  .order-form-articles-card { overflow-x: auto; }
  .order-form-articles-scroll tr.item-component .item-component-nome,
  #items-table td:nth-child(2) .row-nome { white-space: normal; word-break: break-word; }
}

/* Detail: riga azioni in alto. Supporta sia il layout split (ordini —
   actions-left controlli stato + actions-right modifica/stampa/cestino) sia
   il layout solo destra (preventivi — solo actions-right). Il margin-left:auto
   sull'actions-right lo spinge a destra in entrambi i casi. */
.order-detail-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.order-detail-actions .actions-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-detail-actions .actions-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.order-detail-actions form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.order-detail-actions .form-select { width: auto; }
/* Tutti i bottoni nella riga azioni hanno la stessa altezza/font (btn-sm) */
.order-detail-actions .btn { white-space: nowrap; }

/* Badge "Coming soon" generico (usato anche fuori dalla sidebar) */
.coming-soon-badge {
  background: var(--color-accent-light); color: var(--color-primary-dark);
  font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 10px; white-space: nowrap;
}
@media (max-width: 991.98px) {
  .order-form, .order-detail { height: auto; }
  .order-form-cols, .order-detail-cols { grid-template-columns: 1fr; gap: 16px; }
  .order-form-left, .order-detail-left { overflow-y: visible; padding-right: 0; }
  .order-form-right, .order-detail-right { overflow: visible; }
  .order-form-articles-scroll, .order-detail-articles-scroll {
    overflow-y: visible; max-height: none; margin: 0;
  }
  .order-form-articles-scroll thead th,
  .order-form-articles-scroll tfoot td,
  .order-detail-articles-scroll thead th,
  .order-detail-articles-scroll tfoot td { position: static; }
  .order-detail-actions { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Bootstrap component overrides: alcune var --bs-*-active-* sono SCOPED sulla
   classe del componente (es. `.nav-pills { --bs-nav-pills-link-active-bg: #0d6efd }`).
   Un override su :root non vince mai. Vanno ridichiarate sullo stesso selettore;
   essendo caricate dopo Bootstrap, stessa specificità → vincono per cascade order.
   -------------------------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--color-accent);
  --bs-nav-pills-link-active-color: var(--color-primary-dark);
}
.list-group {
  --bs-list-group-active-bg: var(--color-accent);
  --bs-list-group-active-color: var(--color-primary-dark);
  --bs-list-group-active-border-color: var(--color-accent);
}
.pagination {
  --bs-pagination-active-bg: var(--color-accent);
  --bs-pagination-active-color: var(--color-primary-dark);
  --bs-pagination-active-border-color: var(--color-accent);
  --bs-pagination-color: var(--color-primary);
  --bs-pagination-hover-color: var(--color-primary-dark);
  --bs-pagination-focus-color: var(--color-primary-dark);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--color-accent);
  --bs-dropdown-link-active-color: var(--color-primary-dark);
}
.progress { --bs-progress-bar-bg: var(--color-accent); }

/* Switch (.form-switch) in oro brand.
   Qui l'override di --bs-primary in base.html NON basta: in Bootstrap 5.3 il
   CSS compilato scrive il blu a mano, non lo legge da una variabile —
   `.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}`
   e `.form-check-input:focus{border-color:#86b7fe;box-shadow:...rgba(13,110,253,.25)}`.
   Vanno quindi ridichiarati esplicitamente (questo file è caricato dopo Bootstrap).
   Ambito volutamente ristretto a .form-switch: checkbox e radio non sono toccati. */
.form-switch .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-switch .form-check-input:focus {
  border-color: var(--color-accent);
  /* rgba dell'oro #dbb446: le var CSS non sono usabili dentro rgba() senza
     una --color-accent-rgb, che non esiste in questa palette. */
  box-shadow: 0 0 0 .25rem rgba(219, 180, 70, .25);
}
/* Manopola dello switch spento quando prende il focus: Bootstrap la vira
   sull'azzurro (#86b7fe), la riportiamo in oro. Solo :not(:checked), altrimenti
   da acceso avremmo oro su oro e la manopola sparirebbe: acceso resta bianca,
   gestita dalla regola .form-switch .form-check-input:checked di Bootstrap.
   NB: il colore nella data-URI è per forza letterale, tenerlo allineato a --color-accent. */
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dbb446'/%3e%3c/svg%3e");
}

.btn-info {
  --bs-btn-color: var(--color-primary-dark);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-primary-dark);
  --bs-btn-hover-bg: var(--color-accent-dark);
  --bs-btn-hover-border-color: var(--color-accent-dark);
  --bs-btn-active-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-accent-dark);
  --bs-btn-active-border-color: var(--color-accent-dark);
}
/* .btn-primary disabled: Bootstrap usa --bs-btn-disabled-bg compilato col blu
   originale. Override per restare marrone anche quando disabled (vedi bottone
   "Genera Coming Soon" sul form preventivo). */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-outline-info {
  --bs-btn-color: var(--color-accent-dark);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-primary-dark);
  --bs-btn-hover-bg: var(--color-accent);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-active-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-accent);
  --bs-btn-active-border-color: var(--color-accent);
}
.topbar-clock { font-size: .85rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.topbar-icon-btn { background: none; border: none; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; position: relative; }
.topbar-icon-btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); }

/* --------------------------------------------------------------------------
   Card and KPI
   -------------------------------------------------------------------------- */
.card-clean { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px; }
.card-clean .card-title { font-size: .95rem; font-weight: 600; color: var(--color-text-primary); margin: 0 0 16px; display: flex; align-items: center; justify-content: space-between; }
.card-clean .card-title a { font-size: .8rem; font-weight: 500; color: var(--color-text-secondary); }
.card-clean .card-title a:hover { color: var(--color-primary); }

.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; position: relative; overflow: hidden; display: block; color: inherit; transition: transform .15s, box-shadow .15s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.kpi-label { font-size: .8rem; color: var(--color-text-secondary); font-weight: 500; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.kpi-value { font-size: 2rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.kpi-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 2.75rem; opacity: .12; }
.kpi-card.kpi-primary .kpi-icon { color: var(--color-primary); }
.kpi-card.kpi-success .kpi-icon { color: var(--color-success); }
.kpi-card.kpi-warning .kpi-icon { color: var(--color-warning); }
.kpi-card.kpi-info .kpi-icon { color: var(--color-info); }
.kpi-card.kpi-danger .kpi-icon { color: var(--color-danger); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-clean { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.table-clean thead th { text-align: left; font-weight: 600; font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); position: sticky; top: 0; }
.table-clean tbody td { padding: 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
.table-clean tbody tr { transition: background .1s; }
.table-clean tbody tr:hover { background: var(--color-surface-2); }
.table-clean tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   Status badges (order stato)
   -------------------------------------------------------------------------- */
.badge-status { display: inline-flex; align-items: center; padding: 3px 10px; font-size: .72rem; font-weight: 600; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.badge-nuovo { background: #DBEAFE; color: #1E40AF; }
.badge-confermato { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-in_produzione { background: #FEF3C7; color: #92400E; }
.badge-consegnato { background: #D1FAE5; color: #065F46; }
.badge-annullato { background: #FEE2E2; color: #991B1B; }
.badge-cestino { background: var(--color-surface-3); color: var(--color-text-muted); }
.badge-pronto { background: var(--color-accent-light); color: var(--color-primary-dark); }

/* Stati fattura (bozza/emessa/pagata/annullata): nomi distinti da quelli
   ordine, che finiscono in -o. Senza queste regole i badge fattura
   restavano pill trasparenti. */
.badge-bozza { background: var(--color-surface-3); color: var(--color-text-muted); }
.badge-emessa { background: #DBEAFE; color: #1E40AF; }
.badge-pagata { background: #D1FAE5; color: #065F46; }
.badge-annullata { background: #FEE2E2; color: #991B1B; }

/* Stati comunicazione (hub multicanale) + classificazione AI del messaggio.
   Stessa forma pill degli altri badge: senza queste regole restavano
   trasparenti come i badge fattura prima della loro riga. */
.badge-nuova { background: #DBEAFE; color: #1E40AF; }
.badge-risposta_inviata { background: #D1FAE5; color: #065F46; }
.badge-archiviata { background: var(--color-surface-3); color: var(--color-text-muted); }
.badge-simulato { background: #FEF3C7; color: #92400E; }
/* Le categorie sono quelle di EmailProcessor.CATEGORIES: cambiando quelle
   vanno aggiunte qui, altrimenti il badge resta trasparente. */
.badge-comm-informazioni { background: var(--color-surface-3); color: var(--color-text-secondary); }
.badge-comm-preventivo { background: var(--color-accent-light); color: var(--color-primary-dark); }
.badge-comm-appuntamento { background: #DBEAFE; color: #1E40AF; }
.badge-comm-urgente { background: #FEE2E2; color: #991B1B; }
.badge-comm-spam { background: var(--color-surface-3); color: var(--color-text-muted); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   Buttons and forms (extends Bootstrap)
   -------------------------------------------------------------------------- */
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); font-weight: 500; }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary); border-color: var(--color-primary); }

.form-control, .form-select { border-color: var(--color-border); padding: .55rem .85rem; font-size: .9rem; }
/* La freccia della select sta nel padding destro: Bootstrap ne riserva
   2.25rem, la riga qui sopra li riportava a .85rem e la freccia finiva sopra
   il testo — visibile su tutte le tendine strette (ore e minuti degli orari,
   che sono `w-auto` e si dimensionano sul contenuto). */
.form-select { padding-right: 2.25rem; }
/* Tendine di ora e minuti: una larghezza minima uguale per tutte, così le
   coppie restano allineate anche fra campi diversi. */
.form-select.w-auto { min-width: 5.25rem; }
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(92,51,27,.18); }
.form-label { font-weight: 500; font-size: .85rem; color: var(--color-text-primary); margin-bottom: 6px; }
.password-toggle {
  border: 1px solid var(--color-border); border-left: 0;
  background: var(--color-surface); color: var(--color-text-muted);
  padding: 0 .85rem;
}
.password-toggle:hover, .password-toggle:focus {
  background: var(--color-primary-light); color: var(--color-primary);
  border-color: var(--color-border); box-shadow: none;
}
.input-group:focus-within .password-toggle { border-color: var(--color-primary); }
.input-group:focus-within .form-control { box-shadow: none; }

/* --------------------------------------------------------------------------
   Auth page
   -------------------------------------------------------------------------- */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--color-surface-2); }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px; width: 100%; max-width: 420px; }
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand-title { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin: 0 0 4px; letter-spacing: -0.02em; }
.auth-brand-subtitle { font-size: .85rem; color: var(--color-text-secondary); margin: 0; }

/* --------------------------------------------------------------------------
   Utilities + mobile
   -------------------------------------------------------------------------- */
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--color-text-muted); }
.empty-state i { font-size: 2.5rem; opacity: .4; margin-bottom: 12px; display: block; }
.empty-state p { margin: 0; font-size: .9rem; }

@media (max-width: 991.98px) {
  .app-layout { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-md); }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex !important; }
}
.sidebar-toggle { display: none; }

/* Sidebar desktop collassabile (preferenza per-utente, vedi layout.html).
   Su mobile (<992px) NON si applica: lì vale l'offcanvas con backdrop sopra. */
.sidebar-toggle-desktop { display: none; }
@media (min-width: 992px) {
  .sidebar-toggle-desktop { display: inline-flex; }
  .app-layout { transition: grid-template-columns .25s ease; }
  .app-sidebar { transition: transform .25s ease; }
  .app-layout.sidebar-collapsed { grid-template-columns: 0 1fr; }
  .app-layout.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------------
   Scrollbar custom — sottile, colori brand Rinfresco
   Si applica a tutti gli elementi scrollabili della dashboard
   (Firefox via scrollbar-width/-color, webkit via ::-webkit-scrollbar)
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Nasconde la status bar di TinyMCE (path elementi / branding / resize).
   Specificità .tox .tox-statusbar per battere lo skin di default. */
.tox .tox-statusbar { display: none !important; }

/* Loader di transizione tra schermate. Sfondo bianco pieno, dissolvenza
   0.3s in entrata/uscita (opacity + visibility). */
#page-loader {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
/* Visibilità guidata da una classe su <html> (root), NON sul div del loader:
   htmx scambia/snapshotta solo il <body>, quindi il loader non può riapparire
   da uno snapshot ripristinato tornando indietro. La vecchia classe .show resta
   per compatibilità. */
#page-loader.show,
html.is-loading #page-loader { opacity: 1; visibility: visible; }
/* Variante semi-trasparente: navigazioni "leggere" sulla stessa schermata
   (elemento sorgente con data-loader="translucent", es. cambio giorno Consegne) */
#page-loader.page-loader--translucent,
html.is-loading-translucent #page-loader { background: rgba(255, 255, 255, .55); backdrop-filter: blur(1.5px); }

.loader { display: flex; flex-direction: column; align-items: center; gap: 2rem; }

/* Logo che pulsa */
.loader__logo {
  width: 320px; max-width: 70vw; height: auto; display: block;
  animation: page-loader-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes page-loader-pulse {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.05); opacity: .92; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Tre puntini animati */
.loader__dots { display: flex; gap: 12px; align-items: center; }
.loader__dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: #d9b24a; display: inline-block;
  animation: page-loader-dot 1.4s ease-in-out infinite;
}
.loader__dot:nth-child(1) { animation-delay: 0s; }
.loader__dot:nth-child(2) { animation-delay: .2s; }
.loader__dot:nth-child(3) { animation-delay: .4s; }
@keyframes page-loader-dot {
  0%, 80%, 100% { transform: translateY(0);     opacity: .4; }
  40%           { transform: translateY(-10px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loader__logo, .loader__dot { animation: none; }
}

/* --------------------------------------------------------------------------
   Consegne — tabella pianificazione. CSS GLOBALE (non in <style> di pagina):
   con hx-boost lo <head> non viene swappato, quindi gli stili page-specific
   nel blocco extra_css non si applicano in navigazione boosted. Qui invece
   sono caricati una volta e persistono.
   -------------------------------------------------------------------------- */
.consegne-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem; background:var(--color-surface); }
.consegne-table thead th {
  background:var(--color-surface-2); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-text-muted); font-weight:600; padding:11px 12px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:5;
}
.consegne-table tbody td { padding:10px 12px; border-bottom:1px solid var(--color-border); vertical-align:middle; color:var(--color-text-primary); }
.consegne-table tbody tr:not(.driver-row):hover { background:var(--color-surface-2); }
.consegne-table tr.is-ritiro { background:#fdf6e3; }
.consegne-table tr.is-ritiro:hover { background:#fbeed0; }
/* Bordino giallo a sinistra = ritiro allestimento (al posto dell'icona store). */
.consegne-table tr.is-ritiro td:first-child { border-left:4px solid var(--color-accent); }
.consegne-table tr.row-saved { background:#e6f4ea !important; transition:background .8s; }
.consegne-table .col-num { color:var(--color-text-muted); font-size:.78rem; }

/* Intestazione gruppo autista */
.consegne-table tr.driver-row td { padding:0; background:var(--color-primary-light); border-bottom:1px solid var(--color-border); }
.driver-bar { display:flex; align-items:center; gap:10px; padding:11px 14px; font-weight:600;
  font-size:.9rem; color:var(--color-primary-dark); border-left:4px solid var(--driver-color, var(--color-accent)); }
.driver-bar .giro-furgone { width:auto; max-width:220px; font-size:.78rem; padding:2px 26px 2px 8px; font-weight:500; }
/* Larghezza sua: senza, la colonna si stringeva sulla tendina ridotta e
   «— Autista —» non si leggeva piu'. */
.consegne-table .camerieri-cell { min-width:170px; max-width:180px; }
.consegne-table .camerieri-lista { display:block; font-size:.8rem; color:var(--color-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.consegne-table .ordine-link { font-weight:600; text-decoration:none; }
.consegne-table .ordine-link:hover { text-decoration:underline; }
.driver-bar .driver-name-btn { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.driver-bar .driver-name-btn:hover { text-decoration:underline; }
.driver-bar .dropdown-menu { font-size:.85rem; font-weight:400; max-height:320px; overflow-y:auto; }
.driver-bar .driver-dot { width:11px; height:11px; border-radius:50%; background:var(--driver-color,#bbb); flex:none; box-shadow:0 0 0 2px #fff; }
.driver-bar .driver-count { background:var(--color-surface); color:var(--color-text-secondary);
  border:1px solid var(--color-border); border-radius:20px; padding:1px 9px; font-size:.72rem; font-weight:600; }
.driver-bar .driver-print { margin-left:auto; color:var(--color-primary); text-decoration:none; font-size:.8rem;
  font-weight:500; padding:4px 11px; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); }
.driver-bar .driver-print:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
/* Il secondo pulsante nella barra del giro non deve spingersi a destra da solo:
   il margin-left:auto sta sul primo, questo gli si accoda. */
.driver-bar .driver-print + .driver-print { margin-left:6px; }
.driver-bar .driver-del { cursor:pointer; color:var(--color-danger); }
.driver-bar .driver-del:hover { background:var(--color-danger); color:#fff; border-color:var(--color-danger); }
/* «Giro N» accanto al nome: si mostra solo quando l'autista ne ha più d'uno. */
.driver-bar .giro-badge {
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 8px; border-radius:10px; white-space:nowrap;
  background:var(--color-accent-light); color:var(--color-primary-dark);
}
.driver-bar.unassigned { color:var(--color-text-secondary); border-left-color:var(--color-text-muted); }
/* Barra "Giro N" (giro virtuale del solver, senza autista ancora) */
.giro-bar { background:var(--color-accent-light); border-left-color:var(--color-accent-dark); color:var(--color-primary-dark); }
/* «partenza HH:MM» sulla barra del giro: l'orario è modificabile e vale per
   tutte le tappe del gruppo (Fabrizio, 15/09). */
.driver-bar .giro-dep { display:inline-flex; align-items:center; gap:5px; font-weight:500;
  font-size:.8rem; color:var(--color-text-secondary); white-space:nowrap; }
.driver-bar .giro-uscita, .consegne-table .driver-bar .giro-uscita {
  width:auto; min-width:112px; border:1px solid var(--color-border); border-radius:6px;
  padding:2px 6px; font-size:.8rem; font-weight:600; background:var(--color-surface);
  color:var(--color-text-primary); }
.driver-bar .giro-uscita:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 2px var(--color-accent-light); }
.driver-bar .giro-uscita:disabled { opacity:.6; }
.giro-bar .giro-assign { margin-left:auto; max-width:180px; }
.giro-period, .giri-prev-period { font-size:.74rem; font-weight:600; color:var(--color-accent-dark);
  background:var(--color-surface); border:1px solid var(--color-accent); border-radius:20px; padding:1px 9px; }
/* Anteprima proposta giri (modale) */
.giri-preview-dialog { width:min(720px,96vw); height:auto; max-height:calc(100vh - 48px); }
.giri-preview-body { overflow:auto; padding:8px 14px; flex:1 1 auto; }
.giri-preview-foot { display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--color-border); }
.giri-prev-round { border:1px solid var(--color-border); border-radius:8px; margin:10px 0; overflow:hidden; }
.giri-prev-head { background:var(--color-accent-light); padding:8px 12px; font-size:.86rem; color:var(--color-primary-dark); }
.giri-prev-stop { display:grid; grid-template-columns:26px 130px 1fr 1.3fr; gap:8px; align-items:center;
  padding:6px 12px; font-size:.82rem; border-top:1px solid var(--color-surface-3); }
.giri-prev-seq { width:22px; height:22px; border-radius:50%; background:var(--color-surface-3); color:var(--color-text-secondary);
  display:inline-flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:600; }
.giri-prev-time { color:var(--color-text-secondary); white-space:nowrap; }
.giri-prev-cli { font-weight:600; color:var(--color-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.giri-prev-addr { color:var(--color-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.giro-late { color:#8a6d1a; font-weight:600; }
.giro-warn { background:#fdecea; color:#b3261e; border-radius:10px; padding:1px 8px; font-size:.72rem; font-weight:600; margin-left:6px; }
/* Confronto giri: due colonne (standard / AI) affiancate, ognuna con "Usa questo" */
.giri-compare-dialog { width:min(1120px,96vw); height:min(800px, calc(100vh - 48px)); }
.giri-compare { display:flex; flex:1 1 auto; min-height:0; }
.giri-col { flex:1 1 50%; display:flex; flex-direction:column; min-width:0; }
.giri-col + .giri-col { border-left:1px solid var(--color-border); }
.giri-col-head { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--color-border); background:var(--color-surface-2); }
.giri-col-title { font-weight:700; color:var(--color-primary-dark); white-space:nowrap; }
.giri-col-stats { font-size:.76rem; color:var(--color-text-secondary); flex:1 1 auto; min-width:0; }
.giri-use-btn { white-space:nowrap; flex:none; }
.giri-col-body { overflow:auto; flex:1 1 auto; padding:6px 12px; }
.giri-col-loading { padding:34px 14px; text-align:center; color:var(--color-text-secondary); }
@media (max-width: 820px) {
  .giri-compare { flex-direction:column; }
  .giri-col + .giri-col { border-left:0; border-top:1px solid var(--color-border); }
}

/* Campi editabili inline */
/* Larghezza dei campi orario: 78px bastavano a Chrome e tagliavano Safari, che
   all'orario aggiunge il suo pulsante dell'orologio — si leggeva «08:0» con la
   cifra finale mangiata (Emiliana, 17/09). `width:auto` lascia decidere al
   browser quanto gli serve davvero (ogni motore disegna quel campo a modo suo)
   e il minimo tiene la colonna allineata. */
.consegne-table .time-input { width:auto; min-width:106px; border:1px solid var(--color-border); border-radius:6px; padding:4px 7px; font-size:.83rem; background:var(--color-surface); color:var(--color-text-primary); }
.consegne-table .text-input { width:100%; border:1px solid transparent; border-radius:6px; padding:4px 7px; font-size:.83rem; background:transparent; color:var(--color-text-primary); }
.consegne-table .text-input:hover { border-color:var(--color-border); }
.consegne-table .car-input { width:84px; }
/* La tendina dell'autista sta dentro la sua colonna: senza larghezza propria
   si allargava quanto la voce piu' lunga («Gianni Prova · Giro 1») e finiva
   sopra la colonna del prezzo (Emiliana, 17/09). Il nome lungo si accorcia coi
   puntini invece di sfondare la cella. */
.consegne-table .driver-select { width:100%; max-width:100%; font-size:.83rem; padding:4px 9px;
  border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface);
  text-overflow:ellipsis; }
.consegne-table .time-input:focus, .consegne-table .text-input:focus, .consegne-table .driver-select:focus {
  outline:none; background:var(--color-surface); border-color:var(--color-primary); box-shadow:0 0 0 2px var(--color-primary-light); }

.cliente-cell { max-width:170px; }
.cliente-cell strong { font-size:.85rem; font-weight:600; display:block; line-height:1.25; }
.cliente-cell small { color:var(--color-text-secondary); font-size:.76rem; }
.indirizzo-cell { max-width:260px; }
.indirizzo-cell .text-truncate { max-width:260px; }
.indirizzo-cell small { color:var(--color-text-muted); font-size:.74rem; }
.prezzo-cell { font-weight:600; white-space:nowrap; }

/* Mappa consegne in modale (overlay custom, niente dipendenza dal JS Bootstrap) */
/* Overlay scrollabile (display:block + overflow): se la modale è più alta dello
   schermo non viene tagliata, basta scrollare. Universale su qualsiasi monitor. */
.map-modal { position: fixed; inset: 0; z-index: 1060; background: rgba(15, 23, 42, .5); display: none; overflow-y: auto; padding: 24px; }
.map-modal.show { display: block; }
.map-modal-dialog { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); width: min(1100px, 96vw); height: min(760px, calc(100vh - 48px)); max-height: calc(100vh - 48px); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }
.map-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--color-border); font-weight: 600; color: var(--color-text-primary); }
.map-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0 4px; }
.map-modal-close:hover { color: var(--color-text-primary); }
/* Toolbar mappa: selettore percorso autista/giro + animazione orari */
.map-toolbar { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--color-border); background:var(--color-surface-2); flex-wrap:wrap; }
.map-route-info { font-size:.82rem; color:var(--color-text-secondary); }
.map-clock { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; font-size:1.1rem; color:var(--color-primary-dark);
  background:var(--color-accent-light); border:1px solid var(--color-accent); border-radius:8px; padding:2px 12px; min-width:64px; text-align:center; }
.map-clock:empty { display:none; }
/* Pin numerato delle tappe sul percorso */
.route-pin span { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--color-primary); color:#fff; font-weight:700; font-size:.78rem; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); }
#consegne-map { flex: 1 1 auto; min-height: 0; }
/* SMS: giallo Rinfresco con icona marrone, niente bordi. Inviato = oro più scuro. */
/* Pulsante AI: oro Rinfresco con testo marrone, niente bordo */
.btn-accent { background:var(--color-accent); color:var(--color-primary-dark); border:0; font-weight:600; }
.btn-accent:hover { background:var(--color-accent-dark); color:var(--color-primary-dark); }
.btn-sms { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:32px;
  padding:0 14px; font-size:.9rem; border-radius:6px; border:0; line-height:1; cursor:pointer; transition:background .15s; }
.btn-sms-off { background:var(--color-accent); color:var(--color-primary-dark); }
.btn-sms-off:hover { background:var(--color-accent-dark); color:var(--color-primary-dark); }
.btn-sms-on { background:var(--color-accent-dark); color:var(--color-primary-dark); }
.btn-sms-on:hover { background:var(--color-accent-dark); color:#fff; }
/* Indirizzo modificabile inline + alert geocoding */
.addr-line { display:flex; align-items:center; gap:6px; }
.addr-input { width:100%; min-width:130px; }
.addr-alert { color:var(--color-warning); font-size:.9rem; flex:none; }
.addr-geo { color:var(--color-text-secondary); font-size:.9rem; flex:none; }
.addr-loading { opacity:.55; }

.btn-chevron { border: 0; background: none; color: var(--color-text-secondary); padding: 4px 9px; box-shadow: none; }
.btn-chevron:hover { color: var(--color-primary); background: var(--color-surface-3); }
.btn-chevron:focus { box-shadow: none; }
.cons-stat { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:.82rem; color:var(--color-text-secondary);
  background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:8px; padding:5px 11px; }
.cons-stat strong { color:var(--color-text-primary); font-size:.92rem; }
.cons-stat-warn { background:#fdf6e3; border-color:#f0e2bd; color:#8a6d1a; }
.cons-stat-warn strong { color:#8a6d1a; }
/* Select "+ Autista": il testo non deve mai finire sotto la freccetta nativa.
   Padding destro ampio per la freccia + ellissi sui nomi autista lunghi. */
.add-driver-select { padding-right: 2rem; text-overflow: ellipsis; }
.add-driver-select option { text-overflow: ellipsis; }

/* Drag&drop righe consegne: handle a fine riga (unico punto trascinabile,
   le altre celle restano interattive) */
.consegne-table .drag-cell { width: 34px; text-align: center; padding-right: 10px; }
.consegne-table .drag-handle { cursor: grab; color: var(--color-text-muted); padding: 6px 8px; display: inline-block; touch-action: none; }
.consegne-table .drag-handle:hover { color: var(--color-primary); }
.consegne-table .drag-handle:active { cursor: grabbing; }
.consegne-table tr.sortable-ghost { opacity: .45; background: var(--color-accent-light); }
.consegne-table tr.sortable-chosen td { background: var(--color-primary-light); }
/* Zona di rilascio per un autista aggiunto senza consegne: bersaglio ampio e
   tratteggiato su cui trascinare le righe (l'intestazione da sola sarebbe
   troppo piccola da centrare). Sparisce al reload dopo il primo drop. */
.consegne-table tr.drop-zone-row td {
  padding: 18px 16px; text-align: center; color: var(--color-text-muted);
  font-size: .85rem; background: var(--color-surface-2);
  border: 2px dashed var(--color-border); border-top: 0;
}

/* ── Produzione: board "da produrre / in produzione / pronti" ───────────────
   Stili globali (non inline nel body della pagina): con hx-boost lo <head>
   non viene swappato ma resta sempre montato, quindi le regole caricate qui
   una volta valgono anche alla prima navigazione boosted verso Produzione.
   Un <style> inline nel body non applicava affidabilmente al primo atterraggio
   (serviva un reload). Vedi convenzione gemella in consegne/index.html. */
.prod-tabs { display:flex; gap:6px; margin-bottom:14px; }
.prod-tab { padding:7px 16px; border-radius:8px; font-weight:600; font-size:.9rem; color:var(--color-text-secondary); background:var(--color-surface-2, #f1f1f1); text-decoration:none; cursor:pointer; }
.prod-tab.active { background:var(--color-primary); color:#fff; }
.prod-board { display:flex; gap:16px; align-items:flex-start; }
.prod-col { flex:1 1 0; min-width:0; }
.prod-col-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:8px 8px 0 0; font-weight:600; color:#fff; }
.prod-col-head .badge { background:rgba(255,255,255,.25); }
.prod-col-left .prod-col-head { background:var(--color-primary); }
.prod-col-right .prod-col-head { background:var(--color-accent); color:var(--color-primary-dark); }
.prod-col-right .prod-col-head .badge { background:rgba(0,0,0,.12); color:var(--color-primary-dark); }
.prod-col-body { background:var(--color-primary-light); border-radius:0 0 8px 8px; padding:12px; min-height:120px; }
.prod-col-right .prod-col-body { background:var(--color-accent-light); }
.prod-card { background:#fff; border:1px solid #e9ecef; border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.prod-card:last-child { margin-bottom:0; }
.prod-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.prod-card-num { font-weight:700; color:var(--color-primary); }
.prod-card-cli { font-size:.82rem; color:var(--color-text-muted); }
.prod-scad { font-size:.8rem; font-weight:600; white-space:nowrap; }
.prod-scad i { margin-right:4px; }
.prod-items { list-style:none; margin:8px 0 10px; padding:0; font-size:.88rem; }
.prod-items li { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:3px 0; border-bottom:1px dashed #eee; }
.prod-items li:last-child { border-bottom:none; }
.prod-items .q { font-weight:600; color:var(--color-primary-dark); white-space:nowrap; }
.prod-item-txt { display:flex; flex-direction:column; min-width:0; }
.prod-item-nome { font-weight:500; }
.prod-item-note { font-size:.8rem; color:var(--color-text-muted); font-style:italic; margin-top:1px; }
.prod-take { display:flex; gap:8px; margin-top:8px; }
.prod-take .form-select { flex:1; }
.prod-count { font-variant-numeric:tabular-nums; font-size:1.5rem; font-weight:700; color:var(--color-primary-dark); text-align:center; margin:6px 0; }
.prod-count.is-late { color:#c0392b; }
.prod-op { font-size:.85rem; color:var(--color-text-secondary); }
.prod-op i { margin-right:5px; color:var(--color-primary); }
.prod-actions { display:flex; gap:6px; align-items:center; }
.prod-ready-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
/* Lista unica di produzione: card affiancate che impaccano a colonne (masonry
   CSS, niente buchi verticali) e vanno a capo quando finisce lo spazio. */
.prod-grid { columns: 320px auto; column-gap:14px; }
.prod-grid .prod-card { break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:14px; }
.prod-card.is-taken { border-color:var(--color-accent); box-shadow:inset 0 0 0 2px var(--color-accent-light); }
.prod-card.is-done { opacity:.85; }
.prod-footer { display:flex; gap:8px; align-items:center; margin-top:10px; }
.prod-assign { flex:1; margin:0; }
.prod-assign .form-select { width:100%; }
.prod-done { white-space:nowrap; }
.htmx-request.prod-tab, .prod-col-body.htmx-request { opacity:.6; }
@media (max-width: 767px){ .prod-board { flex-direction:column; } }

/* Produzione per-riga: tabella, badge tipo, riga assegnata (=fatto), riepiloghi */
.prod-tabs { flex-wrap: wrap; }
.prod-table td { vertical-align: middle; }
.prod-table .prod-num { font-size:.78rem; color:var(--color-text-muted); text-decoration:none; }
.prod-table a.prod-num:hover { color:var(--color-primary); text-decoration:underline; }
.prod-row-done td { background:var(--color-surface-2); color:var(--color-text-muted); }
.prod-row-done .prod-art { text-decoration: line-through; }
/* Le righe di servizio no: li' «fatto» vuol dire che i camerieri sono stati
   assegnati, e un «Cameriere» sbarrato sembra annullato (Emiliana, 17/09). */
.prod-row-done.prod-row-servizio .prod-art { text-decoration: none; }
.prod-tipo { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; padding:2px 9px; border-radius:6px; font-weight:600; white-space:nowrap; }
.prod-tipo.ritiro { background:#FEF3C7; color:#92400E; }
.prod-tipo.consegna { background:#DBEAFE; color:#1E40AF; }
.prod-assign-form { margin:0; }
.prod-assign-form .form-select { max-width:190px; }
/* Righe di servizio: una casella per cameriere, incolonnate (Emiliana, 17/09). */
.prod-camerieri-form { margin:0; display:flex; flex-direction:column; gap:4px; }
.prod-camerieri-form .form-select { max-width:190px; }
/* Box riepilogo Totale/Rimanenza: giallino come il badge "Ritiro". */
.prod-summary .card-clean { background:#FEF3C7; border-color:#FDE68A; }
.prod-summary .card-title { margin-bottom:8px; color:#92400E; }
.prod-summary .table-clean tbody td { padding:8px 12px; color:#7C2D12; border-bottom-color:#FDE68A; }
.prod-summary .table-clean tbody tr:hover { background:#FDE9A9; }
.prod-summary .text-muted { color:#92400E !important; }

/* IVA inclusa / esclusa nel riquadro importi: erano due stati dello stesso
   interruttore grigio e non si distinguevano a colpo d'occhio. */
.badge-iva {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
}
.badge-iva.is-inclusa { background: #e7f3ec; color: #1b6b3a; }
.badge-iva.is-esclusa { background: #fdecea; color: #a3261a; }

/* Disponibilità fasce nel form ordine/preventivo (richiesta Fabrizio 03/08).
   Pastiglie e non tabella: le fasce sono una trentina e in verticale
   spingevano gli articoli sotto la piega; così si leggono in due righe. */
.slot-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: .82rem; line-height: 1.2; transition: background .12s, border-color .12s;
}
.slot-chip:hover { background: #f6f2ec; }
.slot-chip .slot-ora { font-weight: 600; }
/* Il numero è quanti ordini restano: verde finché ce n'è, rosso quando è zero. */
.slot-chip .slot-resto {
  font-size: .74rem; font-weight: 700; color: #1b6b3a;
  background: #e7f3ec; border-radius: 999px; padding: 1px 7px;
}
.slot-chip.is-piena { border-style: dashed; opacity: .75; }
.slot-chip.is-piena .slot-resto { color: #a3261a; background: #fdecea; }
/* Chiusa a mano da Sito Web → Chiusure orarie: non è finita, è spenta. */
.slot-chip.is-chiusa { border-style: solid; background: #f3f0ed; opacity: .6; }
.slot-chip.is-chiusa .slot-ora { text-decoration: line-through; }
/* Capienza diversa dal default di Impostazioni → Orari: si vede che è una
   scelta fatta a mano per quel giorno. */
.slot-chip.is-personalizzata .slot-ora { text-decoration: underline dotted; }
.slot-chip.is-scelta { border-color: var(--color-primary, #E4572E); background: #fff3ee; }

/* --------------------------------------------------------------------------
   Evidenze fattura: SDI, invio al cliente, ordine collegato (Marco, 08/09)
   Segni piccoli, in colonna nell'elenco: si leggono di fila su trenta righe
   senza rubare spazio ai numeri, che sono la ragione per cui si apre la
   lista fatture.
   -------------------------------------------------------------------------- */
.evidenze { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.evidenza {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
}
.evidenza i { font-size: .72rem; }
/* Fatta e andata bene */
.evidenza-ok { background: #D1FAE5; color: #065F46; }
/* Partita, ancora senza esito: non è un problema, ma non è finita */
.evidenza-attesa { background: #FEF3C7; color: #92400E; }
/* Scartata o errore: è la riga da guardare per prima */
.evidenza-ko { background: #FEE2E2; color: #991B1B; }
/* Non ancora fatta: presente ma senza gridare */
.evidenza-assente {
  background: transparent; color: var(--color-text-muted);
  border-color: var(--color-border);
}
/* L'ordine collegato è un link, e deve sembrarlo anche dentro una riga
   cliccabile che porta da un'altra parte. */
.evidenza-ordine { background: var(--color-surface-3); color: var(--color-text); }
.evidenza-ordine:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* --- Articoli dell'ordine: un colore per consegna (Emiliana, 10/09) --------
   Con due tappe nello stesso ordine servivano "colori diversi, chiari, che non
   compaiano nei pdf": stanno solo nella scheda, la stampa non li conosce.
   Tinte tenui perche' sotto ci passa del testo, e la riga selezionata e il
   passaggio del mouse devono restare visibili. */
/* Il pallino della consegna di competenza sulle righe dell'ordine (riunione di
   settembre): iniziali dell'etichetta, tinta della consegna, «?» se manca. */
.consegna-badge { display:inline-flex; align-items:center; justify-content:center; width:34px; height:26px; border-radius:13px; border:1px solid transparent; font-size:.72rem; font-weight:700; letter-spacing:.02em; cursor:pointer; background:#eee; color:#333; padding:0; }
.consegna-badge--mini { width:28px; height:22px; font-size:.66rem; cursor:default; }
.consegna-badge--vuoto { background:#fff; color:#c9a227; border-color:#e6c76a; border-style:dashed; }
/* Pallino spento: la riga non esce con quella consegna (un clic la aggiunge). */
.consegna-badge--spento { background:#fff; color:#b5b5b5; border-color:#d6d6d6; border-style:dashed; font-weight:600; }
.consegna-badge--tinta-1 { background:#f5d98a; color:#5c3d00; }
.consegna-badge--tinta-2 { background:#bcd8f2; color:#0c3a63; }
.consegna-badge--tinta-3 { background:#bfe4c6; color:#134d20; }
.consegna-badge--tinta-4 { background:#f5c2be; color:#6b1610; }
.consegna-badge--tinta-5 { background:#d7c9ee; color:#3a2366; }
.consegna-badge--tinta-6 { background:#bfe6e2; color:#0f4d47; }
.consegna-badge:hover { filter:brightness(.95); }
/* Camerieri nella scheda ordine: due colonne oltre i due nomi. */
/* Camerieri: le tendine si affiancano da sole finche' c'e' spazio, cosi' la
   card resta bassa anche con quattro o cinque nomi (Marco, 15/09: «piu'
   compatta, non una select per riga»). */
.cam-griglia { display:grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap:.35rem; }
.cam-casella { display:flex; align-items:center; gap:.25rem; min-width:0; }
.cam-casella .form-select { font-size:.78rem; padding:.15rem 1.5rem .15rem .4rem; min-width:0; }
.cam-tel { color:#6c757d; flex-shrink:0; }
.cam-tel:hover { color:#E8400C; }
/* Il WhatsApp col PDF dell'ordine: verde suo, per non confonderlo con la
   cornetta che chiama e basta. */
.cam-wa { color:#25d366; }
.cam-wa:hover { color:#128c7e; }
button.cam-wa { background:none; border:0; padding:0; line-height:1; }
.cam-testa { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.cam-testa .cam-num { width:58px; }
.consegna-tinta-1 > td { background-color: #fff6e0; }
.consegna-tinta-2 > td { background-color: #e8f2fb; }
.consegna-tinta-3 > td { background-color: #eaf6ec; }
.consegna-tinta-4 > td { background-color: #fdeceb; }
.consegna-tinta-5 > td { background-color: #f1ecf9; }
.consegna-tinta-6 > td { background-color: #e9f6f5; }

/* La tendina della consegna: l'orario veniva tagliato a meta'. */
.riga-consegna { min-width: 230px; }

/* Claude e i giri (settembre 2026): proposta pronta, consigli, domande */
.ai-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; border-radius:10px;
  background:var(--color-accent-light); color:var(--color-primary-dark); font-size:.9rem; }
.ai-consiglio { margin-top:4px; font-size:.8rem; color:var(--color-primary-dark); max-width:260px; }
/* «Chiedi a Claude dove metterla» sulle consegne non assegnate (19/10). */
.ai-chiedi { font-size:.78rem; white-space:nowrap; }
/* Autista di supporto (weekend e festivi), accanto al nome (19/10). */
.badge-supporto { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:1px 6px; border-radius:8px; white-space:nowrap; vertical-align:middle;
  background:var(--color-border); color:var(--color-text-secondary); }
.ai-consiglio small { font-size:.74rem; line-height:1.2; }
.ai-domande .card-title { display:flex; align-items:baseline; flex-wrap:wrap; }
.ai-domanda { border-top:1px solid var(--color-border); padding:10px 0; }
.ai-domanda:first-of-type { border-top:0; }
.ai-domanda-chiusa { opacity:.65; }
.ai-conversazione { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
.ai-msg { font-size:.86rem; padding:6px 10px; border-radius:8px; max-width:900px; }
.ai-msg-claude { background:var(--color-accent-light); color:var(--color-primary-dark); align-self:flex-start; }
.ai-msg-admin { background:var(--color-surface-3); align-self:flex-end; }
.ai-motivi { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ai-altro { display:inline-flex; gap:4px; align-items:center; }
.ai-altro input { min-width:220px; }
.giri-prev-perche { font-size:.78rem; color:var(--color-text-secondary); margin-top:2px; }
/* Autisti del giorno accanto a «Calcola Giri» */
.giri-autisti { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:.8rem;
  color:var(--color-text-secondary); white-space:nowrap; }
.giri-autisti input { width:56px; padding:3px 6px; font-size:.8rem; border:1px solid var(--color-border, #d0d0d0);
  border-radius:6px; background:var(--color-surface, #fff); color:inherit; }
.giri-prev-correzioni { font-size:.8rem; color:var(--color-text-secondary); margin:10px 0; padding:8px 12px;
  border:1px dashed var(--color-border); border-radius:8px; }
.giri-prev-correzioni ul { margin:4px 0 0; padding-left:18px; }

/* Importi senza freccette: si scrivono sempre a mano, e le frecce cambiavano
   il valore di 0,01 al passaggio del mouse (Emiliana, 11/11). Dal 13/11 anche
   le quantità degli articoli in ordini e preventivi. */
input[type="number"][step="0.01"],
input[type="number"][step="any"],
input[type="number"].row-qty,
input[type="number"]#add-quantita,
input[type="number"][name="item_quantita"],
input[type="number"][name="new_item_quantita"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"][step="0.01"]::-webkit-inner-spin-button,
input[type="number"][step="0.01"]::-webkit-outer-spin-button,
input[type="number"][step="any"]::-webkit-inner-spin-button,
input[type="number"][step="any"]::-webkit-outer-spin-button,
input[type="number"].row-qty::-webkit-inner-spin-button,
input[type="number"].row-qty::-webkit-outer-spin-button,
input[type="number"]#add-quantita::-webkit-inner-spin-button,
input[type="number"]#add-quantita::-webkit-outer-spin-button,
input[type="number"][name="item_quantita"]::-webkit-inner-spin-button,
input[type="number"][name="item_quantita"]::-webkit-outer-spin-button,
input[type="number"][name="new_item_quantita"]::-webkit-inner-spin-button,
input[type="number"][name="new_item_quantita"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}