/* Registro Negozi — design system Carpano portato a mano (niente Tailwind).
   Token e regole da sales-intelligence/index.css + DESIGN_SYSTEM.md. */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --brand-red: #8C2A1A;         /* AZIONE (rosso mattone) */
  --brand-red-hover: #6B1F13;
  --brand-red-active: #5A190F;
  --brand-green: #143D2C;
  --brand-green-mid: #1F5A40;
  --brand-gold: #C7A23A;        /* editoriale, mai sui dati */
  --charcoal: #1C1815;

  /* Neutri: stone caldo (al posto del grigio) */
  --gray-50:#FAF7F2; --gray-100:#F0EDE7; --gray-200:#E5E1D8; --gray-300:#D8D2C6;
  --gray-400:#A39C8E; --gray-500:#8A8378; --gray-600:#5C5347; --gray-700:#463F35;
  --gray-800:#2E2825; --gray-900:#1C1815;

  /* Allarme: vermiglio (SOLO errori) */
  --red-500:#E14B34; --red-600:#C93B26; --red-bg:#FBEAE6;
  /* Warning: ambra (dato incompleto, non bloccante) */
  --amber-600:#8A6B1E; --amber-bg:#F3ECD6;
  /* Positivo / info */
  --green-600:#2F7D5A; --green-bg:#E4F2EA;
  --info-600:#35708F; --info-bg:#EAF3F7;

  --font-sans:"Mulish", system-ui, -apple-system, sans-serif;
  --font-mono:"Roboto Mono", ui-monospace, monospace;

  --shadow-sm:0 1px 2px rgba(36,28,24,.06), 0 2px 6px rgba(36,28,24,.06);
  --shadow-md:0 4px 14px rgba(36,28,24,.10);
  --radius:12px;
  --dur:220ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--gray-50);
  line-height: 1.45;
}
a { color: var(--brand-red); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Anti-zoom su iOS: i campi non scendono sotto 16px */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}
:focus-visible { outline: 2px solid var(--info-600); outline-offset: 2px; }

/* ── Barra di navigazione ─────────────────────────────────────────────── */
.nav {
  background: var(--brand-green);
  color: #fff;
  position: sticky; top: 0; z-index: 20;
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: .25rem;
  padding: .55rem .8rem; flex-wrap: wrap;
}
.nav .brand { font-weight: 800; letter-spacing: .01em; margin-right: .5rem; font-size: 1.02rem; }
.nav .brand small { color: var(--brand-gold); font-weight: 700; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .08em; display: block; line-height: 1; }
.nav a.navlink {
  color: #EBE7DF; padding: .4rem .6rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.nav a.navlink:hover { background: rgba(255,255,255,.10); text-decoration: none; }
.nav a.navlink.attivo { background: var(--brand-red); color: #fff; }
.nav .spazio { flex: 1; }
.nav .utente { font-size: .82rem; color: #D9D3C7; margin-right: .4rem; }

/* ── Contenitore pagina ───────────────────────────────────────────────── */
.wrap { max-width: 960px; margin: 0 auto; padding: 1rem .8rem 5rem; }
@media (min-width: 1024px) { .wrap-largo { max-width: 1240px; } }
h1.titolo { font-size: 1.35rem; font-weight: 800; margin: .2rem 0 1rem; }
h2.sezione { font-size: 1.05rem; font-weight: 800; margin: 1.6rem 0 .6rem; }
.muto { color: var(--gray-600); }
.piccolo { font-size: .82rem; }

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1rem; margin-bottom: 1rem;
}

/* ── Pulsanti ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 700; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; transition: background var(--dur);
}
.btn-primary { background: var(--brand-red); color: #fff; }
.btn-primary:hover { background: var(--brand-red-hover); text-decoration: none; }
.btn-primary:active { background: var(--brand-red-active); }
.btn-secondary { background: #fff; color: var(--charcoal); border-color: var(--gray-300); }
.btn-secondary:hover { background: var(--gray-100); text-decoration: none; }
.btn-block { width: 100%; }

/* ── Form ─────────────────────────────────────────────────────────────── */
label.campo { display: block; margin-bottom: 1rem; }
label.campo .etichetta {
  display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-600); margin-bottom: .3rem;
}
.input, input[type=text], input[type=password], input[type=number], input[type=date], select {
  width: 100%; min-height: 44px; padding: .55rem .7rem;
  border: 1px solid var(--gray-300); border-radius: 10px; background: #fff;
  font-family: var(--font-sans); color: var(--charcoal);
}
input[type=date] { cursor: pointer; }
input.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.form-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .form-griglia { grid-template-columns: 1fr; } }

/* Riquadro "incasso shop calcolato" */
.calcolato {
  background: var(--gray-100); border: 1px dashed var(--gray-300);
  border-radius: 10px; padding: .6rem .8rem; margin-bottom: 1rem;
  display: flex; align-items: baseline; justify-content: space-between;
}
.calcolato .val { font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; }

/* Barra Salva fissa in basso (comoda col pollice) */
.savebar {
  position: sticky; bottom: 0; margin: 1rem -.8rem -5rem;
  padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(250,247,242,.94); border-top: 1px solid var(--gray-200);
  backdrop-filter: blur(6px); transform: translateZ(0);
}

/* ── Messaggi ─────────────────────────────────────────────────────────── */
.flash { border-radius: 10px; padding: .6rem .8rem; margin-bottom: 1rem; font-weight: 600; font-size: .9rem;
  display: flex; align-items: center; gap: .5rem; }
.flash .dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.flash.ok { background: var(--green-bg); color: var(--green-600); }
.flash.ok .dot { background: var(--green-600); }
.flash.errore { background: var(--red-bg); color: var(--red-600); }
.flash.errore .dot { background: var(--red-500); }

/* ── Tabelle dati ─────────────────────────────────────────────────────── */
.tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dati { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.dati th {
  text-align: left; font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-600); padding: .45rem .5rem;
  border-bottom: 2px solid var(--gray-200); white-space: nowrap; position: sticky; top: 0; background:#fff;
}
table.dati td { padding: .45rem .5rem; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
table.dati td.num, table.dati th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.dati tbody tr:hover { background: var(--gray-50); }
/* righe a colori alternati (registro: classe .alt per gestire le fasce dei mesi;
   tabelle senza fasce: classe .zebra sulla tabella) */
table.dati tbody tr.alt > td { background: var(--gray-50); }
table.dati.zebra tbody tr:nth-child(even):not(.totale) > td { background: var(--gray-50); }
.th-sub { font-size: .62rem; font-weight: 700; color: var(--gray-500); text-transform: none; letter-spacing: 0; }
table.dati tr.mese-sep td { background: var(--gray-100); font-weight: 800; color: var(--gray-700);
  text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
table.dati tr.totale td { font-weight: 800; border-top: 2px solid var(--gray-300); background: var(--gray-50); }
.giorno-badge { display: inline-block; min-width: 2.4em; text-align: center;
  background: var(--gray-100); border-radius: 6px; padding: .05rem .3rem; font-weight: 700; font-size: .78rem; color: var(--gray-700); }

/* Cella numerica con variazione % sotto */
table.dati td.num .cellval { display: block; }
.delta { display: inline-block; font-family: var(--font-sans); font-size: .66rem; font-weight: 800;
  margin-top: 1px; padding: 0 .28rem; border-radius: 5px; line-height: 1.55; letter-spacing: 0; }
.delta.su { color: var(--green-600); background: var(--green-bg); }
.delta.giu { color: var(--red-600); background: var(--red-bg); }
.anno-cell { color: var(--gray-500); font-weight: 600; }

/* Fascia separatrice del mese con riepilogo */
table.dati tr.mese-sep td { padding: .45rem .6rem; }
table.dati tr.mese-sep.toggle { cursor: pointer; }
table.dati tr.mese-sep.toggle:hover td { background: var(--gray-200); }
.mese-band { display: flex; align-items: center; justify-content: flex-start; gap: .3rem .7rem; flex-wrap: wrap;
  position: sticky; left: .6rem; width: max-content; max-width: 92vw; }
.mese-nome { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
/* freccetta apri/chiudi */
.caret { width: 0; height: 0; border-left: 5px solid var(--gray-500); border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; display: inline-block; transition: transform var(--dur); flex: none; }
tr.mese-sep[aria-expanded="true"] .caret { transform: rotate(90deg); }
.mese-recap { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  text-transform: none; letter-spacing: 0; font-size: .74rem; color: var(--gray-700); }
.mese-recap .rk { color: var(--gray-500); font-weight: 700; }
.mese-recap b { font-weight: 800; }
.mese-recap .sep2 { color: var(--gray-400); }

/* ── Chip anno / selettori ────────────────────────────────────────────── */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip { border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700);
  border-radius: 999px; padding: .3rem .8rem; font-weight: 700; font-size: .85rem; cursor: pointer; text-decoration: none; }
.chip:hover { background: var(--gray-100); text-decoration: none; }
.chip.attivo { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }

/* ── Grafico SVG ──────────────────────────────────────────────────────── */
.svg-trend { width: 100%; height: auto; display: block; }
.svg-trend .svg-x { font-size: 9px; fill: var(--gray-500); font-family: var(--font-sans); text-anchor: middle; }
.legenda { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; margin-top: .4rem; }
.legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.legenda i { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }

/* ── KPI ──────────────────────────────────────────────────────────────── */
.kpi-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: .7rem; margin-bottom: 1rem; }
.kpi { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); padding: .7rem .8rem; box-shadow: var(--shadow-sm); }
.kpi .et { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-600); font-weight: 800; }
.kpi .v { font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; margin-top: .15rem; }

/* ── Login ────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(160deg, var(--brand-green) 0%, var(--brand-green-mid) 100%); }
.login-card { background:#fff; border-radius: 16px; box-shadow: var(--shadow-md); padding: 1.6rem; width: 100%; max-width: 360px; }
.login-card .eyebrow { color: var(--brand-gold); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; }
.login-card h1 { font-size: 1.3rem; font-weight: 800; margin: .1rem 0 1.2rem; }

/* ── Changelog ────────────────────────────────────────────────────────── */
pre.md { white-space: pre-wrap; word-wrap: break-word; font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.5; background:#fff; border:1px solid var(--gray-200);
  border-radius: var(--radius); padding: 1rem; }

/* ── Gestione utenti ──────────────────────────────────────────────────── */
.btn-mini { min-height: 36px; padding: .35rem .8rem; font-size: .85rem; }
.btn-elimina { background: #fff; color: var(--red-600); border: 1px solid var(--red-500); }
.btn-elimina:hover { background: var(--red-bg); }

.utente-card { padding: .9rem 1rem; }
.utente-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.utente-nome { font-weight: 800; font-size: 1.02rem; }
.utente-badge { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.utente-azioni { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }

.badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px;
  padding: .18rem .6rem; font-size: .74rem; font-weight: 800; }
.badge .dot { width: .5rem; height: .5rem; border-radius: 50%; }
.badge-dir { background: var(--info-bg); color: var(--info-600); }
.badge-dir .dot { background: var(--info-600); }
.badge-neg { background: var(--gray-100); color: var(--gray-700); }
.badge-neg .dot { background: var(--gray-500); }
.stato-on { background: var(--green-bg); color: var(--green-600); }
.stato-on .dot { background: var(--green-600); }
.stato-attesa { background: var(--amber-bg); color: var(--amber-600); }
.stato-attesa .dot { background: var(--amber-600); }
.stato-off { background: var(--gray-100); color: var(--gray-500); }
.stato-off .dot { background: var(--gray-400); }

.edit-det { display: inline-block; }
.edit-det > summary { list-style: none; cursor: pointer; }
.edit-det > summary::-webkit-details-marker { display: none; }
.edit-form { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--gray-200); }
details.edit-det[open] { display: block; width: 100%; }

footer.pie { max-width: 960px; margin: 2rem auto 1rem; padding: 0 .8rem; color: var(--gray-500); font-size: .78rem; }