:root {
  --sfondo: #f4f5f2;
  --carta: #ffffff;
  --testo: #1d2421;
  --tenue: #5f6b66;
  --bordo: #dde1dc;
  --primario: #1f5c4a;
  --primario-chiaro: #e3efe9;
  --ok: #2c7a4b;   --ok-sf: #e2f3e8;
  --warn: #8a5a00; --warn-sf: #fdf0d5;
  --ko: #a32a1f;   --ko-sf: #fbe3e0;
  --raggio: 8px;
  font-size: 15px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45;
}
body.attesa { cursor: progress; }
a { color: var(--primario); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
.caricamento { padding: 3rem; text-align: center; color: var(--tenue); }

/* intestazione */
header.top {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--primario); color: #fff; padding: .7rem 1.25rem;
}
header.top .brand { font-weight: 700; letter-spacing: .02em; }
header.top nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
header.top nav a { color: #e6f0ec; text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
header.top nav a:hover, header.top nav a.attivo { background: rgba(255,255,255,.16); color: #fff; }
header.top .utente { font-size: .9rem; display: flex; gap: .6rem; align-items: center; }
header.top .utente button { color: #fff; }
main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

/* schede azienda */
nav.schede { display: flex; gap: .25rem; border-bottom: 1px solid var(--bordo); margin-bottom: 1.2rem; flex-wrap: wrap; }
nav.schede a { padding: .5rem .9rem; text-decoration: none; color: var(--tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.schede a.attivo { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }

/* tabelle */
.tabella { overflow-x: auto; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); background: #fafbf9; }
tr:last-child td { border-bottom: none; }
tr.sezione td { background: var(--primario-chiaro); font-weight: 600; }
td.azioni { white-space: nowrap; text-align: right; }
td.num { color: var(--tenue); width: 2.5rem; }
.rif { font-size: .82rem; color: var(--tenue); }
.nota { font-size: .85rem; font-style: italic; color: var(--tenue); }
.vuoto { color: var(--tenue); background: var(--carta); border: 1px dashed var(--bordo); border-radius: var(--raggio); padding: 1rem; }

/* badge */
.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .12rem .5rem; border-radius: 99px; background: #eceeea; color: var(--tenue); white-space: nowrap; }
.badge.ok { background: var(--ok-sf); color: var(--ok); }
.badge.warn { background: var(--warn-sf); color: var(--warn); }
.badge.ko { background: var(--ko-sf); color: var(--ko); }

/* indicatori */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.kpi div { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .9rem 1rem; }
.kpi b { display: block; font-size: 1.8rem; line-height: 1.1; }
.kpi span { color: var(--tenue); font-size: .88rem; }
.kpi .ko b { color: var(--ko); } .kpi .warn b { color: var(--warn); }

/* moduli */
details.box, .box { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .8rem 1rem; margin: .8rem 0; }
details.box summary { cursor: pointer; font-weight: 600; color: var(--primario); }
details.box[open] summary { margin-bottom: .8rem; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem 1rem; align-items: end; }
.griglia .intero { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--tenue); }
input, select, textarea {
  font: inherit; color: var(--testo); padding: .45rem .55rem; border: 1px solid var(--bordo);
  border-radius: 6px; background: #fff; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario-chiaro); border-color: var(--primario); }
button {
  font: inherit; cursor: pointer; border: 1px solid var(--primario); background: var(--primario);
  color: #fff; padding: .45rem .9rem; border-radius: 6px;
}
button:disabled { opacity: .55; cursor: wait; }
button.secondario { background: #fff; color: var(--primario); }
button.link { background: none; border: none; color: var(--primario); padding: .2rem .4rem; text-decoration: underline; }
button.link.ko { color: var(--ko); }
td.azioni button { margin-left: .3rem; padding: .25rem .6rem; font-size: .85rem; }
.barra { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.spiega { font-size: .9rem; color: var(--tenue); background: var(--primario-chiaro); border-radius: var(--raggio); padding: .7rem 1rem; }
.spiega ol { margin: .3rem 0 0; padding-left: 1.2rem; }

/* verifica */
table.verifica select { min-width: 5rem; }
table.verifica textarea { min-width: 12rem; }
table.verifica input[type=date] { margin-top: .3rem; }
.legenda { font-size: .85rem; color: var(--tenue); }
.esiti { display: flex; flex-direction: column; gap: .3rem; min-width: 9.5rem; }
label.esito {
  flex-direction: row; align-items: center; gap: .45rem; cursor: pointer; color: var(--testo);
  font-size: .88rem; padding: .25rem .5rem; border: 1px solid var(--bordo); border-radius: 6px; background: #fff;
}
label.esito input { width: auto; margin: 0; accent-color: var(--primario); }
label.esito.ok:has(input:checked) { background: var(--ok-sf); border-color: var(--ok); color: var(--ok); font-weight: 600; }
label.esito.ko:has(input:checked) { background: var(--ko-sf); border-color: var(--ko); color: var(--ko); font-weight: 600; }
label.esito:not(.ok):not(.ko):has(input:checked) { background: #eceeea; border-color: var(--tenue); font-weight: 600; }
tr.in-modifica td { background: var(--warn-sf); }
/* finestra di scelta */
.finestra-sfondo { position: fixed; inset: 0; background: rgba(20, 28, 25, .45); display: grid; place-items: center; padding: 1rem; z-index: 20; }
.finestra { background: var(--carta); border-radius: 12px; padding: 1.4rem 1.5rem; width: 100%; max-width: 520px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.finestra h2 { margin-top: 0; }
.finestra .attenzione { background: var(--ko-sf); color: var(--ko); border: 1px solid var(--ko); border-radius: var(--raggio); padding: .6rem .8rem; }
.finestra-pulsanti { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; }
button.pericolo { background: var(--ko); border-color: var(--ko); color: #fff; }
.barra label.filtro { flex-direction: row; align-items: center; gap: .4rem; color: var(--testo); }
.barra label.filtro select { width: auto; max-width: 260px; }
.badge.tipo-auto { background: var(--primario-chiaro); color: var(--primario); }
.elenco-spunte { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .35rem .9rem; margin: .5rem 0; }
label.spunta { flex-direction: row; align-items: center; gap: .45rem; color: var(--testo); font-size: .92rem; cursor: pointer; }
label.spunta input { width: auto; margin: 0; accent-color: var(--primario); }
/* campo scadenza: rosso tenue se superata, giallo tenue se entro 30 giorni */
td.cella-scaduta { background: #fbe3e0; }
td.cella-in-scadenza { background: #fdf3cf; }
.campione { padding: 0 .35rem; border-radius: 4px; }
.campione.cella-scaduta { background: #fbe3e0; }
.campione.cella-in-scadenza { background: #fdf3cf; }
@media print { td.cella-scaduta, td.cella-in-scadenza { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.campo-indirizzo { display: flex; gap: .5rem; align-items: flex-end; }
.campo-indirizzo label { flex: 1; min-width: 0; }
.campo-indirizzo button { white-space: nowrap; }

/* accesso */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.accesso .scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 2rem; width: 100%; max-width: 380px; }
.accesso form { display: grid; gap: .8rem; margin-top: 1rem; }
.accesso h1 { color: var(--primario); }

/* avvisi */
#avvisi { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 10; max-width: 380px; }
.avviso { padding: .7rem 1rem; border-radius: var(--raggio); background: var(--ok-sf); color: var(--ok); border: 1px solid currentColor; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.avviso.ko { background: var(--ko-sf); color: var(--ko); }

.solo-stampa { display: none; }
@media print {
  body { background: #fff; font-size: 11pt; }
  header.top, nav.schede, button, details, .no-stampa, #avvisi { display: none !important; }
  .solo-stampa { display: block; }
  main { padding: 0; max-width: none; }
  .tabella { border: none; }
  textarea, select, input { border: none; padding: 0; }
  tr { page-break-inside: avoid; }
}
@media (max-width: 640px) {
  header.top { gap: .6rem; }
  main { padding: 1rem .75rem 3rem; }
}
/* filtri nella riga delle intestazioni del catalogo */
table.filtrabile th { vertical-align: top; }
table.filtrabile th select, table.filtrabile th input {
  display: block; margin-top: .35rem; min-width: 7rem; font-size: .85rem; padding: .25rem .4rem;
  text-transform: none; letter-spacing: normal; font-weight: normal; color: var(--testo);
}
table.filtrabile th.azioni { text-transform: none; letter-spacing: normal; }
table.filtrabile th.azioni .rif { display: block; margin-bottom: .3rem; }
/* finestra con modulo */
.finestra.larga { max-width: 720px; max-height: 92vh; overflow-y: auto; }

/* intestazioni ordinabili */
table.ordinabile th button.ordina { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
table.ordinabile th button.ordina:hover, table.ordinabile th button.ordina:focus-visible { color: var(--primario); text-decoration: underline; }
table.ordinabile th button.ordina:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
table.ordinabile th .freccia::after { content: "↕"; opacity: .35; }
table.ordinabile th[aria-sort="ascending"] .freccia::after { content: "▲"; opacity: 1; }
table.ordinabile th[aria-sort="descending"] .freccia::after { content: "▼"; opacity: 1; }
table.ordinabile th[aria-sort="ascending"], table.ordinabile th[aria-sort="descending"] { color: var(--primario); }

/* tempo impiegato e costo */
.tempo { display: flex; align-items: center; gap: .35rem; }
.tempo input { width: 5.5rem; }
#totaliDoc { margin-left: auto; }

/* file scelti prima del caricamento, file allegato in Modifica */
ul.file-scelti { list-style: none; margin: 0; padding: 0; }
ul.file-scelti:empty { display: none; }
ul.file-scelti li, .file-attuale { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .4rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fafbf9; margin-bottom: .35rem; }
.file-attuale label.spunta { flex-direction: row; align-items: center; gap: .4rem; color: var(--ko, #b42318); }
.file-attuale label.spunta input { width: auto; }
.nota { white-space: pre-line; }