/* Modulo Gelo (buyer del congelato): cruscotto /gelo e scheda articolo.
   Il linguaggio e' quello dell'app — tessere KPI tinte, tabella estendibile, card
   grafico — con le pill di fascia come lessico proprio: la copertura si legge a
   colpo d'occhio dal colore, il numero preciso sta accanto. */

/* ---- LE TESSERE DI COMANDO del cruscotto ("tutto parte da quelle" — Mattias
   2026-08-10): card con icona nel suo colore di ruolo, valore grande, UNA riga di
   contesto, freccia solo dove si clicca. Ambra = azione, rosso = dorme, corallo =
   produzione, blu = cassa, azzurro = scorta. Il filtro attivo porta l'anello. ---- */

.gelo-kpi-griglia {
  display: grid;
  /* Otto card TUTTE uguali, 4 + 4 su due file piene (Mattias 2026-08-11): con le
     card-lista piu' larghe delle altre i conti delle file non tornavano piu' e la
     griglia si sbriciolava in 4+3+1. I nomi lunghi si troncano con l'ellissi. */
  grid-template-columns: repeat(12, 1fr);
  gap: 0.9rem;
  margin: 1.4rem 0 1.6rem;
}

.gelo-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  grid-column: span 3;
  padding: 1.15rem 1.2rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* La barra d'accento in cima, nel colore di ruolo: si vede da lontano chi e' chi. */
.gelo-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kpi-accento, var(--border));
}

a.gelo-kpi:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.gelo-kpi.is-attiva {
  outline: 2px solid var(--navy-bright);
  outline-offset: 1px;
}

/* L'icona nel cerchio morbido del colore di ruolo, con un velo d'anello. */
.gelo-kpi-icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6) inset;
}

.gelo-kpi-icona .icon {
  width: 22px;
  height: 22px;
}

.gelo-kpi-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gelo-kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

/* Il sottotitolo delle tessere gemelle "Da acquistare" (Mattias 2026-08-11):
   stesso titolo, la distinzione sta qui — piu' scuro del label per leggersi al volo. */
.gelo-kpi-sottotitolo {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.gelo-kpi-valore {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.gelo-kpi-valore small {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-text);
}

.gelo-kpi-riga {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--gray-text);
}

.gelo-kpi-riga strong {
  color: var(--ink);
}

.gelo-kpi-freccia {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-text);
  transition: all 0.15s ease;
}

a.gelo-kpi:hover .gelo-kpi-freccia {
  background: var(--navy-bright);
  border-color: var(--navy-bright);
  color: #fff;
  transform: translateX(3px);
}

/* I colori di ruolo: barra, icona e valore. */
.gelo-kpi.is-azione {
  --kpi-accento: #b45309;
}

.gelo-kpi.is-azione .gelo-kpi-icona {
  background: #fdf0e3;
  color: #b45309;
}

.gelo-kpi.is-azione .gelo-kpi-valore {
  color: #b45309;
}

.gelo-kpi.is-cassa {
  --kpi-accento: var(--navy-bright);
}

.gelo-kpi.is-cassa .gelo-kpi-icona {
  background: var(--azure-soft);
  color: var(--navy-bright);
}

.gelo-kpi.is-cassa .gelo-kpi-valore {
  color: var(--navy-bright);
}

.gelo-kpi.is-dorme {
  --kpi-accento: var(--danger);
}

.gelo-kpi.is-dorme .gelo-kpi-icona {
  background: #fdecea;
  color: var(--danger);
}

.gelo-kpi.is-dorme .gelo-kpi-valore {
  color: var(--danger);
}

.gelo-kpi.is-scorta {
  --kpi-accento: var(--azure);
}

.gelo-kpi.is-scorta .gelo-kpi-icona {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-kpi.is-produzione {
  --kpi-accento: var(--corallo);
}

.gelo-kpi.is-produzione .gelo-kpi-icona {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

.gelo-kpi.is-produzione .gelo-kpi-valore {
  color: var(--corallo-dark);
}

.gelo-kpi.is-venduti {
  --kpi-accento: var(--navy-bright);
}

.gelo-kpi.is-venduti .gelo-kpi-icona {
  background: var(--azure-soft);
  color: var(--navy-bright);
}

.gelo-kpi.is-rotture {
  --kpi-accento: var(--danger);
}

.gelo-kpi.is-rotture .gelo-kpi-icona {
  background: #fdecea;
  color: var(--danger);
}

.gelo-kpi.is-rotture .gelo-kpi-valore {
  color: var(--danger);
}

/* Le tessere-lista: i primi tre articoli dentro la card, nome troncato a sinistra e
   numero a destra — la classifica completa e' il filtro al clic. */
.gelo-kpi-lista {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.2rem 0;
  min-width: 0;
}

.gelo-kpi-lista-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--gray-text);
}

.gelo-kpi-lista-riga + .gelo-kpi-lista-riga {
  border-top: 1px solid var(--border-soft);
  padding-top: 0.25rem;
}

/* Il numero di classifica dei piu' venduti. */
.gelo-kpi-rank {
  flex-shrink: 0;
  width: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--navy-bright);
}

.gelo-kpi-lista-riga strong {
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gelo-kpi-lista-nome {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .gelo-kpi-griglia {
    grid-template-columns: 1fr 1fr;
  }

  .gelo-kpi {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .gelo-kpi-griglia {
    grid-template-columns: 1fr;
  }

  .gelo-kpi {
    grid-column: span 1;
    padding: 0.9rem;
  }

  .gelo-kpi-valore {
    font-size: 1.35rem;
  }
}

/* ---- L'occhiello che torna al cruscotto dalla scheda articolo. ---- */

.eyebrow-link {
  color: inherit;
  text-decoration: none;
}

.eyebrow-link:hover {
  text-decoration: underline;
}

/* ---- I blocchi della pagina (tabella articoli, fornitori). ---- */

.gelo-block {
  margin-top: 1.6rem;
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.gelo-block-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.gelo-block-note {
  margin: 0.25rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--gray-text);
  max-width: 68ch;
}

/* ---- La tabella articoli. ---- */

.gelo-table th[scope="row"] {
  font-weight: 600;
}

.gelo-articolo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
}

.gelo-articolo-link:hover .gelo-nome {
  color: var(--navy-bright);
  text-decoration: underline;
}

.gelo-capitale {
  font-weight: 700;
}

.gelo-unita,
.gelo-mesi,
.gelo-quando {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gray-text);
  white-space: nowrap;
}

/* ---- Le pill di fascia: la copertura come colore. Verde = gira, ambra = alta,
   rosso tenue = capitale che dorme. "Senza vendite" e' grigio, non rosso: non e'
   un allarme, e' un'assenza — spesso un doppione decongelato. ---- */

.gelo-fascia {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.gelo-fascia.is-ok {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.gelo-fascia.is-alta {
  background: #fdf0e3;
  color: var(--semaforo-arancio);
}

.gelo-fascia.is-ferma {
  background: #fdecea;
  color: var(--danger);
}

/* Scorta lunga: oltre 12 mesi ma VIVA — informazione neutra, mai rossa
   (Mattias 2026-08-09: "se ho comprato un sacco ma vendo, la merce non e' morta"). */
.gelo-fascia.is-scorta {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-fascia.is-muta {
  background: var(--border-soft);
  color: var(--gray-text);
}

/* Il lavorato non e' un'anomalia: e' merce che nasce in casa. Corallo soft come il
   badge decongelato — un accento, non uno stato. */
.gelo-fascia.is-lavorazione {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

/* L'arrivo piu' recente nella tabella fornitori: il fornitore ATTUALE. */
.gelo-fascia.is-recente {
  background: var(--azure-soft);
  color: var(--navy);
}

/* Materia prima della produzione: piena se mappata, bordata col punto di domanda se
   presunta dal rapporto comprato/venduto (da mappare in lavorazioni_gelo.yml). */
.gelo-fascia.is-produzione {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

.gelo-fascia.is-produzione-presunta {
  background: var(--surface);
  color: var(--corallo-dark);
  border: 1px dashed var(--corallo);
}

/* ---- Il giudizio dell'ultimo prezzo contro la mediana della propria storia. ---- */

.gelo-delta {
  font-weight: 700;
}

.gelo-delta.is-caro {
  color: var(--danger);
}

.gelo-delta.is-buono {
  color: var(--semaforo-verde);
}

/* Il consumo stimato via lavorazioni, sotto il ritmo: seconda riga discreta, il
   dettaglio dei lavorati sta nel tooltip. */
.gelo-indotto {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--corallo-dark);
  white-space: nowrap;
}

/* L'ultima vendita sotto il ritmo: su una scorta lunga "ultima ieri" e "ultima 3
   mesi fa" sono due articoli diversi. */
.gelo-ultima {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gray-text);
  white-space: nowrap;
}

/* ---- Le liste delle lavorazioni nella scheda (nasce da / esce anche come). ---- */

.gelo-lavorazione-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gelo-lavorazione-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}

.gelo-lavorazione-lista li + li {
  border-top: 1px solid var(--border-soft);
}

.gelo-lavorazione-ritmo {
  font-size: 0.8rem;
  color: var(--gray-text);
  white-space: nowrap;
}

/* ---- Avvisi e note dichiarate. ---- */

.gelo-notice {
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  background: var(--corallo-soft);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  color: var(--corallo-dark);
}

/* La variante informativa: la rilettura delle basi e' una nota di metodo, non un
   allarme — azzurro come le note di cassa, non corallo. */
.gelo-notice.is-info {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-fuori {
  margin-top: 1.4rem;
  padding: 0.9rem 1.2rem;
  background: var(--surface);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  color: var(--gray-text);
}

.gelo-fuori summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.gelo-fuori ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
}

.gelo-fuori li + li {
  margin-top: 0.4rem;
}

/* ---- La scheda articolo. ---- */

.gelo-badge-decongelato {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  background: var(--corallo-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--corallo-dark);
  vertical-align: middle;
}

.gelo-chart-card {
  margin-top: 1.6rem;
}

/* Il grafico unico della scheda: tre pannelli in colonna (venduto/stima, prezzi &
   guadagno, cella) sulla stessa asse del tempo — serve aria in verticale. */
.gelo-chart-box {
  width: 100%;
  height: 380px;
}

.gelo-chart-box.is-oracle {
  height: 660px;
}

/* ---- I fornitori della scheda. ---- */

.gelo-lead {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gelo-lead.is-import {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-lead.is-nazionale {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.gelo-lead.is-locale {
  background: var(--border-soft);
  color: var(--gray-text);
}

.gelo-minimo {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  color: var(--gray-text);
}

.gelo-non-profilato {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--corallo-dark);
}

/* Capitale non valorizzabile (prezzi a collo/pezzo): il trattino porta la spiegazione
   nel title — un numero finto qui e' esattamente il bug che ha scoperto Mattias. */
.gelo-non-valorizzato {
  color: var(--gray-text);
  cursor: help;
  border-bottom: 1px dotted var(--gray-text);
}

@media (max-width: 720px) {
  .gelo-chart-box {
    height: 300px;
  }

  .gelo-block {
    padding: 1rem;
  }
}

/* ---- La proposta d'acquisto: bottone nelle liste del riordino e modal. ---- */

.gelo-proposta-bottone {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy-bright);
  cursor: pointer;
}

.gelo-proposta-bottone:hover {
  border-color: var(--navy-bright);
  background: var(--azure-soft);
}

/* LA CARD-AZIONE della scheda: sta TRA le tessere e si deve vedere — ambra come
   tutte le azioni del gelo, testo grande, freccia. E' un <button>, non un div. */
.gelo-proposta-card {
  border: 2px solid #b45309;
  background: #fdf0e3;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.gelo-proposta-card .proposal-stat-value {
  color: #b45309;
}

.gelo-proposta-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* La sfera d'attesa nel dialog appena aperto: spazio vero, niente filo rosso. */
.gelo-proposta-attesa {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 2rem;
}

.gelo-proposta-dialog {
  width: min(1280px, 96vw);
  max-height: 94vh;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.gelo-proposta-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.gelo-proposta {
  padding: 1.5rem 1.8rem 1.8rem;
}

.gelo-proposta-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.gelo-proposta-testa h3 {
  margin: 0.15rem 0 0;
  font-size: 1.4rem;
}

/* Il grafico dentro il modal: due pannelli soli (venduto e cella) su un'altezza
   da pagina intera — a 420px la cella restava un nastro (Mattias 2026-08-11). */
.gelo-proposta .gelo-chart-box {
  height: 580px;
}

/* Il blocco "ordine fatto": prima il salvataggio stava nell'ultima colonna della
   tabella, fuori dallo schermo — nessuno lo trovava. */
.gelo-proposta-salva {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin: 1.1rem 0 0.4rem;
  padding: 0.9rem 1.1rem;
  background: #e7f4ec;
  border-left: 4px solid #1b6e3d;
  border-radius: var(--radius-small);
}

.gelo-proposta-salva-testa {
  font-size: 1rem;
  font-weight: 800;
  color: #1b6e3d;
}

.gelo-proposta-salva-form {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.gelo-proposta-salva-campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.gelo-proposta-input.is-grande {
  width: 6.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 1rem;
  font-weight: 700;
}

.gelo-proposta-select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.9rem;
  background: var(--surface);
}

.gelo-proposta-salva-bottone {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: var(--radius-small);
  background: #1b6e3d;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.gelo-proposta-salva-bottone:hover {
  background: #14572f;
}

/* Gli ordini gia' registrati: una card STANDARD dell'app, non un semaforo verde
   (Mattias 2026-08-11: "cosa c'entra questo verde?") — il verde resta solo al
   blocco-azione del salvataggio. */
.gelo-proposta-ordini {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.gelo-proposta-ordini-titolo {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

/* Il tasto del completamento camion: discreto dentro il blocco verde, su riga sua. */
.gelo-proposta-altri-link {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-bright);
}

/* ---- Il calendario della copertura "tipo Booking": bottone col periodo,
   pannello a due mesi, range colorato. ---- */

.calendario-copertura {
  position: relative;
  display: inline-block;
}

.calendario-copertura-bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--navy-bright);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.calendario-copertura-bottone:hover {
  background: var(--azure-soft);
}

/* La variante compatta per le righe della registrazione multipla. */
.calendario-copertura-bottone.is-compatto {
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-color: var(--border);
}

.calendario-pannello {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  padding: 0.9rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.calendario-navigazione {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.calendario-freccia {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.calendario-freccia:hover {
  border-color: var(--navy-bright);
  color: var(--navy-bright);
}

.calendario-mesi {
  display: flex;
  gap: 1.4rem;
}

.calendario-mese-titolo {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
  color: var(--ink);
}

.calendario-griglia {
  display: grid;
  grid-template-columns: repeat(7, 34px);
  gap: 2px;
}

.calendario-intesta {
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--gray-text);
  padding-bottom: 0.2rem;
}

.calendario-giorno {
  height: 32px;
  border: none;
  border-radius: var(--radius-small);
  background: transparent;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
}

.calendario-giorno:hover:not(:disabled) {
  background: var(--azure-soft);
}

.calendario-giorno:disabled {
  color: var(--border);
  cursor: default;
}

.calendario-giorno.is-nel-range {
  background: var(--azure-soft);
  border-radius: 0;
}

.calendario-giorno.is-estremo {
  background: var(--navy-bright);
  color: #fff;
  font-weight: 700;
}

.calendario-azioni {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7rem;
}

.calendario-applica {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius-small);
  background: var(--navy-bright);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.calendario-applica:hover {
  background: var(--navy);
}

/* La testa dell'elenco fornitore col suo chiudi. */
.gelo-proposta-altri-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.gelo-proposta-altri-chiudi {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-text);
  white-space: nowrap;
}

.gelo-proposta-altri-chiudi:hover {
  color: var(--danger);
}

/* La registrazione multipla: date compatte in colonna, piede col bottone. */
.gelo-proposta-batch-date {
  white-space: nowrap;
}

.gelo-proposta-data.is-compatta {
  padding: 0.25rem 0.35rem;
  font-size: 0.78rem;
}

.gelo-proposta-batch-piede {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.7rem;
}

/* L'invito a scegliere le date: neutro, al posto del fabbisogno finche' non c'e'. */
.gelo-proposta-invito {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-small);
  font-size: 0.95rem;
  color: var(--gray-text);
}

.gelo-proposta-invito strong {
  color: var(--ink);
}

/* La tabellina degli ordini: righe compatte, niente doppio sfondo. */
.gelo-proposta-ordini-tabella {
  font-size: 0.88rem;
}

.gelo-proposta-ordini-tabella td {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.gelo-proposta-elimina {
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--danger);
  cursor: pointer;
}

.gelo-proposta-elimina:hover {
  border-color: var(--danger);
  background: #fdecea;
}

.gelo-proposta .forecast-table {
  font-size: 0.9rem;
}

.gelo-proposta-chiudi {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--gray-text);
}

.gelo-proposta-chiudi:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.gelo-proposta-mesi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.gelo-proposta-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.gelo-proposta-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gelo-proposta-input {
  width: 4.2rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
}

/* I calendari della copertura per finestra ("dal... al...", buyer 2026-08-11):
   input date nativi — il calendario lo mette il browser. */
.gelo-proposta-data {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  font-family: inherit;
}

.gelo-proposta-form.is-periodo-attivo .gelo-proposta-data {
  border-color: var(--navy-bright);
}

.gelo-proposta-conto {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--gray-text);
}

.gelo-proposta-conto strong {
  color: var(--ink);
}

/* IL NUMERO della proposta, a caratteri da tessera: e' la risposta alla domanda
   del buyer, non una riga di prosa (Mattias 2026-08-11). */
.gelo-proposta-fabbisogno {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background: #fdf0e3;
  border-left: 4px solid #b45309;
  border-radius: var(--radius-small);
}

.gelo-proposta-fabbisogno-numero {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #b45309;
  white-space: nowrap;
}

.gelo-proposta-fabbisogno-testo {
  flex: 1;
  min-width: 260px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gray-text);
}

.gelo-proposta-fabbisogno-testo strong {
  color: var(--ink);
}

.gelo-proposta-ordina {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gelo-proposta-ordinato strong {
  color: var(--navy);
}

/* Il tag "gia' ordinato" nelle liste del riordino: verde = deciso, in viaggio. */
.gelo-fascia.is-ordinato {
  background: #e7f4ec;
  color: #1b6e3d;
}

.gelo-proposta-scegli {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.gelo-proposta-grafico-nota {
  margin: 1rem 0 0.5rem;
  font-size: 0.85rem;
  color: var(--gray-text);
}

.gelo-proposta-grafico-nota strong {
  color: var(--ink);
}

.gelo-proposta-disclaimer {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--gray-text);
}