:root {
  --nero: #1c1c1c;
  --pietra: #4a564a;
  --muschio: #6d8b74;
  --pallido: #a3b18a;
  --grigio: #e0e1dd;
  --crema: #f8f5f0;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: var(--crema);
  color: var(--nero);
}
a { color: var(--pietra); }
.login {
  max-width: 420px;
  margin: 6vh auto;
  text-align: center;
  padding: 24px;
}
.login form.login-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  max-width: 320px;
  margin: 12px auto;
}
.login form.login-form label { margin: 8px 0 0; }
.login form.login-form input,
.login form.login-form button { width: 100%; }
.shell { display: flex; min-height: 100vh; }
nav {
  width: 240px;
  background: var(--pietra);
  color: var(--crema);
  padding: 12px 10px;
}
nav a {
  display: block;
  color: var(--crema);
  text-decoration: none;
  padding: 7px 10px 7px 16px;
  border-radius: 6px;
  margin: 2px 0;
  background: #2a2e2a;
}
nav a.sel, nav a:hover { background: var(--pallido); color: var(--nero); }
nav .marca { font-weight: 700; margin: 4px 8px 12px; }
nav .gruppo {
  margin: 12px 4px 4px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pallido);
}
nav a.esci { background: #8b3a3a; margin-top: 18px; text-align: center; }
nav .chi { font-size: 12px; margin: 16px 8px; }
main { flex: 1; padding: 20px 24px; }
.top {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--pietra);
  color: var(--crema);
  padding: 8px 16px;
}
.top img { height: 40px; }
.top span { display: block; font-size: 12px; color: var(--pallido); }
.top-utente { margin-left: auto; font-size: 14px; }
.top a.esci {
  background: #8b3a3a;
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
}
.carte, .griglia-admin { display: grid; gap: 12px; margin-bottom: 16px; }
.carte { grid-template-columns: repeat(4, 1fr); }
.griglia-admin { grid-template-columns: repeat(3, 1fr); }
.carta, a.box {
  background: white;
  border: 1px solid var(--grigio);
  border-radius: 10px;
  padding: 14px;
  text-decoration: none;
  color: var(--nero);
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.35;
}
.carta span { display: block; font-size: 28px; color: var(--pietra); margin-bottom: 4px; }
.carta.errore { background: #8b3a3a; color: white; }
.carta.errore span { color: white; }
h1 { margin-top: 0; }
.griglia { display: grid; grid-template-columns: 180px 1fr; gap: 8px 12px; align-items: center; max-width: 760px; }
.griglia h2, .griglia p { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .carte, .griglia-admin, .griglia { grid-template-columns: 1fr; }
}
.card, form.box, .pila {
  background: white;
  border: 1px solid var(--grigio);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
label { display: block; font-size: 13px; margin: 0; color: var(--pietra); }
input, select, textarea, button {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--pallido);
  border-radius: 6px;
  width: 100%;
}
input[type="checkbox"] { width: auto; }
button, .btn {
  background: var(--muschio);
  color: white;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 120px;
  min-height: 38px;
}
button.tipo.sel { background: var(--pietra); }
.tooltip {
  position: absolute;
  z-index: 5;
  max-width: 320px;
  background: var(--nero);
  color: var(--crema);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}
form.box, form.filtri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}
form.box h2, form.box p, form.filtri p, .campo-largo, form.box .campo-largo {
  grid-column: 1 / -1;
}
form.box .azioni, .riga-azioni {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
form.box .azioni input, .riga-azioni input { flex: 1; min-width: 220px; width: auto; }
.tabella { overflow-x: auto; background: white; border: 1px solid var(--grigio); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grigio); font-size: 14px; }
th { background: #eef1ea; }
th.ordinabile { cursor: pointer; }
th.ordinabile:hover { background: var(--pallido); }
.flash { padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; }
.flash.ok { background: #e5efe6; }
.flash.errore { background: #f6e4e4; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--grigio); font-size: 14px; }
.stato { font-size: 12px; padding: 2px 6px; border-radius: 4px; background: var(--grigio); }
.testata-pratica { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.testata-pratica .stato {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--pietra);
  color: white;
}
.stato-bozza { background: #8a7340; }
.stato-confermata { background: #3d5c8a; }
.stato-in-correzione { background: #8b3a3a; }
.stato-ok { background: #3f6b45; }
.stato-annullata { background: #6a6a6a; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.azioni input { flex: 1; min-width: 220px; }
.affiancati { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.storico h2 { font-size: 22px; }
.storico li { margin-bottom: 8px; }
@media (max-width: 800px) {
  .affiancati, .testata-pratica { display: block; }
}
@media (max-width: 800px) {
  .shell { display: block; }
  nav { width: auto; }
  .pile, form.box, form.filtri { grid-template-columns: 1fr; }
}