/* CARICO — stile mobile first. Niente framework: variabili, poche classi. */
:root {
  --sfondo: #f2f2f7;
  --carta: #ffffff;
  --testo: #111827;
  --leggero: #6b7280;
  --linea: #e5e7eb;
  --blu: #1e3a8a;
  --blu-chiaro: #e8edfb;
  --verde: #2f8a4f;
  --verde-chiaro: #e6f4ea;
  --rosso: #d93025;
  --rosso-chiaro: #fde8e7;
  --giallo: #8a5a00;
  --giallo-chiaro: #fff4d6;
  --arancio: #dd7f2b;
  --viola: #5b5bd6;
  --raggio: 18px;
  --ombra: 0 1px 2px rgba(0, 0, 0, .04);
  --barra: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--testo);
  background: var(--sfondo);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
body.con-barra { padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom) + 16px); }
a { color: var(--blu); text-decoration: none; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: .25rem 0 1rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
small { color: var(--leggero); }

/* testata */
.testata {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(242, 242, 247, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.marchio { display: flex; align-items: center; gap: 10px; color: var(--testo); font-weight: 800; font-size: 1.35rem; }
.marchio img { border-radius: 8px; }
.io, .iniziale {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blu-chiaro); color: var(--blu); font-weight: 800;
}
.iniziale.piccola { width: 36px; height: 36px; }

.contenuto { max-width: 640px; margin: 0 auto; padding: 4px 16px 24px; }

/* barra in basso */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around;
  height: calc(var(--barra) + env(safe-area-inset-bottom));
  padding: 6px 4px env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--linea);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.barra a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--leggero); font-size: .72rem; font-weight: 600;
}
.barra a.attiva { color: var(--blu); }
.barra .icona { width: 26px; height: 26px; }
.icona { width: 22px; height: 22px; vertical-align: middle; flex: none; }

/* blocchi */
.scheda {
  background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra);
  padding: 16px; margin: 0 0 12px;
}
.saluto { color: var(--leggero); font-size: 1.1rem; margin: .5rem 0 1rem; }
.sezione {
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--leggero); margin: 1.75rem 0 .6rem;
}
.conta {
  display: inline-block; min-width: 1.6em; padding: 0 .45em; border-radius: 999px;
  background: var(--linea); color: var(--testo); font-size: .8em; text-align: center; letter-spacing: 0;
}
.nota { color: var(--leggero); font-size: .9rem; margin: .4rem 0 .8rem; }
.vuoto { color: var(--leggero); text-align: center; padding: 1rem 0; }
.leggero { color: var(--leggero); font-weight: 500; }

/* griglia delle azioni (Oggi) */
.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.tessera {
  display: flex; flex-direction: column; gap: 4px; min-height: 150px;
  background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra);
  padding: 16px; color: var(--testo);
}
.tessera strong { font-size: 1.15rem; line-height: 1.2; margin-top: 10px; }
.quadro {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff;
}
.quadro .icona { width: 26px; height: 26px; }
.quadro.blu { background: var(--blu); }
.quadro.verde { background: var(--verde); }
.quadro.rosso { background: var(--rosso); }
.quadro.arancio { background: var(--arancio); }
.quadro.viola { background: var(--viola); }
.quadro.grigio { background: #9ca3af; }

/* elenchi */
.elenco { display: flex; flex-direction: column; gap: 8px; }
.voce, .voce-import > summary, .riga-link {
  display: flex; align-items: center; gap: 12px;
  background: var(--carta); border-radius: 14px; box-shadow: var(--ombra);
  padding: 12px 14px; color: var(--testo);
}
.riga-link { justify-content: space-between; }
.voce.spenta { opacity: .55; }
.testo-voce { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.testo-voce strong, .testo-voce small { overflow: hidden; text-overflow: ellipsis; }
.testo-voce small { white-space: nowrap; }
.elenco.compatto .voce { padding: 8px 12px; }
.quadrino {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--blu-chiaro); color: var(--blu); flex: none;
}
.freccia { color: #c4c4c9; }
.voce select { max-width: 45%; }

.voce-import > summary { list-style: none; cursor: pointer; }
.voce-import > summary::-webkit-details-marker { display: none; }
.voce-import[open] > summary { border-radius: 14px 14px 0 0; }
.dettaglio {
  background: var(--carta); border-top: 1px solid var(--linea); border-radius: 0 0 14px 14px;
  padding: 8px 14px 12px; font-size: .9rem;
}
.dettaglio ul { margin: .25rem 0; padding-left: 1.1rem; }

/* pillole di stato */
.pill {
  flex: none; white-space: nowrap; font-size: .8rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: var(--linea); color: var(--leggero);
}
.pill.ok { background: var(--verde-chiaro); color: var(--verde); }
.pill.avviso { background: var(--giallo-chiaro); color: var(--giallo); }
.pill.errore { background: var(--rosso-chiaro); color: var(--rosso); }
.pill.ruolo-admin { background: var(--blu); color: #fff; }
.pill.ruolo-responsabile { background: var(--blu-chiaro); color: var(--blu); }

/* messaggi */
.messaggio {
  border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; white-space: pre-line;
  background: var(--linea);
}
.messaggio.ok { background: var(--verde-chiaro); color: #1d5e34; }
.messaggio.avviso { background: var(--giallo-chiaro); color: var(--giallo); }
.messaggio.errore { background: var(--rosso-chiaro); color: #a1271e; }
.esito { font-size: .92rem; }
.testo-report { white-space: pre-wrap; font: .92rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; }

/* moduli */
.modulo label, .modulo fieldset { display: block; margin: 0 0 14px; font-weight: 600; }
.modulo fieldset { border: 0; padding: 0; }
.modulo legend { padding: 0; margin-bottom: 6px; }
input, select, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px;
  background: #fafafa; color: var(--testo); font-size: 16px; /* 16px: niente zoom su iPhone */
}
input[type=file] { padding: 10px; background: #fff; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blu); outline-offset: 1px; border-color: transparent; }
.voce select { margin-top: 0; width: auto; padding: 8px 10px; }
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta {
  display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important;
  padding: 8px 12px; border-radius: 999px; background: #f3f4f6; font-weight: 600;
}
.scelta input { margin: 0; }
a.scelta { color: var(--testo); }
.scelta.attiva { background: var(--blu); color: #fff; }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 12px 18px; min-height: 46px;
  background: var(--carta); color: var(--blu); font-weight: 700; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--linea);
}
.bottone.primario { background: var(--blu); color: #fff; box-shadow: none; }
.bottone.pericolo { color: var(--rosso); }
.bottone.largo { width: 100%; margin: 4px 0 8px; }
.bottone.piccolo { min-height: 36px; padding: 6px 14px; }
.bottone:disabled { opacity: .6; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.azioni .bottone { flex: 1; }
.azioni-colonna .bottone.largo:last-child { margin-bottom: 0; }
.titolo-azione { display: flex; justify-content: space-between; align-items: center; }
.indietro { display: inline-block; margin: 4px 0; font-weight: 600; }

/* acquisti e fornitori */
.schede { display: flex; gap: 4px; background: #e5e7eb; border-radius: 12px; padding: 3px; margin: 0 0 12px; }
.schede a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 10px; color: var(--testo); font-weight: 600; }
.schede a.attiva { background: var(--carta); box-shadow: var(--ombra); }
.periodo-nav { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; text-align: center; gap: 8px; }
.periodo-tipi { justify-content: center; margin: 12px 0 4px; }
.periodo-altro > summary { text-align: center; color: var(--blu); font-weight: 600; cursor: pointer; padding: 6px 0 0; }
.periodo-altro[open] > summary { margin-bottom: 8px; }
.periodo-intervallo { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.periodo-intervallo label { flex: 1 1 130px; font-weight: 600; font-size: .9rem; }
.tessera.bassa { min-height: 0; gap: 2px; }
.tessera.bassa strong { margin-top: 2px; font-variant-numeric: tabular-nums; }
.tessera.da-fare { box-shadow: inset 4px 0 0 var(--arancio), var(--ombra); }
.importo { margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.voce .bottone { flex: none; }
.voce.aumento .testo-voce small { white-space: normal; }
.gruppo { margin: 0 0 10px; }
.gruppo > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  background: var(--carta); border-radius: 14px; box-shadow: var(--ombra); padding: 12px 14px; font-weight: 700;
}
.gruppo > summary::-webkit-details-marker { display: none; }
.gruppo > summary::before { content: "›"; color: var(--leggero); transition: transform .15s; }
.gruppo[open] > summary::before { transform: rotate(90deg); }
.gruppo > .elenco { margin: 8px 0 0 12px; }

/* login e profilo */
.login { max-width: 420px; margin: 8vh auto 0; }
.login .sotto { color: var(--leggero); margin-top: -.5rem; }
.profilo { display: flex; align-items: center; gap: 12px; }
.profilo div { display: flex; flex-direction: column; }
.nota-scheda p { margin: .2rem 0; }
.vuota { text-align: center; padding: 28px 16px; }
.vuota .quadro { margin: 0 auto 8px; }

/* attesa HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.rotella {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* avviso a comparsa (errori di rete / permessi) */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--barra) + env(safe-area-inset-bottom) + 12px);
  z-index: 20; max-width: 600px; margin: 0 auto;
  background: #1f2937; color: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

@media (min-width: 700px) {
  .griglia { grid-template-columns: repeat(3, 1fr); }
}

/* articoli, abbinamenti, ricette, prodotti (chat 6) */
.filtri { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.filtri label { margin: 0; font-weight: 600; }
.voce.colonna { flex-direction: column; align-items: stretch; }
.riga-azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.riga-azioni input:not([type=checkbox]) { width: 7.5em; margin-top: 0; padding: 8px 10px; }
.riga-azioni select { flex: 1; min-width: 10em; margin-top: 0; padding: 8px 10px; }
.gruppo-riga { background: var(--carta); border-radius: 14px; box-shadow: var(--ombra); padding: 12px 14px; }
.gruppo-riga + .gruppo-riga { margin-top: 8px; }
.gruppo-riga header { display: flex; gap: 10px; align-items: flex-start; }
.gruppo-riga header .testo-voce small { white-space: normal; }
.gruppo-riga .modulo { margin: 10px 0 0; }
.gruppo-riga .modulo label { margin-bottom: 8px; }
.gruppo-riga details { margin-top: 8px; }
.gruppo-riga summary { cursor: pointer; font-weight: 600; color: var(--blu); }
.proposta { font-size: .85rem; color: var(--leggero); margin: 4px 0 0; }
.proposta.certa { color: var(--verde); }
.barra-massa { position: sticky; top: 0; z-index: 5; background: var(--sfondo); padding: 6px 0; }
.ingredienti { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ingrediente { display: grid; grid-template-columns: 1fr 7em auto; gap: 8px; align-items: center; }
.ingrediente select, .ingrediente input:not([type=checkbox]) { margin-top: 0; padding: 10px; }
.ingrediente small { color: var(--leggero); min-width: 2.2em; }
.tabella-scorri { overflow-x: auto; background: var(--carta); border-radius: 14px; box-shadow: var(--ombra); }
.tabella { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: right; white-space: nowrap; }
.tabella th:first-child, .tabella td:first-child { text-align: left; white-space: normal; min-width: 9em; }
.tabella th { font-size: .8rem; color: var(--leggero); font-weight: 600; }
.tabella tr.scoperto td { color: var(--leggero); }
.pill.ipotesi { background: var(--giallo-chiaro); color: var(--giallo); }
.pill.manca { background: var(--rosso-chiaro); color: var(--rosso); }
.pill.confermata { background: var(--verde-chiaro); color: var(--verde); }
.pill.non_serve { background: var(--linea); color: var(--leggero); }