:root {
  --nml-verde: #2e7d32;
  --nml-verde-scuro: #1b5e20;
  --nml-giallo: #f9a825;
  --nml-rosso: #c62828;
  --nml-bg: #f4f6f4;
  --nml-testo: #1c1c1c;
  --nml-bordo: #dcdfdc;
  --nml-sidebar: #1f2b1f;
  --nml-sidebar-testo: #e7ede7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--nml-bg);
  color: var(--nml-testo);
}

a { color: var(--nml-verde-scuro); }

.nml-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
}

.nml-topbar {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--nml-bordo);
}

.nml-topbar .nml-logo { font-weight: 700; color: var(--nml-verde-scuro); }
.nml-topbar .nml-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.nml-topbar button { cursor: pointer; }

.nml-sidebar {
  background: var(--nml-sidebar);
  color: var(--nml-sidebar-testo);
  padding: 16px 0;
}

.nml-sidebar nav a {
  display: block;
  padding: 10px 20px;
  color: var(--nml-sidebar-testo);
  text-decoration: none;
  font-size: 14px;
}

.nml-sidebar nav a:hover,
.nml-sidebar nav a.attivo {
  background: rgba(255,255,255,0.08);
  border-left: 3px solid var(--nml-verde);
}

.nml-content { padding: 24px; overflow-x: auto; }

.nml-card {
  background: #fff;
  border: 1px solid var(--nml-bordo);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.nml-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; }
.nml-kpi { flex: 1 1 160px; text-align: center; }
.nml-kpi .valore { font-size: 28px; font-weight: 700; }
.nml-kpi .etichetta { font-size: 13px; color: #555; }

table.nml-tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
table.nml-tabella th, table.nml-tabella td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--nml-bordo);
}
table.nml-tabella th { background: #fafafa; }

.nml-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
.nml-badge.ok, .nml-badge.attivo, .nml-badge.conforme, .nml-badge.verde { background: #e6f4ea; color: var(--nml-verde-scuro); }
.nml-badge.attenzione, .nml-badge.giallo, .nml-badge.sospeso { background: #fff3e0; color: #e65100; }
.nml-badge.errore, .nml-badge.rosso, .nml-badge.non_conforme, .nml-badge.bloccato { background: #fdecea; color: var(--nml-rosso); }

.nml-form label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.nml-form input, .nml-form select, .nml-form textarea {
  width: 100%; padding: 8px; border: 1px solid var(--nml-bordo); border-radius: 6px; font-size: 14px;
}
.nml-form .riga { display: flex; gap: 12px; }
.nml-form .riga > * { flex: 1; }
.nml-form fieldset { border: none; padding: 0; margin: 0 0 16px; }
.nml-form fieldset p.nml-muted { margin: 14px 0 4px; }

.nml-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  background: var(--nml-verde);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
}
.nml-btn:hover { background: var(--nml-verde-scuro); }
.nml-btn.secondario { background: #eee; color: #333; }
.nml-btn.pericolo { background: var(--nml-rosso); }

.nml-alert { padding: 10px 14px; border-radius: 6px; margin: 10px 0; font-size: 14px; }
.nml-alert.errore { background: #fdecea; color: var(--nml-rosso); border: 1px solid #f5c6cb; }
.nml-alert.successo { background: #e6f4ea; color: var(--nml-verde-scuro); border: 1px solid #c3e6cb; }
.nml-alert.avviso { background: #fff8e1; color: #8a6d00; border: 1px solid #ffe082; }

.nml-banner-supporto {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.nml-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--nml-verde-scuro), var(--nml-verde));
}
.nml-login-box {
  background: #fff;
  padding: 32px;
  border-radius: 10px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.nml-login-box h1 { font-size: 20px; margin-top: 0; color: var(--nml-verde-scuro); }

.nml-check-list label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 8px 0; }
.nml-muted { color: #777; font-size: 13px; }
.nml-drill { cursor: pointer; }
.nml-drill:hover { text-decoration: underline; }