/* ============================================================
   WAKE / SCIA — tema navy scuro (riprodotto dagli screenshot).
   Self-contained: nessuna dipendenza CDN (deploy on-premise).
   Token da: style-tema-navy, style-palette-colori, style-tipografia.
   WAKE 2.0 (vincolo-stile-esistente): stessa identità, micro-UX
   moderne — transizioni leggere, focus visibile, sticky header,
   toast/dialog coerenti, empty/skeleton states.
   RESTYLE 2.1: design system a token (font Inter+Barlow Condensed
   self-hosted, scala spacing 4px, scala tipografica, radius/shadow/z),
   palette INVARIATA. Breakpoint: ≤640 mobile · 641–1024 tablet · ≥1025.
   ============================================================ */

/* ── Font self-hosted (OFL — vedi static/fonts/README.md) ── */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette (tinte INVARIATE; gerarchia tonale PO 2026-06-12: sfondo/canvas
     più scuri, superfici in rilievo, bordi più chiari — cambia solo la
     luminosità dei navy, mai i colori brand) */
  /* TEST PO 2026-06-12: pagina chiara come il backoffice (revert = #081320) */
  --bg: #e4ecf6;
  --surface: #0f2742;
  --surface-2: #16345c;
  --surface-3: #0b1d31;
  --border: #2a4d77;        /* un gradino più luminoso: separazione "disegnata" */
  --text: #ffffff;
  --muted: #6f8fc0;
  --label: #6f8fc0;
  --primary: #6f8fd0;
  --primary-hover: #8aa3dd;
  --accent: #6f8fd0;        /* alias di --primary (era usato ma NON definito) */
  --accent-ink: #ffffff;
  --danger: #d8323a;
  --ore-moto: #e0457b;
  /* unica micro-deviazione (AA): tinta più chiara SOLO per il TESTO piccolo
     (#6f8fc0 su navy ≈ 4.3:1, sotto AA) — bordi e icone restano --muted */
  --muted-text: #8aa4cf;

  /* tipografia (style-tipografia 2.1: Inter UI + Barlow Condensed display) */
  --font-ui: "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  --font-display: "Barlow Condensed", var(--font-ui);
  --fs-caption: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;
  --lh-display: 1.15; --lh-heading: 1.25; --lh-body: 1.5;

  /* spacing — scala fissa base 4px */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* radius / shadow / z-index */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --shadow-1: 0 2px 8px rgba(2, 8, 18, .30);
  --shadow-2: 0 8px 28px rgba(2, 8, 18, .45);
  --shadow-3: 0 16px 48px rgba(2, 8, 18, .55);
  --z-nav: 50; --z-drawer: 90; --z-modal: 100; --z-toast: 300;

  --shadow: var(--shadow-2);
  --speed: .16s;

  /* Stati manutenzione */
  --st-neutro: #6f8fc0;
  --st-grigio: #8a94a6;
  --st-verde: #3ec07a;
  --st-giallo: #e6c14b;
  --st-arancio: #e08a3c;
  --st-rosso: #d8323a;

  /* Gravità avarie */
  --grav-critica: #d8323a;
  --grav-alta: #e08a3c;
  --grav-media: #e6c14b;
  --grav-bassa: #3ec07a;

  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --gap: var(--sp-4);
}

* { box-sizing: border-box; }

/* i controlli NATIVI non ereditano il font del body: senza questo reset i
   button "nudi" (contatori grafo, menu riga…) vanno in font di sistema */
button, input, select, textarea { font-family: var(--font-ui); }

body {
  margin: 0;
  background: var(--bg);
  /* fondo pagina "OLED" come la lavagna del grafo: griglia a puntini
     scuri ANCORATA alla finestra — i pannelli bianchi le scorrono sopra */
  background-image: radial-gradient(rgba(10, 26, 46, .14) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* ── Scala tipografica (h1–h6, body, caption) ────── */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3); color: var(--text); }
h1, h2, h3 {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .02em; line-height: var(--lh-heading); font-weight: 700;
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-display); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-heading); }
h5 { font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-heading); }
h6 { font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-heading); }
.text-body { font-size: var(--fs-base); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--muted-text); }

.label { color: var(--muted-text); font-size: var(--fs-caption); font-weight: 600; margin-bottom: var(--sp-2); display: block; }
.muted { color: var(--muted-text); }
.uppercase { text-transform: uppercase; letter-spacing: .04em; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Inputs ─────────────────────────────────────── */
.input, select.input, textarea.input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  min-height: 44px;            /* touch target tablet */
  outline: none;
}
.input::placeholder { color: #7d92b3; }
.input:focus { border-color: var(--primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; }

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: none; border-radius: var(--radius); cursor: pointer;
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); font-weight: 600;
  font-family: var(--font-ui); color: var(--text); min-height: 44px;
  background: var(--surface-2);
}
.btn:hover { filter: brightness(1.08); }
/* regola PO: gli sfondi dei bottoni usano il NAVY del tasto "indietro"
   (niente periwinkle pieno, che resta per accenti/bordi/link) */
.btn-primary { background: #2a4d77; border: 1px solid #3a5f94; color: #fff; }
.btn-primary:hover { background: #34598a; filter: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; border: 1px solid var(--border); }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); min-height: 34px; }

/* ── Top bar + navbar orizzontale (restyle 2.1) ─── */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--sp-3);
  /* stesso scuro del chrome del BO (--rail): navbar uniforme tra i prodotti */
  background: #060d17; border-bottom: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-4);
}
.logo-box {
  background: #fff; border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4); font-weight: 800; font-style: italic; letter-spacing: 1px;
  color: #16335c !important; font-size: var(--fs-xl); text-decoration: none; flex: none;
  display: inline-flex; align-items: center;
}
.logo-img { height: 26px; width: auto; display: block; }

/* Lightbox foto in-app (meeting 3): foto grande + zoom (rotella/pinch/doppio tap) */
.lightbox { background: rgba(4, 9, 18, .92); display: flex; align-items: center; justify-content: center; }
.lightbox .lb-inner { position: relative; max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; align-items: center; }
.lightbox .lb-img { max-width: 96vw; max-height: 88vh; border-radius: 8px; touch-action: none;
  cursor: zoom-in; transform-origin: center center; user-select: none; -webkit-user-drag: none; background: #000; }
.lightbox .lb-x { position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%;
  background: #16335c; color: #fff; border: 2px solid #fff; font-size: 18px; cursor: pointer; z-index: 2; }
.lightbox .lb-cap { color: #e4ecf6; margin-top: 10px; font-size: var(--fs-sm); text-align: center; max-width: 90vw; }

/* ── Visore PDF in-app (LIM touch) ──────────────────────────────────────
   A schermo intero non ci sono barra schede ne' freccia indietro: il documento
   vive dentro l'app e la barra di comando resta SEMPRE visibile sopra di esso.
   Il tasto Chiudi e' un bersaglio touch grande (48px, si centra col dito). */
.pdfbox { background: rgba(4, 9, 18, .92); }
.pdfbox .pdf-inner {
  width: 96vw; height: 94vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.pdfbox .pdf-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex: none;
  padding: var(--sp-2) var(--sp-3);
  background: #060d17;                      /* stesso scuro della topbar: e' chrome */
  border-bottom: 1px solid var(--border);
}
.pdfbox .pdf-x { min-height: 48px; padding: 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.pdfbox .pdf-title {
  flex: 1; min-width: 0; color: #e4ecf6; font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdfbox .pdf-new { flex: none; min-height: 40px; display: flex; align-items: center; color: #e4ecf6; }
.pdfbox .pdf-frame { flex: 1; width: 100%; border: 0; background: #fff; }
/* Su schermo piccolo il visore prende tutto e sparisce l'apertura in scheda
   (su touch non serve: e' proprio il caso che vogliamo evitare). */
@media (max-width: 640px) {
  .pdfbox .pdf-inner { width: 100vw; height: 100vh; border-radius: 0; }
  .pdfbox .pdf-new { display: none; }
}
.topbar .back {
  width: 44px; height: 44px; border-radius: var(--radius); flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--primary);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; font-size: var(--fs-sm); font-weight: 700;
  background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted);
}
/* user-panel legacy (usato dalle pagine che mostrano il pannello utente/nave) */
.user-panel {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-4);
}
.user-panel .rank { color: var(--muted-text); font-size: var(--fs-caption); }
.user-panel .name { font-weight: 700; }
.user-panel .role { color: var(--muted-text); font-size: var(--fs-caption); }
/* gruppo scansione in topbar (meeting 2): QR rettangolare + orologio storico */
.qr-group { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.qr-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-4); border-radius: var(--radius);
  background: #2a4d77; border: 1px solid #3a5f94; color: #fff;
  cursor: pointer; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
}
.qr-btn:hover { background: #34598a; }
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius); flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
  position: relative;
}

/* gruppi con dropdown (click-to-open, touch-friendly) */
.nav-groups { display: flex; align-items: center; gap: var(--sp-1); flex: 1; min-width: 0; }
.nav-group { position: relative; }
.nav-btn {
  display: flex; align-items: center; gap: 6px; min-height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font: 600 var(--fs-base)/1 var(--font-ui);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  transition: background var(--speed);
}
.nav-btn:hover { background: var(--surface-2); }
.nav-btn.active { box-shadow: inset 0 -2px 0 var(--primary); }
.nav-btn .caret { color: var(--muted); font-size: 10px; }
.nav-group.open > .nav-btn { background: var(--surface-2); }
.nav-btn.user-btn { padding: var(--sp-1); border-radius: 50%; }
.nav-dd {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: var(--sp-2); z-index: calc(var(--z-nav) + 10);
}
.nav-group.open > .nav-dd { display: block; }
.nav-dd-right { left: auto; right: 0; }
.nav-dd-link {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  color: var(--text); font-size: var(--fs-base);
}
.nav-dd-link:hover { background: var(--surface); color: var(--text); }
.nav-dd-link.active { color: var(--primary); font-weight: 700; }
.nav-dd-danger { color: var(--danger); font-weight: 700; }
.nav-dd-danger:hover { color: var(--danger); }
.nav-user-head { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); }
.bell-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }

/* responsive: ≤1024 i gruppi collassano nell'hamburger (drawer destro) */
.nav-burger { display: none; }
@media (max-width: 1024px) {
  .nav-groups { display: none; }
  .nav-burger { display: flex; }
  .topbar { gap: var(--sp-2); }
}
@media (max-width: 1024px) {
  .qr-btn span { display: none; }   /* solo icona quando lo spazio è poco */
}
@media (max-width: 640px) {
  .topbar .back { display: none; }
  .logo-box { font-size: var(--fs-lg); padding: 6px 10px; }
  /* topbar compatta su TELEFONO: troppe icone non entrano in ~430px → si tengono
     logo + QR + ricerca + notifiche + utente + menu; home (ridondante col logo),
     orologio scansioni, lingua e tema restano su desktop/tablet (≥641). */
  .topbar { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .topbar .nav-home, .topbar .qr-hist, .topbar #langBtn, .topbar #themeBtn { display: none; }
  /* anche il manuale utente: con lui la barra era larga 431 px su un telefono da
     390 e tutte le pagine scorrevano di lato (13/10/2026). Manuale, lingua e tema
     stanno nel menu (openMobileNav, «Preferenze») */
  .topbar .nav-aiuto { display: none; }
  .logo-img { height: 22px; }
}
@media (max-width: 400px) {
  /* i telefoni da 360 px (molti Android): con gli spazi pieni la barra arrivava a
     379. Si stringono spazi e margini, non le icone, che restano da 44 per il dito */
  .topbar { gap: 4px; padding: var(--sp-2) 8px; }
  .logo-box { padding: 6px; }
}
.drawer .nav-dd-link { padding: var(--sp-3); }

/* ── Breadcrumb ─────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); color: var(--muted-text); font-size: var(--fs-caption); }
.breadcrumb a { color: var(--muted-text); }
.breadcrumb .sep { opacity: .5; }

/* ── Layout container ───────────────────────────── */
.container { padding: var(--sp-3) var(--sp-5) var(--sp-7); max-width: 1600px; margin: 0 auto; }

/* ── TEST PO 2026-06-12: CONTENUTO IN CHIARO come il backoffice ──
   chrome scuro (topbar/navbar, action-bar, toast); superfici di LAVORO
   chiare: contenuto pagina, breadcrumb, modali, drawer filtri, ricerca.
   REGOLA FISSA PO: su colore chiaro il testo usa l'inchiostro SCURO. */
/* MODALITÀ GIORNO (default): contenuto chiaro. In NOTTE (html.night) questo
   override è disattivato → i contenitori usano i token scuri di base = tutto scuro. */
html:not(.night) .container, html:not(.night) .breadcrumb, html:not(.night) .modal,
html:not(.night) .drawer, html:not(.night) .gs-panel, html:not(.night) .auth-box {
  --surface: #ffffff;
  --surface-2: #eef3fa;
  --surface-3: #e3edf8;
  --border: #b9cce4;
  --text: #16335c;
  --label: #4d6691;
  --muted: #5a719b;
  --muted-text: #4d6691;
  /* stati: stesse tinte ma in variante SCURA leggibile su bianco
     (neutro/grigio convergono sull'inchiostro attenuato) */
  --st-neutro: #4d6691;
  --st-grigio: #6e7a8a;
  --st-verde: #1f9d5c;
  --st-giallo: #a8870a;
  --st-arancio: #c96f1e;
  color: var(--text);
}
/* ── MODALITÀ NOTTE (solo app): pagina scura. L'override "contenuto chiaro" qui
   sopra è gated su html:not(.night), quindi in notte i contenitori tornano ai
   token scuri di base; resta da scurire la PAGINA e la griglia a puntini. */
html.night { --bg: #081320; }
html.night body { background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); }
/* lavagna del grafo: in notte scura invece che bianca */
html.night .gwrap { background: var(--surface-3); }
html.night .gwrap > .muted { color: var(--muted-text); }

/* le card del GRAFO restano NAVY sulla lavagna chiara (re-pin tema scuro) */
.gcard {
  --surface: #0f2742;
  --surface-2: #16345c;
  --surface-3: #0b1d31;
  --border: #2a4d77;
  --text: #ffffff;
  --label: #8aa4cf;
  --muted: #6f8fc0;
  --muted-text: #8aa4cf;
  /* sulle card NAVY tornano le tinte di stato VIVE (bianco-su-scuro) */
  --st-neutro: #6f8fc0;
  --st-grigio: #8a94a6;
  --st-verde: #3ec07a;
  --st-giallo: #e6c14b;
  --st-arancio: #e08a3c;
  color: var(--text);
}
.page-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--fs-2xl); font-weight: 700; letter-spacing: .02em;
  line-height: var(--lh-heading); margin: var(--sp-2) 0 var(--sp-4);
}
@media (max-width: 640px) { .container { padding: var(--sp-2) var(--sp-3) var(--sp-6); } }

/* ── Home tiles (3x2) ───────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tile {
  position: relative; min-height: 165px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: var(--text);
}
.tile:hover { border-color: var(--primary); }
.tile .tile-icon { color: var(--primary); }
.tile .tile-preview { color: var(--muted-text); font-size: var(--fs-caption); margin-top: auto; line-height: var(--lh-body); }
.tile .tile-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--fs-xl); font-weight: 700; margin-top: var(--sp-3); letter-spacing: .02em;
}
.badge-count {
  position: absolute; top: 14px; right: 14px;
  background: var(--danger); color: #fff; border-radius: 999px;
  min-width: 24px; height: 24px; padding: 0 7px;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}

/* ── Tables (zebra) ─────────────────────────────── */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.data { width: 100%; border-collapse: collapse; }
/* intestazioni colonna = stesso NAVY MEDIO dei bottoni, titoli BIANCHI */
table.data thead th {
  text-align: left; color: #ffffff; font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sp-3) var(--sp-4); background: #2a4d77; border-bottom: 1px solid var(--border);
}
table.data tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--border); }
table.data tbody tr:nth-child(odd) { background: var(--surface); }
/* zebra che SCHIARISCE (un velo periwinkle), non che scurisce: niente bande
   nere dentro contenitori già scuri */
table.data tbody tr:nth-child(even) { background: rgba(111, 143, 208, .055); }
table.data tbody tr:hover { background: var(--surface-2); }
.cell-sub { color: var(--muted-text); font-size: var(--fs-caption); margin-top: 2px; }
.row-icon { color: var(--muted); margin-right: var(--sp-2); }

/* ── Status text (manutenzioni) ─────────────────── */
.st { font-weight: 700; }
/* icone classificazione + semaforo ricambi (scadenziale e catalogo) */
/* meeting 2: le iconcine non vanno mai a capo (restano tutte su una riga) */
.clf { display: inline-flex; gap: var(--sp-2); align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.clf .ic { font-size: var(--fs-sm); cursor: default; }
.note-ics { white-space: nowrap; }
.note-ics svg { display: inline-block; vertical-align: middle; }

/* ── Compositore nota (testo + foto + vocale, stile WhatsApp) — condiviso ── */
.note-compose { display: flex; gap: 8px; align-items: flex-start; }
.note-compose textarea { flex: 1; resize: vertical; min-height: 44px; }
.note-att { flex: none; padding: 8px; min-height: 0; }
.note-media { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* allegati/miniature (procedura manutenzione, ecc.) */
.att-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.att { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
       border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.att-img { padding: 0; overflow: hidden; width: 64px; height: 64px; }
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ic svg { display: block; }   /* icone SVG allineate al centro riga */
.sp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.st-neutro { color: var(--st-neutro); }
.st-grigio { color: var(--st-grigio); }
.st-verde { color: var(--st-verde); }
.st-giallo { color: var(--st-giallo); }
.st-arancio { color: var(--st-arancio); }
.st-rosso { color: var(--st-rosso); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* ── Chips / badges ─────────────────────────────── */
/* chip a DIETA (come il BO): outline trasparente a riposo, riempimento solo
   per gli stati attivi e per i chip brand (ore-moto, pill, gravità) */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: 999px;
  background: transparent; border: 1px solid var(--border); font-size: var(--fs-caption); color: var(--text);
}
.chip-ore-moto { background: var(--ore-moto); border-color: var(--ore-moto); }
.pill-toggle { background: #2a5fb0; border-color: #2a5fb0; cursor: pointer; }

.grav { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #07101e;
        text-transform: uppercase; }
.grav-critica { background: var(--grav-critica); color: #fff; }
.grav-alta { background: var(--grav-alta); }
.grav-media { background: var(--grav-media); }
.grav-bassa { background: var(--grav-bassa); }

/* ── Cruscotto manutenzioni (per gruppo ESWBS) ──────────────────
   Due livelli, due forme. Sopra i macrogruppi: sono al massimo nove, quindi
   CARD grandi, che si leggono da lontano. Sotto, nel pannello del macrogruppo
   aperto, i suoi gruppi come RIGHE: possono essere diciotto, e diciotto card
   sono di nuovo l'elenco infinito da cui questa vista deve far uscire. */
.cru-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
               gap: var(--sp-3); align-items: stretch; }
.cru-card {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.cru-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cru-card.aperto { border-color: var(--primary); }
.cru-ctop { display: flex; align-items: center; gap: var(--sp-2); }
.cru-ic { flex: none; color: var(--muted); display: inline-flex; }
.cru-cod { flex: none; color: var(--muted-text); font-size: var(--fs-caption); font-weight: 700; }
.cru-tot { margin-left: auto; flex: none; font-size: var(--fs-caption); white-space: nowrap; }
.cru-nome { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
            font-weight: 700; line-height: 1.2; margin-top: 2px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; }
/* il numero che si legge da lontano: quante ne ha nello stato peggiore */
.cru-grande { margin-top: var(--sp-2); line-height: 1; }
.cru-grande strong { font-family: var(--font-display); font-size: 30px; }
.cru-grande span { font-size: var(--fs-small); margin-left: 4px; }
.cru-att { color: var(--muted-text); font-size: var(--fs-caption); margin-top: 3px;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
           overflow: hidden; min-height: 1.2em; }
.cru-graf { margin-top: var(--sp-2); }
.cru-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; }
.cru-seg { display: block; min-width: 2px; }
.cru-cfoot { display: flex; align-items: center; justify-content: space-between;
             gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }

/* ── La doppia scadenza su una barra (tempo contro ore di moto) ────
   «Vince la prima» è la regola del dominio: su due date in tabella il confronto
   va fatto a mente, qui si vede. La barra va dall'ultima esecuzione alla più
   lontana delle due scadenze, e contiene sempre OGGI — anche quando una
   scadenza è già passata, che è proprio il caso in cui serve guardarla. */
/* Il fondo della barra è il FUTURO, e deve vedersi su qualunque superficie:
   con `--surface-2` spariva dentro il riquadro rosa della scadenza a ore —
   quasi bianco su rosa chiaro. Si tinge con l'inchiostro della pagina, così
   funziona su chiaro, su rosa e in tema notte. */
.dl-bar { position: relative; height: 10px; margin: var(--sp-4) 0 var(--sp-5);
          background: color-mix(in srgb, var(--text) 15%, transparent);
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
          border-radius: 5px; }
.dl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px;
           background: var(--primary); opacity: .7; }
.dl-mark { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px;
           transform: translateX(-2px); }
.dl-mark.dl-tempo { background: var(--muted); }
.dl-mark.dl-ore { background: var(--ore-moto, var(--accent)); }
.dl-mark.comanda { top: -7px; height: 24px; width: 6px; transform: translateX(-3px); }
.dl-oggi { position: absolute; top: -14px; bottom: -14px; width: 1px;
           background: var(--text); opacity: .5; }
.dl-oggi span { position: absolute; top: -6px; left: 4px; font-size: 10px; white-space: nowrap;
                text-transform: uppercase; letter-spacing: .06em; color: var(--muted-text); }
/* con oggi a destra l'etichetta esce dal riquadro: passa dall'altra parte */
.dl-oggi.a-sinistra span { left: auto; right: 4px; }
.dl-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-caption);
              color: var(--muted-text); }
.dl-voce { display: inline-flex; align-items: center; gap: 6px; }
.dl-voce.comanda { color: var(--text); }
.dl-voce .dot { width: 9px; height: 9px; border-radius: 50%; }
.dl-voce .dl-tempo { background: var(--muted); }
.dl-voce .dl-ore { background: var(--ore-moto, var(--accent)); }
.dl-cmd { font-weight: 700; text-transform: uppercase; font-size: 10px;
          letter-spacing: .05em; color: var(--accent); }

/* ── Consumo dei ricambi: previsto dal piano contro usato davvero ──
   Due barre affiancate per pezzo, sulla stessa scala: il confronto è il dato,
   e un numero solo («22 filtri») non dice se è tanto o poco. */
.cons-sez { margin-top: var(--sp-6); }
.cons-nota { color: var(--muted-text); font-size: var(--fs-caption); margin-bottom: var(--sp-2);
             line-height: 1.5; }
.cons-lista { background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius); overflow: hidden; }
.cons-riga { display: flex; align-items: center; gap: var(--sp-4); padding: 10px var(--sp-4);
             border-bottom: 1px solid var(--border); border-left: 4px solid transparent;
             cursor: pointer; transition: background var(--speed); }
.cons-riga:last-child { border-bottom: none; }
.cons-riga:hover { background: var(--surface-2); }
/* il picco: si consuma più di quanto il piano preveda */
.cons-riga.anomalia { border-left-color: var(--st-rosso); }
.cons-nome { flex: 1 1 220px; min-width: 0; font-weight: 600; overflow: hidden;
             text-overflow: ellipsis; }
.cons-nome .cell-sub { font-weight: 400; }
.cons-barre { flex: 2 1 320px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cons-b { display: flex; align-items: center; gap: var(--sp-2); }
.cons-lbl { flex: none; width: 58px; color: var(--muted-text); font-size: var(--fs-caption); }
.cons-tr { flex: 1; height: 10px; background: var(--surface-2); border-radius: 5px;
           overflow: hidden; }
.cons-fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.cons-fill.atteso { background: var(--muted); opacity: .55; }
.cons-fill.usato { background: var(--primary); }
.cons-riga.anomalia .cons-fill.usato { background: var(--st-rosso); }
.cons-val { flex: none; width: 46px; text-align: right; font-weight: 700;
            font-size: var(--fs-caption); }
.cons-rap { flex: none; width: 54px; text-align: right; font-family: var(--font-display);
            font-size: var(--fs-md); color: var(--muted-text); }
.cons-riga.anomalia .cons-rap { color: var(--st-rosso); }
@media (max-width: 800px) {
  .cons-riga { flex-wrap: wrap; }
  .cons-nome { flex-basis: 100%; }
}

/* ── Agenda raggruppata per gruppo ESWBS ────────────────────────
   Le stesse intestazioni del cruscotto, ma dove si lavora: chiuse si leggono
   come un quadro (barra, stato peggiore, quante ne restano), aperte diventano
   la lista. Sono ~18 intestazioni al posto di 2.223 righe da scorrere. */
.ag-gruppo { margin-bottom: var(--sp-2); }
.ag-gr-head {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border); border-radius: var(--radius);
  padding: 10px var(--sp-4); margin: 0; cursor: pointer;
  transition: background var(--speed);
}
.ag-gr-head:hover { background: var(--surface-2); }
.ag-gruppo.aperto .ag-gr-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ag-gr-head .chev { color: var(--muted); flex: none; }
.ag-gr-nome { flex: 1 1 200px; min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.ag-gr-head .cru-cod { flex: none; width: 58px; }
.ag-gr-head .cru-graf { flex: none; width: 170px; margin-top: 0; }
.ag-gr-head .cru-num { text-transform: none; letter-spacing: 0; }
.ag-gr-head .cru-tot { flex: none; width: 124px; text-align: right;
                       text-transform: none; letter-spacing: 0; font-weight: 400; }
/* le righe di un gruppo aperto stanno DENTRO: rientrate, col filo di sinistra */
.ag-gruppo.aperto .ag-row { margin-left: var(--sp-5); }
.ag-carico { padding: 10px var(--sp-4) 10px calc(var(--sp-5) + var(--sp-4));
             font-size: var(--fs-caption); }
@media (max-width: 1024px) {
  .ag-gr-head .cru-graf, .ag-gr-head .cru-tot { display: none; }
  .ag-gruppo.aperto .ag-row { margin-left: 0; }
}
.cru-num { flex: none; width: 122px; text-align: right; font-size: var(--fs-caption); }
.cru-num strong { font-size: var(--fs-md); }

/* ── Tree (ESWBS) ───────────────────────────────── */
/* canvas dell'albero BIANCO, come il resto delle superfici */
.tree { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tree-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.tree-row:hover { background: var(--surface-2); }
.tree-row .chev { width: 18px; color: var(--muted); cursor: pointer; user-select: none; }
.tree-row .code { color: var(--muted); font-size: 12px; min-width: 70px; }
.tree-row .name { flex: 1; cursor: pointer; }
/* La riga porta DUE informazioni incolonnate: la denominazione e, sotto, o la
   targhetta dell'oggetto (marca · modello · PN) o cosa contiene il ramo. Il
   codice resta una colonna a sé, così i LCN restano allineati fra loro. */
.tree-row .cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tree-row .cell .name { flex: none; }
.tree-row .sub {
  color: var(--muted-text); font-size: var(--fs-caption); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a ramo aperto i figli si leggono per esteso: l'anteprima diventa rumore */
.tree-node.is-open > .tree-row .sub.is-anteprima { display: none; }
/* gerarchia VISIBILE: ogni livello è indentato con una linea guida verticale
   (come l'albero del backoffice); le righe restano a tutta larghezza */
.tree-children {
  display: none;
  margin-left: 30px;
  border-left: 1px solid var(--border);
}
.tree-children .tree-row { padding-left: 10px; }
.tree-children.open { display: block; }
/* coi filtri attivi gli ANTENATI dei match restano visibili come percorso */
.tree-row.is-path, .gcard.is-path { opacity: .6; }

/* ── Tabs ───────────────────────────────────────── */
.tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); overflow-x: auto; }
.tab { padding: var(--sp-3) var(--sp-4); color: var(--muted-text); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--text); border-bottom-color: var(--primary); font-weight: 700; }

/* ── Cards / info grid ──────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.info-grid .k { color: var(--muted-text); font-size: var(--fs-caption); }
.info-grid .v { font-weight: 600; }

/* ── Modal ──────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(3, 10, 22, .7); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); }
.modal {
  width: 460px; max-width: 92vw; max-height: 92vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.modal-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.modal-head .x { cursor: pointer; color: var(--muted); font-size: 20px; padding: var(--sp-1); }
.field { margin-bottom: var(--sp-4); }

/* ── Scadenziale AGENDA (R3.2): chip filtri + righe-card raggruppate ── */
.chips-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.chip-st {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); cursor: pointer; padding: 6px 13px;
  font: 600 var(--fs-sm)/1.2 var(--font-ui); min-height: 34px;
  transition: border-color var(--speed), background var(--speed);
}
.chip-st:hover { border-color: var(--accent); }
.chip-st.on { background: #2a4d77; border-color: #3a5f94; color: #ffffff; }
.chip-st .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chips-sep { width: 1px; height: 22px; background: var(--border); margin: 0 var(--sp-2); flex: none; }

/* ── Filtri: menu nella barra + ricerca con suggerimenti (static/js/filtri.js) ──
   Sostituiscono il drawer "Filtri avanzati" e le tendine native: la lista si
   apre SUL POSTO, così si vede subito cosa c'è e l'effetto di quello che si
   scrive. Vedi il commento in testa a filtri.js. */
.fm-slot { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fm { position: relative; display: inline-block; }
.fm-pop { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px);
          width: max(240px, 100%); max-height: 340px; overflow: auto;
          background: var(--surface); border: 1px solid var(--border);
          border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 4px; }
.fm-pop .sfind { width: calc(100% - 8px); margin: 4px; }
/* Barra di scorrimento VISIBILE: con quella sottile di default (in tinta col
   fondo del pannello) non si capiva che la lista continuava — e qui le voci
   possono essere centinaia. Vale anche per `.ss-panel`, l'elenco dei risultati
   delle tendine lunghe (selsearch): era rimasto fuori e la sua barra restava
   slavata, diversa da tutte le altre del sito. `scrollbar-gutter` tiene lo
   spazio riservato, così l'elenco non salta quando la barra compare. */
.fm-pop, .ac-list, .ss-panel { scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #7f9bc4 #d7e2f1; }
.fm-pop::-webkit-scrollbar, .ac-list::-webkit-scrollbar,
.ss-panel::-webkit-scrollbar { width: 12px; }
.fm-pop::-webkit-scrollbar-track, .ac-list::-webkit-scrollbar-track,
.ss-panel::-webkit-scrollbar-track {
  background: #d7e2f1; border-radius: 8px; }
.fm-pop::-webkit-scrollbar-thumb, .ac-list::-webkit-scrollbar-thumb,
.ss-panel::-webkit-scrollbar-thumb {
  background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
.fm-pop::-webkit-scrollbar-thumb:hover, .ac-list::-webkit-scrollbar-thumb:hover,
.ss-panel::-webkit-scrollbar-thumb:hover { background: #5f78a3; }
.fm-it { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
         border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); }
.fm-it:hover { background: var(--surface-2); }
.fm-it.on { background: var(--surface-2); font-weight: 600; }
.fm-it .fm-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-it .fm-ct { color: var(--muted-text); font-size: var(--fs-caption); }
.fm-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.fm-none { padding: 10px; color: var(--muted-text); font-size: var(--fs-sm); }

.ac-wrap { position: relative; display: inline-block; width: 260px; }
.ac-wrap > .input { width: 100%; }
/* il pannello è più largo del campo (i nomi degli impianti sono lunghi) e si
   apre verso SINISTRA, per non uscire dallo schermo */
.ac-list { position: absolute; z-index: 60; right: 0; left: auto; top: calc(100% + 4px);
           width: max(100%, 460px); max-height: 380px; overflow: auto;
           background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 4px; }
.ac-sec { font-size: var(--fs-caption); color: var(--muted-text); padding: 6px 8px 2px;
          text-transform: uppercase; letter-spacing: .04em; }
.ac-it { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
         border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); }
.ac-it:hover { background: var(--surface-2); }
.ac-it .ac-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-it .ac-cd { color: var(--muted-text); font-size: var(--fs-caption); }

/* chip dei filtri attivi: si tolgono con un tocco */
.chips-active:empty { display: none; }
.chip-act { display: inline-flex; align-items: center; gap: 6px; }
.chip-act .x { cursor: pointer; opacity: .75; font-weight: 700; }
.chip-act .x:hover { opacity: 1; }
.chip-lbl { color: var(--muted-text); font-size: var(--fs-caption); font-weight: 700;
            text-transform: uppercase; letter-spacing: .04em; }
/* L'etichetta si attenua rispetto al valore, ma sul fondo NAVY di un chip
   attivo il suo grigio-blu diventa illeggibile: «GRUPPO ESWBS:» spariva dentro
   il proprio chip. Sul pieno, l'attenuazione si fa col bianco — la gerarchia
   resta, la scritta si legge. (Stesso difetto del banner di bordo, 15/09: un
   colore fisso che non segue il fondo su cui finisce.) */
.chip-st.on .chip-lbl, .chip-act.on .chip-lbl { color: rgba(255, 255, 255, .72); }

.ag-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--fs-md); font-weight: 700;
}
.ag-head .muted { font-family: var(--font-ui); font-size: var(--fs-caption);
                  text-transform: none; letter-spacing: 0; font-weight: 400; }
.ag-head .ag-link { margin-left: auto; font: 600 var(--fs-caption)/1 var(--font-ui);
                    text-transform: none; letter-spacing: 0; }
/* gruppi che si aprono e si chiudono (Letture): l'intestazione è il comando,
   e da chiusa continua a dire quanto c'è dentro */
.ag-head[data-piega] { cursor: pointer; user-select: none; }
.ag-head .chev { color: var(--muted); width: 14px; flex: none; }
.ag-group > .ag-body { display: none; }
.ag-group.open > .ag-body { display: block; }
.ag-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border);   /* il colore di stato vive qui */
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2); cursor: pointer;
  transition: background var(--speed), border-color var(--speed);
}
.ag-row:hover { background: var(--surface-2); }
.ag-row .row-icon { color: var(--primary); flex: none; }
.ag-main { flex: 1; min-width: 0; }
.ag-name { font-weight: 600; }
.ag-due { flex: none; text-align: right; min-width: 84px; }
.ag-due-label { font-weight: 800; font-size: var(--fs-md); }
/* Origine della scadenza (a ore di moto / a tempo): sotto la data, nel colore
   di brand delle ore-moto perché è l'informazione che spiega quella data. */
/* ── Pannello «Collegamento con la terra» ────────────────────────────────
   Una domanda sola in cima (come stiamo?), i numeri sotto, UNA azione
   principale e le altre separate. I bottoni devono sembrare bottoni: sulla
   superficie chiara della modale quelli pallidi si leggevano come testo. */
.sync-modal { width: 440px; max-width: 100%; }
.sync-stato {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--radius); margin-bottom: var(--sp-3);
  background: color-mix(in srgb, currentColor 9%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.sync-stato .sync-dot { width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; flex: none; align-self: center; }
.sync-stato .sync-nome { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; font-size: var(--fs-md); }
.sync-stato .sync-da { margin-left: auto; font-size: var(--fs-caption);
  color: var(--muted-text); font-variant-numeric: tabular-nums; }
.sync-stato.sync-ok { color: var(--st-verde); }
.sync-stato.sync-off { color: var(--st-arancio); }
.sync-stato.sync-riposo { color: var(--muted-text); }

.sync-numeri { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  padding: 0 2px var(--sp-3); }
.sync-numeri .k { font-size: var(--fs-caption); color: var(--muted-text); }
.sync-numeri .v { font-weight: 700; font-size: var(--fs-md);
  font-variant-numeric: tabular-nums; }
/* il cartello sulla porta, sul deploy in cloud: si vede senza gridare —
   è un'informazione, non un errore */
/* La fascia sta SOTTO la breadcrumb, quindi su superficie CHIARA in modalità
   giorno: i colori sono espliciti e non presi dai token del chrome scuro —
   bianco su ambra chiara non si legge (successo, e si vedeva benissimo). */
.fascia-bordo { display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-4); font-size: var(--fs-caption);
  background: #ffeacd; color: #6b3d00;
  border-top: 1px solid #e8bc84; border-bottom: 1px solid #e8bc84; }
.fascia-bordo b { font-weight: 700; color: #4d2c00; }
.fascia-bordo .fb-dot { width: 9px; height: 9px; border-radius: 50%;
  background: #d97b12; flex: none; box-shadow: 0 0 0 3px rgba(217, 123, 18, .22); }
.fascia-bordo .fb-coda { margin-left: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.fascia-bordo .fb-coda b { font-size: var(--fs-body); }
html.night .fascia-bordo { background: #40290d; color: #ffd9a8;
  border-top-color: #6b4a1c; border-bottom-color: #6b4a1c; }
html.night .fascia-bordo b { color: #ffe9c9; }

.sync-nota { margin-bottom: var(--sp-2); }

/* la configurazione che scende da terra: una riga, e il bottone solo quando
   c'è davvero qualcosa da scaricare */
.sync-config { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-2) 2px var(--sp-3);
  border-top: 1px solid var(--border); margin-bottom: var(--sp-2); }
.sync-config .k { font-size: var(--fs-caption); color: var(--muted-text); }
.sync-config .v { font-weight: 700; font-size: var(--fs-md); display: flex;
  align-items: baseline; gap: 8px; }
.sync-config .sync-ver { font-weight: 500; font-size: var(--fs-caption);
  color: var(--muted-text); font-variant-numeric: tabular-nums; }
.sync-config.attesa .v { color: var(--st-arancio); }
.sync-config .btn { background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink, inherit); font-weight: 600; white-space: nowrap; }
.sync-config .btn:hover { background: var(--well); border-color: var(--primary); }

.sync-modal .btn-block { margin-top: var(--sp-2); display: flex;
  align-items: center; justify-content: center; gap: 8px; }
.sync-modal .sync-n { background: rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 1px 8px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; }

.sync-altri { margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border); }
.sync-altri .k { font-size: var(--fs-caption); color: var(--muted-text);
  margin-bottom: var(--sp-2); }
.sync-scelte { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* bordo pieno e fondo netto: su superficie chiara un bottone «fantasma» si
   legge come una scritta, ed è esattamente quello che era successo */
.sync-scelte .btn { background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink, inherit); font-weight: 600; }
.sync-scelte .btn:hover { background: var(--well); border-color: var(--primary); }

/* Stato del collegamento nella topbar (solo deploy di bordo). Il colore dice
   lo stato, il numero dice quanto lavoro deve ancora salire: tornare in linea
   non è istantaneo, e senza quel conto uno si crede allineato quando non lo è. */
.sync-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 32px;
  padding: 0 11px; border-radius: 999px; cursor: pointer; flex: none;
  font: 600 12.5px/1 var(--font-ui); letter-spacing: .01em;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  color: #dce7f7;
}
.sync-pill:hover { background: rgba(255, 255, 255, .12); }
.sync-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sync-pill .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sync-pill.sync-ok { color: #6fe0a6; }
.sync-pill.sync-off { color: #ffb24d; border-color: rgba(255, 178, 77, .45); }
.sync-pill.sync-riposo { color: #9fb6d8; }
.sync-pill .sync-coda {
  background: var(--danger, #d8323a); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) { .sync-pill span:not(.sync-dot):not(.sync-coda) { display: none; } }

.due-src { margin-top: 2px; font-size: var(--fs-caption); color: var(--ore-moto);
  font-weight: 600; white-space: nowrap; }
.due-src .u { font-weight: 400; opacity: .8; }
@media (max-width: 640px) {
  .ag-row { flex-wrap: wrap; }
  .ag-main { flex: 1 1 100%; order: -1; }
  .ag-row .ag-due { margin-left: auto; }   /* scadenza a filo destro sulla 2ª riga */
}

/* ── Action bar fissa (R3.3 ordine di lavoro): azioni primarie sotto il
      pollice su tablet, non in fondo allo scroll ── */
.has-action-bar { padding-bottom: 96px; }
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  background: rgba(10, 26, 46, .92); backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
}
.action-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.action-bar .btn { min-height: 44px; font-weight: 700; }
@media (max-width: 640px) {
  .action-bar-inner { padding: var(--sp-2) var(--sp-3); }
  .action-bar .btn { flex: 1; }
  .has-action-bar { padding-bottom: 130px; }
}

/* stepper del flusso on-condition (passo 2) */
.steps { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.step {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; font-size: var(--fs-caption); font-weight: 700; color: var(--muted-text);
}
.step.on { border-color: var(--accent); color: var(--text); background: var(--surface-2); }
.step-arrow { color: var(--muted); }

/* ── Vista GRAFO della Struttura ESWBS (come il backoffice): card chiuse
      alla radice, espansione progressiva, connettori a gomito ── */
/* canvas del grafo = LAVAGNA CHIARA in TEST (PO 2026-06-12, come il BO):
   bianco con griglia a puntini scuri; le card navy ci galleggiano sopra
   con luce dall'alto e doppia ombra (effetto rilievo/3D) */
.gwrap { overflow: auto; max-height: 72vh; padding: var(--sp-4);
         background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); }
/* testi che poggiano DIRETTAMENTE sulla lavagna chiara: ink scuro */
.gwrap > .muted { color: #46618c; }
/* scrollbar dentro la lavagna: traccia chiara */
.gwrap { scrollbar-color: #4a6fa8 #e3edf8; }
.gwrap::-webkit-scrollbar-track { background: #e3edf8; }
.gwrap::-webkit-scrollbar-thumb { border-color: #e3edf8; }
.gnode { display: flex; align-items: flex-start; }
.gcard {
  --card-elev: inset 0 1px 0 rgba(255, 255, 255, .08),
               0 1px 2px rgba(2, 8, 18, .6),
               0 10px 24px rgba(2, 8, 18, .5);
  background: var(--surface-2);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--surface-2), #ffffff 5%) 0%,
              color-mix(in srgb, var(--surface-2), #04080f 22%) 100%);
  border: 1px solid rgba(111, 143, 208, .26); border-radius: 10px;
  padding: var(--sp-3) var(--sp-4); width: 270px; flex: none; margin: 6px 0;
  box-shadow: var(--card-elev);
  transition: border-color var(--speed), transform var(--speed), box-shadow var(--speed);
}
.gcard:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
              0 0 0 1px rgba(111, 143, 208, .3),
              0 14px 30px rgba(2, 8, 18, .65);
}
.gcard-top { display: flex; align-items: center; gap: 8px; color: var(--primary); }
.gcard-top .chip { margin-left: auto; flex: none; }
.gcard-name { margin: 4px 0 2px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.gcard-sub {
  color: var(--muted-text); font-size: var(--fs-caption); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gcard-name:hover { color: var(--accent); }
.gcard-foot { display: flex; align-items: center; justify-content: space-between;
              gap: 8px; margin-top: 7px; }
/* contatore-ramo: outline quieto, pieno solo da APERTO (dieta dell'accento) */
.gkid-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--accent); cursor: pointer; padding: 3px 11px;
  font-size: var(--fs-caption); font-weight: 700; white-space: nowrap;
  transition: background var(--speed), border-color var(--speed);
}
.gkid-btn:hover { border-color: var(--accent); }
.gkid-btn.open { background: #2a4d77; color: #fff; border-color: #3a5f94; }
/* connettori del flusso: stub dal padre + tronco verticale SOLO tra il
   primo e l'ultimo gomito + gomito per ogni card — niente segmenti che
   sporgono oltre i gomiti (erano quelli a formare le croci) */
.gkids { display: flex; flex-direction: column; margin-left: 34px; position: relative; }
.gkids::before { content: ""; position: absolute; left: -34px; top: 28px; width: 22px; height: 2px;
                 background: var(--border); }
.gbranch { position: relative; padding-left: 22px; }
.gbranch::before { content: ""; position: absolute; left: -12px; top: 28px; width: 34px; height: 2px;
                   background: var(--border); }
.gbranch::after { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px;
                  background: var(--border); }
.gbranch:first-child::after { top: 28px; }                /* non sale sopra il primo gomito */
.gbranch:last-child::after { bottom: auto; height: 30px; } /* si ferma all'ultimo gomito */
.gbranch:first-child:last-child::after { display: none; }  /* figlio unico: linea dritta */
/* quadrotti macrogruppo 100-900 come filtri rapidi */
.quadrotto { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer;
             background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
             padding: 5px 11px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
             transition: background var(--speed), border-color var(--speed); }
.quadrotto:hover { border-color: var(--accent); }
.quadrotto small { color: var(--muted-text); font-weight: 400; }
.quadrotto.on { background: #2a4d77; border-color: #3a5f94; color: #ffffff; }
.quadrotto.on small { color: rgba(255, 255, 255, .8); }
.quadrotto .q-ic { color: var(--primary); margin-bottom: 2px; }
.quadrotto.on .q-ic { color: #ffffff; }
/* macrogruppo senza elementi: visibile ma inattivo (meeting 2) */
.quadrotto.is-empty { opacity: .4; cursor: default; }
.quadrotto.is-empty:hover { border-color: var(--border); }

/* ── Hub impianto (R3.6): azioni rapide a tile ── */
.hub-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.hub-tile {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: 10px 16px; min-height: 44px;
  font: 600 var(--fs-sm)/1.2 var(--font-ui);
  transition: border-color var(--speed), background var(--speed);
}
.hub-tile:hover { border-color: var(--accent); background: var(--surface-2); }
.hub-tile-ic { font-size: 16px; }
.hub-tile.hub-ore { background: var(--ore-moto, #e0457b); border-color: var(--ore-moto, #e0457b); }

/* ── Switcher viste (Griglia/Tabella, Agenda/Tabella…) ── */
/* segmenti vista (Albero|Grafo, Tabella|Griglia…): pill piena = attivo.
   Riempimento = NAVY del tasto "indietro" (regola PO: niente periwinkle
   pieno sugli stati selezionati, resta solo sulle CTA primarie) */
.vsw { cursor: pointer; color: var(--muted); padding: 2px 8px; border-radius: 999px; }
/* ── «Come si guarda»: vista e raggruppamento, in un posto che non cambia ──
   Sezione a sé e formattazione diversa dai filtri: stavano insieme, e la vista
   si spostava a ogni cambio perché il raggruppamento compariva e spariva. */
.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
           margin: var(--sp-3) 0 var(--sp-2); }
.vb-sez { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* su un telefono «per scadenza · per gruppo ESWBS · per impianto» non sta in una riga:
   senza andare a capo allargava lo scadenziario a 485 px */
@media (max-width: 640px) {
  .vb-sez { flex-wrap: wrap; }
  .vsw-grp { flex-wrap: wrap; border-radius: 14px; }
}
.vb-lbl { color: var(--muted-text); font-size: var(--fs-caption); font-weight: 700;
          text-transform: uppercase; letter-spacing: .04em; }
.vsw-grp { display: inline-flex; align-items: center; gap: 2px; padding: 3px;
           background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.vsw-grp .vsw { border: 0; background: transparent; font: inherit; padding: 4px 12px;
                white-space: nowrap; }
.vsw:hover { color: var(--text); }
.vsw.on { background: #2a4d77; color: #ffffff; font-weight: 700; }

/* ── Catalogo ricambi a GRIGLIA (R3.5) ── */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.sp-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4);
  transition: border-color var(--speed);
}
.sp-card:hover { border-color: var(--accent); }
.sp-thumb {
  width: 46px; height: 46px; border-radius: var(--r-sm); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--primary);
  overflow: hidden;
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-name { font-weight: 700; line-height: 1.3; }
.sp-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; color: var(--muted-text); font-size: var(--fs-caption); }
.sp-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }

/* ── Letture (R3.4): ultimo valore in grande + aggiornamento inline ── */
.rd-val { flex: none; font-weight: 800; font-size: var(--fs-xl); text-align: right; }
.rd-val small { color: var(--muted-text); font-size: var(--fs-caption); font-weight: 600; }

/* ── Checklist (R3.4): spunte GRANDI touch + avanzamento per impianto ── */
.ck-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}
.ck-row.done { opacity: .6; }
.ck-row.done .li-title { text-decoration: line-through; }
/* Titolo sopra, contorno sotto. Le regole di .li-row non arrivavano fin qui,
   quindi la riga usciva su una riga sola: finche' il sottotitolo era la sola
   ricorrenza si leggeva lo stesso, ma da quando dice anche il turno e l'ultima
   firma («da fare oggi · ultima 18/08/2026») diventava un muro di testo. */
.ck-row .li-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ck-row .li-title { font-weight: 600; }
.ck-row .li-sub { color: var(--muted-text); font-size: var(--fs-caption); }
.ck-box {
  flex: none; width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--border);
  color: #07101e; font-size: 22px; font-weight: 800; line-height: 1;
  transition: background var(--speed), border-color var(--speed);
}
.ck-box:hover { border-color: var(--st-verde); }
.ck-box.on { background: var(--st-verde); border-color: var(--st-verde); }
.ck-progress {
  flex: 1; max-width: 220px; height: 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden;
}
.ck-bar { display: block; height: 100%; background: var(--st-verde); border-radius: 999px;
          transition: width .3s ease; }
/* su TELEFONO la riga checklist va a capo: titolo + spunta in alto, badge/azioni
   sotto (evita che "＋ dettagli" esca dal bordo quando c'è il badge ANOMALIA) */
@media (max-width: 640px) {
  .ck-row { flex-wrap: wrap; }
  .ck-row .li-main { flex: 1 1 55%; min-width: 0; }
}

/* ── Ricerca globale (R3.1 wayfinding: Ctrl+K) ──── */
.gs-overlay { align-items: flex-start; padding-top: 9vh; }
.gs-panel {
  width: 620px; max-width: 94vw; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(2, 8, 18, .6); overflow: hidden;
}
.gs-input-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-bottom: 1px solid var(--border);
}
.gs-input-row .gs-ic { color: var(--muted); display: flex; }
.gs-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font: 500 var(--fs-md)/1.4 var(--font-ui);
}
.gs-input::placeholder { color: var(--muted); }
.gs-kbd {
  flex: none; color: var(--muted-text); font-size: 11px; font-weight: 700;
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 7px;
}
.gs-results { max-height: 56vh; overflow: auto; padding: var(--sp-2) 0 var(--sp-3); }
.gs-group-label {
  color: var(--muted-text); font-size: var(--fs-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
}
.gs-item {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); color: var(--text); text-decoration: none;
}
.gs-item:hover, .gs-item:focus-visible { background: var(--surface-2); }
.gs-item-label { font-weight: 600; }
.gs-item-sub { color: var(--muted-text); font-size: var(--fs-caption); }
.gs-empty { color: var(--muted-text); padding: var(--sp-5) var(--sp-4); text-align: center; }

/* ── PIN pad ────────────────────────────────────── */
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 280px; margin: 0 auto; }
.pinpad button {
  height: 64px; font-size: 22px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); cursor: pointer;
}
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }
.pin-dots .pd { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary); }
.pin-dots .pd.on { background: var(--primary); }

/* ── Auth pages ─────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
/* pannello di login CHIARO come il backoffice (testo leggibile su pagina chiara) */
.auth-box { width: 360px; max-width: 92vw; background: var(--surface);
            border: 1px solid var(--border); border-radius: 12px;
            padding: 26px; box-shadow: var(--shadow); }
.auth-box h1 { text-align: center; font-size: 22px; margin-bottom: 26px; }
.link-center { text-align: center; display: block; margin: 14px 0; font-weight: 700; color: var(--primary); }

/* ── Toolbar (list headers) ─────────────────────── */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.toolbar .left { display: flex; align-items: center; gap: 12px; }

.error-text { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 18px; }

/* ════════════════ WAKE 2.0 — micro-UX ════════════════ */

/* Transizioni leggere e ombre morbide (identità invariata) */
.btn, .tile, .chip, .icon-btn, .tab, .tree-row, .input { transition: background var(--speed), border-color var(--speed), color var(--speed), box-shadow var(--speed), transform var(--speed); }
.btn:active { transform: translateY(1px); }
.card, .modal, .tile { box-shadow: var(--shadow); }
.tile:hover { transform: translateY(-2px); }

/* Focus visibile (tastiera/tablet) */
.btn:focus-visible, .input:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.input:focus { box-shadow: 0 0 0 3px rgba(111, 143, 208, .18); }

/* Scrollbar coerente col tema */
* { scrollbar-width: thin; scrollbar-color: var(--surface-2) var(--bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Aree che scorrono ANCHE in orizzontale (grafo ESWBS, tabelle larghe):
   barra più grande e contrastata — la thin tono-su-tono a zoom 100%
   non si percepiva */
.gwrap, .table-wrap {
  scrollbar-width: auto;
  scrollbar-color: #4a6fa8 var(--surface-2);
}
.gwrap::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 14px; height: 14px; }
.gwrap::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track {
  background: var(--surface-2); border-radius: 8px;
}
.gwrap::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
  background: #4a6fa8; border-radius: 8px; border: 3px solid var(--surface-2);
}
.gwrap::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Tabelle: intestazione sticky negli elenchi lunghi */
.table-wrap { max-height: 72vh; overflow: auto; }
table.data thead th { position: sticky; top: 0; z-index: 5; }

/* Badge generico (etichetta piccola) */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em;
}

/* Stato vuoto */
.empty-state {
  text-align: center; color: var(--muted); padding: 42px 20px;
}
.empty-state .es-ic { font-size: 34px; opacity: .6; margin-bottom: 10px; }

/* Skeleton (caricamento) */
@keyframes ui-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.skeleton {
  border-radius: var(--radius-sm); min-height: 16px;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 40%, var(--surface-3) 60%);
  background-size: 600px 100%; animation: ui-shimmer 1.3s infinite linear;
}

/* ── Toast (UI.toast) ───────────────────────────── */
.ui-toasts {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--sp-2); z-index: var(--z-toast); pointer-events: none;
}
.ui-toast {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius); padding: 11px 18px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0; transform: translateY(8px);
  transition: opacity .22s, transform .22s;
}
.ui-toast.show { opacity: 1; transform: translateY(0); }
.ui-toast-ok { border-color: var(--st-verde); }
.ui-toast-ok .ui-toast-ic { color: var(--st-verde); }
.ui-toast-err { border-color: var(--danger); }
.ui-toast-err .ui-toast-ic { color: var(--danger); }
.ui-toast-info .ui-toast-ic { color: var(--primary); }

/* ── Dialog (UI.confirmDialog / promptDialog) ───── */
@keyframes ui-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.ui-dialog { animation: ui-pop .14s ease-out; }
.ui-dialog-msg { color: var(--text); line-height: 1.5; margin-bottom: 16px; white-space: pre-line; }
.ui-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ui-dialog-actions .btn { min-width: 110px; }

/* ── Drawer filtri (a destra, checkbox colorate) ── */
.drawer-overlay { position: fixed; inset: 0; background: rgba(3, 10, 22, .55); z-index: var(--z-drawer); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 330px; max-width: 88vw; z-index: calc(var(--z-drawer) + 5);
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  padding: var(--sp-4); overflow-y: auto; transform: translateX(100%); transition: transform .2s ease-out;
}
.drawer.open { transform: translateX(0); }
.drawer h3 { margin: 0 0 14px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.drawer .drawer-group { border-top: 1px solid var(--border); padding: 12px 0; }
.drawer .drawer-group .label { margin-bottom: 8px; }
.drawer label.opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: 13px; }
.drawer label.opt input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
.drawer label.opt .sw { width: 12px; height: 12px; border-radius: 3px; }

/* ── Paginazione ────────────────────────────────── */
.pager { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-3); color: var(--muted-text); font-size: var(--fs-sm); }
.pager .btn { padding: var(--sp-2) var(--sp-3); min-height: 36px; }

/* ════════════════ RESTYLE 2.1 — componenti v2 ════════════════ */

/* Page header standard: titolo display + azioni a destra */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-4);
}
.page-head .page-title { margin: 0; }
.page-head .actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Card v2: sottostruttura head/body/foot + stat card */
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
}
.card-head h3, .card-head h4 { margin: 0; }
.card-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  margin: var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
}
.stat-card { text-align: left; }
.stat-card .stat-value {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700;
  line-height: var(--lh-display);
}
.stat-card .stat-label { color: var(--muted-text); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; }

/* List item con gerarchia visiva (alternativa alle tabelle) */
.li-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
  transition: border-color var(--speed), background var(--speed);
}
.li-row.clickable { cursor: pointer; }
.li-row.clickable:hover { border-color: var(--primary); }
.li-row .li-ic { flex: none; color: var(--primary); display: flex; }
.li-row .li-main { flex: 1; min-width: 0; }
.li-row .li-title { font-weight: 600; }
.li-row .li-sub { color: var(--muted-text); font-size: var(--fs-caption); margin-top: 2px; }
.li-row .li-meta { flex: none; text-align: right; color: var(--muted-text); font-size: var(--fs-caption); }
.li-row .li-actions { flex: none; display: flex; gap: var(--sp-2); }

/* Azioni contestuali di riga (menu ⋮ — delega in ui.js, niente colonne di bottoni) */
.row-menu { position: relative; display: inline-block; }
.row-menu-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: var(--fs-lg); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
  min-width: 34px; min-height: 34px;
}
.row-menu-btn:hover { background: var(--surface-2); color: var(--text); }
.row-menu .menu {
  display: none; position: absolute; right: 0; top: calc(100% + 2px); z-index: 30;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  min-width: 170px; box-shadow: var(--shadow-2); padding: var(--sp-1);
}
.row-menu.open .menu { display: block; }
/* flip: si apre verso l'ALTO quando manca spazio sotto (vedi ui.js) */
.row-menu .menu.up { top: auto; bottom: calc(100% + 2px); }
.row-menu .menu > div, .row-menu .menu > a {
  display: block; padding: var(--sp-2) var(--sp-3); cursor: pointer;
  border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-base); white-space: nowrap;
}
.row-menu .menu > div:hover, .row-menu .menu > a:hover { background: var(--surface); }

/* Tabella → card impilate su mobile (CSS only: data-label sulle celle) */
@media (max-width: 640px) {
  .data--cards thead { display: none; }
  .data--cards tbody tr {
    display: block; background: var(--surface) !important;
    border: 1px solid var(--border); border-radius: var(--radius);
    margin: 0 0 var(--sp-2); padding: var(--sp-2) 0;
  }
  .data--cards tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
    border: none; padding: var(--sp-1) var(--sp-4); text-align: right;
  }
  .data--cards tbody td:first-child { text-align: left; }
  .data--cards tbody td[data-label]::before {
    content: attr(data-label); color: var(--muted-text); font-size: var(--fs-caption);
    text-transform: uppercase; letter-spacing: .04em; flex: none;
  }
  .data--cards .table-wrap, .table-wrap:has(.data--cards) { border: none; background: none; }
}

/* Utility di layout/spaziatura (per eliminare gli style= inline ricorrenti) */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.flex-1 { flex: 1; min-width: 0; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .user-panel { min-width: 0; }
}

/* ── Effetto "OLED"/3D (PO 2026-06-12): le superfici GALLEGGIANO sul
   fondo — filo di luce sul bordo alto + doppia ombra (corta netta +
   lunga morbida), come le card del grafo. Hover = lift sulle card
   interattive. */
.card, .table-wrap, .tile, .ag-row, .sp-card, .hub-tile,
.modal, .drawer, .gs-panel, .tree {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
              0 1px 2px rgba(22, 51, 92, .08),
              0 10px 24px rgba(22, 51, 92, .10);
}
.tile, .sp-card, .hub-tile {
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.tile:hover, .sp-card:hover, .hub-tile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
              0 0 0 1px rgba(111, 143, 208, .25),
              0 14px 30px rgba(22, 51, 92, .16);
}
/* hover delle card: il TESTO non cambia colore (l'affordance la danno già
   lift, bordo e ombra) — le tile sono <a> e senza questo l'hover globale
   dei link le ricolorava */
a.tile:hover, .tile:hover, a.sp-card:hover, .sp-card:hover,
a.hub-tile:hover, .hub-tile:hover, .ag-row:hover { color: var(--text); }
.gcard-name:hover { color: inherit; }

/* ── SOPRA la griglia (PO): la texture non passa MAI attraverso controlli
   e scritte. Controlli a fondo PIENO; scritte libere con ALONE del colore
   di fondo (token --halo: trasparente dentro le superfici, dove non serve) */
.chip, .chip-st, .quadrotto, .gkid-btn, .btn-ghost { background: var(--surface); }
.container { --halo: var(--bg); }
.breadcrumb { --halo: var(--bg); }
.card, .table-wrap, .tile, .ag-row, .sp-card, .hub-tile,
.modal, .drawer, .gs-panel, .tree, .gcard { --halo: transparent; }
.page-title, .breadcrumb, .muted, .label, h1, h2, h3 {
  text-shadow: 0 0 4px var(--halo, transparent), 0 0 8px var(--halo, transparent),
               0 0 12px var(--halo, transparent);
}
/* i CONTROLLI a fondo pieno non hanno bisogno dell'alone: senza questo il
   testo bianco delle pill selezionate aveva un bagliore chiaro */
.chip, .chip-st, .quadrotto, .btn, .gkid-btn, .vsw { text-shadow: none; }


/* ── Scheda ricambio (ricambio.html) — richiesta K-Ships 2026-08-26 ── */
.spd-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (max-width: 900px) { .spd-layout { grid-template-columns: 1fr; } }
.spd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
@media (max-width: 640px) { .spd-grid { grid-template-columns: 1fr; } }
.spd-f .k { color: var(--muted-text); font-size: var(--fs-sm); margin-bottom: 6px; }
.spd-f .v { font-weight: 700; font-size: var(--fs-lg); word-break: break-word; line-height: 1.35; }
.spd-f .sub { color: var(--muted-text); font-size: var(--fs-caption); margin-top: 4px; }
.spd-side .spd-f + .spd-f { margin-top: var(--sp-6); }
.spd-img { width: 170px; height: 170px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.spd-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.spd-img.empty { background: var(--surface-2); color: var(--muted-text); cursor: default; }
.spd-ean { display: inline-block; background: #fff; color: #000; border-radius: var(--r-sm); padding: 6px 8px; border: 1px solid var(--border); }
.spd-ean svg { display: block; height: 78px; width: auto; }
.spd-stock { display: flex; flex-direction: column; gap: 8px; }
.spd-stock-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.spd-stock-row .ic { width: 22px; text-align: center; flex: none; }
.spd-stock-row .loc, .spd-link .loc { color: var(--muted-text); font-weight: 500; }
.spd-stock-row .qty { margin-left: auto; font-weight: 700; padding-left: var(--sp-3); }
.spd-link { display: flex; align-items: center; gap: 8px; font-weight: 700; color: inherit; text-decoration: none; }
.spd-link:hover { color: var(--accent); }
.spd-link .arr { margin-left: auto; color: var(--muted-text); font-size: 20px; line-height: 1; }
.spd-desc { font-weight: 600; line-height: 1.45; }
.spd-desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.btn-buy { background: var(--primary); border: 1px solid var(--primary); color: #fff; }
.btn-buy:hover { filter: brightness(1.12); }
/* il nome del ricambio nel catalogo apre la scheda */
.sp-name a { color: inherit; text-decoration: none; }
.sp-name a:hover { color: var(--accent); text-decoration: underline; }

/* ── Ricerca sopra le tendine lunghe (static/js/selsearch.js) ──────────────
   I risultati compaiono in un pannello SOTTO il campo: prima il filtro agiva
   solo dentro la tendina chiusa e digitando non si vedeva cambiare nulla
   (K-Ships pt 17). Il pannello galleggia sopra il contenuto, anche nelle
   modali, quindi va sopra le superfici ma sotto l'overlay. */
.sel-search-wrap { position: relative; margin-bottom: 6px; }
.sel-search { width: 100%; }
.ss-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-2); margin-top: 2px;
}
.ss-item { padding: 8px 12px; cursor: pointer; font-size: var(--fs-sm); }
.ss-item:hover, .ss-item.on { background: var(--surface-2); }
.ss-empty, .ss-more { padding: 8px 12px; font-size: var(--fs-caption); color: var(--muted-text); }
.ss-more { border-top: 1px solid var(--border); }

/* ── LINEA DEL TEMPO (linea-tempo.html) ────────────────────────────────────
   Due corsie sulla stessa scala temporale: PREVISTE sopra, ESEGUITE sotto.
   Scorre in orizzontale col dito — su tablet è il gesto naturale — e la
   colonna di oggi è ancorata a sinistra, perché davanti c'è ciò che si sta
   guardando: il futuro. */
.lt-legenda { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; font-size: var(--fs-sm); }
.lt-quad { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; }
.lt-prev-q { background: var(--st-neutro); }
.lt-fatte-q { background: var(--st-verde); }

.lt-wrap { display: flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.lt-etichette { flex: 0 0 92px; border-right: 1px solid var(--border);
  background: var(--surface-3, var(--surface)); }
.lt-corsia-lbl { height: 190px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted-text);
  border-top: 1px solid var(--border); writing-mode: horizontal-tb; text-align: center; }

.lt-scroll { display: flex; overflow-x: auto; scroll-behavior: smooth; flex: 1; }
.lt-col { flex: 0 0 168px; min-width: 0; overflow: hidden;
  border-right: 1px solid var(--border); }
.lt-col:last-child { border-right: 0; }
.lt-head { height: 44px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: var(--fs-sm); font-weight: 700;
  border-bottom: 1px solid var(--border); }
.lt-dow { font-size: var(--fs-caption); font-weight: 400; color: var(--muted-text); }
/* il passato è alle spalle: si vede, ma non compete col futuro per l'attenzione */
.lt-passata { background: color-mix(in srgb, var(--muted-text) 7%, transparent); }
.lt-oggi { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.lt-badge-oggi { background: var(--primary); color: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: var(--fs-caption); text-transform: uppercase; }

.lt-corsia { height: 190px; overflow-y: auto; padding: 6px;
  border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.lt-vuoto { flex: 1; }

.lt-card { border-left: 4px solid var(--st-neutro); background: var(--surface-2);
  border-radius: 6px; padding: 6px 8px; cursor: pointer; }
.lt-card:hover { filter: brightness(1.06); }
.lt-card-t { font-size: var(--fs-caption); font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; }
.lt-card-s { font-size: 11px; color: var(--muted-text); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-card-m { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; }
.lt-gg { font-weight: 700; }
.lt-ic { opacity: .85; }
.lt-chi { color: var(--muted-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-esito { border-radius: 999px; padding: 1px 7px; font-size: 10px; }
.lt-esito-verde { background: var(--st-verde); color: #07101e; }
.lt-esito-giallo { background: var(--st-giallo); color: #07101e; }
.lt-esito-rosso { background: var(--st-rosso); color: #fff; }
/* le eseguite sono un fatto compiuto: bordo pieno, niente urgenza */
.lt-fatta { border-left-style: solid; opacity: .95; }

.lt-neutro { border-left-color: var(--st-neutro); }
.lt-grigio { border-left-color: var(--st-grigio); }
.lt-verde { border-left-color: var(--st-verde); }
.lt-giallo { border-left-color: var(--st-giallo); }
.lt-arancio { border-left-color: var(--st-arancio); }
.lt-rosso { border-left-color: var(--st-rosso); }

@media (max-width: 640px) {
  .lt-etichette { flex-basis: 62px; }
  .lt-col { flex-basis: 142px; }
  .lt-corsia, .lt-corsia-lbl { height: 168px; }
}

/* colonna FISSA dell'arretrato: sta fuori dallo scorrimento perché il lavoro in
   ritardo va fatto adesso, non nel giorno in cui sarebbe scaduto */
/* ── vista d'insieme (Settimane / Mesi): riepilogo in testa, righe compatte ── */
/* l'etichetta di stato in minuscolo la fa il CSS: la chiave in mappa e' «Scadute»,
   e una seconda chiave minuscola per ogni stato sarebbe una parola corta in piu'
   pronta a finire dentro altre frasi */
.u-min { text-transform: lowercase; }
.lt-panoramica .lt-prev, .lt-panoramica .lt-lbl-prev { height: 360px; }
.lt-panoramica .lt-fatte, .lt-panoramica .lt-lbl-fatte { height: 170px; }
.lt-sum { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px 9px;
  margin-bottom: 6px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); }
.lt-sum-vuoto { color: var(--muted-text); font-size: 11px; text-align: center;
  background: transparent; border-style: dashed; }
.lt-sum-top { display: flex; align-items: baseline; gap: 6px; }
.lt-sum-n { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; }
.lt-sum-l { font-size: 11px; color: var(--muted-text); line-height: 1.2; }
.lt-sum-h { font-size: 11px; color: var(--muted-text); }
.lt-sum-h strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.lt-carico { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted-text) 18%, transparent);
  overflow: hidden; }
.lt-carico-b { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.lt-mgs { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.lt-mg { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
  color: var(--text); }
.lt-mg svg { opacity: .8; }
.lt-mg-altri { font-size: 11px; color: var(--muted-text); }
.lt-alert { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.2;
  color: var(--st-arancio); }
.lt-alert .lt-ic svg { width: 13px; height: 13px; }
.lt-alert-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-sum-arr { border-color: color-mix(in srgb, var(--st-rosso) 55%, var(--border)); }
.lt-sum-arr .lt-sum-n { color: var(--st-rosso); }
.lt-sum-fatte .lt-alert { color: var(--st-giallo); }
.lt-agenda { margin-top: 3px; align-self: stretch; justify-content: center; white-space: nowrap;
  font-size: 11px; padding-inline: 6px; }
.lt-riga { display: flex; align-items: center; gap: 6px; border-left: 3px solid var(--st-neutro);
  background: var(--surface-2); border-radius: 4px; padding: 4px 6px; margin-bottom: 3px;
  cursor: pointer; font-size: 11px; }
.lt-riga:hover { filter: brightness(1.08); }
.lt-riga-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; }
.lt-riga-g { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-riga.lt-neutro { border-left-color: var(--st-neutro); }
.lt-riga.lt-verde { border-left-color: var(--st-verde); }
.lt-riga.lt-giallo { border-left-color: var(--st-giallo); }
.lt-riga.lt-arancio { border-left-color: var(--st-arancio); }
.lt-riga.lt-rosso { border-left-color: var(--st-rosso); }
.lt-riga.lt-grigio { border-left-color: var(--st-grigio); }
.lt-arretrato { flex: 0 0 176px; min-width: 0; overflow: hidden;
  border-right: 2px solid var(--st-rosso);
  background: color-mix(in srgb, var(--st-rosso) 8%, transparent); }
.lt-badge-arr { background: var(--st-rosso); color: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: var(--fs-caption); text-transform: uppercase; }
.lt-arr-q { background: var(--st-rosso); }
.lt-arr-lbl { font-weight: 700; }
/* quante ne contiene la colonna: senza, una corsia che scorre non dice mai
   quanto lavoro nasconde sotto il bordo */
.lt-n { align-self: flex-end; font-size: 10px; font-weight: 700; color: var(--muted-text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 0 6px; position: sticky; top: 0; z-index: 1; }

/* Etichetta e bottoni che governa restano INSIEME quando la barra va a capo:
   senza, "Vista:" rimaneva in fondo a una riga e i suoi bottoni finivano nella
   successiva, come un'etichetta senza contenuto (segnalato in demo il 04/09). */
.chip-grp { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; }

/* Barre di scorrimento VISIBILI sulla linea del tempo (stessa ricetta dei menu
   filtro): quella sottile di default è in tinta col fondo e non si capisce che
   la colonna continua — e qui una colonna può contenerne centinaia (395 sole
   arretrate su Green Pearl). Vale anche per lo scorrimento ORIZZONTALE, che è
   il gesto principale della vista. `scrollbar-gutter` tiene lo spazio riservato,
   così le card non saltano quando la barra compare. */
.lt-corsia, .lt-scroll { scrollbar-gutter: stable; scrollbar-width: auto;
  scrollbar-color: #7f9bc4 #d7e2f1; }
.lt-corsia::-webkit-scrollbar, .lt-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.lt-corsia::-webkit-scrollbar-track, .lt-scroll::-webkit-scrollbar-track {
  background: #d7e2f1; border-radius: 8px; }
.lt-corsia::-webkit-scrollbar-thumb, .lt-scroll::-webkit-scrollbar-thumb {
  background: #7f9bc4; border-radius: 8px; border: 3px solid #d7e2f1; }
.lt-corsia::-webkit-scrollbar-thumb:hover, .lt-scroll::-webkit-scrollbar-thumb:hover {
  background: #5f78a3; }
/* il segnale del pezzo che manca o sta per mancare, nella lista della spesa
   del periodo: icona + parola, mai il colore da solo */
.lt-segnale { margin-top: 4px; color: var(--st-rosso); font-size: 12px; font-weight: 700; }
.chip.lt-chip-allarme { background: var(--st-rosso); border-color: var(--st-rosso); color: #fff;
  font-weight: 700; white-space: nowrap; }

/* in notte il fondo è scuro: la traccia chiara stonerebbe */
html.night .lt-corsia, html.night .lt-scroll { scrollbar-color: var(--border) var(--surface-3); }
html.night .lt-corsia::-webkit-scrollbar-track,
html.night .lt-scroll::-webkit-scrollbar-track { background: var(--surface-3); }
html.night .lt-corsia::-webkit-scrollbar-thumb,
html.night .lt-scroll::-webkit-scrollbar-thumb {
  background: var(--border); border-color: var(--surface-3); }