/* Eco — base condivisa di componente.
   Importa il vocabolario di brand da duomo-tokens (progetto separato, vedi
   Lavoro/Duomo Gel SRL/duomo-tokens/) e definisce solo le regole di componente
   specifiche di Eco. Da includere in ogni pagina PRIMA di qualunque <style> locale. */

@import url("https://duomo-tokens.pages.dev/tokens/colors.css");
@import url("https://duomo-tokens.pages.dev/tokens/fonts.css");
@import url("https://duomo-tokens.pages.dev/tokens/spacing.css");
@import url("https://duomo-tokens.pages.dev/tokens/shape.css");
@import url("https://duomo-tokens.pages.dev/tokens/motion.css");
@import url("https://duomo-tokens.pages.dev/tokens/typography.css");

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-corpo);
  background: var(--bianco);
  color: var(--ink);
}

.hidden { display: none !important; }

.page {
  max-width: var(--w-page-narrow);
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.sub {
  font-family: var(--font-corpo);
  color: var(--ink-3);
  font-size: 14px;
  margin-bottom: 24px;
}

h1 {
  font-family: var(--font-titolo);
  font-size: 48px;
  text-transform: uppercase;
  line-height: var(--titolo-lh);
  letter-spacing: var(--titolo-tracking);
  color: var(--ink);
  margin: 0 0 4px;
}

h2 {
  font-family: var(--font-titolo);
  font-size: 26px;
  text-transform: uppercase;
  line-height: var(--titolo-lh);
  letter-spacing: var(--titolo-tracking);
  color: var(--ink);
  margin: 28px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linea);
}

.occhiello {
  display: block;
  font-family: var(--font-corpo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--celeste-scuro);
  margin-bottom: 6px;
}

*:focus-visible {
  outline: 2px solid var(--celeste-medio);
  outline-offset: 2px;
}

/* Header di marca (app view, post-login). Solo il marchio + un rimando alla home: Eco non ha
   un menu di navigazione cross-modulo come Faro, quindi niente nav/utente/logout qui. */
.eco-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: var(--bianco);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 20;
}
.eco-header-brand {
  display: flex;
  align-items: center;
  font-family: var(--font-titolo);
  font-size: 27px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--ink);
}
.eco-header-brand::before {
  content: "";
  width: 4px;
  height: 30px;
  background: var(--celeste);
  margin-right: 12px;
  flex: none;
}
.eco-header-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-corpo);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: 0 20px;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--linea);
  white-space: nowrap;
  order: -1;
  transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.eco-header-back:hover {
  background: var(--celeste-chiaro);
  border-color: var(--celeste-bordo);
  color: var(--ink);
}

.login-card {
  max-width: var(--w-card);
  margin: 80px auto;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  box-shadow: var(--ombra);
  padding: 28px 26px;
}
.login-card .logo-principale {
  display: block;
  width: 220px;
  max-width: 100%;
  margin: 0 auto 24px;
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-corpo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  padding: var(--pad-input);
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  font-size: 14px;
  font-family: var(--font-corpo);
  min-height: var(--touch-min);
  background: var(--bianco);
}
.field input.input-errore {
  border-color: var(--bad-fg);
  background: #FBEAE8;
}

/* Safari (iOS/iPadOS) disegna gli input data/mese vuoti con il proprio widget nativo grigio a
   tinta unita, ignorando bordo e sfondo bianco definiti sopra — risultato: accanto a Importo/
   Note (perfettamente bordati) la casella Data appare come un blocco grigio pieno, senza bordo
   né testo visibile, che sembra "sovrapposto"/rotto (bug reale segnalato da Luca il 2026-09-14,
   visibile solo su Safari reale, non riprodotto dal WebKit di Playwright che per i controlli
   nativi non replica esattamente il rendering di iOS). Disattivando l'aspetto nativo, il campo
   torna a un riquadro bianco bordato coerente con gli altri, sempre col proprio selettore nativo. */
.field input[type="date"],
.field input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
}

button { cursor: pointer; font-family: inherit; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--celeste);
  color: #16303F;
  border: 1px solid var(--celeste-medio);
  border-radius: var(--r-pill);
  padding: var(--pad-btn);
  font-family: var(--font-corpo);
  font-size: 13px;
  font-weight: 700;
  min-height: var(--touch-min);
  text-decoration: none;
  transition: background var(--t-rapido);
}
.btn-primary:hover { background: var(--celeste-medio); }
.btn-primary:disabled { opacity: .6; cursor: default; }

.error-box {
  background: #FBEAE8;
  color: #8F2F27;
  border: 1px solid var(--bad-fg);
  border-radius: var(--r-s);
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 10px;
  font-family: var(--font-corpo);
}

.success-box {
  background: var(--ok-bg);
  color: var(--ok-fg);
  border: 1px solid var(--ok-fg);
  border-radius: var(--r-s);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  font-family: var(--font-corpo);
}

/* Riga evidenziata dopo un salvataggio: conferma visiva forte, poi sfuma da sola. */
#grigliaMese tr.riga-evidenziata td {
  background: var(--ok-bg) !important;
  transition: background 1.5s ease;
}

.meteo-box {
  background: var(--celeste-chiaro);
  border: 1px solid var(--celeste-bordo);
  border-radius: var(--r-m);
  padding: 12px 16px;
  font-size: 13px;
  margin: 16px 0;
  color: var(--celeste-profondo);
  font-family: var(--font-corpo);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bianco);
  font-family: var(--font-corpo);
}
th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea-tenue);
}
th {
  background: var(--panna);
  color: var(--ink-3);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--panna-scuro);
}
tbody tr:nth-child(even) { background: var(--bianco); }
tbody tr:nth-child(odd) { background: var(--zebra); }
tbody tr:hover { background: var(--celeste-chiaro); }

.tabella-guscio {
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  overflow-x: auto;
  box-shadow: var(--ombra);
}
.tabella-guscio table { margin-bottom: 0; }

.store-card, .voce-riga, .confronto-card {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
}
.store-card { padding: 16px; margin-bottom: 14px; }
.store-card h3 { margin: 0 0 12px; font-size: 16px; font-family: var(--font-corpo); font-weight: 600; }
.store-riga { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.contante-val { font-size: 13px; color: var(--ink-3); margin-top: 8px; font-family: var(--font-corpo); }
.chiuso-riga { margin-top: 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; font-family: var(--font-corpo); }

input[type="checkbox"].chiusoCheck,
input[type="checkbox"].fcConfermato {
  width: var(--touch-min);
  height: var(--touch-min);
  accent-color: var(--celeste-scuro);
  border-radius: var(--r-pill);
  cursor: pointer;
  vertical-align: middle;
}

.voce-riga {
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.voce-riga label { font-weight: 600; font-family: var(--font-corpo); }
.voce-riga input {
  width: 140px;
  padding: 9px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  font-size: 14px;
  font-family: var(--font-corpo);
}

/* Flex invece di grid a colonne fisse: i form hanno da 3 a 4 campi più uno o due bottoni
   (Aggiungi + Annulla modifica, quando presente) — un numero fisso di colonne andava in
   overflow non appena si aggiungeva un campo o un bottone in più, mandando gli elementi in
   eccesso a capo mal allineati (bug reale trovato il 2026-09-14 su iPad). Con flex-wrap ogni
   campo va a capo in modo pulito qualunque sia il numero di elementi. */
.form-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: end;
  margin-bottom: 16px;
}
.form-riga .field {
  flex: 1 1 160px;
  min-width: 140px;
  margin-bottom: 0;
}
.form-riga .btn-primary,
.form-riga .btn-riga {
  flex: none;
}

.sezione { margin-top: 36px; }
.sezione h2 { font-size: 26px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi-card {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  padding: var(--pad-card);
}
.kpi-card.featured { background: var(--panna); border-color: var(--panna-scuro); }
.kpi-card.warning { background: var(--bad-bg); border-color: var(--bad-fg); }
.kpi-card.warning .value { color: var(--bad-fg); }
.kpi-card.warning .kpi-nota { color: var(--bad-fg); }
.kpi-card .label { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; font-family: var(--font-corpo); }
.kpi-card .value {
  font-family: var(--font-titolo);
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--titolo-tracking);
  line-height: var(--titolo-lh);
}
.kpi-card .value.small { font-size: var(--titolo-s); }
.kpi-card .kpi-nota { font-size: 12px; color: var(--ink-3); margin-top: 8px; font-family: var(--font-corpo); }

.btn-riga {
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: var(--font-corpo);
  font-size: 12px;
  font-weight: 600;
  color: var(--celeste-scuro);
  cursor: pointer;
}
.btn-riga:hover { color: var(--celeste-profondo); text-decoration: underline; }
.btn-riga.elimina { color: var(--bad-fg); }
.btn-riga.elimina:hover { color: #6B2019; }

.riepilogo strong {
  font-family: var(--font-titolo);
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--titolo-tracking);
  line-height: var(--titolo-lh);
  color: var(--ink);
}

/* Due viste alternative sugli stessi dati (es. Entrate Totali lordo/netto IVA): pill-toggle,
   non un select, perché sono solo 2 opzioni e Luca deve poter passare dall'una all'altra con un
   tocco solo, senza aprire un menu. */
.vista-toggle { display: flex; gap: 8px; margin: 16px 0; }
.vista-btn {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  padding: var(--pad-btn);
  font-family: var(--font-corpo);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  min-height: var(--touch-min);
  transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.vista-btn.attiva {
  background: var(--celeste);
  border-color: var(--celeste-medio);
  color: #16303F;
}

.selettori { display: flex; gap: 12px; margin: 16px 0; }
.selettori select {
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  font-size: 14px;
  background: var(--bianco);
  font-family: var(--font-corpo);
}

.griglia-wrap {
  overflow-x: auto;
  border-radius: var(--r-l);
  border: 1px solid var(--linea);
  box-shadow: var(--ombra);
}
#grigliaMese th, #grigliaMese td { white-space: nowrap; }
#grigliaMese tr.riga-assente td { color: var(--ink-4); }
#grigliaMese tr.riga-totale td { font-weight: 700; border-top: 2px solid var(--linea); border-bottom: none; }
#grigliaMese td.cella-store { cursor: pointer; }
#grigliaMese td.cella-store:hover { background: var(--celeste-tenue); }

/* Un colore di sfondo per gruppo di colonne (punto vendita): con 9 colonne totali (Giorno,
   Meteo, 3 store × Totale/POS, Totale) la tabella era troppo carica per seguire una riga a
   colpo d'occhio — Luca l'ha segnalato il 2026-09-14. Il colore vince sullo sfondo a righe
   alternate (i <td> hanno sfondo esplicito, che copre quello ereditato dalla riga) solo sulle
   colonne di uno store: Giorno/Meteo/Totale mese restano a righe alternate come guida di
   lettura orizzontale. Un bordo a sinistra segna il confine tra un punto vendita e l'altro
   anche per chi non distingue bene i colori.

   Caffè Duomo Piazza usa il marrone del suo logo reale (Fratelli Dioletta SRLS/Loghi/Caffè
   Duomo/Logo — non è un token del design system Gelaterie Duomo, è specifico di questo bar),
   estratto per campionamento dal PNG: #5A4739 su crema #F6EADE. Le due gelaterie usano due
   toni di celeste del design system, abbastanza diversi da distinguersi. Su richiesta di
   Luca, in JS (renderGriglia) l'ordine visivo delle colonne mette Caffè Duomo al centro, così
   i due celesti non si toccano. */
#grigliaMese .col-caffe { background: #EDE6DF; }
#grigliaMese .col-gelateria-0 { background: var(--celeste-chiaro); }
#grigliaMese .col-gelateria-1 { background: var(--celeste-tenue); }
#grigliaMese .col-store-inizio { border-left: 2px solid var(--linea); }
#grigliaMese tr.riga-totale .col-caffe { background: #DDD1C2; }
#grigliaMese tr.riga-totale .col-gelateria-0 { background: var(--celeste-tenue); }
#grigliaMese tr.riga-totale .col-gelateria-1 { background: var(--celeste-bordo); }
#grigliaHead .col-caffe, #grigliaFoot .col-caffe { background: #DDD1C2; }
#grigliaHead .col-gelateria-0, #grigliaFoot .col-gelateria-0 { background: var(--celeste-tenue); }
#grigliaHead .col-gelateria-1, #grigliaFoot .col-gelateria-1 { background: var(--celeste-bordo); }

.confronto-card { padding: 16px 18px; }
.delta-pos { color: var(--ok-fg); }
.delta-neg { color: var(--bad-fg); }
.confronto-nota { font-size: 12px; color: var(--ink-3); margin-top: 10px; font-family: var(--font-corpo); }

tr.riga-storico { cursor: pointer; }
tr.riga-storico:hover { background: var(--celeste-chiaro); }

/* Home (index.html) */
.eco-hero {
  background: var(--celeste);
  padding: 44px 20px 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.eco-hero .eco-header-back { background: var(--bianco); order: 0; }
.eco-hero .occhiello { color: #16303F; }
.eco-hero h1 { color: #16303F; }
.eco-hero p {
  font-family: var(--font-corpo);
  font-size: 17px;
  line-height: 1.6;
  color: #16303F;
  margin: 0;
  max-width: 46ch;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding-top: 32px;
}
.card-modulo {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-modulo h3 {
  font-family: var(--font-titolo);
  font-size: var(--titolo-xs);
  text-transform: uppercase;
  letter-spacing: var(--titolo-tracking);
  line-height: var(--titolo-lh);
  margin: 0;
  color: var(--ink);
}
.card-modulo p {
  font-family: var(--font-corpo);
  font-size: 13px;
  line-height: var(--corpo-lh);
  color: var(--ink-3);
  margin: 0;
  flex: 1;
}
.card-modulo .btn-primary { align-self: flex-start; }