/* ============================================================
   Oplita - foglio di stile comune - 7.7

   Un file solo per tutte le pagine del server (direttore, ticket,
   pannello, rapporti). Prima ogni pagina ridefiniva il proprio aspetto:
   circa duecento righe quasi identiche ripetute in dieci file, che e' il
   motivo per cui le differenze nascevano da sole - una pagina aggiungeva
   una regola, le altre no, e dopo sei mesi erano dieci temi diversi.

   Il client (app/index.html) resta a se': deve funzionare offline su un
   tablet, e un file unico li' e' la scelta giusta, non un difetto.

   Sul tono: questo e' uno strumento di lavoro per verbali che finiscono in
   fascicoli di sicurezza. Piu' leggibile e piu' prevedibile, non piu'
   colorato: la sobrieta' qui e' credibilita'.
   ============================================================ */

:root{
  /* Inchiostro e superfici */
  --ink:#16181D;          /* testo principale */
  --ink2:#5A6068;         /* testo secondario */
  --ink3:#858C94;         /* etichette, testo tenue */
  --line:#D8DEE3;         /* bordi */
  --line2:#EAEEF1;        /* bordi tenui, righe di tabella */
  --paper:#FFFFFF;
  --surface:#F3F5F7;      /* fondo pagina */
  --surface2:#E9EDF0;     /* fondo di riquadri interni */

  /* Colori di significato. Il blu e' l'unico accento: identifica cio' su
     cui si puo' agire. Il resto dice conforme / attenzione / non conforme,
     e non va usato per decorare. */
  --acc:#1B4F8F;
  --acc2:#E8EFF8;
  --pos:#00713C;  --pos2:#EDF6F1;
  --warn:#B36A00; --warn2:#FDF6EC;
  --neg:#C8102E;  --neg2:#FCF1F3;

  /* I quattro gradi, sempre gli stessi ovunque compaiano */
  --g1:#C8102E; --g2:#E07800; --g3:#B3A200; --g4:#7A8288;

  --r:10px;               /* raggio degli angoli */
  --r-s:7px;
  --ombra:0 1px 2px rgba(22,24,29,.06), 0 1px 8px rgba(22,24,29,.04);
  --ombra-alta:0 2px 4px rgba(22,24,29,.07), 0 8px 24px rgba(22,24,29,.07);
}

*{box-sizing:border-box}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--surface);
  color:var(--ink);
  margin:0;
  padding:0 0 48px;
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- intestazione e navigazione ----------
   La barra che mancava: fino alla 7.6 le cinque pagine del direttore erano
   isole senza collegamenti, e per passare dall'una all'altra bisognava
   tornare al tablet e ripremere. */
.topbar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:0 20px;
  position:sticky; top:0; z-index:50;
}
.topbar .in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:18px;
  min-height:58px;flex-wrap:wrap}
.topbar .marchio{font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.topbar .marchio span{color:var(--ink3);font-weight:400;font-size:14px;margin-left:8px}
.topbar nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.topbar nav a{
  color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:9px 13px;border-radius:var(--r-s);white-space:nowrap;
}
.topbar nav a:hover{background:var(--surface);color:var(--ink)}
.topbar nav a.on{background:var(--acc2);color:var(--acc);font-weight:600}

.wrap{max-width:960px;margin:0 auto;padding:24px 20px 0}
.wrap.stretto{max-width:680px}

/* ---------- titoli ---------- */
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.02em;font-weight:700}
h2{font-size:19px;margin:26px 0 12px;letter-spacing:-.01em;font-weight:650}
h3{font-size:16px;margin:18px 0 8px;font-weight:650}
p.sub{color:var(--ink2);margin:0 0 20px;font-size:15.5px}

/* ---------- riquadri ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 24px;
  margin-bottom:16px;
  box-shadow:var(--ombra);
}
.card.piatta{box-shadow:none}
.card h2:first-child,.card h3:first-child{margin-top:0}

/* ---------- avvisi ----------
   Una barra colorata a sinistra invece del bordo tutto intorno: si legge
   piu' in fretta di che tipo e' l'avviso, e non fa "scatola nella scatola". */
.b{
  border-radius:var(--r-s);
  padding:13px 16px;
  font-size:15px;
  margin-bottom:14px;
  background:var(--surface);
  border-left:4px solid var(--line);
}
.b.ok  {background:var(--pos2); border-left-color:var(--pos); color:#0A5233}
.b.err {background:var(--neg2); border-left-color:var(--neg); color:#96182C}
.b.warn{background:var(--warn2);border-left-color:var(--warn);color:#8A5300}
.b.info{background:var(--acc2); border-left-color:var(--acc); color:#153E70}
.b b{font-weight:650}

/* ---------- moduli ----------
   Campi alti 46px: si toccano anche da tablet, che e' come il direttore
   usa queste pagine meta' delle volte. */
label{display:block;font-size:14px;margin-bottom:14px;font-weight:600;color:var(--ink2)}
input,select,textarea{
  width:100%;
  padding:12px 13px;
  border:1.5px solid var(--line);
  border-radius:var(--r-s);
  font-size:16px;             /* meno di 16 e iOS ingrandisce da solo */
  margin-top:5px;
  font-weight:400;
  font-family:inherit;
  color:var(--ink);
  background:var(--paper);
  min-height:46px;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc2);
}
textarea{min-height:90px;line-height:1.5}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;margin:0;flex:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.tre{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
@media(max-width:640px){.two,.tre{grid-template-columns:1fr}}

/* ---------- pulsanti ----------
   Almeno 46px di altezza: sotto i 44 si sbaglia col dito, e queste pagine
   si usano anche in piedi. */
button,.btn{
  border:1.5px solid var(--ink);
  background:var(--ink);
  color:#fff;
  border-radius:var(--r-s);
  padding:13px 20px;
  font-size:15.5px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  min-height:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;
  transition:background .12s, border-color .12s;
}
button:hover,.btn:hover{background:#000}
button:active,.btn:active{transform:translateY(1px)}
button.ghost,.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
button.ghost:hover,.btn.ghost:hover{background:var(--surface);border-color:var(--ink3)}
button.danger,.btn.danger{background:var(--neg);border-color:var(--neg)}
button.danger:hover{background:#A50D26}
button.mini,.btn.mini{padding:8px 13px;font-size:14px;min-height:38px}
button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- tabelle ---------- */
table{border-collapse:collapse;width:100%;font-size:15px;margin:12px 0}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
th{color:var(--ink3);font-weight:600;font-size:12.5px;text-transform:uppercase;
   letter-spacing:.05em;border-bottom-color:var(--line)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface)}

/* ---------- pastiglie e gradi ----------
   Il grado ha lo stesso aspetto ovunque: nel ticket, nel verbale, nel
   rapporto. Riconoscerlo a colpo d'occhio conta piu' della varieta'. */
.pill{
  display:inline-block;border:1.5px solid var(--line);border-radius:20px;
  padding:3px 11px;font-size:12.5px;font-weight:650;white-space:nowrap;
}
.pill.g1{border-color:var(--g1);color:var(--g1);background:var(--neg2)}
.pill.g2{border-color:var(--g2);color:var(--g2);background:var(--warn2)}
.pill.g3{border-color:var(--g3);color:#8A7D00;background:#FBF9E8}
.pill.g4{border-color:var(--g4);color:var(--g4);background:var(--surface)}
.pill.ok {border-color:var(--pos);color:var(--pos);background:var(--pos2)}
.pill.no {border-color:var(--neg);color:var(--neg);background:var(--neg2)}
.pill.att{border-color:var(--warn);color:var(--warn);background:var(--warn2)}

/* ---------- elenco di schede (impianti, societa', ticket) ----------
   La barretta a sinistra dice lo stato senza doverlo leggere. */
.riga{
  border:1px solid var(--line);
  border-left:4px solid var(--line);
  border-radius:var(--r-s);
  padding:15px 17px;
  margin-bottom:10px;
  background:var(--paper);
}
.riga:hover{border-color:var(--ink3);border-left-color:var(--acc)}
.riga.att{border-left-color:var(--warn)}
.riga.neg{border-left-color:var(--neg)}
.riga.pos{border-left-color:var(--pos)}
.riga b{display:block;font-size:16px;font-weight:650;margin-bottom:2px}
.riga span.meta{color:var(--ink2);font-size:14px}

/* ---------- numeri in evidenza (cruscotto) ---------- */
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.num{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px}
.num b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
       font-variant-numeric:tabular-nums}
.num span{color:var(--ink3);font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.num.neg b{color:var(--neg)} .num.warn b{color:var(--warn)} .num.pos b{color:var(--pos)}

/* ---------- dettagli richiudibili ---------- */
details{margin-top:10px;border-top:1px solid var(--line2);padding-top:10px}
summary{cursor:pointer;color:var(--acc);font-size:14px;font-weight:600;padding:4px 0;
        list-style:none;display:flex;align-items:center;gap:6px}
summary::-webkit-details-marker{display:none}
summary::before{content:"\25B8";display:inline-block;transition:transform .15s;color:var(--ink3)}
details[open] summary::before{transform:rotate(90deg)}
summary:hover{color:var(--ink)}

/* ---------- elenco a caselle (assegnazioni) ---------- */
.pls{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);margin:10px 0}
.pls label{display:flex;gap:11px;align-items:center;padding:11px 14px;margin:0;font-weight:400;
  border-bottom:1px solid var(--line2);font-size:15px;color:var(--ink);cursor:pointer;min-height:46px}
.pls label:last-child{border-bottom:0}
.pls label:hover{background:var(--surface)}

/* ---------- menu lunghi con filtro ----------
   Una casella sopra il menu che nasconde le voci che non corrispondono.
   Senza JavaScript resta un menu normale e funzionante. */
.selcerca{display:flex;flex-direction:column;gap:4px;width:100%}
.selcerca .selcerca-q{font-size:14px;padding:8px 10px;min-height:38px}
.selcerca select{margin-top:0}

/* ---------- schede di una pagina ----------
   Viste diverse dello stesso archivio. Il numero accanto dice subito dove
   c'e' lavoro da fare, senza aprire la scheda. */
.schede{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:4px 0 18px}
.schede a{padding:11px 14px;text-decoration:none;color:var(--ink2);font-weight:600;font-size:14.5px;
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.schede a:hover{color:var(--ink)}
.schede a.on{color:var(--acc);border-bottom-color:var(--acc)}
.schede a .n{display:inline-block;margin-left:6px;padding:0 8px;border-radius:10px;background:var(--surface2);
  color:var(--ink2);font-size:12.5px;font-variant-numeric:tabular-nums}
.schede a.on .n{background:var(--acc2);color:var(--acc)}
.schede a .n.att{background:var(--warn2);color:var(--warn)}

/* ---------- filtri degli elenchi lunghi ---------- */
.filtri{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px;align-items:end}
.filtri label{margin-bottom:10px}
.filtri .azioni{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}

/* ---------- elenco compatto ----------
   Una riga per impianto, alta abbastanza per il dito ma senza il riquadro
   di .riga: con centinaia di voci per pagina conta quante se ne vedono. */
.elenco{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;margin:10px 0;background:var(--paper)}
.elenco .voce{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line2);
  min-height:52px;margin:0;font-weight:400;color:var(--ink)}
.elenco .voce:last-child{border-bottom:0}
.elenco .voce:hover{background:var(--surface)}
.elenco .voce.att{box-shadow:inset 4px 0 0 var(--warn)}
.elenco .voce .testo{flex:1 1 auto;min-width:0}
.elenco .voce .testo b{display:block;font-weight:650;font-size:15.5px;overflow-wrap:anywhere}
.elenco .voce .testo .meta{color:var(--ink2);font-size:13.5px}
.elenco .voce .fine{flex:none;display:flex;gap:8px;align-items:center}
.elenco label.voce{cursor:pointer}
.elenco .testa{display:flex;gap:12px;align-items:center;padding:9px 14px;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2);font-weight:600}

/* ---------- numeri di pagina ---------- */
.pagine{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:12px 0}
.pagine a,.pagine span{padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-s);text-decoration:none;
  font-size:14px;color:var(--ink);background:var(--paper);min-width:40px;text-align:center}
.pagine a:hover{border-color:var(--ink3)}
.pagine span.on{background:var(--acc2);border-color:var(--acc);color:var(--acc);font-weight:650}
.pagine span.gap{border:0;background:none;min-width:0;padding:7px 2px}

/* ---------- varie ---------- */
.nota{color:var(--ink2);font-size:14px;font-weight:400;margin:8px 0 0;line-height:1.5}
.muted{color:var(--ink3)}
.small{font-size:13.5px}
code{background:var(--surface2);padding:2px 7px;border-radius:4px;font-size:14px;
     font-family:ui-monospace,Menlo,Consolas,monospace}
a{color:var(--acc)}
a:hover{color:#123A6B}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.pass{font:700 24px ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;
  background:var(--acc2);color:var(--acc);border-radius:var(--r-s);padding:16px;
  text-align:center;margin:12px 0}
.vuoto{text-align:center;padding:34px 20px;color:var(--ink3)}
.vuoto b{display:block;font-size:16px;color:var(--ink2);margin-bottom:4px;font-weight:600}

/* ---------- stampa ---------- */
@media print{
  body{background:#fff;padding:0}
  .topbar,button,.btn,form{display:none!important}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}