/* Spesa - ventux.cloud

   Identita': carta da scontrino (fondo caldo, righe nette), Archivo per
   l'interfaccia e Instrument Serif per il solo marchio. Due colori portano il
   significato: l'arancio e' quello che c'e' da fare, il verde e' quello che e'
   gia' nel carrello. I reparti hanno un colore proprio, usato come pallino e
   filetto laterale, mai come fondo di un'intera riga: la riga deve restare
   leggibile a mezzo metro di distanza, col telefono in una mano. */

:root{
  --paper:#FAF7F2;
  --surface:#FFFFFF;
  --surface-2:#F2EDE5;
  --ink:#1A1714;
  --ink-2:#4A433C;
  --ink-3:#7C7369;
  --line:#E7E0D5;
  --line-2:#D4CABA;

  --accent:#C2521C;
  --accent-ink:#FFFFFF;
  --accent-soft:#FBEBE0;
  --ok:#1E7A4C;
  --ok-ink:#FFFFFF;
  --ok-soft:#E2F1E8;
  --danger:#A32C22;
  --danger-soft:#F8E6E3;

  --r:12px;
  --r-sm:8px;
  --shadow:0 1px 2px rgba(26,23,20,.06), 0 12px 30px -24px rgba(26,23,20,.55);
  --shadow-up:0 -2px 16px -8px rgba(26,23,20,.28);
  --tabbar-h:62px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);

  /* Reparti */
  --verde:#2F7D32;    --verde-bg:#E7F0E5;
  --rosso:#B03A2E;    --rosso-bg:#F8E6E2;
  --blu:#24618F;      --blu-bg:#E3ECF4;
  --viola:#7A4A86;    --viola-bg:#F1E8F3;
  --celeste:#217E93;  --celeste-bg:#E1F0F4;
  --ambra:#9C6712;    --ambra-bg:#F9EEDB;
  --grano:#7F7014;    --grano-bg:#F4F0D8;
  --marrone:#7A5330;  --marrone-bg:#F2E9DF;
  --rosa:#A93F70;     --rosa-bg:#F9E7F0;
  --ghiaccio:#4E63B6; --ghiaccio-bg:#E8EAF8;
  --teal:#16766B;     --teal-bg:#DEF0EC;
  --ardesia:#566472;  --ardesia-bg:#EAEEF2;
  --lilla:#8E57A8;    --lilla-bg:#F1E9F7;
  --oliva:#66752E;    --oliva-bg:#EFF1DF;
  --grigio:#6E675E;   --grigio-bg:#EFECE6;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14120F;
    --surface:#1C1A16;
    --surface-2:#252118;
    --ink:#F0EBE3;
    --ink-2:#C9C1B6;
    --ink-3:#978E81;
    --line:#2F2A23;
    --line-2:#403A31;

    --accent:#F08A4B;
    --accent-ink:#14120F;
    --accent-soft:#33231A;
    --ok:#63BE8C;
    --ok-ink:#0E1A13;
    --ok-soft:#1A2A21;
    --danger:#E58275;
    --danger-soft:#2E1A17;

    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -24px rgba(0,0,0,.95);
    --shadow-up:0 -2px 18px -8px rgba(0,0,0,.7);

    --verde:#7FC083;    --verde-bg:#1B2A1C;
    --rosso:#E28A7C;    --rosso-bg:#2F1C19;
    --blu:#7EB0D8;      --blu-bg:#182632;
    --viola:#C4A0CD;    --viola-bg:#281E2C;
    --celeste:#77C2D4;  --celeste-bg:#152A30;
    --ambra:#E0B15C;    --ambra-bg:#2C2113;
    --grano:#CFC05A;    --grano-bg:#282512;
    --marrone:#CBA37C;  --marrone-bg:#2A2018;
    --rosa:#E693BA;     --rosa-bg:#2E1B26;
    --ghiaccio:#9AA8EA; --ghiaccio-bg:#1D2039;
    --teal:#6ABFB2;     --teal-bg:#122925;
    --ardesia:#A3B0BE;  --ardesia-bg:#1E2329;
    --lilla:#C29AD8;    --lilla-bg:#261B2E;
    --oliva:#B4C273;    --oliva-bg:#232712;
    --grigio:#ABA296;   --grigio-bg:#242119;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:26px}
h2{font-size:19px}
h3{font-size:15px}
p{margin:0}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.wordmark,.wordmark-big{font-family:"Instrument Serif","Iowan Old Style",Georgia,serif;font-weight:400}
.wordmark{font-size:25px;letter-spacing:.005em}
.wordmark-big{font-size:46px;line-height:1}

.eyebrow{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.num{font-variant-numeric:tabular-nums}

/* ============================== BOTTONI ============================== */
.btn{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  border-radius:var(--r-sm);padding:10px 14px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.btn-sm{padding:7px 11px;font-size:13.5px}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-danger{color:var(--danger);border-color:var(--line-2)}
.btn-wide{width:100%}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  border:1px solid transparent;background:transparent;border-radius:9px;color:var(--ink-2);
}
.icon-btn:active{background:var(--surface-2)}

/* =============================== LOGIN =============================== */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate-card{
  width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:28px 24px 24px;
  display:flex;flex-direction:column;gap:14px;
}
.gate-sub{color:var(--ink-3);font-size:14px;margin-bottom:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pw{position:relative;display:flex}
.pw input{flex:1;padding-right:42px}
.pw-eye{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;border-radius:8px;
}
.gate-err{color:var(--danger);font-size:13.5px;font-weight:500}

input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
}
input::placeholder{color:var(--ink-3)}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:30px;
}

/* ============================== APPBAR =============================== */
.appbar{
  position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line);padding-top:var(--safe-t);
}
.appbar-in{
  max-width:720px;margin:0 auto;padding:7px 14px;
  display:flex;align-items:center;gap:9px;
}
.appbar-actions{margin-left:auto;display:flex;gap:2px}
.badge{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent);
  padding:3px 8px;border-radius:99px;
}

#main{max-width:720px;margin:0 auto;padding:0 14px calc(var(--tabbar-h) + var(--safe-b) + 24px)}

/* ======================== BARRA DI AGGIUNTA ========================== */
.addwrap{position:sticky;top:calc(var(--safe-t) + 51px);z-index:20;background:var(--paper);padding:10px 0 8px}
.addbar{display:flex;flex-direction:column;gap:8px}
.addrow{display:flex;gap:8px;align-items:center}
#add-nome{font-size:16px;font-weight:500} /* 16px: evita lo zoom automatico su iOS */
.btn-add{
  flex:none;width:46px;height:44px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;
}
.btn-add:active{transform:translateY(1px)}
.addrow-2{gap:6px}
.addrow-2 select{flex:1;min-width:0;padding:8px 26px 8px 9px;font-size:13.5px;background-color:var(--surface-2)}
.stepper{
  flex:none;display:flex;align-items:center;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden;
}
.stepper button{
  width:34px;height:36px;border:0;background:transparent;cursor:pointer;
  font-size:19px;line-height:1;color:var(--ink-2);
}
.stepper button:active{background:var(--line)}
.stepper input{
  width:46px;padding:0;border:0;background:transparent;text-align:center;
  font-weight:600;font-variant-numeric:tabular-nums;border-radius:0;
}

/* Suggerimenti: la tendina che pesca dal catalogo mentre si scrive. */
.suggerimenti{
  list-style:none;margin:8px 0 0;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  max-height:46vh;overflow-y:auto;
}
.sug{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;text-align:left;
}
.sug:hover,.sug.is-sel{background:var(--surface-2)}
.sug-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.sug-nome b{font-weight:700;color:var(--accent)}
.sug-meta{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.sug-nuovo .sug-nome{color:var(--ink-2)}
.pallino{width:9px;height:9px;border-radius:99px;background:var(--cat,var(--ink-3));flex:none}

/* ========================= AVANZAMENTO SPESA ========================= */
.progresso{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;margin-bottom:12px;
}
.progresso .conta{font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.progresso .conta b{color:var(--ok)}
.barra{flex:1;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:40px}
.barra i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .25s ease}

/* ============================== REPARTI ============================== */
.reparto{margin-bottom:16px}
.reparto-head{
  display:flex;align-items:center;gap:8px;padding:0 2px 7px;
}
.reparto-head .nome{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cat);
}
.reparto-head .quanti{
  font-size:11px;font-weight:600;color:var(--ink-3);margin-left:auto;
  font-variant-numeric:tabular-nums;
}
.reparto-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;border-left:3px solid var(--cat);
}

/* ============================== LE VOCI ============================== */
.voce{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 10px 12px 12px;border:0;background:transparent;
  border-top:1px solid var(--line);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.reparto-card .voce:first-child{border-top:0}
.voce:active{background:var(--surface-2)}
.spunta{
  flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line-2);
  display:grid;place-items:center;color:transparent;background:var(--surface);
}
.voce.presa .spunta{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.voce-testo{flex:1;min-width:0}
.voce-nome{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voce.presa .voce-nome{text-decoration:line-through;color:var(--ink-3);text-decoration-thickness:1.5px}
.voce-nota{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qty{
  flex:none;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--surface-2);color:var(--ink-2);padding:3px 8px;border-radius:99px;
  white-space:nowrap;
}
.voce.presa .qty{opacity:.5}
.voce-piu{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--ink-3);border-radius:8px;cursor:pointer;
}
.voce-piu:active{background:var(--line)}

/* ====================== AZIONI IN FONDO ALLA LISTA =================== */
.azioni{display:flex;flex-direction:column;gap:9px;margin:18px 0 8px}

.vuoto{
  text-align:center;padding:40px 18px;color:var(--ink-3);
  border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surface);
}
.vuoto h3{color:var(--ink);margin-bottom:5px}
.vuoto p{font-size:13.5px}

/* =============================== SOLITI ============================== */
.searchwrap{
  position:sticky;top:calc(var(--safe-t) + 51px);z-index:20;background:var(--paper);
  padding:10px 0;display:flex;gap:8px;align-items:center;
}
.searchwrap input{font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 4px}
.chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--cat);
  border-radius:99px;padding:8px 13px 8px 11px;font-weight:500;font-size:14px;
}
.chip:active{background:var(--surface-2);transform:translateY(1px)}
.chip.in-lista{background:var(--ok-soft);border-color:var(--ok)}
.chip .volte{font-size:11px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ============================== CATALOGO ============================= */
.tabella{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.riga{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;
  border:0;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;
}
.tabella .riga:first-child{border-top:0}
.riga:active{background:var(--surface-2)}
.riga-testo{flex:1;min-width:0}
.riga-nome{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riga-meta{font-size:11.5px;color:var(--ink-3)}
.riga-fine{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* =========================== IMPOSTAZIONI =========================== */
.blocco{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:14px;
}
.blocco > h3{margin-bottom:3px}
.blocco .spiega{font-size:13px;color:var(--ink-3);margin-bottom:11px}
.rep-riga{
  display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);
}
.blocco .rep-riga:first-of-type{border-top:0}
.rep-riga .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.rep-riga .frecce{display:flex;gap:1px}
.mini{
  width:31px;height:31px;display:grid;place-items:center;border-radius:7px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13px;
}
.mini:disabled{opacity:.35;cursor:default}
.dati{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13.5px}
.dati dt{color:var(--ink-3)}
.dati dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.avviso{
  background:var(--accent-soft);color:var(--accent);border-radius:var(--r-sm);
  padding:9px 11px;font-size:13px;font-weight:500;margin-top:10px;
}
.storia{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
.storia-v{font-size:12px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.storia ul{margin:4px 0 12px;padding-left:17px;font-size:13px;color:var(--ink-2)}
.storia li{margin-bottom:2px}

/* ============================ FOGLIO MODALE ========================== */
.sheet-back{
  position:fixed;inset:0;z-index:60;background:rgba(20,18,15,.45);
  display:flex;align-items:flex-end;justify-content:center;
  animation:sfuma .16s ease;
}
@keyframes sfuma{from{opacity:0}}
.sheet{
  width:100%;max-width:520px;background:var(--surface);
  border-radius:18px 18px 0 0;box-shadow:var(--shadow-up);
  padding:16px 16px calc(16px + var(--safe-b));
  max-height:88dvh;overflow-y:auto;animation:sali .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes sali{from{transform:translateY(14px)}}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sheet-head h2{flex:1;min-width:0}
.sheet-corpo{display:flex;flex-direction:column;gap:12px}
.sheet-corpo .due{display:flex;gap:10px}
.sheet-corpo .due > *{flex:1;min-width:0}
.sheet-azioni{display:flex;gap:9px;margin-top:4px}
.sheet-azioni .btn{flex:1}
.colori{display:flex;flex-wrap:wrap;gap:7px}
.colore{
  width:33px;height:33px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  background:var(--cat-bg);display:grid;place-items:center;
}
.colore i{width:15px;height:15px;border-radius:99px;background:var(--cat);display:block}
.colore[aria-pressed="true"]{border-color:var(--ink)}

/* =============================== TOAST =============================== */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);z-index:70;
  background:var(--ink);color:var(--paper);
  padding:11px 14px;border-radius:99px;font-size:13.5px;font-weight:500;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;
  max-width:calc(100vw - 28px);
}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast button{
  border:0;background:transparent;color:var(--accent);font-weight:700;cursor:pointer;
  padding:0;white-space:nowrap;
}
:root:not([data-theme="light"]) .toast button{color:var(--accent)}

/* =============================== TABBAR ============================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:var(--surface);border-top:1px solid var(--line);
  display:flex;
}
.tab{
  flex:1;border:0;background:transparent;cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-3);font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
.tab.is-active{color:var(--accent)}
.tab.is-active::before{
  content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
  background:var(--accent);border-radius:0 0 3px 3px;
}
.tab-count{
  position:absolute;top:6px;right:50%;margin-right:-24px;
  background:var(--accent);color:var(--accent-ink);
  font-size:10px;font-weight:700;line-height:1;padding:3px 5px;border-radius:99px;
  font-variant-numeric:tabular-nums;
}

/* ================================ FOTO =============================== */
/* La miniatura nella riga vale piu' di mille parole davanti allo scaffale:
   piccola, quadrata, sempre nello stesso punto. */
.mini-foto{
  flex:none;width:34px;height:34px;border-radius:8px;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line);
}
.voce.presa .mini-foto{opacity:.45}
.sug-foto{width:26px;height:26px;border-radius:6px}
.riga .mini-foto{width:30px;height:30px}

.fotobox{display:flex;gap:11px;align-items:center}
.foto-grande{
  width:92px;height:92px;border-radius:var(--r);object-fit:cover;
  border:1px solid var(--line);background:var(--surface-2);flex:none;
}
.foto-vuota{
  width:92px;height:92px;border-radius:var(--r);flex:none;
  border:1px dashed var(--line-2);background:var(--surface-2);color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:11px;text-align:center;
}
.foto-azioni{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.foto-azioni .btn{width:100%;cursor:pointer}

@media (min-width:560px){
  .addrow-2{gap:8px}
  .stepper input{width:54px}
}