:root {
  --verde: #005a3c;
  --verde-chiaro: #e8f4ee;
  --rosso: #cd212a;
  --bordo: #d8d8d8;
  --testo: #1c1c1c;
  --sfondo: #f7f7f5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

header {
  background: var(--verde);
  color: white;
  padding: 10px 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.logo-header {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

.testata-testo {
  text-align: left;
}

header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

header .sottotitolo {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 2px;
}

nav.tabs {
  display: flex;
  background: white;
  border-bottom: 2px solid var(--bordo);
  flex-shrink: 0;
}

nav.tabs button {
  flex: 1;
  padding: 16px 8px;
  font-size: 1.05rem;
  font-weight: 600;
  border: none;
  background: white;
  color: #777;
  cursor: pointer;
  border-bottom: 4px solid transparent;
}

nav.tabs button.attivo {
  color: var(--verde);
  border-bottom-color: var(--verde);
  background: var(--verde-chiaro);
}

main {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.schermata { display: none; }
.schermata.attiva { display: block; }

.badge-offline {
  display: none;
  background: #fff3cd;
  color: #7a5b00;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 12px;
  text-align: center;
}
body.offline .badge-offline { display: block; }

/* Form contatti */
form.contatto {
  background: white;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

form.contatto .riga {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

form.contatto label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #555;
}

form.contatto input,
form.contatto select,
form.contatto textarea {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: white;
}

form.contatto textarea { resize: vertical; min-height: 60px; }

.btn {
  display: inline-block;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: var(--verde);
  color: white;
  cursor: pointer;
}
.btn.secondario {
  background: white;
  color: var(--verde);
  border: 2px solid var(--verde);
}
.btn.piccolo { padding: 8px 14px; font-size: 0.85rem; }
.btn.rosso { background: var(--rosso); }

.riga-azioni { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

.contatore {
  font-size: 0.9rem;
  color: #555;
}

ul.lista-contatti { list-style: none; padding: 0; margin: 0; }

ul.lista-contatti li {
  background: white;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

ul.lista-contatti .info strong { font-size: 1.05rem; }
ul.lista-contatti .info .dettagli { font-size: 0.85rem; color: #666; margin-top: 2px; }

/* Listino */
input.ricerca {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  margin-bottom: 14px;
}

.gruppo-fornitore {
  margin-bottom: 18px;
}
.gruppo-fornitore h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--verde);
  border-bottom: 2px solid var(--verde-chiaro);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.riga-prodotto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
}
.riga-prodotto .nome { font-size: 1rem; }
.riga-prodotto .formato { color: #888; font-size: 0.85rem; margin-left: 6px; }
.riga-prodotto .prezzo { font-weight: 700; font-size: 1.05rem; white-space: nowrap; margin-left: 10px; }
.riga-prodotto .prezzo.da-fare { color: #a66a00; font-size: 0.8rem; font-weight: 500; }
.riga-prodotto .qta { display: block; color: #4a7a68; font-size: 0.8rem; margin-top: 2px; }

.nota-prezzi {
  background: var(--verde-chiaro);
  border: 1px solid #bfe0d2;
  color: #0a4531;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.85rem;
  margin-bottom: 14px;
  line-height: 1.4;
}

/* Prenota */
.istruzioni-prenota {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 12px;
  line-height: 1.4;
}

.riga-prodotto-prenota {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
  gap: 10px;
}
.riga-prodotto-prenota .info { flex: 1; min-width: 0; }
.riga-prodotto-prenota .nome { display: block; font-size: 1rem; }
.riga-prodotto-prenota .formato { color: #888; font-size: 0.85rem; }
.riga-prodotto-prenota .qta { display: block; color: #4a7a68; font-size: 0.8rem; }

.carrello {
  background: white;
  border: 2px solid var(--verde);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
}
.carrello h3 { margin: 0 0 10px; color: var(--verde); font-size: 1rem; }
.carrello-vuoto { color: #888; font-size: 0.9rem; margin: 0; }

#lista-carrello { list-style: none; padding: 0; margin: 0; }
#lista-carrello li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
#lista-carrello li:last-child { border-bottom: none; }
#lista-carrello .info { flex: 1; min-width: 0; }
#lista-carrello .info strong { display: block; font-size: 0.95rem; }
#lista-carrello .info span { font-size: 0.8rem; color: #888; }
#lista-carrello .qta-controlli {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#lista-carrello .qta-controlli button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--bordo);
  background: var(--sfondo);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
#lista-carrello .qta-controlli input {
  width: 46px;
  text-align: center;
  padding: 6px 2px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* QR */
.qr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 600px) {
  .qr-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.qr-card {
  background: white;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.qr-card img { width: 100%; max-width: 220px; height: auto; }
.qr-card h3 { margin: 10px 0 4px; font-size: 1rem; }
.qr-card .link { font-size: 0.85rem; color: #666; word-break: break-all; }

.vino-box {
  margin-top: 20px;
  background: #fff8e6;
  border: 1px solid #f0d58c;
  border-radius: 12px;
  padding: 16px;
}
.vino-box h3 { margin-top: 0; color: #8a6400; }
.vino-box .avviso {
  font-weight: 700;
  color: var(--rosso);
  margin-bottom: 10px;
}