:root { --blu:#1f4e79; --blu-chiaro:#e8f0f8; --bordo:#d6dbe1; --testo:#1d232a; --grigio:#6b7480;
        --rosso:#b3261e; --rosso-bg:#fbebeb; --giallo:#8a5a00; --giallo-bg:#fdf3dc; --verde:#1e6b34; --verde-bg:#e5f4e4; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--testo); background:#f5f7f9; }
a { color:var(--blu); }
header { background:var(--blu); color:#fff; display:flex; align-items:center; gap:24px; padding:0 20px; height:52px; }
header .marchio { font-weight:700; letter-spacing:.5px; }
header nav a { color:#fff; text-decoration:none; margin-right:16px; opacity:.85; }
header nav a.attivo, header nav a:hover { opacity:1; text-decoration:underline; }
header .utente { margin-left:auto; display:flex; gap:12px; align-items:center; }
header select { padding:4px; }
header button.link { background:none; border:0; color:#fff; cursor:pointer; text-decoration:underline; font:inherit; }
main { padding:20px; max-width:1400px; margin:0 auto; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:16px; margin:24px 0 8px; }
.messaggi div { padding:10px 14px; border-radius:6px; margin-bottom:12px; background:var(--blu-chiaro); }
.messaggi .error { background:var(--rosso-bg); color:var(--rosso); } .messaggi .success { background:var(--verde-bg); color:var(--verde); }
.schede { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:16px; }
.scheda { background:#fff; border:1px solid var(--bordo); border-radius:8px; padding:14px; }
.scheda .etichetta { color:var(--grigio); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.scheda .valore { font-size:22px; font-weight:600; margin-top:4px; }
.scheda .valore.rosso { color:var(--rosso); }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--bordo); }
th, td { padding:7px 9px; border-bottom:1px solid var(--bordo); text-align:left; vertical-align:top; }
th { background:#eef2f6; font-weight:600; font-size:12px; white-space:nowrap; }
td.num, th.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
tr:hover td { background:#f8fafc; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; white-space:nowrap; }
.badge.rosso { background:var(--rosso-bg); color:var(--rosso); } .badge.giallo { background:var(--giallo-bg); color:var(--giallo); }
.badge.verde { background:var(--verde-bg); color:var(--verde); } .badge.grigio { background:#eceff2; color:var(--grigio); }
.avviso { color:var(--giallo); } 
form.filtri { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:#fff; border:1px solid var(--bordo); padding:12px; border-radius:8px; margin-bottom:12px; }
form.filtri label { display:block; font-size:12px; color:var(--grigio); }
input, select, textarea { font:inherit; padding:5px 7px; border:1px solid var(--bordo); border-radius:4px; background:#fff; }
.btn { display:inline-block; background:var(--blu); color:#fff; border:0; border-radius:5px; padding:7px 14px; cursor:pointer; text-decoration:none; font:inherit; }
.btn.secondario { background:#fff; color:var(--blu); border:1px solid var(--blu); }
.azioni { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; align-items:center; }
.griglia { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:4px 24px; background:#fff; border:1px solid var(--bordo); border-radius:8px; padding:14px; }
.griglia div span { color:var(--grigio); font-size:12px; display:block; }
.modulo p { margin:0 0 10px; } .modulo label { display:block; font-size:12px; color:var(--grigio); }
.anomalie { background:var(--giallo-bg); border:1px solid #f0d9a6; border-radius:8px; padding:10px 14px; margin:12px 0; }
.paginazione { margin:12px 0; display:flex; gap:12px; align-items:center; }
.accesso { max-width:360px; margin:80px auto; background:#fff; border:1px solid var(--bordo); border-radius:10px; padding:28px; }
.accesso input { width:100%; margin-bottom:12px; }
.piccolo { font-size:12px; color:var(--grigio); }
@media (max-width:800px) { header { flex-wrap:wrap; height:auto; padding:8px 12px; } main { padding:12px; } .tabella-scroll { overflow-x:auto; } }