:root{
  --green:#2c5f2d; --green-d:#1e401f; --accent:#97bc62;
  --bg:#f4f6f4; --card:#fff; --line:#e0e4e0; --text:#22302a; --muted:#6b7770;
  --red:#c62828; --amber:#f9a825; --blue:#0277bd; --purple:#8e24aa;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;align-items:center;gap:1rem;background:var(--green);color:#fff;
  padding:.6rem 1rem;position:sticky;top:0;z-index:50}
.topbar .brand{font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.brand-logo{height:36px;width:auto;display:block;background:#fff;border-radius:6px;padding:2px 6px}
.topbar .user-box{margin-left:auto;display:flex;align-items:center;gap:.8rem;font-size:.85rem}
.role-badge{background:rgba(255,255,255,.2);padding:.1rem .5rem;border-radius:1rem;font-size:.75rem}
.btn-logout{background:rgba(255,255,255,.15);color:#fff;padding:.3rem .7rem;border-radius:5px}
.hamburger{display:none;background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer}

/* Layout */
.wrap{display:flex;min-height:calc(100vh - 52px)}
.sidebar{width:210px;background:var(--card);border-right:1px solid var(--line);padding:.8rem 0;flex-shrink:0}
.sidebar a{display:block;padding:.6rem 1.2rem;color:var(--text);border-left:3px solid transparent}
.sidebar a:hover{background:var(--bg);text-decoration:none}
.sidebar a.active{border-left-color:var(--green);background:#eef3ec;font-weight:600;color:var(--green-d)}
.content{flex:1;padding:1.4rem;max-width:100%;overflow-x:auto}
.footer{padding:.8rem 1.4rem;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);background:var(--card)}

/* Card */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.2rem;margin-bottom:1.2rem}
.card h2,.card h3{margin-top:0}
h1{font-size:1.5rem;margin:.2rem 0 1rem}

/* KPI dashboard */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.2rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem;border-left:5px solid var(--green)}
.kpi .val{font-size:1.8rem;font-weight:700;line-height:1}
.kpi .lbl{color:var(--muted);font-size:.82rem;margin-top:.3rem}
.kpi.asl{border-left-color:var(--blue)} .kpi.comune{border-left-color:var(--amber)}
.kpi.privato{border-left-color:var(--purple)} .kpi.warn{border-left-color:var(--red)}

/* Tabelle */
table.grid{width:100%;border-collapse:collapse;background:var(--card);font-size:.9rem}
table.grid th,table.grid td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left}
table.grid th{background:#eef3ec;color:var(--green-d);position:sticky;top:0}
table.grid tr:nth-child(even) td{background:#fafbfa}
table.grid td.num,table.grid th.num{text-align:right;white-space:nowrap}
.table-scroll{overflow-x:auto}

/* Form */
form.stack label{display:block;margin-bottom:.8rem;font-size:.85rem;color:var(--muted)}
form.stack input,form.stack select,form.stack textarea{
  display:block;width:100%;padding:.5rem;border:1px solid var(--line);border-radius:6px;font-size:.95rem;color:var(--text);background:#fff;margin-top:.2rem}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 1rem;padding:1rem}
legend{font-weight:600;color:var(--green-d);padding:0 .4rem}

/* Bottoni */
.btn{display:inline-block;background:var(--green);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem}
.btn:hover{background:var(--green-d);text-decoration:none}
.btn.secondary{background:#fff;color:var(--green);border:1px solid var(--green)}
.btn.danger{background:var(--red)}
.btn.small{padding:.3rem .6rem;font-size:.8rem}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}

/* Flash */
.flash{padding:.7rem 1rem;border-radius:6px;margin-bottom:1rem}
.flash-success{background:#e6f4e6;border:1px solid #b6dcb6;color:#1e401f}
.flash-error{background:#fdeaea;border:1px solid #f2b8b8;color:#8a1c1c}
.flash-warn{background:#fff6e0;border:1px solid #f0d68a;color:#7a5b00}

/* Badge stato */
.badge{padding:.15rem .5rem;border-radius:1rem;font-size:.75rem;color:#fff;display:inline-block}
.badge.attivo{background:var(--green)} .badge.sospeso{background:var(--amber)} .badge.dimesso{background:var(--muted)}
.badge.alta{background:var(--red)} .badge.media{background:var(--amber)} .badge.bassa{background:var(--blue)}
.badge.aperto{background:var(--blue)} .badge.validato{background:var(--amber)} .badge.chiuso{background:var(--green)}
.pill{padding:.15rem .45rem;border-radius:4px;font-size:.72rem;font-weight:600;color:#fff}

/* Presenze mensili */
.att-month{border-collapse:collapse;font-size:.72rem}
.att-month th,.att-month td{border:1px solid var(--line);padding:2px;text-align:center;min-width:26px}
.att-month th.name,.att-month td.name{text-align:left;min-width:150px;position:sticky;left:0;background:#eef3ec;z-index:2}
.att-month td.we{background:#f0f0f0}
.att-cell{font-weight:700;color:#fff;border-radius:3px;display:block}

/* Selettori */
.month-selector{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin-bottom:1rem}
.month-selector label{font-size:.8rem;color:var(--muted)}
.month-selector select{padding:.4rem;border:1px solid var(--line);border-radius:6px}

.muted{color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.help{font-size:.8rem;color:var(--muted);margin-top:-.3rem}
.tag-legend{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.8rem;margin:.5rem 0}
.tag-legend span{display:inline-flex;align-items:center;gap:.3rem}
.dot{width:12px;height:12px;border-radius:3px;display:inline-block}

@media (max-width:820px){
  .hamburger{display:block}
  .sidebar{position:fixed;left:-220px;top:52px;bottom:0;transition:left .2s;z-index:40}
  body.nav-open .sidebar{left:0}
  .topbar .user-box span{display:none}
}
