:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --testo: #1c2024;
  --tenue: #61696f;
  --bordo: #e2e5e9;
  --blu: #1d5fa8;
  --blu-chiaro: #eaf1fa;
  --verde: #1f7a4c;
  --ambra: #8a5a00;
  --ambra-chiaro: #fdf5e3;
  --rosso: #a3222b;
  --raggio: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--bg);
  color: var(--testo);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

/* ---------- testata ---------- */
.testata {
  margin-bottom: 1.25rem;
}
.testata h1 {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.sottotitolo {
  margin: 0.25rem 0 0;
  color: var(--tenue);
  font-size: 0.95rem;
}

/* ---------- riquadri ---------- */
.riquadro {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem;
  margin-bottom: 1rem;
}

.spesa {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.spesa .valore {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--blu);
}

.verificato {
  font-size: 0.78rem;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.verificato--vecchio {
  color: var(--ambra);
  font-weight: 600;
}

.etichetta {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tenue);
}

/* ---------- select ---------- */
select {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 0.75rem;
  font-size: 1rem; /* >=16px: evita lo zoom automatico su iOS */
  color: var(--testo);
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2361696f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.25rem;
}
select:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
}

/* ---------- stato / avvisi ---------- */
.stato {
  color: var(--tenue);
  padding: 0.5rem 0;
}
.stato--errore {
  color: var(--rosso);
  font-weight: 500;
}

.avviso {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--ambra-chiaro);
  border: 1px solid #f0dfb5;
  border-left: 3px solid var(--ambra);
  border-radius: 8px;
  color: var(--ambra);
  font-size: 0.9rem;
}

/* ---------- risultato ---------- */
.risultato-testa h2 {
  margin: 0.5rem 0 0.15rem;
  font-size: 1.15rem;
  line-height: 1.3;
}
.riepilogo-mill {
  margin: 0 0 1rem;
  color: var(--tenue);
  font-size: 0.9rem;
}

/* tre importi affiancati (proprietario con una sola unità) */
.importi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.importo {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.importo--rata {
  background: var(--blu-chiaro);
  border-color: #cfe0f2;
}
.importo-titolo {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tenue);
}
.importo-valore {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.importo--rata .importo-valore {
  color: var(--blu);
}
.importo-nota {
  font-size: 0.8rem;
  color: var(--tenue);
}

@media (min-width: 40rem) {
  .importi {
    grid-template-columns: repeat(3, 1fr);
  }
  .testata h1 {
    font-size: 1.75rem;
  }
}

/* ---------- tabella multi-unità ---------- */
.tabella-scroll {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}
.tabella {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tabella th,
.tabella td {
  text-align: left;
  padding: 0.75rem 0.85rem;
}
.tabella thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tenue);
  border-bottom: 1px solid var(--bordo);
  vertical-align: bottom;
}
.tabella thead th small {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}
.tabella tbody th {
  font-weight: 600;
}
.unita-nome {
  display: block;
}
.unita-mill {
  display: block;
  font-weight: 400;
  color: var(--tenue);
}
.tabella tbody tr + tr th,
.tabella tbody tr + tr td {
  border-top: 1px solid var(--bordo);
}
.tabella tfoot {
  background: var(--blu-chiaro);
}
.tabella tfoot th,
.tabella tfoot td {
  border-top: 2px solid #cfe0f2;
  font-weight: 700;
  color: var(--blu);
}

/* sotto i 40rem la tabella diventa una card per unità:
   ogni cella si porta dietro la propria intestazione via data-label */
@media (max-width: 39.999rem) {
  .tabella,
  .tabella tbody,
  .tabella tfoot,
  .tabella tr,
  .tabella td,
  .tabella tbody th,
  .tabella tfoot th {
    display: block;
  }
  .tabella thead {
    display: none;
  }
  .tabella-scroll {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .tabella tr {
    background: var(--card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.25rem;
  }
  .tabella tbody tr + tr th,
  .tabella tbody tr + tr td {
    border-top: none;
  }
  .tabella tbody th,
  .tabella tfoot th {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--bordo);
    margin-bottom: 0.25rem;
  }
  .tabella td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0.85rem;
  }
  .tabella td::before {
    content: attr(data-label);
    font-size: 0.8rem;
    color: var(--tenue);
    flex: 0 0 auto;
  }
  .tabella tfoot tr {
    background: var(--blu-chiaro);
    border-color: #cfe0f2;
  }
  .tabella tfoot th,
  .tabella tfoot td {
    border-top: none;
  }
  .tabella tfoot td::before {
    color: var(--blu);
  }
}

/* ---------- note ---------- */
.note {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--tenue);
}
.note summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.5rem 0;
}
.note ul {
  padding-left: 1.1rem;
}
.note li {
  margin-bottom: 0.4rem;
}

.firma {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--tenue);
  opacity: 0.85;
}

/* ---------- pagina admin ---------- */
.campo {
  margin-bottom: 1rem;
}
.campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.campo small {
  display: block;
  color: var(--tenue);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
input[type="number"],
input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--card);
  color: var(--testo);
}
button {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--blu);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
button:disabled {
  opacity: 0.55;
  cursor: progress;
}
.esito {
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
}
.esito--ok {
  background: #e8f5ee;
  color: var(--verde);
  border: 1px solid #bfe3ce;
}
.esito--ko {
  background: #fdecee;
  color: var(--rosso);
  border: 1px solid #f3c9ce;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --card: #1c2024;
    --testo: #e8eaed;
    --tenue: #9aa3ab;
    --bordo: #2c3238;
    --blu: #6fa8e8;
    --blu-chiaro: #1b2a3b;
    --verde: #58c68e;
    --ambra: #e0b055;
    --ambra-chiaro: #2e2412;
    --rosso: #e88c92;
  }
  .importo--rata,
  .tabella tfoot,
  .tabella tfoot tr {
    border-color: #2a3d52;
  }
  .avviso {
    border-color: #4a3c1c;
  }
  .esito--ok {
    background: #16281f;
    border-color: #2c4a37;
  }
  .esito--ko {
    background: #2c1a1c;
    border-color: #4d2b2f;
  }
  button {
    color: #0d1115;
  }
}