/* ============================================================================
   LE MIE CALORIE — Direzione "NOTTURNO"
   ----------------------------------------------------------------------------
   Foglio di stile completo e autosufficiente. Sostituisce interamente
   web/styles.css. Nessun @import, nessun font remoto, nessuna immagine remota.

   Carattere del progetto: applicazione scura per impostazione predefinita.
   Fondo quasi nero attraversato da bagliori profondi, superfici "vetrose"
   semitrasparenti bordate da 1px luminoso, accento verde acido (lime) usato
   come firma su ogni elemento attivo. Tipografia compatta e tecnica, con
   micro-etichette monospaziate maiuscole.

   La card del bilancio e' l'elemento drammatico della pagina: numero enorme
   con alone luminoso, leggibile a colpo d'occhio anche da lontano.

   Indice:
     01. Token di progetto (tema notturno)
     02. Reset e fondamenta
     03. Sfondo scenografico e texture
     04. Tipografia di base e micro-etichette
     05. Focus, selezione, accessibilita' trasversale
     06. Header applicazione
     07. Striscia data e notice
     08. Card del bilancio (elemento drammatico)
     09. Metriche introdotte / bruciate
     10. Sezioni voci: intestazioni, bottone aggiungi
     11. Elenco voci e stato vuoto
     12. Dialoghi: guscio, backdrop, testata
     13. Campi modulo dentro i dialoghi (compresi battito e campi percorso)
     14. Selettore modalita' pasto (manuale / AI)
     15. Alimenti in bozza
     16. Bottoni: primario, secondario, pericolo, azioni
     17. Dialoghi messaggio e conferma
     18. Regole funzionali obbligatorie (non rimuovere)
     19. Breakpoint 620px (tablet / desktop)
     20. Breakpoint 380px (schermi molto stretti)
     21. Variante chiara (prefers-color-scheme: light)
     22. Movimento ridotto
   ========================================================================== */


/* ============================================================================
   01. TOKEN DI PROGETTO — tema notturno (predefinito, non condizionato)
   ========================================================================== */

:root {
  /* Il tema scuro e' il default assoluto: non dipende da prefers-color-scheme.
     color-scheme informa i controlli nativi (date, time, select, scrollbar). */
  color-scheme: dark;

  /* --- Fondali --- */
  --bg:            #04060a;   /* quasi nero, leggermente freddo */
  --bg-deep:       #010204;   /* estremita' della sfumatura */
  --bg-haze:       #0a1206;   /* alone verde diffuso in alto */

  /* --- Superfici vetrose --- */
  --surface:       rgba(255, 255, 255, 0.038);
  --surface-hi:    rgba(255, 255, 255, 0.065);
  --surface-solid: #0b0f16;   /* per i dialoghi, dove serve opacita' reale */
  --surface-sunk:  rgba(0, 0, 0, 0.32);

  /* --- Bordi luminosi a 1px --- */
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);
  --line-accent:   rgba(198, 255, 79, 0.34);

  /* --- Testo --- */
  --text:          #e9f2ea;
  --text-dim:      #a7b6ad;
  --text-faint:    #6d7d75;

  /* --- Accento firma: verde acido / lime --- */
  --accent:        #c6ff4f;   /* usato come fondo e come tratto luminoso */
  --accent-text:   #c6ff4f;   /* accento usato come colore testo */
  --accent-ink:    #0a1400;   /* testo sopra un fondo accento */
  --accent-soft:   rgba(198, 255, 79, 0.14);
  --accent-line:   rgba(198, 255, 79, 0.42);

  /* --- Accento secondario: brace (calorie bruciate) --- */
  --ember:         #ff8a4c;
  --ember-soft:    rgba(255, 138, 76, 0.14);
  --ember-line:    rgba(255, 138, 76, 0.38);

  /* --- Semantici --- */
  --danger:        #ff4d6a;
  --danger-soft:   rgba(255, 77, 106, 0.14);
  --danger-line:   rgba(255, 77, 106, 0.42);
  --warn:          #ffc857;

  /* --- Bagliori diffusi --- */
  --glow-accent:   0 0 34px rgba(198, 255, 79, 0.30), 0 0 90px rgba(198, 255, 79, 0.12);
  --glow-ember:    0 0 26px rgba(255, 138, 76, 0.26);
  --glow-danger:   0 0 26px rgba(255, 77, 106, 0.30);
  --halo-number:   0 0 8px rgba(198, 255, 79, 0.55), 0 0 38px rgba(198, 255, 79, 0.34), 0 0 90px rgba(198, 255, 79, 0.16);

  /* --- Ombre di elevazione --- */
  --shadow-1:      0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 26px rgba(0, 0, 0, 0.55);
  --shadow-2:      0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 70px rgba(0, 0, 0, 0.72);

  /* --- Geometria ---
     REGOLA DI PROGETTO: solo i controlli sono arrotondati. Superfici, card,
     dialoghi, campi, badge e decorazioni sono squadrati, senza eccezioni.
     Esistono percio' due soli raggi, e valgono unicamente per i bottoni.
     Non introdurre border-radius fuori da un controllo. */
  --r-md:  14px;   /* bottoni rettangolari: primario, secondario, pericolo, nav-day */
  --r-pill: 999px; /* bottoni a pastiglia: add-button, entry-button, switch, user-link */

  /* --- Ritmo --- */
  --gap:   14px;
  --pad:   16px;
  --shell: 46rem;

  /* --- Tipografia --- */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Sfocatura vetro (isolata in un token: si azzera nella variante chiara) --- */
  --blur: blur(16px) saturate(150%);
}


/* ============================================================================
   02. RESET E FONDAMENTA
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.006em;         /* tipografia compatta */
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* PWA: evita il rimbalzo orizzontale e rispetta le safe-area su iOS */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

img, svg { max-width: 100%; }

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* Ogni numero dell'applicazione usa cifre a larghezza fissa: le colonne
   non "ballano" quando il bilancio passa da 3 a 4 cifre o cambia segno. */
input[type="number"],
input[type="date"],
input[type="time"],
.balance-card strong,
.balance-card small,
.metrics strong,
.metrics em,
.entry b,
.draft-item,
.date-picker input,
.progress { font-variant-numeric: tabular-nums; }


/* ============================================================================
   03. SFONDO SCENOGRAFICO E TEXTURE
   ----------------------------------------------------------------------------
   Due strati decorativi puri, entrambi su ::before/::after di body:
   - i bagliori profondi (verde in alto, brace in basso a destra);
   - una griglia tecnica finissima che da' "carattere strumentale".
   ========================================================================== */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Bagliori diffusi */
body::before {
  background:
    radial-gradient(120% 78% at 50% -18%, var(--bg-haze) 0%, transparent 62%),
    radial-gradient(70% 46% at 8% 4%,  rgba(198, 255, 79, 0.13) 0%, transparent 70%),
    radial-gradient(74% 52% at 108% 88%, rgba(255, 138, 76, 0.10) 0%, transparent 72%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

/* Griglia tecnica 40x40, appena percepibile */
body::after {
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 40px 40px;
  /* Dissolve la griglia verso il basso: resta solo un accenno in alto */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
  opacity: 0.7;
}

.app-shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad) calc(48px + env(safe-area-inset-bottom));
}


/* ============================================================================
   04. TIPOGRAFIA DI BASE E MICRO-ETICHETTE
   ----------------------------------------------------------------------------
   Le micro-etichette (kicker) sono monospaziate, maiuscole e spaziate:
   sono la cifra "tecnica" della direzione notturna.
   ========================================================================== */

h1, h2, h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

h2 { font-size: 1.32rem; }

p { margin: 0; }

.section-heading p,
.dialog-kicker,
.balance-card > div:first-child p,
.metrics small,
.date-picker span,
.brand small {
  font-family: var(--font-mono);
  font-size: 0.635rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}


/* ============================================================================
   05. FOCUS, SELEZIONE, ACCESSIBILITA' TRASVERSALE
   ========================================================================== */

/* Un unico anello di focus, sempre visibile su fondo scuro: doppio tratto
   (lime + alone) cosi' resta leggibile anche sopra le superfici accese.
   NB: qui NON si dichiara border-radius. L'anello di focus segue gia' la forma
   dell'elemento; imporre un raggio comune deformerebbe i controlli tondi
   (.round-button, .close-dialog, .remove-draft) nel momento in cui ricevono
   il focus da tastiera. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Sui controlli con angoli propri l'anello segue la loro forma */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--accent-soft);
}

/* Il focus da mouse non deve disegnare nulla: solo la tastiera */
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Barre di scorrimento coerenti col tema */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 255, 79, 0.28) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(198, 255, 79, 0.22);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }


/* ============================================================================
   06. HEADER APPLICAZIONE
   ========================================================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  margin: 0 calc(var(--pad) * -1);
  padding: 10px var(--pad);
  background: linear-gradient(180deg, rgba(4, 6, 10, 0.92) 0%, rgba(4, 6, 10, 0.62) 100%);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}

/* --- Marchio --- */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 4px;
  margin: -4px;
}

.brand > span:last-child {
  display: grid;
  min-width: 0;
}

.brand b {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand small {
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Il monogramma e' il primo punto di luce della pagina */
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: linear-gradient(150deg, var(--accent) 0%, #7fd41f 100%);
  box-shadow: var(--glow-accent);
}

/* --- Azioni a destra --- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.user-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  max-width: 40vw;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

/* Quando il link ha un href e' cliccabile; senza href (modalita' demo) resta
   una semplice targhetta informativa, ma con la stessa forma. */
.user-link[href]:hover {
  color: var(--text);
  border-color: var(--line-accent);
  background: var(--accent-soft);
}

.round-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, box-shadow 0.18s ease;
}

.round-button:hover {
  color: var(--accent-text);
  border-color: var(--line-accent);
  box-shadow: var(--glow-accent);
}

.round-button:active { transform: scale(0.94); }


/* ============================================================================
   07. STRISCIA DATA E NOTICE
   ========================================================================== */

.app-main {
  display: grid;
  gap: 18px;
  padding-top: 18px;
}

.date-strip {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: stretch;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1);
}

.nav-day {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: var(--text-dim);
  font-size: 1.3rem;
  line-height: 1;
  transition: color 0.18s ease, border-color 0.18s ease,
              background 0.18s ease, box-shadow 0.18s ease;
}

.nav-day:hover {
  color: var(--accent-text);
  border-color: var(--line-accent);
  background: var(--accent-soft);
  box-shadow: var(--glow-accent);
}

.nav-day:active { transform: translateY(1px); }

/* Etichetta data: sopra la giornata scritta per esteso (aggiornata da JS),
   sotto il campo date nativo. */
.date-picker {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 0;
  padding: 3px 10px;
  text-align: center;
}

.date-picker span {
  color: var(--accent-text);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* min-height 40px: il campo data e' l'unico controllo nativo della schermata
   principale e deve restare un bersaglio tattile pieno. */
.date-picker input {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}

.date-picker input::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  filter: invert(1) sepia(1) saturate(6) hue-rotate(35deg);
}

.date-picker input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Riga informativa sotto la data */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-line);
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 70%);
  font-size: 0.775rem;
  line-height: 1.4;
  color: var(--text-dim);
}

/* Pallino pulsante: segnala "sistema attivo" */
.notice::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse-dot 2.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.72); }
}


/* ============================================================================
   08. CARD DEL BILANCIO — l'elemento drammatico della pagina
   ----------------------------------------------------------------------------
   Struttura reale:
     .balance-card
       > div            -> p ("Bilancio di oggi") + strong#balance + span ("kcal")
       > div.balance-details -> .progress > i#balance-progress   +  small
   ========================================================================== */

.balance-card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  padding: 24px 20px 20px;
  border: 1px solid var(--line-accent);
  background:
    radial-gradient(115% 92% at 50% -12%, rgba(198, 255, 79, 0.16) 0%, transparent 66%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  box-shadow: var(--shadow-2), 0 0 60px rgba(198, 255, 79, 0.10);
  overflow: hidden;
}

/* Filo di luce sul bordo superiore: la "firma" lime della card */
.balance-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.85;
}

/* Alone diffuso dietro il numero */
.balance-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -46%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(198, 255, 79, 0.26) 0%, transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}

/* --- Blocco numerico --- */

.balance-card > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
}

.balance-card > div:first-child p {
  flex: 1 0 100%;
  margin-bottom: 4px;
  color: var(--text-faint);
}

/* IL numero. Enorme, monospaziato, con alone luminoso.
   Gestisce senza rompersi valori come "-851", "+1.240", "--". */
.balance-card strong {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(3.4rem, 19vw, 5.6rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.055em;
  color: var(--accent-text);
  text-shadow: var(--halo-number);
}

.balance-card > div:first-child span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Barra di avanzamento e didascalia --- */

.balance-details {
  display: grid;
  gap: 10px;
}

.progress {
  position: relative;
  height: 8px;
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

/* Tacca del 50% = pareggio calorico */
.progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
}

/* <i id="balance-progress"> riceve la width inline da JS: qui NON si tocca. */
.progress > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7fd41f 0%, var(--accent) 100%);
  box-shadow: 0 0 16px rgba(198, 255, 79, 0.62);
  transition: width 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.balance-card small {
  font-size: 0.755rem;
  line-height: 1.4;
  color: var(--text-dim);
}


/* ============================================================================
   09. METRICHE — introdotte / bruciate
   ----------------------------------------------------------------------------
   .metrics > article > span.metric-icon(.intake-icon|.burned-icon)
                      + div > small + strong + em
   ========================================================================== */

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.metrics > article {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 15px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.metrics > article:hover { transform: translateY(-2px); }

.metrics > article > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.metric-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

/* Introdotte: verde acido (energia in entrata) */
.intake-icon {
  color: var(--accent-text);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line), var(--glow-accent);
}
.metrics > article:has(.intake-icon):hover { border-color: var(--accent-line); }

/* Bruciate: brace (energia in uscita) */
.burned-icon {
  color: var(--ember);
  background: var(--ember-soft);
  box-shadow: inset 0 0 0 1px var(--ember-line), var(--glow-ember);
}
.metrics > article:has(.burned-icon):hover { border-color: var(--ember-line); }

.metrics small {
  font-size: 0.575rem;
  letter-spacing: 0.16em;
}

.metrics strong {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text);
}

.metrics em {
  display: block;
  font-style: normal;
  font-size: 0.665rem;
  line-height: 1.3;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}


/* ============================================================================
   10. SEZIONI VOCI — intestazione e bottone "Aggiungi"
   ========================================================================== */

.entry-section {
  display: grid;
  gap: 11px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.section-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.section-heading p { color: var(--accent-text); }

.section-heading h2 { font-size: 1.28rem; }

.add-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 15px 0 11px;
  border: 1px solid var(--line-accent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.815rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.14s ease;
}

/* Il "+" e' una pastiglia piena: il bottone diventa un piccolo strumento */
.add-button > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.add-button:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--glow-accent);
}

.add-button:hover > span {
  background: var(--accent-ink);
  color: var(--accent);
}

.add-button:active { transform: translateY(1px); }


/* ============================================================================
   11. ELENCO VOCI E STATO VUOTO
   ----------------------------------------------------------------------------
   article.entry > div (strong + small)  +  div (b + button + button.delete-entry)
   ATTENZIONE: i due div interni non hanno classe: si selezionano per posizione.
   ========================================================================== */

.entries {
  display: grid;
  gap: 10px;
}

/* --- Stato vuoto: il testo sta direttamente nel contenitore --- */
.entries.empty {
  display: grid;
  place-items: center;
  gap: 0;
  min-height: 128px;
  padding: 30px 20px;
  border: 1px dashed var(--line-strong);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.018) 0 10px,
      transparent 10px 20px
    );
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-faint);
}

/* Segno decorativo dello stato vuoto */
.entries.empty::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border: 1px dashed var(--line-accent);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
}

/* --- Voce singola --- */

.entry {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1);
  transition: border-color 0.18s ease, background 0.18s ease;
}

/* Filo verticale lime sul lato sinistro, si accende al passaggio */
.entry::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.28;
  transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.entry:hover {
  border-color: var(--line-accent);
  background: var(--surface-hi);
}

.entry:hover::before {
  opacity: 1;
  box-shadow: 0 0 12px var(--accent);
}

/* Primo div: titolo + dettaglio (spesso lungo, es. "07:20 - Yogurt, Banana") */
.entry > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.entry > div:first-child strong {
  font-size: 0.975rem;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--text);
}

.entry > div:first-child small {
  font-size: 0.745rem;
  line-height: 1.4;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* Secondo div: kcal + azioni */
.entry > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Le kcal della voce: monospaziate, in evidenza, spingono i bottoni a destra */
.entry b {
  margin-right: auto;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: 0.815rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--accent-text);
}

.entry-button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.775rem;
  font-weight: 550;
  transition: color 0.16s ease, border-color 0.16s ease,
              background 0.16s ease, box-shadow 0.16s ease;
}

.entry-button:hover {
  color: var(--accent-text);
  border-color: var(--line-accent);
  background: var(--accent-soft);
}

.entry-button.delete-entry:hover {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-soft);
  box-shadow: var(--glow-danger);
}

.entry-button.delete-entry:focus-visible {
  outline-color: var(--danger);
  box-shadow: 0 0 0 6px var(--danger-soft);
}


/* ============================================================================
   12. DIALOGHI — guscio, backdrop, testata
   ----------------------------------------------------------------------------
   Su mobile i dialoghi sono fogli agganciati al bordo inferiore (pattern PWA);
   dal breakpoint 620px diventano schede centrate.
   ========================================================================== */

dialog.app-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  /* margin-block-end:0 ancora il foglio in basso; auto in alto lo spinge giu' */
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

dialog.app-dialog::backdrop {
  background:
    radial-gradient(90% 60% at 50% 108%, rgba(198, 255, 79, 0.14) 0%, transparent 64%),
    rgba(1, 2, 4, 0.76);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
}

/* Il guscio vero e proprio: e' il <form> */
.dialog-shell {
  position: relative;
  display: grid;
  gap: 14px;
  max-height: 92dvh;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid var(--line-accent);
  border-bottom: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(198, 255, 79, 0.09) 0%, transparent 62%),
    var(--surface-solid);
  box-shadow: var(--shadow-2), 0 0 70px rgba(198, 255, 79, 0.10);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Filo di luce superiore, come sulla card del bilancio */
.dialog-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Maniglia da bottom-sheet, solo su mobile (rimossa a 620px) */
.dialog-shell::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 4px;
  transform: translateX(-50%);
  background: var(--line-strong);
}

/* Varianti compatte dei dialoghi messaggio/conferma */
.dialog-shell.compact {
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
}

/* --- Testata --- */

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.dialog-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dialog-head h2 {
  font-size: 1.34rem;
  letter-spacing: -0.032em;
}

.dialog-kicker { color: var(--accent-text); }

.close-dialog {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.16s ease, border-color 0.16s ease,
              background 0.16s ease, transform 0.16s ease;
}

.close-dialog:hover {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-soft);
  transform: rotate(90deg);
}


/* ============================================================================
   13. CAMPI MODULO DENTRO I DIALOGHI
   ----------------------------------------------------------------------------
   Ogni <label> contiene un nodo di testo seguito dal controllo: la label e'
   quindi una griglia che impila etichetta e campo.
   ========================================================================== */

.dialog-shell label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.635rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dialog-shell input,
.dialog-shell select,
.dialog-shell textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-transform: none;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

/* I campi numerici, data e ora tornano monospaziati: sono "strumenti" */
.dialog-shell input[type="number"],
.dialog-shell input[type="date"],
.dialog-shell input[type="time"] {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.dialog-shell textarea {
  min-height: 108px;
  line-height: 1.5;
  resize: vertical;
}

.dialog-shell input::placeholder,
.dialog-shell textarea::placeholder {
  color: var(--text-faint);
  opacity: 0.75;
}

.dialog-shell input:hover,
.dialog-shell select:hover,
.dialog-shell textarea:hover { border-color: var(--line-strong); }

.dialog-shell input:focus,
.dialog-shell select:focus,
.dialog-shell textarea:focus {
  border-color: var(--accent-line);
  background: rgba(0, 0, 0, 0.42);
}

/* Freccia della select disegnata in CSS (nessuna immagine esterna) */
.dialog-shell select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* La tendina della select e' disegnata dal sistema operativo: con un tema cosi'
   scuro va forzato un fondo opaco, altrimenti su alcune combinazioni
   browser/OS le opzioni restano testo chiaro su fondo chiaro. */
.dialog-shell option {
  background-color: var(--surface-solid);
  color: var(--text);
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: normal;
}

/* Il <datalist> dell'autocomplete alimenti non deve mai occupare una riga
   della griglia .manual-fields (alcuni browser non lo nascondono da soli). */
datalist { display: none; }

.dialog-shell input[type="date"]::-webkit-calendar-picker-indicator,
.dialog-shell input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(1) sepia(1) saturate(6) hue-rotate(35deg);
}

/* Coppia di campi affiancati */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* "facoltativa" dentro l'etichetta */
.optional {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  background: var(--surface);
}

/* --- Campo battito medio (dialogo attivita') ---
   La frequenza cardiaca appartiene alla famiglia semantica delle calorie
   bruciate: prende quindi il filo "brace" sul bordo sinistro, come firma.
   Nessun raggio: il campo resta squadrato come tutti gli altri. */
.dialog-shell input[name="avgHeartRate"] {
  border-left: 2px solid var(--ember-line);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Hover e focus vanno ridichiarati: le regole generiche piu' sopra hanno la
   stessa specificita' e riscriverebbero anche il bordo sinistro. */
.dialog-shell input[name="avgHeartRate"]:hover {
  border-color: var(--line-strong);
  border-left-color: var(--ember);
}

.dialog-shell input[name="avgHeartRate"]:focus {
  border-color: var(--ember-line);
  border-left-color: var(--ember);
}

/* --- Gruppo dei campi percorso (dialogo attivita') ---
   .route-fields raccoglie i campi che hanno senso solo per le attivita' con
   percorso: distanza, dislivello positivo e negativo, minuti in movimento.
   E' mostrato e nascosto da JS con la proprieta' [hidden]: la regola che lo
   spegne sta nella sezione 18 ed e' obbligatoria, perche' il display:grid
   qui sotto scavalcherebbe l'hidden nativo del browser.
   Contenitore squadrato: nessun border-radius: i due raggi del progetto
   valgono unicamente per i bottoni.
   Una sola colonna sotto i 620px; le due colonne arrivano dalla sezione 19. */
.route-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  /* neutralizza il min-width:min-content che il browser da' ai <fieldset> */
  min-inline-size: 0;
  padding: 12px 13px 13px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-line);
  background: var(--surface);
}

/* Intestazione del gruppo: micro-etichetta monospaziata come le <label>, ma
   in accento e distesa su tutta la larghezza della griglia. Sono coperte le
   forme di markup ammesse: classe dedicata, titolo, legend di un fieldset. */
.route-fields > .route-fields-title,
.route-fields > legend,
.route-fields > h3 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.635rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Quadratino di firma davanti all'intestazione: decorazione squadrata */
.route-fields > .route-fields-title::before,
.route-fields > legend::before,
.route-fields > h3::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

/* Eventuale nota in coda al gruppo */
.route-fields > small {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-faint);
}

/* Una coppia .two-col annidata occupa la riga intera: senza questa regola,
   dal breakpoint 620px si otterrebbero quattro colonne troppo strette. */
.route-fields > .two-col { grid-column: 1 / -1; }

/* Nota sotto il campo descrizione AI */
.ai-fields > small {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-faint);
}

/* Nota di caricamento durante la stima AI (creata da JS, nascosta con [hidden]) */
.loading-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line-accent);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--accent-text);
}

.loading-note::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse-dot 1.2s ease-in-out infinite;
}


/* ============================================================================
   14. SELETTORE MODALITA' PASTO (manuale / stima AI)
   ----------------------------------------------------------------------------
   .mode-switch#meal-mode > button[data-mode="manual"|"ai"]
   Lo stato attivo dipende da .meal-dialog[data-mode=...] sul <dialog>.
   ========================================================================== */

.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
}

.mode-switch > button {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.665rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.mode-switch > button:hover { color: var(--text); }

/* Pillola attiva — REGOLA FUNZIONALE (vedi anche sezione 18) */
.meal-dialog[data-mode="manual"] .mode-switch [data-mode="manual"],
.meal-dialog[data-mode="ai"]     .mode-switch [data-mode="ai"] {
  color: var(--accent-ink);
  background: linear-gradient(150deg, var(--accent) 0%, #96e42a 100%);
  box-shadow: var(--glow-accent);
}


/* ============================================================================
   15. ALIMENTI IN BOZZA
   ----------------------------------------------------------------------------
   .meal-items > .draft-item > span + button.remove-draft
   ========================================================================== */

.meal-items {
  display: grid;
  gap: 7px;
}

/* Quando la lista e' vuota il contenitore non deve lasciare spazio morto */
.meal-items:empty { display: none; }

.draft-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 13px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: var(--text-dim);
}

.draft-item > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.remove-draft {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.remove-draft:hover {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.remove-draft:focus-visible {
  outline-color: var(--danger);
  box-shadow: 0 0 0 6px var(--danger-soft);
}


/* ============================================================================
   16. BOTTONI — primario, secondario, pericolo, riga azioni
   ========================================================================== */

/* --- Primario: superficie lime piena, la firma del progetto --- */
.primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  margin-top: 2px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--accent) 0%, #93e226 100%);
  color: var(--accent-ink);
  font-size: 0.925rem;
  font-weight: 700;
  letter-spacing: -0.008em;
  box-shadow: var(--glow-accent);
  transition: filter 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 46px rgba(198, 255, 79, 0.5), 0 0 110px rgba(198, 255, 79, 0.18);
}

.primary:active { transform: translateY(1px); }

.primary:disabled {
  cursor: not-allowed;
  filter: none;
  background: var(--surface-hi);
  color: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Spinner del bottone in caricamento — REGOLA FUNZIONALE (vedi sezione 18) */
.primary.is-loading::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Secondario: contorno, nessun riempimento --- */
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.16s ease, border-color 0.16s ease,
              background 0.16s ease, box-shadow 0.16s ease;
}

.secondary:hover {
  color: var(--accent-text);
  border-color: var(--line-accent);
  background: var(--accent-soft);
  box-shadow: var(--glow-accent);
}

/* Il bottone "aggiungi alimento" occupa tutta la larghezza ed e' tratteggiato:
   si legge subito come "slot da riempire". */
.add-food {
  width: 100%;
  border-style: dashed;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* --- Pericolo --- */
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--danger-line);
  border-radius: var(--r-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 700;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.danger-button:hover {
  color: #180207;
  background: var(--danger);
  box-shadow: var(--glow-danger);
}

.danger-button:focus-visible {
  outline-color: var(--danger);
  box-shadow: 0 0 0 6px var(--danger-soft);
}

/* --- Riga azioni del dialogo di conferma --- */
.dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.dialog-actions .secondary,
.dialog-actions .danger-button { width: 100%; }


/* ============================================================================
   17. DIALOGHI MESSAGGIO E CONFERMA
   ========================================================================== */

/* Sotto i 620px i dialoghi di servizio restano fogli a tutta larghezza come gli
   altri: una max-width qui li staccherebbe dal bordo lasciando scoperto il
   fondo trasparente del <dialog>. La larghezza ridotta arriva dal breakpoint. */
.message-dialog .dialog-shell,
.confirm-dialog .dialog-shell {
  width: 100%;
  margin-inline: auto;
}

/* Simbolo grande: cerchio luminoso con l'icona testuale al centro */
.message-symbol {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 2px;
  border: 1px solid var(--accent-line);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 72%);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--glow-accent);
}

/* Variante di avviso: vira all'ambra */
.message-symbol.warning-symbol {
  border-color: rgba(255, 200, 87, 0.45);
  background: radial-gradient(circle, rgba(255, 200, 87, 0.16) 0%, transparent 72%);
  color: var(--warn);
  box-shadow: 0 0 30px rgba(255, 200, 87, 0.3);
}

.message-text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.dialog-shell.compact h2 {
  font-size: 1.24rem;
  text-wrap: balance;
}


/* ============================================================================
   18. REGOLE FUNZIONALI OBBLIGATORIE — NON RIMUOVERE
   ----------------------------------------------------------------------------
   Questo blocco e' volutamente in fondo al foglio: le regole qui sotto devono
   vincere su qualunque display impostato nelle sezioni precedenti.
   Senza queste dichiarazioni l'applicazione si rompe.
   ========================================================================== */

/* 18.1 — Alternanza dei campi manuale / AI nel dialogo pasto.
   .ai-fields e' nascosto per default e riappare solo in modalita' "ai". */
.ai-fields { display: none; }

.meal-dialog[data-mode="ai"] .ai-fields {
  display: grid;
  gap: 10px;
}

.meal-dialog[data-mode="ai"] .manual-fields { display: none; }

/* .manual-fields resta una griglia in modalita' manuale */
.manual-fields {
  display: grid;
  gap: 10px;
}

/* 18.2 — Elementi nascosti da JS tramite la proprieta' [hidden].
   Servono selettori piu' specifici del display:grid dichiarato sopra,
   altrimenti l'hidden nativo del browser verrebbe scavalcato. */
.mode-switch[hidden]  { display: none !important; }
.loading-note[hidden] { display: none !important; }
.route-fields[hidden] { display: none !important; }

/* Rete di sicurezza generica per qualunque altro elemento nascosto da JS */
[hidden] { display: none !important; }

/* 18.3 — Il dialogo chiuso non deve occupare spazio (ripristina il default UA
   eventualmente scavalcato da display impostati altrove). */
dialog.app-dialog:not([open]) { display: none; }

/* 18.4 — Stato "in caricamento" e stato disabilitato del bottone primario
   sono definiti nella sezione 16 (.primary.is-loading::before, .primary:disabled)
   e restano attivi: non ridefinire display:none su .primary::before. */


/* ============================================================================
   19. BREAKPOINT 620px — tablet e desktop
   ========================================================================== */

@media (min-width: 620px) {
  :root {
    --pad: 24px;
    --gap: 16px;
  }

  body { font-size: 15.5px; }

  .app-header { min-height: 70px; }

  .brand-mark {
    width: 40px;
    height: 40px;
    font-size: 1.08rem;
  }

  .brand b   { font-size: 1.06rem; }
  .user-link { max-width: 22rem; font-size: 0.72rem; }

  .app-main { gap: 22px; padding-top: 24px; }

  .date-strip { grid-template-columns: 52px 1fr 52px; }
  .date-picker span  { font-size: 0.63rem; }
  .date-picker input { font-size: 1rem; }

  /* La card del bilancio si apre su due colonne: numero a sinistra,
     barra e didascalia a destra, allineate in basso. */
  .balance-card {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: end;
    gap: 28px;
    padding: 30px 28px 26px;
  }

  .balance-card strong { font-size: clamp(4.4rem, 8vw, 6rem); }

  .balance-details { padding-bottom: 6px; }

  .metrics > article { padding: 18px 17px; gap: 13px; }
  .metrics strong    { font-size: 1.72rem; }
  .metric-icon       { width: 36px; height: 36px; }

  .section-heading h2 { font-size: 1.42rem; }

  .entry {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 15px 17px;
  }

  .entry > div:last-child { flex-wrap: nowrap; justify-content: flex-end; }
  .entry b { margin-right: 6px; }

  /* I dialoghi smettono di essere fogli e diventano schede centrate */
  dialog.app-dialog {
    max-width: 34rem;
    margin: auto;
  }

  .dialog-shell {
    gap: 16px;
    padding: 26px 26px 24px;
    border: 1px solid var(--line-accent);
  }

  /* Via la maniglia da bottom-sheet */
  .dialog-shell::after { content: none; }

  .dialog-shell.compact { padding: 32px 28px 26px; }

  /* I due dialoghi di servizio restano piu' stretti della scheda pasto */
  dialog.app-dialog.message-dialog,
  dialog.app-dialog.confirm-dialog { max-width: 27rem; }

  /* I campi percorso si aprono su due colonne: sotto i 620px restano
     impilati in colonna singola (dichiarazione base, sezione 13). */
  .route-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .primary { min-height: 52px; }
}


/* ============================================================================
   20. BREAKPOINT 380px — schermi molto stretti
   ========================================================================== */

@media (max-width: 380px) {
  :root {
    --pad: 12px;
    --gap: 10px;
  }

  body { font-size: 14.5px; }

  .brand small { display: none; }   /* si tiene solo il nome */
  .brand-mark  { width: 32px; height: 32px; font-size: 0.92rem; }
  .user-link   { max-width: 34vw; padding: 0 10px; font-size: 0.63rem; }

  .date-strip { grid-template-columns: 42px 1fr 42px; padding: 6px; gap: 6px; }

  .balance-card { padding: 20px 16px 17px; }
  .balance-card strong { font-size: clamp(2.9rem, 21vw, 4.2rem); }

  /* Le due metriche si impilano: restano leggibili senza troncature */
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metrics > article { padding: 13px 12px; }
  .metrics strong { font-size: 1.42rem; }

  .section-heading   { flex-wrap: wrap; }
  .section-heading h2 { font-size: 1.16rem; }
  .add-button { padding: 0 13px 0 9px; font-size: 0.78rem; }

  .entry { padding: 12px; }
  .entry-button { padding: 0 11px; font-size: 0.74rem; }

  /* Le coppie di campi si impilano per non comprimere le date/ore */
  .two-col { grid-template-columns: minmax(0, 1fr); }

  /* Anche il selettore modalita' va in colonna: le etichette sono lunghe */
  .mode-switch { grid-template-columns: minmax(0, 1fr); }

  .dialog-shell { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
  .dialog-head h2 { font-size: 1.18rem; }

  .dialog-actions { grid-template-columns: minmax(0, 1fr); }

  .message-symbol { width: 54px; height: 54px; font-size: 1.4rem; }
}


/* ============================================================================
   21. VARIANTE CHIARA — prefers-color-scheme: light
   ----------------------------------------------------------------------------
   Il progetto resta notturno per identita': questa e' una variante di cortesia
   per chi ha il sistema in chiaro. Stessa struttura, stessa firma lime, ma
   niente bagliori (che in chiaro sporcano) e contrasti ricalibrati.
   ========================================================================== */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg:            #f4f6f0;
    --bg-deep:       #e9ede1;
    --bg-haze:       #eef6dc;

    --surface:       rgba(255, 255, 255, 0.78);
    --surface-hi:    #ffffff;
    --surface-solid: #ffffff;
    --surface-sunk:  rgba(15, 26, 10, 0.045);

    --line:          rgba(15, 26, 10, 0.13);
    --line-strong:   rgba(15, 26, 10, 0.24);
    --line-accent:   rgba(77, 124, 15, 0.42);

    --text:          #101a0e;
    --text-dim:      #4a5a48;
    /* Scurito rispetto al tema notturno: le micro-etichette e lo stato vuoto
       usano questo token come testo normale e su fondo chiaro devono restare
       sopra il rapporto 4.5:1 richiesto da WCAG AA. */
    --text-faint:    #5b6a55;

    /* In chiaro l'accento si scurisce: il lime puro non regge il contrasto */
    --accent:        #4d7c0f;
    --accent-text:   #3f6212;
    --accent-ink:    #ffffff;
    --accent-soft:   rgba(77, 124, 15, 0.10);
    --accent-line:   rgba(77, 124, 15, 0.40);

    --ember:         #c2410c;
    --ember-soft:    rgba(194, 65, 12, 0.10);
    --ember-line:    rgba(194, 65, 12, 0.36);

    --danger:        #be123c;
    --danger-soft:   rgba(190, 18, 60, 0.09);
    --danger-line:   rgba(190, 18, 60, 0.36);
    --warn:          #a16207;

    /* Niente aloni: in chiaro diventano sbavature grigie */
    --glow-accent:   0 0 0 1px rgba(77, 124, 15, 0.14);
    --glow-ember:    0 0 0 1px rgba(194, 65, 12, 0.14);
    --glow-danger:   0 0 0 1px rgba(190, 18, 60, 0.16);
    --halo-number:   none;

    --shadow-1:      0 1px 2px rgba(15, 26, 10, 0.05), 0 8px 22px rgba(15, 26, 10, 0.07);
    --shadow-2:      0 2px 6px rgba(15, 26, 10, 0.07), 0 26px 60px rgba(15, 26, 10, 0.16);

    --blur: blur(10px) saturate(120%);
  }

  /* Sfondo: sfumature molto piu' tenui e griglia scura anziche' chiara */
  body::before {
    background:
      radial-gradient(120% 78% at 50% -18%, var(--bg-haze) 0%, transparent 60%),
      radial-gradient(70% 46% at 8% 4%,  rgba(77, 124, 15, 0.07) 0%, transparent 70%),
      radial-gradient(74% 52% at 108% 88%, rgba(194, 65, 12, 0.05) 0%, transparent 72%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  }

  body::after {
    background-image:
      linear-gradient(to right,  rgba(15, 26, 10, 0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15, 26, 10, 0.045) 1px, transparent 1px);
  }

  .app-header {
    background: linear-gradient(180deg, rgba(244, 246, 240, 0.94) 0%, rgba(244, 246, 240, 0.7) 100%);
  }

  .brand-mark {
    background: linear-gradient(150deg, #65a30d 0%, var(--accent) 100%);
  }

  /* La card del bilancio resta l'elemento forte, ma con inchiostro pieno */
  .balance-card {
    background:
      radial-gradient(115% 92% at 50% -12%, rgba(77, 124, 15, 0.10) 0%, transparent 66%),
      var(--surface-hi);
    box-shadow: var(--shadow-2);
  }

  .balance-card::after { opacity: 0.4; }

  .progress > i {
    background: linear-gradient(90deg, #65a30d 0%, var(--accent) 100%);
    box-shadow: none;
  }

  .entries.empty {
    background: repeating-linear-gradient(
      -45deg,
      rgba(15, 26, 10, 0.028) 0 10px,
      transparent 10px 20px
    );
  }

  .mode-switch > button {
    /* la pillola attiva usa --accent scuro con testo bianco: gia' a contrasto */
    color: var(--text-faint);
  }

  .meal-dialog[data-mode="manual"] .mode-switch [data-mode="manual"],
  .meal-dialog[data-mode="ai"]     .mode-switch [data-mode="ai"] {
    background: linear-gradient(150deg, #65a30d 0%, var(--accent) 100%);
  }

  .primary {
    background: linear-gradient(150deg, #65a30d 0%, var(--accent) 100%);
  }

  .danger-button:hover { color: #ffffff; }

  .dialog-shell {
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(77, 124, 15, 0.07) 0%, transparent 62%),
      var(--surface-solid);
    box-shadow: var(--shadow-2);
  }

  dialog.app-dialog::backdrop {
    background: rgba(28, 36, 22, 0.42);
  }

  /* Le icone dei picker native non vanno invertite su fondo chiaro */
  .date-picker input::-webkit-calendar-picker-indicator,
  .dialog-shell input[type="date"]::-webkit-calendar-picker-indicator,
  .dialog-shell input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.7;
  }

  * { scrollbar-color: rgba(77, 124, 15, 0.35) transparent; }
  *::-webkit-scrollbar-thumb { background: rgba(77, 124, 15, 0.3); }
}


/* ============================================================================
   22. MOVIMENTO RIDOTTO
   ----------------------------------------------------------------------------
   Si azzerano transizioni e animazioni decorative. Lo spinner del bottone
   primario resta visibile ma statico: e' informativo, non ornamentale.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .close-dialog:hover      { transform: none; }
  .metrics > article:hover { transform: none; }
  .progress > i            { transition: none; }

  /* Il pallino del notice e della nota di caricamento smette di pulsare */
  .notice::before,
  .loading-note::before { animation: none; opacity: 1; transform: none; }

  /* Lo spinner resta come indicatore statico, ancora riconoscibile */
  .primary.is-loading::before { animation: none; }
}