/* Foglio di stile unico: nessuna dipendenza esterna, la CSP non ammette risorse di terzi. */
:root {
  --testo: #1b1f24;
  --tenue: #5b6570;
  --bordo: #d8dee4;
  --sfondo: #ffffff;
  --fondo: #f6f8fa;
  --accento: #0b5cad;
  --accento-chiaro: #e8f1fb;
  --ok: #1a7f37;
  --ok-fondo: #e9f6ec;
  --errore: #b42318;
  --errore-fondo: #fdeceb;
  --nota: #9a6700;
  --nota-fondo: #fdf6e3;
  --raggio: 6px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo);
  background: var(--fondo);
}
a { color: var(--accento); }

/* ---------------------------------------------------------------- testata */
.testata {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .6rem 1.25rem; background: var(--sfondo); border-bottom: 1px solid var(--bordo);
}
.marchio a { font-weight: 700; letter-spacing: .03em; text-decoration: none; color: var(--testo); }
.marchio span { color: var(--tenue); font-size: .85em; margin-left: .5rem; }
.testata nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.testata nav a {
  padding: .35rem .7rem; border-radius: var(--raggio); text-decoration: none; color: var(--tenue);
}
.testata nav a:hover { background: var(--fondo); color: var(--testo); }
.testata nav a.attiva { background: var(--accento-chiaro); color: var(--accento); font-weight: 600; }
.utente { display: flex; align-items: center; gap: .6rem; font-size: .9em; }
.utente .ruolo {
  font-size: .78em; text-transform: uppercase; letter-spacing: .04em;
  background: var(--fondo); border: 1px solid var(--bordo); border-radius: 999px; padding: .1rem .5rem; color: var(--tenue);
}

main.con-testata { max-width: 1180px; margin: 1.5rem auto; padding: 0 1.25rem; }
main.senza-testata { max-width: 25rem; margin: 4rem auto; padding: 0 1.25rem; }
.pie { text-align: center; color: var(--tenue); font-size: .82em; padding: 2rem 1rem 3rem; }

/* -------------------------------------------------------------- riquadri */
h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
.sottotitolo { color: var(--tenue); margin: 0 0 1.5rem; }
.riquadro {
  background: var(--sfondo); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.riquadro > h2:first-child { margin-top: 0; }
.griglia { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dato { background: var(--sfondo); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .9rem 1rem; }
.dato .valore { font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.dato .etichetta { color: var(--tenue); font-size: .85em; margin-top: .2rem; }

/* --------------------------------------------------------------- tabelle */
table { width: 100%; border-collapse: collapse; font-size: .92em; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { font-weight: 600; color: var(--tenue); font-size: .85em; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: var(--fondo); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella-scorrevole { overflow-x: auto; }
.vuoto { color: var(--tenue); padding: 1.5rem 0; text-align: center; }

/* ------------------------------------------------------------------ form */
form .campo { margin-bottom: .9rem; }
label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .9em; }
.aiuto { color: var(--tenue); font-size: .85em; margin-top: .2rem; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time],
input[type=number], input[type=month], select, textarea {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio);
  font: inherit; background: var(--sfondo); color: var(--testo);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accento); outline-offset: -1px; border-color: var(--accento); }
textarea { min-height: 8rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; }
.campi-affiancati { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.spunta { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.spunta input { margin-top: .25rem; }
.spunta label { font-weight: 400; margin: 0; }

button, .bottone {
  display: inline-block; padding: .45rem 1rem; border-radius: var(--raggio); border: 1px solid var(--accento);
  background: var(--accento); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button:hover, .bottone:hover { filter: brightness(1.08); }
.bottone-tenue, button.tenue {
  background: var(--sfondo); color: var(--testo); border-color: var(--bordo);
}
.bottone-pericolo, button.pericolo { background: var(--sfondo); color: var(--errore); border-color: var(--errore); }
.azioni { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.barra-filtri { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.barra-filtri .campo { margin: 0; }
.intestazione-pagina { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- avvisi */
.avviso { padding: .7rem 1rem; border-radius: var(--raggio); margin-bottom: 1rem; border: 1px solid; }
.avviso-ok { background: var(--ok-fondo); border-color: #b7dfc2; color: var(--ok); }
.avviso-errore { background: var(--errore-fondo); border-color: #f3c0bd; color: var(--errore); }
.avviso-nota { background: var(--nota-fondo); border-color: #eddc9e; color: var(--nota); }

.etichetta {
  display: inline-block; font-size: .78em; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--fondo); color: var(--tenue); white-space: nowrap;
}
.etichetta-assenza { background: var(--nota-fondo); border-color: #eddc9e; color: var(--nota); }
.etichetta-presenza { background: var(--ok-fondo); border-color: #b7dfc2; color: var(--ok); }
.etichetta-attenzione { background: var(--errore-fondo); border-color: #f3c0bd; color: var(--errore); }

pre.tracciato {
  background: #0f1720; color: #d6e2ee; padding: .9rem 1rem; border-radius: var(--raggio);
  overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8em; line-height: 1.45; white-space: pre; margin: 0;
}
.elenco-diagnostica { margin: 0; padding-left: 1.2rem; font-size: .9em; }
.elenco-diagnostica li { margin-bottom: .3rem; }
.riga-numero { color: var(--tenue); font-variant-numeric: tabular-nums; }

.paginazione { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.25rem; font-size: .9em; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }
.tenue { color: var(--tenue); }

@media (prefers-color-scheme: dark) {
  :root {
    --testo: #e6edf3; --tenue: #8b949e; --bordo: #30363d; --sfondo: #161b22; --fondo: #0d1117;
    --accento: #58a6ff; --accento-chiaro: #10233c;
    --ok: #56d364; --ok-fondo: #12261a; --errore: #ff7b72; --errore-fondo: #2b1416;
    --nota: #e3b341; --nota-fondo: #2a2013;
  }
}