/*
 * 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). */

.proposal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--gray-text);
}

/* Giorno coperto con la sua icona meteo (previsione Open-Meteo dell'area). */
.weather-day {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 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: 1.25rem;
}

.slot-item {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.2fr) 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 copertura per esteso deve leggersi TUTTA: niente ellipsis, al massimo va a capo. */
.slot-item-meta {
  font-size: 0.82rem;
  color: var(--gray-text);
}

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

.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(--azure-soft);
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.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 --- */

.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;
}

.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;
}

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

@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(--navy);
  color: var(--navy);
}

/* 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;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-text);
  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. */
.muted-lines {
  margin-top: 0.75rem;
}

.muted-lines summary {
  width: fit-content;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--gray-text);
}

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

/* 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;
}

.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, l'analisi, 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);
}

/* --- L'analisi di Marina: commento AI con shimmer di caricamento --- */

.marina-note {
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}

.marina-note-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
}

.marina-spark {
  font-size: 0.95rem;
  line-height: 1;
}

/* Mentre Marina "pensa" la scintilla pulsa. */
.slot-summary.is-thinking .marina-spark {
  animation: marina-pulse 1.1s ease-in-out infinite;
}

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

.marina-note-body {
  font-size: 0.92rem;
  color: var(--ink);
}

.marina-note-body .line-phrase {
  margin: 0;
}

.marina-note-body.is-revealed {
  animation: marina-reveal 0.5s ease-out;
}

@keyframes marina-reveal {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Il "cervello" di Marina che elabora: nucleo pulsante + anelli in espansione, centrato
   nel box dove apparira' il testo. [hidden] deve VINCERE sul display flex. */
.marina-thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 7.5rem;
}

.marina-thinking[hidden] {
  display: none;
}

/* L'aurora orb: alone conico sfocato che ruota + sfera con riflesso, il look "AI viva". */
.marina-orb {
  position: relative;
  display: block;
  width: 4.2rem;
  height: 4.2rem;
}

.marina-orb-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #2a78d6, #7b5be6, #e87ba4, #26c6a8, #2a78d6);
  filter: blur(16px) saturate(1.6);
  opacity: 0.85;
  animation: marina-orb-spin 2.6s linear infinite;
}

.marina-orb-core {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 44%),
    conic-gradient(from 180deg, #2a78d6, #6d5ae0, #b06ad6, #4a3aa7, #2a78d6);
  animation: marina-orb-spin 5.2s linear infinite reverse;
}

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

/* Il testo di Marina si SCRIVE: cursore che lampeggia finche' sta battendo. */
.marina-note-body.is-typing::after {
  content: "▍";
  margin-left: 0.05rem;
  color: var(--navy);
  animation: marina-cursor 0.8s step-end infinite;
}

@keyframes marina-cursor {
  50% {
    opacity: 0;
  }
}

/* Testo "sta elaborando" con gradiente che scorre (feel AI) e puntini in cascata. */
.marina-thinking-text {
  font-size: 0.9rem;
  font-weight: 600;
  background: linear-gradient(90deg, var(--gray-text) 20%, var(--navy) 50%, var(--gray-text) 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: marina-textflow 1.6s linear infinite;
}

@keyframes marina-textflow {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.marina-thinking-dots span {
  animation: marina-dot 1.2s ease-in-out infinite;
}

.marina-thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.marina-thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes marina-dot {
  0%, 100% {
    opacity: 0.2;
  }
  40% {
    opacity: 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);
}

.slot-summary .line-phrase {
  margin-top: 0.5rem;
}

.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;
}

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

.line-order-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-text);
}

.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);
}

/* "Registra acquisto su Ergon": dal numero deciso alla pagina Carica acquisti
   precompilata, un click. */
.btn-register-ergon {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--navy);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.btn-register-ergon {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-register-ergon:hover {
  background: var(--azure-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* Il box "registra acquisto" in testa alla griglia articolo. */
.grid-register {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.grid-register-input {
  width: 6rem;
}

/* 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;
}

/* La prima cosa dei dettagli: che periodo copre l'ordine e quanto si vendera' li'. */
.line-coverage-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.line-history-week {
  display: inline-block;
  margin-right: 0.8rem;
  white-space: nowrap;
}

.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;
  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;
}

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

.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;
}

.line-forecast-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--gray-text);
}

/* 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);
}

/* --- Monitor settimanale: griglia previsto vs venduto --- */

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

.monitor-table th,
.monitor-table td {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

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

.monitor-table th.col-product,
.monitor-table td.col-product {
  text-align: left;
}

/* Cella giorno: previsto sopra, venduto sotto. */
.monitor-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  min-width: 3.2rem;
}

.monitor-planned {
  color: var(--gray-text);
}

/* Fonte del previsto: la decisione del buyer pesa, la stima del motore sussurra. */
.monitor-planned.source-decision {
  font-weight: 700;
  color: var(--navy);
}

.monitor-planned.source-engine {
  font-style: italic;
}

.monitor-sold {
  font-weight: 600;
}

/* Giorni passati: venduto oltre il previsto = copertura che si erode (rischio rottura),
   molto sotto = invenduto in canna. */
.monitor-cell.cell-over .monitor-sold {
  color: #b3402a;
}

.monitor-cell.cell-under .monitor-sold {
  color: #b07d1e;
}

.monitor-cell.cell-ok .monitor-sold {
  color: #2e7d4f;
}

.monitor-table td.cell-today {
  background: var(--azure-soft);
}

.monitor-product-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.monitor-product-link:hover {
  text-decoration: underline;
}

/* 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;
}