:root{
  --bg:#f4f5f7; --card:#fff; --ink:#111827; --muted:#6b7280; --line:#e2e5ea;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#a16207; --warn-bg:#fef3c7;
  --bad:#b91c1c; --bad-bg:#fee2e2; --accent:#1d4ed8; --accent-ink:#fff;
  --fuori:#334155; --fuori-bg:#e2e8f0;
  --tap:52px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); padding-bottom:96px;
}
header{
  position:sticky; top:0; z-index:20; background:var(--ink); color:#fff;
  padding:10px 14px; display:flex; align-items:center; gap:12px;
}
header .t{font-weight:700; font-size:17px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
header button{
  background:#374151; color:#fff; border:0; border-radius:10px;
  min-height:40px; padding:0 14px; font-size:15px; font-weight:600;
}
main{padding:12px; max-width:820px; margin:0 auto}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:12px}
/* Niente maiuscolo di enfasi (fase 5, punto 5): il peso visivo viene dal
   colore attenuato e dal grassetto, non da testo tutto in maiuscolo. */
h2{font-size:15px; font-weight:700; color:var(--muted); margin:0 0 10px}

/* --- lista flotta --- */
.filters{display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{
  flex:0 0 auto; background:#fff; border:1px solid var(--line); color:var(--ink);
  border-radius:999px; min-height:42px; padding:0 16px; font-size:15px; font-weight:600;
}
.filters button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* --- griglia a riquadri: layout di default, non solo da computer --- */
.griglia{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:12px}
@media (min-width: 480px){ .griglia{grid-template-columns:repeat(3, 1fr)} }
@media (min-width: 720px){ .griglia{grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px} }

.gruppo-titolo{
  grid-column:1/-1; margin:14px 0 2px; font-size:13.5px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
}
.gruppo-titolo:first-child{margin-top:0}

.row{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left; width:100%; background:var(--card); border:2px solid var(--line);
  border-radius:16px; padding:12px 13px; min-height:96px; color:inherit;
  font:inherit; cursor:pointer; gap:6px;
  /* Fase 7: la pressione prolungata entra in selezione. Senza queste due
     proprieta' iOS apre il menu contestuale (copia/condividi) o prova a
     selezionare il testo del riquadro invece di lasciar scattare il timer. */
  -webkit-touch-callout:none; touch-action:manipulation;
}
.row .id{font-weight:700; font-size:18px; letter-spacing:.01em}
.row .sub{color:var(--muted); font-size:12.5px; line-height:1.35}
.row .badge{align-self:flex-start}
.row.st-ok{background:var(--ok-bg); border-color:var(--ok)}
.row.st-warn{background:var(--warn-bg); border-color:var(--warn)}
.row.st-bad{background:var(--bad-bg); border-color:var(--bad)}
.row.st-fuori{background:var(--fuori-bg); border-color:var(--fuori)}
.row.st-grey{background:#eef0f3; border-color:var(--line)}

/* Fase 7: selezione multipla. Bordo marcato piu' segno di spunta, non solo
   un cambio di tinta o di opacita', che con la luce dell'officina si perdono. */
.row .segno-spunta{
  display:none; position:absolute; top:8px; right:8px; width:26px; height:26px;
  border-radius:999px; background:var(--accent); color:#fff;
  align-items:center; justify-content:center; font-weight:800; font-size:15px;
}
.row.selezionata{outline:3px solid var(--accent); outline-offset:2px}
.row.selezionata .segno-spunta{display:flex}

.badge{font-size:12.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap}
.b-ok{background:var(--ok-bg); color:var(--ok)}
.b-warn{background:var(--warn-bg); color:var(--warn)}
.b-bad{background:var(--bad-bg); color:var(--bad)}
.b-fuori{background:var(--fuori-bg); color:var(--fuori)}
.b-grey{background:#eef0f3; color:var(--muted)}

.richiamo-id{
  flex:0 0 auto; background:var(--warn-bg); border:1.5px solid var(--warn); color:var(--warn);
  border-radius:999px; min-height:42px; padding:0 16px; font-size:15px; font-weight:700;
}
.richiamo-id.blu{background:#dbeafe; border-color:var(--accent); color:var(--accent)}

/* --- domande si'/no: check rapido, pulizia profonda --- */
.dom{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line)}
.dom:first-child{border-top:0}
.dom .q{flex:1; font-size:15.5px}
.sn{display:flex; gap:8px; flex:0 0 auto}
.sn button{min-width:60px; min-height:var(--tap); border:1.5px solid var(--line); background:#fff;
  border-radius:10px; font:700 15px inherit; color:var(--muted)}
.sn button.si[aria-pressed="true"]{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.sn button.no[aria-pressed="true"]{background:var(--bad-bg); border-color:var(--bad); color:var(--bad)}
.notaProblema{padding:0 0 12px}
.notaProblema textarea{min-height:64px}
.avviso{color:var(--bad); font-size:13px; margin:6px 0 0; font-weight:600}

/* --- chip a un tocco: riparazione ---
   Griglia, non flex-wrap: con flex-wrap ogni riga si ferma al primo chip
   che non ci sta e lascia lo spazio vuoto; la griglia invece riempie ogni
   riga di colonne di larghezza uguale, quante ce ne stanno. */
.chips{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:8px}
.chip{
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  border-radius:11px; min-height:var(--tap); padding:0 15px;
  font-size:15.5px; font-weight:600; display:flex; align-items:center;
  justify-content:center; text-align:center; gap:7px;
}
.chip[aria-pressed="true"]{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.chip[aria-pressed="true"]::before{content:"✓"; font-weight:800}

textarea{
  width:100%; min-height:84px; border:1.5px solid var(--line); border-radius:11px;
  padding:11px; font:16px/1.4 inherit; resize:vertical; background:#fff; color:var(--ink);
}
select, input[type=text]{
  width:100%; min-height:var(--tap); border:1.5px solid var(--line);
  border-radius:11px; padding:0 11px; font:16px inherit; background:#fff; color:var(--ink);
}
.seg{display:flex; gap:8px}
.seg button{
  flex:1; min-height:var(--tap); border:1.5px solid var(--line); background:#fff;
  border-radius:11px; font:600 15px inherit; color:var(--ink);
}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}

.savebar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 12px 14px;
  background:rgba(244,245,247,.96); border-top:1px solid var(--line);
  backdrop-filter:blur(8px); display:flex; gap:8px; max-width:820px; margin:0 auto;
}
.savebar button{
  flex:1; min-height:58px; border:0; border-radius:13px;
  font:700 17px inherit; background:var(--accent); color:var(--accent-ink);
}
.savebar button.ghost{flex:0 0 auto; padding:0 16px; background:#e5e7eb; color:var(--ink); font-size:15px}
.savebar button:disabled{opacity:.45}

.riepilogo{border-color:var(--accent)}
.riepilogo ul{margin:0; padding-left:20px; font-size:15px}
.riepilogo li{margin-bottom:4px}

.fab{
  position:fixed; right:16px; bottom:22px; z-index:30;
  min-height:66px; padding:0 26px; border:0; border-radius:33px;
  background:var(--accent); color:#fff; font:700 17px inherit;
  box-shadow:0 8px 24px rgba(29,78,216,.35); display:flex; align-items:center; gap:10px;
}

.ev{border-top:1px solid var(--line); padding:11px 0}
.ev:first-child{border-top:0}
/* Fase 8: un salvataggio puo' toccare piu' di una sezione (check rapido e
   lavaggio profondo insieme, per esempio): tutte le loro etichette finiscono
   affiancate su questa stessa riga (vedi raggruppaStorico() in stato.js),
   flex-wrap perche' da telefono, con due o tre etichette, non ci stanno tutte
   in larghezza. */
.ev .when{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center}
.ev .tags{margin-top:6px; display:flex; flex-wrap:wrap; gap:6px}
.tag{background:#eef0f3; border-radius:7px; padding:3px 8px; font-size:13px}
.ev .note{margin-top:6px; font-size:14.5px; white-space:pre-wrap}
.kind{font-weight:800; font-size:11.5px; padding:2px 7px; border-radius:6px; letter-spacing:.04em}
.k-check{background:#dbeafe; color:#1e40af}
.k-rip{background:#ffedd5; color:#9a3412}
.k-out{background:var(--fuori-bg); color:var(--fuori)}
.k-in{background:var(--warn-bg); color:var(--warn)}
.k-pulizia{background:#dcfce7; color:#166534}

.btn-noleggio{
  width:100%; min-height:58px; border:0; border-radius:13px; margin-top:12px;
  font:700 16px inherit; color:#fff;
}
.btn-noleggio.out{background:var(--accent)}
.btn-noleggio.in{background:var(--warn)}

/* Contenitore ad altezza fissa: senza aspect-ratio il box collassa a 0
   finche' non arrivano i metadati dello stream, e il mirino "sparisce". */
#reader{position:relative; width:100%; aspect-ratio:3/4; max-height:62vh;
  border-radius:12px; overflow:hidden; background:#000}
#reader video{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block}
#mirino{position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center}
#mirino i{display:block; width:62%; aspect-ratio:1; border-radius:14px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.35);
  outline:3px solid rgba(255,255,255,.9); outline-offset:-3px}
.hint{font-size:13.5px; color:var(--muted); margin:10px 0 0}
.empty{text-align:center; color:var(--muted); padding:26px 10px; font-size:15px}
.toast{
  position:fixed; left:50%; bottom:110px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:12px;
  font-weight:600; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none;
}
.toast.on{opacity:1}
.toast.bad{background:var(--bad)}
.meta{display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--muted); font-size:14px}
.k-ferma{background:var(--bad-bg); color:var(--bad)}

/* Fase 7: overlay minimi (PIN admin, nota obbligatoria del blocco, riepilogo).
   Appesi a document.body, non a #app: un render() di mezzo non li tocca. */
.overlay{
  position:fixed; inset:0; z-index:70; background:rgba(17,24,39,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.overlay-card{
  background:var(--card); border-radius:14px; padding:18px;
  max-width:360px; width:100%; max-height:80vh; overflow-y:auto;
}

@media (min-width: 720px){
  /* Niente main{max-width} qui: resta quello di riga 24 (820px), lo stesso
     della savebar. Un container piu' largo qui lasciava solo spazio vuoto ai
     lati, non piu' contenuto utile. */
  /* Posizione e stato in officina affiancate, piu' quadrate, invece di due
     fasce strette a piena larghezza: solo da computer, dove c'e' spazio. */
  .due-colonne{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px}
  .due-colonne .card{margin-bottom:0}
}