/* Fondamenta/app/eco-shell.css — ciò che resta specifico di Eco dopo il passaggio al design
   system DEF (2026-10-10): il resto (bottoni, campi, tabelle, card, barra laterale/in basso,
   scena di accesso) viene da ds/gestionale/gestionale.css. Caricare DOPO gestionale.css. */

.hidden { display: none !important; }

/* ---------- guscio: quale barra si vede a quale larghezza ----------
   gestionale.css disegna i componenti (.side, .bbar, .topbar...) ma non decide da sola quale
   mostrare: lo stesso schema di Faro (Fondamenta/app/faro-guscio.css), adattato a Eco (niente
   tema, niente tour, niente flusso). */
.gest.eco-g { background: transparent; }
.gest.eco-g-tel { display: none; }
.gest .eco-g-account { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.gest button.bb { border: 0; background: none; font-family: inherit; cursor: pointer; width: 100%; }
.gest .eco-g-altro .li { padding: 0 4px; border-top: 0; }
.gest .eco-g-altro .li + .li { border-top: 1px solid var(--linea-tenue); }

@media (min-width: 640px) {
  body.eco-guscio { padding-left: 248px; }
  .gest.eco-g-side { position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 30; overflow-y: auto; border-right: 1px solid var(--linea); background: var(--bianco); }
  .gest.eco-g-side .side { min-height: 100%; width: auto; border-right: 0; }
}
@media (max-width: 639.98px) {
  .gest.eco-g-side { display: none; }
  .gest.eco-g-tel { display: block; }
  .eco-g-contenitore { position: sticky; top: 0; z-index: 30; }
  body.eco-guscio { padding-bottom: var(--eco-bbar-h, calc(82px + env(safe-area-inset-bottom))); }
  .gest.eco-g-bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
  .gest.eco-g-bbar .bbar { position: static; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* ---------- finestre (foglio / Modal), stessa cornice di Faro ---------- */
.gest.eco-dlg .sheet { max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding-bottom: max(26px, env(safe-area-inset-bottom)); transition: transform .12s ease; }
.gest.eco-dlg .sheet .handle { margin-bottom: 0; position: relative; flex: none; touch-action: none; }
.gest.eco-dlg .modal-wrap { overflow-y: auto; padding: 72px 16px 40px; }
.gest.eco-dlg .modal { max-width: 100%; flex: none; }
.gest.eco-dlg .modal-h .eco-dlg-titolo { font-size: 30px; margin-top: 4px; }
.gest.eco-dlg .eco-dlg-corpo { display: flex; flex-direction: column; gap: 14px; }
.gest.eco-dlg .eco-dlg-testo { white-space: pre-line; }
.gest.eco-dlg .eco-dlg-corpo > div:empty { display: none; }
html.eco-dlg-aperta { overflow: hidden; }

/* ---------- accesso (index.html) ---------- */
.gest .eco-login { display: flex; flex-direction: column; gap: 14px; }
.gest .eco-login > div:empty, .gest .scena-card > div:empty { display: none; }
.gest .eco-login #turnstileBox { margin-top: -14px; }
.gest .scena-card .lnk { align-self: flex-start; }

/* Contenitore di pagina (dentro #appView): gestionale.css non impone una larghezza massima,
   ogni pagina di Eco ne ha una. */
.page {
  max-width: var(--w-page-narrow);
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* Titoli di pagina/sezione: gestionale.css stila SOLO le classi .h1/.h2/.h3 (scelta esplicita del
   design system, vedi gestionale.css §"tipografia"), non il tag <h1>/<h2> nudo — qui invece ogni
   pagina di Eco usa ancora <h1>/<h2> semantici senza classe, per non dover toccare 6 pagine:
   si ottiene lo stesso risultato ristilizzando il tag dentro .gest. */
.gest h1 {
  font-family: var(--font-titolo);
  font-size: var(--titolo-gest-pagina);
  text-transform: uppercase;
  line-height: var(--titolo-lh);
  letter-spacing: var(--titolo-tracking);
  margin: 4px 0 4px;
}
.gest.tel h1 { font-size: var(--titolo-gest-pagina-tel); }
.gest h2 {
  font-family: var(--font-titolo);
  font-size: var(--titolo-gest-sezione);
  text-transform: uppercase;
  line-height: var(--titolo-lh);
  letter-spacing: var(--titolo-tracking);
}

/* Blocco di sezione dentro una pagina (Vista mensile, Confronta con, Il mio account, Pilastri):
   stacco verticale + titolo con riga sotto. */
.sezione { margin-top: 28px; }
.sezione h2 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }

/* Riga di selettori mese/anno (Vista mensile, Confronta con, Entrate totali). */
.selettori { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }

/* Campo con errore di validazione (es. POS > incasso totale in Corrispettivi). */
.input.input-errore { border-color: var(--bad-fg); background: #FBEAE8; }

/* Variante "in evidenza" di una kpi del DEF (fondo panna) — Gestione contante, Account. */
.gest .kpi.featured { background: var(--panna); }

/* Link testuale distruttivo (Elimina...): gestionale.css ha solo .btn-danger (bottone pieno),
   qui serve la variante link (.link, testo colorato, nessun bordo). */
.gest .link.danger { color: var(--bad-fg); }
.gest .link.danger:hover { color: #6B2019; }

/* Etichetta/valore dentro una kpi (email, ruolo, importo contante): stesso ruolo di .lbl/.v del
   DEF ma per testo libero (non sempre un numero grande in Bebas). */
.kpi .label { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.kpi .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 .value.small { font-size: var(--titolo-gest-blocco); }
.gest .kpi.warn .value, .gest .kpi.warn .label { color: var(--warn-fg); }

/* Voce di navigazione o della BarraInBasso non ancora costruita ("in arrivo", D3 della specifica):
   stile spento, mai un link vero. */
.gest .nav-i.off, .gest .bb.off {
  opacity: .55;
  cursor: default;
}
.gest .nav-i.off .badge, .gest .bb.off .badge { margin-left: auto; }

/* Home (Fondamenta/app/home.html): scorciatoie ai moduli di Incassi. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.card-modulo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-modulo .btn { align-self: flex-start; }

/* Riga di campi + bottone in linea (Account, Entrate fatturate, Extra, Gestione contante):
   nessun equivalente diretto in gestionale.css, è un pattern di Eco. */
.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 { flex: none; }

/* Corrispettivi: una card per punto vendita nel modulo di inserimento. */
.store-card {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: 16px;
  margin-bottom: 14px;
}
.store-card h3 { margin: 0 0 12px; font-size: 16px; 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; }
.chiuso-riga { margin-top: 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.chiuso-riga input[type="checkbox"] {
  width: var(--touch-min); height: var(--touch-min);
  accent-color: var(--celeste-scuro); border-radius: var(--r-pill); cursor: pointer;
}

.meteo-box {
  background: var(--celeste-15);
  border: 1px solid var(--celeste-50);
  border-radius: var(--r-m);
  padding: 12px 16px;
  font-size: 13px;
  margin: 16px 0;
  color: var(--ink-2);
}

/* Entrate fatturate / Extra: righe di voce mensile (non una tabella, un campo per voce fissa). */
.voce-riga {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.voce-riga label { font-weight: 600; }
.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);
}

/* Griglia mensile di Corrispettivi: un colore di sfondo per gruppo di colonne (punto vendita).
   Caffè Duomo usa il marrone del suo logo reale (non è un token del brand Gelaterie Duomo, è
   specifico di questo bar, vedi Fratelli Dioletta SRLS/Loghi/Caffè Duomo). Le due gelaterie usano
   due toni di celeste del design system. */
#grigliaMese .col-caffe, #grigliaHead .col-caffe, #grigliaFoot .col-caffe { background: #EDE6DF; }
#grigliaMese tr.riga-totale .col-caffe { background: #DDD1C2; }
#grigliaMese .col-gelateria-0 { background: var(--celeste-15); }
#grigliaMese .col-gelateria-1 { background: var(--celeste-30); }
#grigliaHead .col-gelateria-0, #grigliaFoot .col-gelateria-0 { background: var(--celeste-30); }
#grigliaHead .col-gelateria-1, #grigliaFoot .col-gelateria-1 { background: var(--celeste-50); }
#grigliaMese tr.riga-totale .col-gelateria-0 { background: var(--celeste-30); }
#grigliaMese tr.riga-totale .col-gelateria-1 { background: var(--celeste-50); }
#grigliaMese .col-store-inizio { border-left: 2px solid var(--linea); }
#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-15); }
#grigliaMese tr.riga-evidenziata td { background: var(--ok-bg) !important; transition: background 1.5s ease; }

/* Confronto periodi. */
.delta-pos { color: var(--ok-fg); }
.delta-neg { color: var(--bad-fg); }
.confronto-nota { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.confronto-card { overflow-x: auto; }

/* Promemoria "giorni non ancora inseriti" (avviso-box, Corrispettivi). */
.avviso-box {
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-bordo);
  border-radius: var(--r-s); padding: 12px 16px; font-size: 13px; margin: 16px 0;
}
.avviso-box strong { display: block; margin-bottom: 4px; }

@media print {
  .no-print { display: none !important; }
}