:root {
  --blu: #1F3A93;
  --blu-scuro: #152a6b;
  --blu-chiaro: #e8edf9;
  --testo: #1b1f2a;
  --testo-2: #5b6273;
  --bordo: #d9dde6;
  --sfondo: #f5f6f9;
  --bianco: #fff;
  --ok: #1e7b3c; --ok-sf: #e3f3e8;
  --ko: #b42318; --ko-sf: #fde8e6;
  --att: #9a6400; --att-sf: #fdf1d9;
  --raggio: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--testo); background: var(--sfondo); font-size: 16px; line-height: 1.45;
}
a { color: var(--blu); }

/* barra superiore */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--blu); color: var(--bianco);
}
.marchio { color: var(--bianco); text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.marchio-nome { font-weight: 700; font-size: 17px; font-style: italic; }
.marchio-sotto { font-size: 12px; opacity: .8; letter-spacing: .04em; text-transform: uppercase; }
.barra-destra { display: flex; align-items: center; gap: 10px; }
.utente { font-size: 14px; opacity: .9; }

main { max-width: 980px; margin: 0 auto; padding: 16px 16px 48px; }
h1 { font-size: 26px; margin: 8px 0 6px; }
h2 { font-size: 18px; margin: 28px 0 10px; }
.conteggio { font-size: .7em; font-weight: 600; color: var(--testo-2); background: var(--bianco); border: 1px solid var(--bordo); border-radius: 99px; padding: 1px 10px; vertical-align: middle; }
.nota { color: var(--testo-2); margin: 2px 0; }
.nota.piccola { font-size: 13px; margin-top: 24px; }
.caricamento { color: var(--testo-2); padding: 24px 0; }

/* bottoni e campi */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--raggio); background: var(--blu); color: var(--bianco); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.bottone:hover { background: var(--blu-scuro); }
.bottone.secondario { background: var(--bianco); color: var(--blu); border: 1px solid var(--bordo); }
.barra .bottone.secondario { background: transparent; color: var(--bianco); border-color: rgba(255,255,255,.5); }
.bottone.piccolo { min-height: 34px; padding: 0 12px; font-size: 14px; }
.bottone.grande { width: 100%; min-height: 52px; font-size: 17px; }
input[type=search], input[type=email], input[type=password], input[type=text] {
  width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 17px; color: var(--testo);
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
input:focus { outline: 3px solid var(--blu-chiaro); border-color: var(--blu); }

.ricerca { display: flex; gap: 8px; margin: 4px 0 18px; }
.filtro { margin: 6px 0 12px; }

/* pagina iniziale */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.riquadro {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 18px;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 14px; text-decoration: none; color: var(--testo);
}
a.riquadro:hover { border-color: var(--blu); box-shadow: 0 2px 10px rgba(31,58,147,.12); }
.riquadro-titolo { font-size: 20px; font-weight: 700; color: var(--blu); }
.riquadro-testo { color: var(--testo-2); font-size: 15px; }
.riquadro.spento { opacity: .55; }
.presto { position: absolute; top: 12px; right: 12px; font-size: 12px; background: var(--sfondo); border-radius: 99px; padding: 2px 8px; color: var(--testo-2); }

/* percorso */
.percorso { font-size: 14px; color: var(--testo-2); margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.percorso a { text-decoration: none; }
.percorso .sep { opacity: .5; }

/* elenchi */
.elenco { display: flex; flex-direction: column; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.riga {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; min-height: 56px;
  text-decoration: none; color: var(--testo); border-top: 1px solid var(--bordo);
}
.riga:first-child { border-top: 0; }
.riga:hover { background: var(--blu-chiaro); }
.riga[hidden] { display: none; }
.riga-titolo { font-weight: 600; grid-column: 1; }
.riga-info { color: var(--testo-2); font-size: 14px; grid-column: 1; }
.riga-badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.matricola { font-weight: 500; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.matricola.grande { font-size: 17px; margin: 0; }
.intestazione-strumento p.matricola { margin: 2px 0 0; }

/* badge stato legale */
.badge { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.badge.ok { background: var(--ok-sf); color: var(--ok); }
.badge.ko { background: var(--ko-sf); color: var(--ko); }
.badge.attenzione { background: var(--att-sf); color: var(--att); }
.badge.neutro { background: var(--sfondo); color: var(--testo-2); border: 1px solid var(--bordo); }

/* scheda strumento */
.intestazione-strumento { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.stato-legale { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 12px; }
.stato-legale .badge { font-size: 15px; padding: 6px 14px; }
.scheda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 16px 18px; margin-top: 14px; }
.scheda.stretta { max-width: 420px; margin: 40px auto; }
.dati { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; }
.dati dt { color: var(--testo-2); }
.dati dd { margin: 0; font-weight: 500; }
.da-fare { color: var(--att); font-weight: 600; }
.note-strumento { background: var(--att-sf); border: 1px solid #f0dcae; border-radius: var(--raggio); padding: 10px 14px; margin-top: 12px; }
.note-strumento p { margin: 4px 0 0; }
.tabella { width: 100%; border-collapse: collapse; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--bordo); }
.tabella th { background: var(--sfondo); font-size: 13px; color: var(--testo-2); border-top: 0; }
.tabella tr.scaduta td { background: var(--ko-sf); }
.conteggio-dismessi { font-size: 14px; font-weight: 500; margin-left: 6px; }
.sezione-dismessi { margin-top: 24px; }
.sezione-dismessi summary { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
.sezione-dismessi summary::-webkit-details-marker { display: none; }
.sezione-dismessi summary::before { content: '▸'; color: var(--testo-2); font-size: 18px; transition: transform .15s; }
.sezione-dismessi[open] summary::before { transform: rotate(90deg); }
.sezione-dismessi summary h2 { margin: 0; }
.sezione-dismessi[open] summary .nota { display: none; }
.elenco.spento .riga { opacity: .7; }
.storico { margin: 0; padding-left: 20px; }

/* da inserire */
.schede { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.schede a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px;
  border: 1px solid var(--bordo); background: var(--bianco); text-decoration: none; color: var(--testo); font-weight: 600; }
.schede a.attiva { background: var(--blu); border-color: var(--blu); color: var(--bianco); }
.schede a.attiva .conteggio { background: var(--blu-scuro); color: var(--bianco); border-color: transparent; }
.gruppo-nome { font-size: 16px; margin: 18px 0 6px; }
.riga-inserisci { grid-template-columns: 1fr; }
.riga-inserisci .riga-titolo a { color: var(--testo); text-decoration: none; }
.riga-inserisci .inserisci { grid-column: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-top: 6px; }
.riga-inserisci .inserisci label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--testo-2); }
.riga-inserisci input[type=date] { min-height: 44px; padding: 0 10px; font: inherit; font-size: 16px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--bianco); }
.riga-inserisci .anteprima { align-self: center; }
.riga-inserisci .bottone.piccolo { min-height: 44px; }
.riga-inserisci.salvata { background: var(--ok-sf); }
.riga-inserisci:hover { background: inherit; }
.stato-legale .bottone { min-height: 38px; }
input[type=date] { font: inherit; }
.storico li { margin: 4px 0; }

/* avvisi e moduli */
.avviso { padding: 12px 14px; border-radius: var(--raggio); margin: 12px 0; }
.avviso.ko { background: var(--ko-sf); color: var(--ko); }
.modulo { display: flex; flex-direction: column; gap: 14px; }
.modulo label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--testo-2); }

/* titoli con pulsanti */
.titolo-azioni { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.titolo-azioni h1, .titolo-azioni h2 { margin-right: auto; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.avviso.info { background: var(--blu-chiaro); color: var(--blu-scuro); }

/* moduli di inserimento e modifica */
.modulo.scheda { gap: 16px; padding: 20px; }
.modulo h2 { margin: 12px 0 0; color: var(--testo); }
.modulo label { color: var(--testo); }
.obbl { color: var(--ko); }
.aiuto { font-weight: 400; font-size: 13px; color: var(--testo-2); }
.modulo select, .modulo textarea, input[type=number], input[type=tel] {
  width: 100%; min-height: 48px; padding: 0 12px; font: inherit; font-size: 17px; color: var(--testo);
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.modulo textarea { padding: 10px 12px; min-height: 90px; resize: vertical; }
.modulo select:focus, .modulo textarea:focus { outline: 3px solid var(--blu-chiaro); border-color: var(--blu); }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quattro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sino, .campo-pesatura { border: 1px solid var(--bordo); border-radius: var(--raggio); margin: 0; padding: 10px 14px 14px; }
.sino legend, .campo-pesatura legend { font-weight: 600; font-size: 14px; padding: 0 6px; display: flex; align-items: center; gap: 10px; }
.sino { display: flex; gap: 24px; }
.modulo label.opzione { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; font-weight: 500; }
.opzione input { width: 24px; height: 24px; margin: 0; }
.campo-pesatura { display: flex; flex-direction: column; gap: 12px; }
.campo-pesatura > label { max-width: 160px; }
#campi { display: flex; flex-direction: column; gap: 12px; }
.piede-modulo { justify-content: flex-end; border-top: 1px solid var(--bordo); padding-top: 16px; }
.piede-modulo .bottone { min-width: 140px; }
.bottone:disabled { opacity: .6; cursor: wait; }
.modulo label[hidden] { display: none; }
.scelta-classe { display: flex; flex-direction: column; gap: 10px; }
.menu-categorie select { width: 100%; }
.menu-categorie label[hidden] { display: none; }
.menu-categorie.in-barra { display: contents; }
.bottone.pericolo { background: var(--bianco); color: var(--ko); border: 1px solid var(--ko); }
.bottone.pericolo:hover { background: var(--ko-sf); }
.zona-elimina { margin-top: 28px; border-color: #f3c4bf; }
.zona-elimina h2 { margin-top: 0; color: var(--ko); }

/* categorie */
.riga.categoria.liv-1 { padding-left: 40px; }
.riga.categoria.liv-2 { padding-left: 64px; }
.riga.categoria.liv-3 { padding-left: 88px; }

/* strumenti da completare */
.filtri-completare { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtri-completare .filtro { flex: 1 1 260px; }
.filtri-completare select, .barra-applica select {
  min-height: 48px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--testo);
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
#gruppi { display: flex; flex-direction: column; gap: 18px; margin: 12px 0 140px; }
.gruppo[hidden] { display: none; }
.gruppo-testa { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 6px; cursor: pointer; }
.gruppo-testa input, .riga.selezionabile input { width: 24px; height: 24px; margin: 0; }
.riga.selezionabile { grid-template-columns: auto 1fr auto; cursor: pointer; }
.riga.selezionabile > input { grid-row: 1 / span 2; align-self: center; }
.riga.selezionabile .riga-titolo, .riga.selezionabile .riga-info { grid-column: 2; }
.riga.selezionabile .riga-badge { grid-column: 3; font-size: 13px; color: var(--testo-2); }
.riga.selezionabile:has(input:checked) { background: var(--blu-chiaro); }
.barra-applica {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); margin: 0 -16px;
  background: var(--bianco); border-top: 2px solid var(--blu); box-shadow: 0 -4px 14px rgba(0,0,0,.08);
}
.barra-applica label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--testo-2); }
.barra-applica .selezionati { align-self: center; margin-right: auto; }

@media (max-width: 600px) {
  .riga.selezionabile { grid-template-columns: auto 1fr; }
  .riga.selezionabile .riga-badge { grid-column: 2; grid-row: auto; }
  .barra-applica { gap: 6px 8px; padding-top: 8px; }
  .barra-applica .selezionati { flex: 1 1 100%; font-size: 14px; }
  .barra-applica label { flex: 1 1 0; min-width: 0; font-size: 11px; }
  .barra-applica select { min-height: 40px; font-size: 14px; padding: 0 4px; width: 100%; }
  .barra-applica .bottone { flex: 1 1 100%; min-height: 44px; }
  .due { grid-template-columns: 1fr; }
  .quattro { grid-template-columns: 1fr 1fr; }
  .piede-modulo .bottone { flex: 1; }

  h1 { font-size: 22px; }
  .dati { grid-template-columns: 1fr; gap: 2px; }
  .dati dd { margin-bottom: 8px; }
  .utente { display: none; }
  .tabella th, .tabella td { padding: 8px; font-size: 14px; }
}