:root {
  --sfondo: #f4f5f2;
  --carta: #ffffff;
  --testo: #1d2421;
  --tenue: #5e6863;
  --bordo: #dfe3de;
  --accento: #1f5f4a;
  --accento-chiaro: #e3efe9;
  --ok: #2f7d4f;       --ok-bg: #e4f3e9;
  --info: #2b5c8a;     --info-bg: #e5eef7;
  --attenzione: #9a6a00; --attenzione-bg: #fbf1d9;
  --allarme: #a8322a;  --allarme-bg: #f9e4e2;
  --prova: #b35c00;
  --raggio: 8px;
  --ombra: 0 1px 2px rgba(20, 30, 25, .06), 0 2px 8px rgba(20, 30, 25, .04);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--testo);
  background: var(--sfondo);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: var(--accento); }
h1 { font-size: 1.55rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.tenue { color: var(--tenue); }
.piccolo { font-size: .85rem; }

/* Fascia area di prova */
.fascia-prova {
  background: repeating-linear-gradient(45deg, var(--prova), var(--prova) 14px, #c26a0c 14px, #c26a0c 28px);
  color: #fff; text-align: center; font-weight: 700; letter-spacing: .08em;
  padding: .35rem; font-size: .85rem;
}

/* Struttura */
.struttura { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.menu { background: #17322a; color: #d7e4de; padding: 1.25rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.menu .marchio { color: #fff; font-weight: 700; font-size: 1.1rem; margin: 0 .5rem 1.25rem; }
.menu a { color: #d7e4de; text-decoration: none; padding: .55rem .6rem; border-radius: 6px; }
.menu a:hover { background: rgba(255,255,255,.07); }
.menu a.attivo { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; }
.menu .spazio { flex: 1; }
.menu .utente { font-size: .85rem; padding: .5rem .6rem; color: #a9bdb4; }
.menu form button { background: none; border: 0; color: #d7e4de; padding: .55rem .6rem; cursor: pointer; font: inherit; text-align: left; width: 100%; border-radius: 6px; }
.menu form button:hover { background: rgba(255,255,255,.07); }
.contenuto { padding: 1.75rem 2rem 3rem; max-width: 1200px; width: 100%; }

.intestazione { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

/* Riquadri */
.riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.griglia { display: grid; gap: 1rem; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.numero { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.1rem; box-shadow: var(--ombra); text-decoration: none; color: inherit; border-left: 4px solid var(--bordo); display: block; }
.numero:hover { border-color: var(--accento); }
.numero .valore { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero .etichetta { color: var(--tenue); font-size: .9rem; }
.numero.assegnato { border-left-color: var(--ok); }
.numero.preassegnato { border-left-color: var(--info); }
.numero.scoperto { border-left-color: var(--allarme); }
.numero.approntamento { border-left-color: var(--attenzione); }

/* Etichette di stato */
.stato { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.stato.assegnato { background: var(--ok-bg); color: var(--ok); }
.stato.preassegnato { background: var(--info-bg); color: var(--info); }
.stato.scoperto { background: var(--allarme-bg); color: var(--allarme); }
.stato.approntamento { background: var(--attenzione-bg); color: var(--attenzione); }
.stato.neutro { background: #eef0ed; color: var(--tenue); }

/* Tabelle */
.tabella-scorri { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 600; padding: .55rem .6rem; border-bottom: 1px solid var(--bordo); }
td { padding: .6rem; border-bottom: 1px solid #eef0ed; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbf9; }
td.numerico, th.numerico { text-align: right; font-variant-numeric: tabular-nums; }
.vuoto { color: var(--tenue); padding: 1rem .6rem; }

/* Dati in scheda */
dl.dati { display: grid; grid-template-columns: minmax(100px, 40%) 1fr; gap: .45rem 1rem; margin: 0; }
dl.dati dt { color: var(--tenue); }
dl.dati dd { margin: 0; }
.scaduto { color: var(--allarme); font-weight: 600; }

/* Pulsanti */
.pulsante { display: inline-block; background: var(--accento); color: #fff; border: 1px solid var(--accento); padding: .5rem .95rem; border-radius: 6px; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.pulsante:hover { filter: brightness(1.1); }
.pulsante.secondario { background: var(--carta); color: var(--accento); border-color: var(--bordo); }
.pulsante.piccolo { padding: .3rem .65rem; font-size: .85rem; }
.azioni { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Filtri e moduli */
.filtri { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filtri label { display: flex; flex-direction: column; font-size: .8rem; color: var(--tenue); gap: .2rem; }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid #c9cfc9; border-radius: 6px; background: #fff; color: var(--testo); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accento-chiaro); border-color: var(--accento); }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
legend { font-weight: 700; font-size: 1.02rem; margin-bottom: .8rem; float: left; width: 100%; padding: 0; }
legend + * { clear: both; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .25rem; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo .aiuto { font-size: .8rem; color: var(--tenue); }
.campo .errore, .errori { color: var(--allarme); font-size: .85rem; }
.campo.casella { flex-direction: row; align-items: center; gap: .5rem; }
.errori ul { margin: 0; padding-left: 1.1rem; }

/* Messaggi */
.messaggio { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; background: var(--ok-bg); color: var(--ok); }
.messaggio.error { background: var(--allarme-bg); color: var(--allarme); }

/* Accesso */
.pagina-accesso { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.scheda-accesso { width: 100%; max-width: 380px; }
.scheda-accesso .campo { margin-bottom: .9rem; }
.scheda-accesso input { width: 100%; }

@media (max-width: 800px) {
  .struttura { grid-template-columns: 1fr; }
  .menu { flex-direction: row; flex-wrap: wrap; padding: .6rem; align-items: center; }
  .menu .marchio { margin: 0 .6rem 0 .3rem; }
  .menu .spazio, .menu .utente { display: none; }
  .contenuto { padding: 1.1rem 1rem 2rem; }
  dl.dati { grid-template-columns: 1fr; gap: .1rem; }
  dl.dati dd { margin-bottom: .5rem; }
}