/*
 * Modulo Acquisti predittivi: Prodotti da ordinare (lista del giro + scheda cluster in
 * modal, card per articolo) e Monitor settimanale (previsto vs venduto).
 * Uso su PC/desktop: le tabelle scorrono dentro .table-scroll, mai la pagina.
 * Regole design system: una property per riga; ombre SOLO dalla scala di elevazione
 * (--shadow-1/2/3, vedi docs/design_system.md).
 */

.app-main:has(.procurement-page) {
  max-width: 1440px;
}

/* La scala di elevazione --shadow-1/2/3 vive ora in application.css :root (app-wide). */

/* Regime pioggia attivo sullo slot: la politica sta usando i campioni dei giorni piovosi. */
.badge-rain {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: #e3edf7;
  border: 1px solid #9dbcd9;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1d4e79;
  white-space: nowrap;
}

/* --- Lista del giro: una riga-link per cluster, stato a colpo d'occhio --- */

.slot-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

/* Le tre fasce della lista: da ordinare, da confermare, gia' fatti. Il titoletto dice
   dove finisce il lavoro da fare senza doverlo dedurre dai badge. */
/* I titoletti di sezione in corallo: il secondo colore del brand marca i punti di
   lavoro ("Da ordinare", "Da confermare") come fa l'occhiello in cima alla pagina. */
.slot-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--corallo-dark);
}

.slot-section-count {
  padding: 0.05rem 0.5rem;
  background: var(--corallo-soft);
  border: 1px solid var(--corallo);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--corallo-dark);
}

/* Quello che oggi e' gia' fatto non compete piu' con le righe da lavorare. */
.slot-list.is-done-list {
  opacity: 0.75;
}

.slot-item {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.slot-item:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.slot-item.is-focus {
  border-color: var(--navy);
  border-left-width: 4px;
  background: var(--azure-soft);
}

.slot-item.is-done {
  opacity: 0.75;
}

.slot-item-name {
  font-weight: 600;
  color: var(--ink);
}

/* LA GIACENZA di adesso, al centro della riga: il numero grosso, l'etichetta piccola. */
.slot-item-stock {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-text);
  white-space: nowrap;
}

.slot-item-stock strong {
  font-size: 1rem;
  color: var(--ink);
}

.slot-item-stock-label {
  margin-left: 0.25rem;
}

.slot-item-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
  font-size: 0.8rem;
  white-space: nowrap;
}

.slot-state-todo {
  padding: 0.15rem 0.6rem;
  background: #fdf3d7;
  border: 1px solid #d9b23c;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a5c0e;
}

.slot-state-done {
  font-weight: 600;
  color: #2e7d4f;
}

.slot-badge-alert {
  padding: 0.15rem 0.6rem;
  background: #fdeae2;
  border: 1px solid #e08a5e;
  border-radius: 999px;
  font-weight: 600;
  color: #b3402a;
}

/* Il consiglio del motore GIA' sulla riga della lista: i kg da ordinare, in evidenza. */
.slot-proposed {
  padding: 0.15rem 0.6rem;
  background: var(--corallo-soft);
  border: 1px solid var(--corallo);
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--corallo-dark);
}

.slot-proposed.is-zero {
  background: var(--bg);
  border-color: var(--border);
  font-weight: 600;
  color: var(--gray-text);
}

/* --- La scheda cluster in modal: apertura istantanea, movimento chiaro --- */

/* Il <turbo-frame> che porta la scheda e' un custom element: per default vale `inline`,
   quindi i ritorni a capo attorno alla <section> generano line box con lo strut e qualche
   pixel di troppo sopra e sotto. Siccome .slot-modal e .slot-focus hanno la STESSA
   max-height, quei pixel bastano a far uscire il contenuto dal dialog a schermo pieno —
   seconda barra di scorrimento, o fondo tagliato (review della PR #63). */
.slot-modal turbo-frame {
  display: block;
}

.slot-modal {
  width: min(96rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 3rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  background: var(--surface);
  opacity: 0;
  transform: translateY(1.25rem) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease, overlay 0.22s ease allow-discrete, display 0.22s ease allow-discrete;
}

/* IL MODAL NON CAMBIA MAI MISURA. Per un attimo l'avevo fatto stringere mentre caricava, ed
   era peggio del male che curava: si apriva una cartina in mezzo allo schermo e poi scattava
   a larghezza piena (Mattias 2026-08-06). Le dimensioni sono queste sempre; e' il CARICAMENTO
   che si mette al centro, riempiendo l'altezza che la scheda occupera'.

   Regge su :has: finche' il turbo-frame contiene .attesa la regola vale, e smette da sola
   nell'istante in cui Turbo sostituisce il contenuto. Nessun JavaScript da tenere in piedi. */
.slot-modal:has(.attesa) .attesa {
  min-height: min(66vh, 38rem);
}

.slot-modal[open] {
  opacity: 1;
  transform: none;
}

/* Lo stato di partenza dell'animazione d'ingresso (Chrome moderno; altrove il modal
   appare senza transizione, comunque corretto). */
@starting-style {
  .slot-modal[open] {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.98);
  }
}

.slot-modal::backdrop {
  background: rgba(13, 27, 51, 0);
  transition: background 0.22s ease, overlay 0.22s ease allow-discrete, display 0.22s ease allow-discrete;
}

/* LA PAGINA DIETRO SI SFOCA (Mattias 2026-08-06): mentre la scheda si costruisce, quello che
   c'e' sotto non e' piu' leggibile ne' cliccabile, e sfocarlo lo dice prima di qualsiasi
   scritta. Resta sfocata anche a scheda aperta: e' un modal, non un pannello. */
.slot-modal[open]::backdrop {
  background: rgba(13, 27, 51, 0.45);
  backdrop-filter: blur(6px);
}

@starting-style {
  .slot-modal[open]::backdrop {
    background: rgba(13, 27, 51, 0);
  }
}

/* Dentro al modal la scheda scorre da sola; il bordo doppio sparisce. */
.slot-modal .slot-focus {
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  margin: 0;
  border: none;
}

.slot-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  z-index: 1;
  min-width: 2.2rem;
  min-height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 1rem;
  color: var(--gray-text);
  cursor: pointer;
}

.slot-modal-close:hover {
  border-color: var(--corallo);
  color: var(--corallo-dark);
}

/* Spazio per il bottone di chiusura: il "N di M" non ci finisce sotto. */
.slot-modal .slot-focus-head {
  padding-right: 2.8rem;
}

/* --- Focus sul cluster: header col progresso e card per articolo --- */

.slot-focus-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.slot-focus-position {
  margin: 0;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--corallo-soft);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--corallo-dark);
  white-space: nowrap;
}

.slot-cross-link {
  font-size: 0.82rem;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.slot-cross-link:hover {
  text-decoration: underline;
}

/* Meta essenziale del modal: chips, non frasi. */
.slot-meta-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--gray-text);
}

.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.slot-chip strong {
  color: var(--ink);
}

.slot-chip-muted {
  color: var(--gray-text);
}

/* Collegamento articolo -> cluster dalla scheda (in ogni scheda). Il min-height riserva
   lo spazio del dropdown risultati: senza, il contenitore scrollabile del modal
   taglierebbe la lista (position: absolute). Nel <details> lo spazio compare solo
   all'apertura (il contenuto chiuso non si vede). */
.cluster-item-add {
  margin-top: 1rem;
  max-width: 460px;
  min-height: 24rem;
}

.cluster-item-add-details {
  margin-top: 1.25rem;
}

.cluster-item-add-details summary {
  width: fit-content;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}

/* Aggiunta articolo DENTRO un gruppo di acquisto: stessa riga discreta, rientrata. */
.buy-group-add {
  margin: 0.75rem 0 0.25rem;
}

/* Creazione di un gruppo nuovo: nome + articoli, in un blocco proprio. */
.buy-group-create {
  margin-top: 1.25rem;
}

.buy-group-name {
  display: block;
  width: 100%;
  max-width: 460px;
  margin-bottom: 0.75rem;
}

/* Nome del gruppo mancante al momento della selezione: si vede dove manca. */
.buy-group-name.is-missing {
  border-color: var(--danger);
  outline: 1px solid var(--danger);
}

.picker-error {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--danger);
}

/* Le alternative MUTE ripiegate: una riga discreta al posto di una card tutta a zero. */
/* Articoli del cluster senza domanda ne' ordine: da riga-fantasma a pill visibile
   (feedback Mattias 2026-07-29: "la call to action e' troppo invisibile"). */
.muted-lines {
  margin-top: 0.75rem;
}

.muted-lines summary {
  width: fit-content;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--navy);
  background: var(--azure-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 1rem;
}

.muted-lines summary strong {
  font-weight: 700;
}

.muted-lines summary:hover {
  border-color: var(--navy);
  background: var(--surface);
}

.muted-lines[open] summary {
  margin-bottom: 0.75rem;
}

/* SOTTO-GRUPPO di origine: stesso pesce/taglia, origini complementari — un obiettivo di
   gruppo, membri ordinati per prezzo, contatore di riparto live. */
.buy-group {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--navy);
  border-radius: 14px;
  background: linear-gradient(165deg, var(--azure-soft) 0%, var(--surface) 45%);
}

.buy-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.6rem;
}

.buy-group-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.buy-group-note {
  font-size: 0.8rem;
  color: var(--gray-text);
}

.buy-group-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  width: 100%;
}

/* Contatore del riparto: verde quando torna, rosso sotto, ambra sopra. */
.buy-group-progress {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.buy-group-progress.is-ok {
  color: #0f7b52;
  border-color: #0f7b52;
  background: rgba(16, 123, 82, 0.08);
}

.buy-group-progress.is-under {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(198, 40, 40, 0.07);
}

.buy-group-progress.is-over {
  color: #b3402a;
  border-color: #e08a5e;
  background: #fdeae2;
}

/* I dettagli aggregati del gruppo occupano tutta la larghezza dell'header. */
.buy-group-details {
  width: 100%;
  margin-top: 0.3rem;
}

.buy-group-details summary {
  width: fit-content;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

/* Nel gruppo la previsione e' in sola lettura: l'override del buyer si vede in grassetto. */
.forecast-num.is-overridden {
  font-weight: 700;
  color: var(--navy);
}

/* Il prezzo dell'origine nella card di gruppo: l'evidenza sta sulla piu' economica. */
.line-price {
  font-size: 0.9rem;
  color: var(--gray-text);
}

.line-price strong {
  color: var(--ink);
}

.line-price.is-cheapest {
  color: #0f7b52;
}

.line-price.is-cheapest strong {
  color: #0f7b52;
}

.line-price.is-empty {
  font-style: italic;
}

/* Azioni della card articolo (griglia, togli dal cluster): bottoncini-pill con icona. */
.line-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.line-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.line-action .icon {
  width: 14px;
  height: 14px;
}

.line-action:hover {
  border-color: var(--navy);
  background: var(--azure-soft);
}

/* Il cestino: neutro a riposo, rosso solo quando ci passi sopra. */
.line-action-danger {
  color: var(--gray-text);
}

.line-action-danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(198, 40, 40, 0.06);
}

/* Il bottone "gruppo" della card quando l'articolo e' gia' in un gruppo. */
.line-action.is-grouped {
  border-color: var(--navy);
  background: var(--azure-soft);
}

/* Popover del gruppo di acquisto: campo nome + salva, agganciato al bottone. */
.line-action-group {
  position: relative;
  display: inline-flex;
}

/* `display: flex` batte l'attributo `hidden` (che vale solo come regola del browser):
   senza questa riga il pannello del gruppo restava APERTO su ogni card, con un campo
   "nome del gruppo" e un tasto Salva che non si capiva a cosa servissero (segnalato da
   Mattias 2026-08-02). Vale per ogni pannello che si apre da un bottone. */
.buy-group-pop[hidden],
.future-orders-panel[hidden] {
  display: none;
}

.buy-group-pop {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-2, 0 8px 24px rgba(11, 34, 56, 0.16));
}

.buy-group-input {
  width: 14rem;
  font-size: 0.85rem;
}

.buy-group-save {
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
}

/* Il riepilogo dell'ORDINE del cluster: il totale, come e' composto pezzatura per
   pezzatura, l'eventuale rottura. */
.slot-summary {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(160deg, var(--azure-soft) 0%, var(--surface) 130%);
  border: 1px solid var(--navy);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
}

.slot-summary-order {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.slot-summary-order strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

/* COME E' COMPOSTO L'ACQUISTO: una riga per variante, subito sotto il totale, in ordine
   di priorita'. Il totale da solo non dice quasi niente e il fabbisogno per pezzatura
   stava in fondo alla scheda (Mattias 2026-08-02). */
.slot-breakdown {
  width: 100%;
  margin-top: 0.8rem;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.slot-breakdown th,
.slot-breakdown td {
  padding: 0.55rem 0.9rem;
  text-align: right;
  white-space: nowrap;
}

.slot-breakdown thead th {
  background: var(--bg);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-text);
  border-bottom: 1px solid var(--border);
}

.slot-breakdown thead th:first-child {
  text-align: left;
}

/* La data in cui la merce di quest'ordine e' in casa, sotto l'intestazione della colonna:
   "da ordinare" senza dire per quando e' mezza informazione. */
.slot-breakdown-when {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}

/* La variante (pezzatura, origine, taglio: cambia da cluster a cluster) è l'etichetta
   della riga, e si legge come tale. */
.slot-breakdown tbody th,
.slot-breakdown tfoot th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
}

.slot-breakdown tbody tr + tr th,
.slot-breakdown tbody tr + tr td {
  border-top: 1px solid var(--border-soft);
}

.slot-breakdown tbody tr:hover th,
.slot-breakdown tbody tr:hover td {
  background: var(--azure-soft);
}

/* La riga che finisce prima dell'arrivo: barra rossa a sinistra e giacenza in rosso —
   è lì che l'occhio deve cadere per primo. */
.slot-breakdown tbody tr.is-rottura th {
  box-shadow: inset 3px 0 0 #b3402a;
}

.slot-breakdown tbody tr.is-rottura td:first-of-type {
  color: #b3402a;
  font-weight: 700;
}

/* GIA' VENDUTO nel foglio: la riga non e' un dettaglio, e' merce promessa. */
.worksheet-booked-row .worksheet-label {
  font-style: normal;
  font-weight: 700;
  color: #146346;
}

.worksheet-num.is-booked {
  background: #eefaf4;
  font-weight: 700;
  color: #146346;
}

/* La nota sotto il foglio: quanto e' prenotato, per quando, e con quale giro comprarlo
   per averlo fresco. */
.worksheet-booked {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.9rem;
  background: #eefaf4;
  border: 1px solid #1a7f5a;
  border-left: 4px solid #1a7f5a;
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  color: #14432f;
}

.worksheet-booked-item {
  white-space: nowrap;
}

/* Il badge nella lista dei cluster: prenotato e scoperto, prima di tutto il resto. */
.slot-badge-booked {
  padding: 0.15rem 0.6rem;
  background: #eefaf4;
  border: 1px solid #1a7f5a;
  border-radius: 999px;
  font-weight: 700;
  color: #146346;
  white-space: nowrap;
}

/* Colonna "impegnato": kg gia' ordinati dai clienti e non ancora consegnati. Non e'
   previsione ed e' altra cosa dal venduto: quello e' uscito, questo deve ancora uscire. */
.slot-breakdown-booked {
  color: #146346;
  font-weight: 700;
}

.slot-breakdown-flag.is-preordine {
  background: #eefaf4;
  color: #146346;
}

/* Kg gia' promessi ai clienti che all'arrivo non ci saranno: e' il segnale piu' grave della
   tabella, e da quando l'ordine e' per pezzatura non ha piu' il primo posto a dirlo. */
.slot-breakdown-flag.is-scoperto {
  background: var(--danger);
  color: #ffffff;
}

/* IL VENDUTO PASSATO SI APRE: cliccandolo si vede chi l'ha comprato. Sembra testo finche' non
   ci passi sopra — sottolineatura tratteggiata leggera, non un link azzurro: in una tabella di
   numeri, otto colonne di link colorati sarebbero illeggibili. */
a.forecast-past-kg.is-apribile {
  color: inherit;
  text-decoration: underline dotted var(--border);
  text-underline-offset: 3px;
  cursor: pointer;
}

a.forecast-past-kg.is-apribile:hover {
  color: var(--navy);
  text-decoration-color: var(--navy);
}

a.forecast-past-kg.is-apribile:focus-visible {
  outline: 2px solid var(--navy-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Il modal con l'elenco dei clienti di quel giorno. Stretto: e' una lista di nomi e kg, non
   una scheda — allargarlo a tutto schermo lo farebbe sembrare piu' importante di quello da cui
   e' stato aperto. */
.vendite-modal {
  width: min(46rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 6rem);
  margin: auto;
  padding: 1.2rem 1.4rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  background: var(--surface);
}

.vendite-modal::backdrop {
  background: rgba(13, 27, 51, 0.4);
  backdrop-filter: blur(4px);
}

.vendite-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  padding: 0.2rem 0.45rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--gray-text);
  font-size: 1rem;
  cursor: pointer;
}

.vendite-modal-close:hover {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

.vendite-modal-corpo {
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
}

.vendite-giorno-testa {
  margin-bottom: 0.9rem;
  padding-right: 2rem;
}

/* Le due fonti del venduto non tornano: rosso, perché mette in dubbio i numeri sotto. */
.vendite-giorno-scarto {
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.85rem;
  background: #fdeae2;
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7a2318;
}

/* La notizia principale prima della tabella: un cliente solo che regge la giornata. */
.vendite-giorno-avviso {
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.85rem;
  background: #fff5ea;
  border-left: 4px solid var(--semaforo-arancio);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7a4a06;
}

.vendite-giorno-titolo {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.vendite-giorno-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray-text);
}

/* Il cliente che da solo regge la giornata: stessa soglia del conteggio in tabella. */
.vendite-giorno-tabella tr.is-dominante th[scope="row"] {
  border-left-color: var(--semaforo-arancio);
}

.vendite-giorno-tabella tr.is-dominante td:last-child {
  font-weight: 700;
  color: var(--semaforo-arancio);
}

/* DA QUANTI CLIENTI e' fatto un numero dello storico, sotto i kg. Piccolo e grigio: e' una
   qualifica del numero sopra, non un secondo numero da leggere. Si accende quando un cliente
   solo ne ha preso piu' del 30% — li' il venduto e' una richiesta, non domanda di mercato. */
.past-clients {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gray-logo);
  white-space: nowrap;
  cursor: help;
}

.past-clients-unit {
  font-weight: 400;
}

.past-clients.is-concentrato {
  color: var(--semaforo-arancio);
}

.past-clients.is-concentrato::before {
  content: "▲ ";
  font-size: 0.6rem;
}

.slot-breakdown-flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  background: #fdeae2;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b3402a;
}

/* I kg da ordinare: pillola piena, il numero che si porta via chi legge. */
.slot-breakdown-order {
  display: inline-block;
  min-width: 4.5rem;
  padding: 0.15rem 0.7rem;
  background: var(--navy);
  border-radius: 999px;
  font-weight: 700;
  color: #ffffff;
}

.slot-breakdown-order.is-total {
  background: var(--navy-dark);
}

.slot-breakdown-none {
  color: var(--border);
}

.slot-breakdown tfoot th,
.slot-breakdown tfoot td {
  background: var(--bg);
  border-top: 2px solid var(--navy);
  font-weight: 700;
}

.slot-alternatives-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-text);
}

.line-cards {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1rem;
}

.line-card {
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.15s ease;
}

.line-card:focus-within {
  box-shadow: var(--shadow-2);
}

.line-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}


.line-name {
  font-weight: 600;
  color: var(--ink);
}

/* Il numero da decidere in grande, con la proposta del motore accanto. */
.line-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 0.7rem;
}

/* LA GIACENZA, prima cosa della card: il numero che il buyer guarda sempre per primo.
   Sta a sinistra dei kg da ordinare perche' e' da li' che nasce l'ordine. */
.line-stock {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--navy);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-small);
}

.line-stock-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.line-stock-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--ink);
}

.line-stock-unit {
  margin-left: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.line-stock-incoming {
  font-size: 0.72rem;
  color: #1a7f5a;
}

/* GIA' VENDUTO: kg fissati da ordini di clienti per i giorni coperti. Verde, accanto alla
   giacenza: sono l'altra meta' di "quanto ne ho" — quello che e' gia' promesso. */
.line-booked {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.9rem;
  background: #eefaf4;
  border: 1px solid #1a7f5a;
  border-left: 4px solid #1a7f5a;
  border-radius: var(--radius-small);
}

.line-booked-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a7f5a;
}

.line-booked-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: #146346;
}

/* Non basta a coprire il periodo: la giacenza e' il primo posto dove si deve vedere. */
.line-stock.is-rottura {
  background: #fdeae2;
  border-color: #b3402a;
}

.line-stock.is-rottura .line-stock-label,
.line-stock.is-rottura .line-stock-value {
  color: #b3402a;
}

.line-order {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.line-order-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Per quale giorno di vendita serve questo ordine: minuscolo, sotto l'etichetta. */
.line-order-for {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-text);
  white-space: nowrap;
}

.line-order-input {
  width: 7rem;
  min-height: 52px;
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--navy);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

.line-order-input {
  transition: outline-color 0.15s ease, background 0.15s ease;
  outline: 2px solid transparent;
  outline-offset: 1px;
}

/* Focus ring con outline (non e' un'ombra: la scala di elevazione resta per le elevazioni). */
.line-order-input:focus {
  background: var(--azure-soft);
  outline-color: var(--navy);
}

/* Ordine diverso dalla proposta live: scelta consapevole, si deve vedere. */
.line-order-input.is-differs {
  background: #fdeae2;
  border-color: #e08a5e;
}

.line-order-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-text);
}

.line-suggested {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gray-text);
}

.line-suggested strong {
  font-size: 1.15rem;
  color: var(--ink);
}

/* LE DUE AZIONI D'ORDINE DELLA CARD: "ordina ora" e "ordina anche i prossimi giorni".
   Sono le uniche due cose che si PREMONO in tutta la card, e devono sembrarlo: fondo blu
   pieno, testo bianco, misura identica (griglia a colonne uguali, altezza minima fissa).
   Prima erano due pillole chiare col bordo sottile — "si vedono a malapena, si capisce a
   malapena che sono un bottone" (Mattias 2026-08-02). */
.line-order-actions {
  display: grid;
  gap: 0.45rem;
  min-width: 16rem;
}

.btn-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-small);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-order:hover {
  background: var(--navy-dark, #1b2560);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn-order:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

/* La freccia e il chevron: piu' piccoli del testo, sempre a destra, cosi' i due bottoni
   hanno lo stesso profilo anche con etichette di lunghezza diversa. */
.btn-order-icon {
  flex: none;
  font-size: 0.8rem;
  opacity: 0.85;
}

.future-orders-chevron {
  transition: transform 0.15s ease;
}

.future-orders-toggle.is-open .future-orders-chevron {
  transform: rotate(180deg);
}

/* La frase che spiega la proposta: il cuore della card, mai gergo. */
.line-phrase {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  color: var(--ink);
}

/* Rottura nel ponte: vendite che si perdono PRIMA dell'arrivo — un problema che questo
   ordine non risolve, quindi avviso a parte, mai dentro la frase del calcolo. */
.line-breakage-warning {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  background: #fdeae2;
  border: 1px solid #e08a5e;
  border-radius: var(--radius-small);
  font-size: 0.88rem;
  font-weight: 600;
  color: #b3402a;
}

.line-note {
  margin-top: 0.6rem;
  width: min(100%, 26rem);
}

/* --- Previsionali della finestra: tabella editabile + grafico degli andamenti --- */

.forecast-panel {
  margin-bottom: 1rem;
}

.forecast-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}

.forecast-panel-title {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
}

/* Selettore dell'orizzonte: pills compatte, stato attivo navy. Ogni vista (tabella,
   grafico) ha il SUO selettore nella SUA testata (feedback Mattias 2026-07-19). */
.forecast-range {
  display: inline-flex;
  /* L'etichetta del gruppo ("storico") e' testo, i bottoni sono pillole: senza
     allineamento esplicito la prima galleggia piu' in alto (Mattias 2026-08-02). */
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.forecast-range-option {
  min-height: 30px;
  padding: 0.2rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.forecast-range-option:hover {
  color: var(--navy);
}

.forecast-range-option.is-active {
  background: var(--navy);
  color: var(--surface);
  box-shadow: var(--shadow-1);
}

.forecast-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.forecast-table th,
.forecast-table td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.forecast-table thead th {
  background: var(--bg);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-text);
}

.forecast-table tbody tr:last-child th,
.forecast-table tbody tr:last-child td {
  border-bottom: none;
}

.forecast-table tbody tr:hover {
  background: var(--bg);
}

/* I giorni COPERTI dall'ordine emergono: sono quelli per cui si sta comprando. */
.forecast-table tbody tr.forecast-row-coverage {
  background: var(--azure-soft);
}

/* Il giorno sotto il mouse nel GRAFICO si illumina anche in tabella (e viceversa).
   La barra-indicatore e' un border (non un'ombra): bordo trasparente su tutte le righe
   per non avere salti di layout, navy quando la riga e' in evidenza. */
.forecast-table tbody th[scope="row"] {
  border-left: 3px solid transparent;
}

.forecast-table tbody tr.is-spotlight {
  background: var(--azure-soft);
}

.forecast-table tbody tr.is-spotlight th[scope="row"] {
  border-left-color: var(--navy);
}

.forecast-table th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.forecast-num {
  text-align: right;
}

.forecast-past {
  color: var(--gray-text);
}

.forecast-phase {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.forecast-phase.is-bridge {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--gray-text);
}

.forecast-phase.is-coverage {
  background: var(--surface);
  border: 1px solid var(--navy);
  color: var(--navy);
}

.forecast-phase.is-after {
  background: var(--surface);
  border: 1px dashed var(--border);
  color: var(--gray-text);
}

/* Meteo e weekend accanto al giorno: piccoli, mai invadenti. */
.forecast-day-icons {
  margin-left: 0.3rem;
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
}

.forecast-input {
  width: 4.5rem;
}

.forecast-chart-box {
  height: 560px;
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}

.forecast-chart {
  width: 100%;
  height: 100%;
}

.forecast-status {
  margin-top: 0.4rem;
}

/* --- Dettagli del calcolo (details nativo, chiuso di default) --- */

.line-details {
  margin-top: 0.6rem;
}

.line-details > summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.line-details-body {
  margin-top: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

/* "Come nasce la proposta": la catena del calcolo in chip leggibili, PRIMA di tabella e
   grafico — il buyer legge il ragionamento, poi i dati (feedback Mattias 2026-07-19). */
.calc-story {
  margin-bottom: 1.1rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(160deg, var(--azure-soft) 0%, var(--surface) 130%);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.calc-story-title {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
}

.calc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.35rem 0.4rem;
  margin: 0 0 0.5rem;
}

.calc-chip {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.35rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.calc-chip-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-text);
  white-space: nowrap;
}

/* IL FOGLIO DI CALCOLO: una colonna per giorno, una riga per voce — la forma in cui il
   buyer fa questi conti a mano su Excel (Mattias 2026-08-02). Ha sostituito la catena a
   riquadri e la tabella per-ordine: dicevano lo stesso conto senza farlo vedere. */
.worksheet {
  margin-bottom: 1.1rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(160deg, var(--azure-soft) 0%, var(--surface) 130%);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

/* Sopra il foglio: la giacenza di ADESSO e l'obiettivo. Il "da ordinare" non si ripete
   qui — lo dice la card, dove c'e' anche il campo in cui si scrive. */
.worksheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin: 0 0 0.75rem;
}

/* LA GIACENZA IN TEMPO REALE: sezione sua, in evidenza. Non e' l'inizio di una giornata
   qualsiasi — e' quello che c'e' in magazzino in questo momento, arrivi e vendite di oggi
   gia' dentro (Mattias 2026-08-02). */
.worksheet-now {
  padding: 0.5rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--navy);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-small);
}

.worksheet-now-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin: 0;
}

.worksheet-now-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.worksheet-now-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

.worksheet-now-unit {
  margin-left: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.worksheet-now-time {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Il controllo: mezzanotte + entrato − venduto deve fare il numero qui sopra. */
.worksheet-now-check {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.worksheet-now-check strong {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Se il conto non chiude c'e' un movimento che non conosciamo: si dice, non si nasconde. */
.worksheet-now-gap {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  background: #fdeae2;
  border-radius: 999px;
  font-weight: 700;
  color: #b3402a;
}

.worksheet-goal {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.worksheet-goal .proposal-input {
  width: 5.5rem;
  text-align: right;
}

/* La colonna di oggi parte dalla giacenza vera: la cella si lega alla sezione sopra. */
.worksheet-num.is-now {
  background: var(--azure-soft);
  box-shadow: inset 3px 0 0 var(--navy);
  font-weight: 700;
}

/* Il foglio scorre in orizzontale: i giorni sono tanti e la pagina non deve allargarsi. */
.worksheet-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.worksheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* La colonna delle voci resta ferma mentre si scorre nei giorni: senza, dopo tre colonne
   non si sa piu' che riga si sta leggendo. */
.worksheet-label {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 14rem;
  padding: 0.35rem 0.7rem;
  background: var(--surface);
  text-align: left;
  font-weight: 500;
  color: var(--gray-text);
  white-space: nowrap;
}

.worksheet-day {
  padding: 0.35rem 0.7rem;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.worksheet-day-name {
  display: block;
}

.worksheet-day-tag {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-text);
}

/* I giorni che quest'ordine copre: e' li' che si guarda per decidere. */
.worksheet-day.is-coverage {
  background: var(--azure-soft);
}

.worksheet-num {
  padding: 0.35rem 0.7rem;
  text-align: right;
  white-space: nowrap;
}

/* Uno zero secco e' rumore: dove non succede niente si mette un trattino spento. */
.worksheet-num.is-zero {
  color: var(--border);
}

/* Giacenza a zero = si finisce la merce quel giorno. Va visto subito. */
.worksheet-num.is-empty {
  font-weight: 700;
  color: var(--danger);
}

.worksheet-table tbody tr + tr .worksheet-label,
.worksheet-table tbody tr + tr .worksheet-num {
  border-top: 1px solid var(--border-soft);
}

/* Le righe che chiudono un conto: il subtotale e la rimanenza finale. */
.worksheet-subtotal .worksheet-label,
.worksheet-subtotal .worksheet-num,
.worksheet-total .worksheet-label,
.worksheet-total .worksheet-num {
  font-weight: 700;
  color: var(--ink);
}

.worksheet-total .worksheet-label,
.worksheet-total .worksheet-num {
  border-top: 2px solid var(--border);
}

/* La riga dell'ordine che si sta decidendo. */
.worksheet-order .worksheet-label,
.worksheet-order .worksheet-num {
  background: var(--azure-soft);
  color: var(--navy);
  font-weight: 700;
}

/* ---- I COLORI DEL FOGLIO: tre famiglie, e si capisce senza leggere le etichette ----
   Quello che ENTRA in magazzino è verde, quello che ESCE è rosso, i totali sono neri in
   grassetto su banda azzurra. Sono le stesse tre famiglie che un buyer usa a mano
   sull'Excel (Mattias 2026-08-02: "colori sulle cose importanti che tornano, che la
   rendano super comprensibile da un essere umano"). */

.worksheet-in .worksheet-num {
  color: #1a7f5a;
}

.worksheet-in .worksheet-num.is-zero {
  color: var(--border);
}

/* La riga delle vendite: è l'uscita, ed è l'unica che si tocca. Colore SABBIA, non rosso:
   col rosa era la stessa faccia della rottura e sembrava un errore anche quando tutto
   andava bene (Mattias 2026-08-02). Il rosso in questa tabella vuol dire una cosa sola. */
.worksheet-sales .worksheet-label,
.worksheet-sales .worksheet-num {
  background: #fdf6e6;
}

.worksheet-sales .worksheet-label {
  color: #8a6100;
}

/* Il subtotale e il risultato: banda azzurra, il colore dei numeri "certi". */
.worksheet-subtotal .worksheet-label,
.worksheet-subtotal .worksheet-num,
.worksheet-total .worksheet-label,
.worksheet-total .worksheet-num {
  background: var(--azure-soft);
}

/* IL FILO CHE LEGA I GIORNI: la giacenza a fine giornata è, tale e quale, la giacenza di
   partenza del giorno dopo. È il "torna" della tabella, e va visto. */
.worksheet-total .worksheet-num {
  box-shadow: inset 0 -2px 0 var(--navy-bright);
}

/* GIORNATA IN ROTTURA: si colora la COLONNA INTERA, dall'intestazione all'ultima riga.
   Marcare solo la casella dello scoperto lasciava il resto della giornata bianco e non si
   capiva che il problema era quel giorno (Mattias 2026-08-02: "segno in rosso solo un box
   sotto invece di mettere in evidenza tutta la giornata, non torna proprio"). Vince sulle
   bande delle righe: la rottura e' l'informazione piu' importante della tabella. */
.worksheet-table .is-rottura-giorno {
  background: #fdeae2;
}

.worksheet-table td.is-rottura-giorno {
  color: #b3402a;
}

.worksheet-table th.worksheet-day.is-rottura-giorno {
  color: #b3402a;
  box-shadow: inset 0 3px 0 #b3402a;
}

.worksheet-break .worksheet-num:not(.is-zero),
.worksheet-total .worksheet-num.is-rottura {
  color: #b3402a;
  font-weight: 700;
}

.worksheet-break .worksheet-label {
  color: #b3402a;
  font-weight: 600;
}

/* La legenda: tre parole sotto la tabella, non un manuale. */
.worksheet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--gray-text);
}

.worksheet-legend-item::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 3px;
  vertical-align: -1px;
}

.worksheet-legend-item.is-in::before {
  background: #1a7f5a;
}

.worksheet-legend-item.is-out::before {
  background: #d9a441;
}

.worksheet-legend-item.is-chain::before {
  background: var(--azure-soft);
  border-bottom: 2px solid var(--navy-bright);
}

.worksheet-legend-item.is-break::before {
  background: #b3402a;
}

/* La frase che ancora tutta la catena a una data sola ("vendibile da mercoledi' 5/8"):
   sta sopra i riquadri perche' si legga PRIMA dei numeri, non dopo averli interpretati. */
.calc-lead {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  color: var(--ink);
}

/* La precisazione sotto il numero: gli ADDENDI del totale (mar 4/8 400 · mer 5/8 200) e le
   note di perimetro. Minuscolo e non in maiuscoletto, cosi' si legge come una nota e non
   compete con l'etichetta della chip. Va a capo: con tre giorni una riga sola sfonderebbe
   la card (prima era white-space: nowrap, quando qui c'erano solo due date). */
.calc-chip-note {
  max-width: 22rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-text);
}

/* Gli arrivi ESCLUSI dal conto (arrivano dopo il giorno coperto): esistono solo per
   spiegare perche' il numero non coincide con quello del gestionale, quindi devono
   leggersi come una precisazione e mai come un secondo numero da sommare. */
.calc-chip-note.is-muted {
  font-style: italic;
  opacity: 0.75;
}

/* La precisazione accanto al comprato di oggi (quando arriva, o da quando e' l'ultimo
   ordine): staccata dal testo principale ma sulla stessa riga. */
.line-ordered-note {
  margin-left: 0.35rem;
  color: var(--gray-text);
  font-weight: 500;
}

/* L'ultimo ordine gia' fatto: stessa forma delle altre chip ma staccato dai numeri della
   proposta da un bordo pieno — e' un fatto passato, non un termine del calcolo. */
.calc-chip.is-last-order {
  border-color: var(--navy);
  background: var(--surface-alt, #f4f6fb);
}

.calc-chip.is-last-order strong {
  color: var(--navy);
}

.calc-chip.is-result {
  border-color: var(--navy);
}

/* La giacenza del gruppo: primo numero della fila, in evidenza come nelle card. */
.calc-chip.is-stock {
  border-color: var(--navy);
  border-left-width: 4px;
}

.calc-chip.is-order {
  background: var(--navy);
  color: #fff;
}

.calc-chip.is-order .calc-chip-label {
  color: rgba(255, 255, 255, 0.75);
}

.calc-chip.is-editable {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.calc-chip.is-editable .calc-chip-label {
  align-self: center;
}

/* Il margine di copertura in %: badge dentro il chip dell'obiettivo. */
.calc-margin {
  align-self: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--azure-soft);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

/* La percentuale della copertura COL NUMERO DEL BUYER: in evidenza, live. */
.calc-margin.is-strong {
  padding: 0.3rem 0.75rem;
  background: var(--navy);
  color: #fff;
  font-size: 0.85rem;
}

/* Sotto l'atteso: rischio rottura, il badge lo urla. */
.calc-margin.is-strong.is-under {
  background: var(--danger);
}

.calc-op {
  align-self: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-text);
}

.calc-note {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--gray-text);
}

.calc-note strong {
  color: var(--ink);
}

.calc-breakdown {
  margin-top: 0.5rem;
}

.calc-breakdown summary {
  width: fit-content;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}

/* La testata del grafico stacca dalla tabella sopra. */
.forecast-chart-head {
  margin-top: 1rem;
}

/* Input compatti riusati (obiettivo nei dettagli, note). */
.proposal-input {
  width: 5rem;
  min-height: 34px;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.proposal-input:focus {
  border-color: var(--navy);
}

.proposal-input-note {
  width: 12rem;
  text-align: left;
}

/* Obiettivo diverso dal calcolo del motore: il buyer ha messo la sua parola. */
.proposal-input.is-overridden {
  background: #fdf3d7;
  border-color: #d9b23c;
  font-weight: 700;
}

.proposal-input.is-differs {
  background: #fdeae2;
  border-color: #e08a5e;
  font-weight: 700;
}

.proposal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* "Salva e avanti" INCHIODATO in fondo alla scheda scrollabile del modal: il contenuto
   che cresce (analisi di Marina in streaming, details aperti) non lo sposta piu' sotto
   il mouse del buyer (bug Mattias 2026-07-19: il click andava a vuoto). */
.slot-modal .proposal-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 0.75rem;
  padding: 0.6rem 0;
  background: linear-gradient(to top, var(--surface) 72%, transparent);
}

/* Legenda della fonte sotto la griglia. */
.source-decision {
  color: var(--navy);
}

/* "Poi l'ho comprato?": lo stato acquisto del giorno dentro la card, senza cambiare pagina. */
.line-ordered {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  color: var(--gray-text);
}

.line-ordered.is-bought {
  font-weight: 600;
  color: #2e7d4f;
}

/* Avviso "minimo d'ordine fornitore" (rev buyer 2026-07-27): card arancio sopra la
   lista del giro, mai bloccante. */
.supplier-minimum {
  margin: 0 0 1rem;
  padding: 0.8rem 1.1rem;
  background: #fef7e0;
  color: #7a5d00;
  border: 1px solid rgba(122, 93, 0, 0.25);
  border-radius: var(--radius-small);
  font-size: 0.9rem;
}

.supplier-minimum-head {
  margin: 0;
}

.supplier-minimum-hint {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
}

.supplier-minimum-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.supplier-minimum-cluster {
  color: var(--navy);
  font-weight: 600;
}

.supplier-minimum-room {
  color: var(--gray-text);
  font-size: 0.8rem;
  margin-left: 0.35rem;
}

/* Badge di stagionalita' sulla riga previsionale ("x1,25 agosto"): spiega perche'
   la previsione supera il venduto recente quando cambia il mese. */
.forecast-season-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--azure-soft);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}

/* Badge dei giorni SPECIALI (festivo / vigilia / ponte) accanto alla data: quel giorno
   vive in un regime a parte e il buyer deve vederlo a colpo d'occhio. Le feste pesanti
   (Ferragosto, Natale...) hanno il colore pieno: vanno viste da lontano. */
.forecast-special-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(232, 113, 10, 0.12);
  color: #a34f07;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}

.forecast-special-badge.is-heavy {
  background: var(--semaforo-arancio);
  color: var(--surface);
}

/* La forma compatta per le intestazioni di colonna strette (riepilogo cluster). */
.forecast-special-icon {
  margin-left: 0.15rem;
  cursor: help;
}

/* ---- LA FINESTRA DI ORACLE: la previsione che si spiega (Mattias 2026-08-07) ---- */

/* Il tasto sulla riga: una PILLOLA che invita, non una scintilla che si nasconde
   (Mattias 2026-08-07: "deve essere molto piu' chiaro, con una call to action").
   Sempre visibile, col marchio di Oracle; al passaggio si accende col gradiente brand. */
.oracle-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  padding: 0.14rem 0.55rem;
  border: 1px solid var(--navy-bright);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy-bright);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}

.oracle-ask:hover {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

/* Il fondo: scurisce e sfoca la pagina — l'attenzione va tutta sulla finestra. */
.oracle-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(16, 22, 48, 0.55);
  backdrop-filter: blur(4px);
}

/* SENZA QUESTA RIGA IL MODAL ERA SEMPRE APERTO: `display: flex` esplicito vince
   sull'attributo hidden (che e' solo display: none del browser) — la finestra compariva
   col caricamento a vuoto appena si aprivano i dettagli. Il flex vale solo da aperta. */
.oracle-modal[hidden] {
  display: none;
}

/* La finestra: bordo a gradiente brand (un guscio-gradiente con dentro la superficie,
   il modo pulito senza border-image) e un'entrata morbida dal basso. */
.oracle-window {
  width: min(680px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 2px;
  border-radius: var(--radius);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-3);
  animation: oracle-entra 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

@keyframes oracle-entra {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.oracle-window-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  color: #fff;
}

/* Il nome: ORACLE in maiuscoletto spaziato, con la sua icona — il marchio del modello. */
.oracle-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* L'ICONA: l'occhio-orbe con gli anelli in moto discorde — lenti, da osservatorio, non
   da caricamento. Su fondo gradiente (la testata) i tratti navy si vedono comunque
   perche' l'orbe chiaro fa da ancora. */
.oracle-icona {
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
}

.oracle-icona-anello {
  transform-origin: 24px 24px;
  animation: oracle-ruota 16s linear infinite;
}

.oracle-icona-orbita {
  transform-origin: 24px 24px;
  animation: oracle-ruota 11s linear infinite reverse;
}

.oracle-icona-scintilla {
  transform-origin: 24px 24px;
  animation: oracle-scintilla 2.8s ease-in-out infinite;
}

@keyframes oracle-ruota {
  to {
    transform: rotate(360deg);
  }
}

@keyframes oracle-scintilla {
  0%, 100% {
    opacity: 0.75;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-icona-anello,
  .oracle-icona-orbita,
  .oracle-icona-scintilla {
    animation: none;
  }
}

/* ---- L'ATTESA DI ORACLE: la sfera armillare (qui lavora lui, non Marina) ---- */

.oracle-attesa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  padding: 2.2rem 1.5rem;
}

/* La scena e' un palcoscenico 3D: gli anelli ruotano su assi veri, non schiacciati. */
.oracle-attesa-scena {
  position: relative;
  width: 11rem;
  height: 11rem;
  perspective: 620px;
  transform-style: preserve-3d;
}

/* L'alone che respira dietro tutto: tiene il centro caldo. */
.oracle-attesa-alone {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 143, 202, 0.22) 0%, rgba(79, 143, 202, 0) 68%);
  animation: attesa-respiro 3.2s ease-in-out infinite;
}

/* Il fascio di scansione: un settore di luce che spazza il quadrante, da radar del futuro. */
.oracle-attesa-scan {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 318deg,
    rgba(126, 195, 239, 0.05) 330deg,
    rgba(126, 195, 239, 0.38) 356deg,
    transparent 360deg);
  animation: oracle-ruota 2.6s linear infinite;
  transform-origin: 50% 50%;
}

/* I TRE ANELLI DEL GIROSCOPIO: ognuno inclinato sul suo asse e in rotazione continua,
   uno in senso contrario — la sfera armillare che si vede solo quando i moti sono
   discordi. Il bordo e' acceso solo su due lati: un cerchio uniforme che gira non si
   vede girare. */
.oracle-giro {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #4f8fca;
  border-bottom-color: rgba(170, 220, 242, 0.65);
}

.oracle-giro-uno {
  animation: oracle-giro-asse-uno 3.8s linear infinite;
}

.oracle-giro-due {
  border-top-color: var(--navy-bright);
  animation: oracle-giro-asse-due 5.2s linear infinite;
}

.oracle-giro-tre {
  border-top-color: rgba(126, 195, 239, 0.9);
  animation: oracle-giro-asse-tre 2.9s linear infinite reverse;
}

@keyframes oracle-giro-asse-uno {
  from {
    transform: rotateY(64deg) rotateX(8deg) rotateZ(0deg);
  }

  to {
    transform: rotateY(64deg) rotateX(8deg) rotateZ(360deg);
  }
}

@keyframes oracle-giro-asse-due {
  from {
    transform: rotateX(68deg) rotateY(-6deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(68deg) rotateY(-6deg) rotateZ(360deg);
  }
}

@keyframes oracle-giro-asse-tre {
  from {
    transform: rotateY(-58deg) rotateX(-14deg) rotateZ(0deg);
  }

  to {
    transform: rotateY(-58deg) rotateX(-14deg) rotateZ(360deg);
  }
}

/* L'anello HUD piatto: tratteggiato, davanti, ruota piano — la quadratura strumentale
   che tiene insieme la scena. Il tratteggio e' un bordo dashed che il browser rende da
   solo, niente SVG. */
.oracle-giro-hud {
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  border: 1.5px dashed rgba(53, 71, 171, 0.4);
  animation: oracle-ruota 24s linear infinite;
  transform-origin: 50% 50%;
}

/* Le particelle: ogni wrapper e' un'orbita che ruota e porta in giro il suo puntino
   luminoso (la scia e' il box-shadow). Raggi, velocita' e partenze diverse: non devono
   mai allinearsi. */
.oracle-particella {
  position: absolute;
  inset: 0;
  animation: oracle-ruota linear infinite;
  transform-origin: 50% 50%;
}

.oracle-particella::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #aadcf2;
  box-shadow: 0 0 10px 3px rgba(126, 195, 239, 0.75);
}

.oracle-particella-una {
  animation-duration: 3.4s;
}

.oracle-particella-una::after {
  top: 2%;
}

.oracle-particella-due {
  animation-duration: 5.6s;
  animation-delay: -2.1s;
}

.oracle-particella-due::after {
  top: 9%;
  width: 4px;
  height: 4px;
}

.oracle-particella-tre {
  animation-duration: 7.8s;
  animation-delay: -4.4s;
  animation-direction: reverse;
}

.oracle-particella-tre::after {
  top: 5%;
  width: 5px;
  height: 5px;
  background: #7ec3ef;
}

/* L'ORBE: il nucleo che vede — respira piano, e dentro pulsa la stessa scintilla dei
   tasti "perche'?". */
.oracle-attesa-orbe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.6rem;
  height: 3.6rem;
  margin: -1.8rem 0 0 -1.8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #e9f5fc 0%, #7ec3ef 42%, #26327e 100%);
  box-shadow:
    0 0 18px 4px rgba(126, 195, 239, 0.55),
    inset 0 -6px 12px rgba(29, 38, 97, 0.55);
  animation: oracle-orbe-respiro 3.2s ease-in-out infinite;
}

.oracle-attesa-orbe svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@keyframes oracle-orbe-respiro {
  0%, 100% {
    transform: scale(0.94);
  }

  50% {
    transform: scale(1.05);
  }
}

.oracle-attesa-etichetta {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  animation: attesa-fiato 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .oracle-attesa-alone,
  .oracle-attesa-scan,
  .oracle-giro,
  .oracle-giro-hud,
  .oracle-particella,
  .oracle-attesa-orbe,
  .oracle-attesa-etichetta {
    animation: none;
  }

  /* Fermi ma composti: gli anelli restano inclinati come a meta' giro, non spariti. */
  .oracle-giro-uno {
    transform: rotateY(64deg) rotateX(8deg);
  }

  .oracle-giro-due {
    transform: rotateX(68deg);
  }

  .oracle-giro-tre {
    transform: rotateY(-58deg);
  }
}

.oracle-window-title {
  flex: 1;
  font-size: 0.92rem;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oracle-close {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  cursor: pointer;
}

.oracle-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.oracle-window-body {
  background: var(--surface);
  border-radius: calc(var(--radius) - 2px);
  padding: 1.3rem 1.4rem;
  overflow-y: auto;
}

.oracle-explanation {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

.oracle-explanation p {
  margin: 0 0 0.7rem;
}

.oracle-explanation ul {
  margin: 0 0 0.7rem;
  padding-left: 1.2rem;
}

/* Il commento del buyer: separato dalla spiegazione da una riga sottile — e' un'altra
   voce che entra nella conversazione. */
.oracle-comment {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.oracle-comment-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

.oracle-comment-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.oracle-comment-input:focus {
  outline: 2px solid var(--navy-bright);
  outline-offset: 1px;
}

.oracle-comment-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

/* La spunta del commento salvato: sboccia accanto al bottone, verde e sicura di se'. */
.oracle-status-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--semaforo-verde);
  animation: oracle-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.oracle-status-ok::before {
  content: "✓";
  font-size: 1rem;
}

@keyframes oracle-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* Il congedo: dopo il salvataggio la finestra sfuma e scivola giu' da sola. */
.oracle-modal.is-closing {
  animation: oracle-sfuma 0.3s ease forwards;
}

.oracle-modal.is-closing .oracle-window {
  animation: oracle-esce 0.3s ease forwards;
}

@keyframes oracle-sfuma {
  to {
    opacity: 0;
  }
}

@keyframes oracle-esce {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-window,
  .oracle-modal.is-closing,
  .oracle-modal.is-closing .oracle-window,
  .oracle-status-ok {
    animation: none;
  }
}

/* Strumenti del cluster raggruppati in fondo alla scheda (riordino UX 2026-07-29):
   collega articolo + crea gruppo insieme, prima del Salva. */
.cluster-tools {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* I FATTI del giorno sotto la stima (gia' venduto, gia' impegnato): sono consuntivo, non
   previsione — rientrati, piu' piccoli e senza il peso dei totali, cosi' si legge subito
   che stanno spiegando la riga sopra e non aggiungendosi a lei. */
.worksheet-fact .worksheet-label {
  padding-left: 1.6rem;
  font-size: 0.8rem;
  font-style: italic;
}

.worksheet-fact .worksheet-num {
  font-size: 0.8rem;
  color: var(--gray-text);
}

/* --- Lo STORICO nella tabella previsionali: otto settimane, i segnali e la sparkline --- */

/* L'etichetta del selettore: dice a cosa serve il gruppo di bottoni accanto. */
.forecast-range-label {
  margin-right: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-text);
}

/* Le colonne di storico oltre la quarta: piu' spente, cosi' le prime restano il
   riferimento e le altre si leggono come contorno. */
.forecast-past-col {
  white-space: nowrap;
}

/* Il disegno dell'andamento: otto settimane in una linea, dal piu' vecchio al piu'
   recente. Un elenco di cifre si confronta a fatica, una linea si guarda e basta. */
.spark {
  display: inline-block;
  vertical-align: middle;
  color: var(--navy-bright);
}

.spark-empty {
  color: var(--border);
}

.forecast-spark {
  white-space: nowrap;
}

/* La direzione dell'andamento, accanto alla linea. */
.trend-badge {
  margin-left: 0.3rem;
  font-size: 0.8rem;
  vertical-align: middle;
}

.trend-badge.is-su {
  color: var(--semaforo-verde);
}

.trend-badge.is-giu {
  color: var(--danger);
}

.trend-badge.is-piatto {
  color: var(--gray-text);
}

/* I segnali sui singoli numeri passati: perche' quel numero merita un'occhiata. */
.past-signal {
  margin-right: 0.2rem;
  font-size: 0.78rem;
}

/* Rottura: quel giorno il venduto NON e' la domanda, e' quello che sei riuscito a dare. */
.past-signal.is-rottura {
  color: var(--semaforo-arancio);
}

/* STIMATO: quel giorno non e' ancora successo, la colonna porta la previsione e non un
   venduto. IN ROSSO E IN CORSIVO (Mattias 2026-08-06), perche' un numero previsto scambiato
   per un fatto e' il modo piu' rapido di far sbagliare un ordine: deve saltare all'occhio
   che quella cifra non e' successa. */
.past-signal.is-stimato,
.forecast-past:has(.past-signal.is-stimato) .forecast-past-kg {
  color: var(--danger);
}

.forecast-past:has(.past-signal.is-stimato) .forecast-past-kg {
  font-style: italic;
}

.past-signal.is-basso {
  color: var(--danger);
}

.past-signal.is-alto {
  color: var(--semaforo-verde);
}

/* La rottura MISURATA (giacenza scesa sotto il chilo) e quella DEDOTTA non devono
   sembrare la stessa cosa: una e' un fatto, l'altra un sospetto di un'euristica. */
.past-signal.is-sospetta {
  color: var(--gray-text);
  opacity: 0.8;
}

/* --- I giorni SPECIALI nel foglio: meteo, feste, vigilie --- */

.worksheet-day-weather {
  font-size: 0.75rem;
  font-weight: 400;
}

/* Le feste che spostano davvero i volumi (Ferragosto, Natale, Capodanno...): la colonna
   INTERA si accende, perche' si devono vedere da lontano scorrendo il foglio. */
.worksheet-table .is-festa-grossa {
  background: #fdf0e2;
}

.worksheet-table th.is-festa-grossa {
  border-bottom: 2px solid var(--semaforo-arancio);
}

/* Le feste minori e le vigilie restano segnalate ma sobrie: se si accende tutto, non si
   accende niente. */
.worksheet-table .is-festa {
  background: #fdf8ee;
}

.worksheet-table .is-vigilia {
  background: #f7f9fd;
}

.worksheet-day-tag.is-festa {
  font-weight: 700;
  color: var(--semaforo-arancio);
}

.worksheet-day-tag.is-vigilia {
  color: var(--navy-bright);
}

/* --- Ordinare anche i giorni successivi: in fila con l'ordine di oggi --- */

.future-orders {
  position: relative;
}

/* Da aperto il bottone resta premuto (piu' scuro, senza rilievo): dice che il pannello
   sotto e' suo. */
.future-orders-toggle.is-open {
  background: var(--navy-dark);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Spostato sotto il tasto che lo apre (dentro .line-main, che e' flex): occupa una riga
   intera, cosi' si apre proprio sotto le due azioni d'ordine. */
.line-main > .future-orders-panel {
  flex: 1 0 100%;
  order: 99;
}

.future-orders-panel {
  margin-top: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--navy);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-1);
}

.future-orders-head {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--gray-text);
}

.future-orders-head strong {
  color: var(--ink);
}

.future-orders-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Una riga per giro: giorno a sinistra, quando arriva e cosa copre in mezzo, kg a destra.
   Griglia e non tabella: qui ogni riga e' una decisione, non un dato da confrontare in
   colonna. */
.future-orders-row {
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
}

.future-orders-row + .future-orders-row {
  border-top: 1px solid var(--border-soft);
}

.future-orders-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.future-orders-day {
  font-weight: 600;
  color: var(--ink);
}

.future-orders-when {
  font-size: 0.84rem;
  color: var(--gray-text);
}

.future-orders-when strong {
  color: var(--ink);
  font-weight: 600;
}

.future-orders-kg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--gray-text);
}

.future-orders-kg .proposal-input {
  width: 6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.future-orders-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.future-orders-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

/* A chi e a che prezzo partono gli ordini: si legge PRIMA di premere, non dopo. */
.future-orders-note {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.8rem;
  background: var(--azure-soft);
  border-radius: var(--radius-small);
  font-size: 0.82rem;
  color: var(--ink);
}


/* LA RIGA CHE CONTA: e' la previsione, l'unica cosa che il buyer corregge col suo naso.
   Il colore della riga e' UNO SOLO per tutta la larghezza (vedi .worksheet-sales piu'
   sopra): con l'etichetta rosa e le celle azzurre la riga sembrava spezzata a meta', e
   una riga spezzata si legge come un errore (Mattias 2026-08-02). */
.worksheet-sales .worksheet-label {
  font-size: 0.95rem;
  font-weight: 700;
}

.worksheet-sales-input {
  width: 5rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* Corretta a mano dal buyer: si vede che quel numero non e' del modello. */
.worksheet-sales-input.is-overridden {
  border-color: var(--semaforo-arancio);
  background: #fff8ef;
}

/* La prima colonna del foglio non e' l'inizio della giornata ma l'ULTIMA giacenza rilevata:
   la nota lo dice sotto il numero, senza inquinare l'etichetta della riga. */
.worksheet-note {
  display: block;
  font-size: 0.65rem;
  font-style: italic;
  color: var(--gray-text);
}

/* IL GIRO DI OGGI E' CHIUSO. Stessa ambra della pagina dei cluster personalizzati
   (.custom-cluster-chiuso): e' lo stesso fatto detto sulla stessa giornata, e due colori
   diversi lo farebbero sembrare due avvisi diversi. */
.giro-chiuso {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: #fef7e0;
  border-left: 4px solid #d9b23c;
  border-radius: var(--radius-small);
  color: #7a5d00;
}

.giro-chiuso-titolo {
  margin: 0 0 0.2rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.giro-chiuso-nota {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.giro-chiuso-nota a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Dentro la scheda: accanto al tasto, non un blocco a se' — il salvataggio resta possibile
   e la riga serve solo a impedire che "Salva e avanti" si legga come "ordine mandato".
   margin-right auto invece di una flex-basis: la barra e' gia' justify-content flex-end,
   cosi' la nota resta a sinistra e il tasto dov'era, senza toccare .proposal-actions che e'
   condivisa con altre schede. */
.giro-chiuso-inline {
  align-self: center;
  margin: 0 auto 0 0;
  padding-right: 1rem;
  color: #7a5d00;
}