/*
 * Griglia settimanale per CLUSTER (replica auto-alimentata dei fogli Excel del buyer):
 * righe L..D, colonne = settimane, scroll orizzontale dentro .table-scroll centrato
 * sulla settimana corrente (grid_scroll_controller). L'esito del giorno colora la
 * CELLA intera (tinta verde/rossa, tratteggio = rottura dedotta): i numeri restano
 * puliti e la lettera a/r del buyer vive piccola nell'angolo. Regole design system:
 * una property per riga.
 */

/* Toolbar sopra la griglia: select del cluster + finestra settimane sulla stessa riga. */
.grid-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 1.1rem 0;
}

.grid-cluster-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.grid-toolbar-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--corallo-dark);
}

/* Menu a DUE LIVELLI della griglia: primo livello = cluster, il passaggio del mouse
   (o il tap, via :focus-within) sui cluster a piu' fogli apre la tendina laterale
   delle pezzature. Solo HTML+CSS (details), nessun JS. */
.grid-menu {
  position: relative;
  min-width: 16rem;
}

.grid-menu-current {
  padding: 0.55rem 2.3rem 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2326327e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  list-style: none;
}

.grid-menu-current::-webkit-details-marker {
  display: none;
}

.grid-menu-current:hover {
  border-color: var(--navy);
}

/* Primo livello: SOLO i cluster, elenco verticale scrollabile. */
.grid-menu[open] .grid-menu-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.3rem);
  left: 0;
  min-width: 17rem;
  max-height: 65vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-3);
}

.grid-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.65rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.grid-menu-item:hover,
.grid-menu-item:focus-visible,
.grid-menu-branch:hover > .grid-menu-item {
  background: var(--azure-soft);
}

.grid-menu-item.is-current {
  color: var(--surface);
  background: var(--navy);
}

.grid-menu-arrow {
  font-weight: 700;
  color: var(--gray-text);
}

/* Secondo livello: il pannello delle pezzature si apre A DESTRA della voce.
   Coordinate FISSE impostate dal controller grid-menu (dentro l'elenco scrollabile
   un absolute verrebbe tagliato dall'overflow); mostrato via :hover/:focus-within. */
.grid-menu-sub {
  display: none;
  position: fixed;
  z-index: 30;
  min-width: 10rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-3);
}

.grid-menu-branch:hover .grid-menu-sub,
.grid-menu-branch:focus-within .grid-menu-sub {
  display: block;
}

/* --- Tabella --- */

.grid-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Linee ORIZZONTALI marcate tra i giorni (feedback Mattias 2026-07-30: senza, le
   tre righe della cella si fondevano tra un giorno e l'altro). */
.grid-table th,
.grid-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 2px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

/* Zebra leggera sui giorni alterni: l'occhio segue la riga anche a colonne lontane. */
.grid-table tbody tr:nth-child(even) td:not([class*="cell-esito"]):not(.grid-week-current) {
  background: #f7fafc;
}

/* Ogni colonna e' una settimana: il bordo sinistro le separa a colpo d'occhio. */
.grid-table thead th:not(.grid-day-col),
.grid-table tbody td {
  border-left: 1px solid var(--border-soft);
}

.grid-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gray-text);
  border-bottom: 2px solid var(--border);
}

/* La settimana IN CORSO deve saltare all'occhio (feedback Mattias 2026-07-30):
   colonna incorniciata da bordi navy su tutta l'altezza + etichetta nell'header. */
.grid-table thead th.grid-week-current {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--navy);
}

.grid-table thead th.grid-week-current::after {
  content: "in corso";
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--surface);
  background: var(--navy);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  margin-top: 0.15rem;
  text-align: center;
}

.grid-table thead th.grid-week-current,
.grid-table tbody td.grid-week-current {
  border-left: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
}

.grid-table tbody tr:last-child td.grid-week-current {
  border-bottom: 2px solid var(--navy);
}

/* Colonna dei giorni (L..D) fissa a sinistra durante lo scroll orizzontale: la
   lettera del giorno + le micro-etichette prev./vend. allineate alle due righe
   di numeri delle celle (la legenda riga per riga, sempre sott'occhio). */
.grid-day-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  color: var(--ink);
}

tbody .grid-day-col {
  vertical-align: middle;
}

.grid-day-name {
  display: inline-block;
  min-width: 1.6rem;
  vertical-align: middle;
  font-size: 1.05rem;
  font-weight: 700;
}

.grid-line-labels {
  display: inline-flex;
  flex-direction: column;
  margin-left: 0.4rem;
  vertical-align: middle;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6rem;
  color: var(--gray-text);
}

.grid-cell {
  position: relative;
  min-width: 5rem;
}

/* La settimana corrente resta tinta lungo tutta la colonna (le celle con esito
   hanno la loro tinta, che vince: la colonna resta leggibile da header e bordo). */
.grid-week-current {
  background: var(--azure-soft);
}

.grid-week-year {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
}

/* Il giorno di OGGI: cornice navy dentro la cella. */
.grid-cell-today {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

/* Le due righe della cella: previsto sopra (pieno = fogli buyer, navy = decisione
   salvata, corsivo = motore), venduto reale sotto. Altezze fisse: le righe della
   tabella restano allineate anche con celle vuote. */
.grid-planned {
  display: block;
  font-weight: 700;
  line-height: 1.35rem;
  color: var(--ink);
}

.grid-planned.source-decision {
  color: var(--navy);
}

/* Previsto firmato dal MODELLO (dove il buyer ha smesso di compilare, e nel
   futuro senza decisione): corsivo blu-grigio, distinto dalla parola umana. */
.grid-planned.source-engine {
  font-style: italic;
  font-weight: 600;
  color: #5b6b8c;
}

.grid-legend-engine {
  font-weight: 700;
  color: #5b6b8c;
}

/* Righina interna sopra il venduto: le tre righe della cella (prev./stima/vend.)
   si leggono come righe di un foglio, allineate su tutta la larghezza. */
.grid-sold {
  display: block;
  min-height: 1.45rem;
  margin-top: 0.15rem;
  padding-top: 0.1rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  line-height: 1.35rem;
  color: var(--gray-text);
}

/* Nel PASSATO la gerarchia si INVERTE (feedback Mattias 2026-07-30): il numero che
   conta e' il VENDUTO VERO — grande e pieno — mentre la stima di allora si attenua
   (resta leggibile per il confronto, ma non ruba la scena alla realta'). */
.grid-cell-past .grid-planned {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-text);
}

.grid-cell-past .grid-sold {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

/* La riga "stima" della cella: la previsione PERSONALE del buyer. Nei giorni futuri
   e' un input (compilata = navy, comanda sugli ordini); nel passato resta visibile
   in sola lettura. Altezza fissa come le altre righe: la griglia non balla. */
.grid-estimate-input {
  display: block;
  width: 100%;
  height: 1.45rem;
  margin-top: 0.15rem;
  padding: 0 0.25rem;
  border: 1px dashed #9fb2d6;
  border-radius: 4px;
  background: var(--surface);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: right;
  color: var(--navy);
}

.grid-estimate-past {
  display: block;
  min-height: 1.45rem;
  margin-top: 0.15rem;
  padding-top: 0.1rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35rem;
  color: var(--navy);
  opacity: 0.75;
}

.grid-estimate-input:hover {
  border-color: var(--navy);
  background: var(--surface);
}

.grid-estimate-input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 0;
  background: var(--surface);
}

.grid-estimate-input.is-overridden {
  color: var(--navy);
}

.grid-estimate-hint {
  margin-top: 0.75rem;
}

/* Gli articoli DENTRO il cluster (codice + nome), sotto l'intestazione: i numeri
   aggregati della griglia non sono una scatola nera. */
.grid-members {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--gray-text);
}

.grid-member {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.8rem;
}

.grid-estimate-status {
  font-weight: 600;
  color: var(--navy);
}

/* Esito del giorno = tinta dell'intera cella, come l'evidenziatore sul foglio. */
.cell-esito-a {
  background: #eef8f1;
}

.cell-esito-r {
  background: #fdf0ea;
}

/* Rottura DEDOTTA dai dati (InferredRuptures), non scritta dal buyer: tratteggio. */
.cell-esito-inferred {
  outline: 1px dashed #b3402a;
  outline-offset: -3px;
}

/* La lettera a/r del buyer, piccola nell'angolo in alto a sinistra (i numeri sono
   allineati a destra: lo spazio libero e' li'). */
.grid-outcome {
  position: absolute;
  top: 0.22rem;
  left: 0.28rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: lowercase;
}

.grid-outcome-a {
  color: #2e7d4f;
}

.grid-outcome-r {
  color: #b3402a;
}

.grid-outcome-inferred {
  border-bottom: 1px dashed #b3402a;
}

/* Segnale stima vs venduto sulle celle passate: venduto OLTRE il previsto (stima
   bassa) / SOTTO il previsto (stima alta), oltre il +-10%. */
.grid-delta {
  font-size: 0.6rem;
  margin-right: 0.1rem;
  vertical-align: 0.05rem;
}

.grid-delta-up {
  color: #2e7d4f;
}

.grid-delta-down {
  color: #c2410c;
}

/* --- Legenda --- */

.grid-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--gray-text);
}

.grid-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.grid-swatch {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 4px;
}

.grid-swatch-a {
  background: #eef8f1;
  border: 1px solid #b9dfc6;
}

.grid-swatch-r {
  background: #fdf0ea;
  border: 1px solid #e8b4a0;
}

.grid-swatch-inferred {
  background: #fdf0ea;
  border: 1px dashed #b3402a;
}

/* ============================================================================
   LANDING dell'Excel previsionale (ciclo UX buyer, 2026-08-08): la porta
   principale e' la ricerca per ARTICOLO — chi conosce il pesce ma non il suo
   cluster non deve indovinare da una select — e sotto le card di tutti i fogli.
   ========================================================================== */

.grid-landing {
  margin-top: 1.25rem;
}

/* I due campi impilati della landing: sopra l'articolo (naviga), sotto il filtro. */
.grid-search-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.grid-jump-toolbar.is-full {
  min-width: 0;
  width: 100%;
}

/* ---- L'elenco dei fogli a righe piene, come la lista dei giri (Mattias 2026-08-08:
   via il tastone centrale e le card quadrate — una riga sotto l'altra) ---- */

.grid-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.grid-sheet-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy-bright);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.grid-sheet-row:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.grid-sheet-row.is-fermo {
  border-left-color: var(--border);
  opacity: 0.75;
}

/* Il foglio per PEZZATURA e' un'altra cosa e si deve vedere: pannello azzurrato,
   nessun cursore-link sulla riga, la scelta sta nei bottoni. */
.grid-sheet-row.is-split {
  background: #f4fafd;
  border-left-color: var(--azure);
  cursor: default;
}

.grid-sheet-row.is-split:hover {
  box-shadow: var(--shadow-1);
  transform: none;
}

.grid-sheet-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.grid-sheet-name {
  font-weight: 700;
  font-size: 1.02rem;
}

/* Gli articoli dentro il foglio unico: TESTO, non pillole — le pillole sembrano
   bottoni e qui non c'e' niente da scegliere. */
.grid-sheet-contains {
  color: var(--gray-text);
  font-size: 0.82rem;
}

.grid-sheet-choose {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
}

.grid-sheet-sheets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.grid-sheet-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 8.5rem;
}

.grid-sheet-kg {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.grid-sheet-meta-label {
  font-size: 0.75rem;
  color: var(--gray-text);
}

/* La freccia del foglio unico: la riga intera e' il bottone, e lo dice. */
.grid-sheet-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--azure-soft);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 700;
  flex: none;
}

.grid-sheet-row:hover .grid-sheet-open {
  background: var(--corallo);
  color: #fff;
}

.grid-sheet-row[hidden] {
  display: none;
}

/* La riga di un cluster DEL BUYER: il link resta tutta la riga, la ✕ di
   cancellazione e' un form fratello (dentro il link sarebbe HTML invalido)
   posizionato sul bordo destro. Il filtro nasconde il CONTENITORE. */
.grid-sheet-wrap {
  position: relative;
}

.grid-sheet-wrap[hidden] {
  display: none;
}

.grid-sheet-row.has-cancella {
  padding-right: 3.4rem;
}

.grid-sheet-cancella-form {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
}

.grid-sheet-cancella {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid #f5c6c6;
  background: #fff;
  color: #b3261e;
  font-size: 0.95rem;
  cursor: pointer;
}

.grid-sheet-cancella:hover {
  background: #fdf2f2;
}

/* Dal foglio del singolo articolo si sale al cluster intero. */
.grid-whole-cluster {
  margin-left: 0.6rem;
  color: var(--navy-bright);
  font-weight: 600;
  text-decoration: none;
}

.grid-whole-cluster:hover {
  text-decoration: underline;
}

/* La testata del foglio: "Giri d'ordine" (modal) e, sui cluster del buyer, il
   tasto "Cancella cluster" — in vista, non sepolto nel modal. */
.grid-giri-manage {
  margin: 0.5rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.grid-giri-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  padding: 0.4rem 0.85rem;
}

.grid-cancella-form {
  display: inline-flex;
}

.grid-cancella-cluster {
  border: 1px solid #f5c6c6;
  border-radius: 0.5rem;
  background: #fff;
  color: #b3261e;
  cursor: pointer;
}

.grid-cancella-cluster:hover {
  background: #fdf2f2;
}

/* ---- La card del grafico previsto/venduto ---- */

.grid-chart-card {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.grid-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.grid-chart-title {
  margin: 0;
  font-weight: 700;
}

.grid-chart-hint {
  margin: 0.1rem 0 0;
  color: var(--gray-text);
  font-size: 0.8rem;
}

.grid-chart-range {
  display: flex;
  gap: 0.5rem;
}

/* Piu' aria: il grafico e' lo strumento principale della pagina, non un riquadro
   (Mattias 2026-08-09) — e il margine alto fa spazio ai nomi delle feste sfalsati. */
.grid-chart {
  height: 470px;
}

.grid-chart-stato {
  margin: 0 0 0.5rem;
  color: var(--danger);
  font-size: 0.85rem;
}

/* Le pezzature sono BOTTONI veri: bordo navy, fondo bianco, freccia — si capisce che
   si clicca li', non sulla riga. */
.grid-card-sheet {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--navy-bright);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}

.grid-card-sheet:hover {
  background: var(--corallo);
  border-color: var(--corallo);
  color: #fff;
}

/* ---- I membri del cluster coi loro numeri, nella testata della griglia ---- */

.grid-members-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.grid-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
}

/* Il pallino dice se l'articolo e' VIVO: verde = vende o ha magazzino, spento = fermo. */
.grid-member-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--semaforo-verde);
}

.grid-member-chip.is-fermo {
  opacity: 0.65;
}

.grid-member-chip.is-fermo .grid-member-dot {
  background: var(--gray-logo);
}

.grid-member-kg {
  color: var(--gray-text);
  font-variant-numeric: tabular-nums;
}

/* ---- Il cruscotto della griglia (riusa le tile della proposta) ---- */

.grid-kpis {
  margin: 1rem 0;
}

/* ---- Il piede della griglia: lo scostamento di ogni settimana conclusa ---- */

.grid-week-foot {
  padding: 0.35rem 0.4rem;
  text-align: center;
  border-top: 2px solid var(--border);
}

.grid-week-delta {
  display: inline-block;
  min-width: 3.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grid-week-delta.is-ok {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.grid-week-delta.is-warn {
  background: #fdf0e3;
  color: var(--semaforo-arancio);
}

.grid-week-delta.is-bad {
  background: #fdeceb;
  color: var(--danger);
}

.grid-week-delta.is-na {
  color: var(--gray-logo);
}

/* Il venduto cliccabile resta un numero, non un bottone: sottolineatura al volo. */
.grid-sold-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--gray-logo);
}

.grid-sold-link:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* ---- La ripartizione per articolo nel modal del venduto aggregato ---- */

.vendite-membri {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vendite-membri-hint {
  margin: 0.5rem 0;
  color: var(--gray-text);
  font-size: 0.85rem;
}

.vendite-membro {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}

.vendite-membro:hover {
  background: var(--azure-soft);
  border-color: var(--border);
}

.vendite-membro-nome {
  flex: 1;
  font-weight: 600;
}

.vendite-membro-kg {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.vendite-membro-quota {
  min-width: 3rem;
  text-align: right;
  color: var(--gray-text);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

/* Il salto per articolo: un campo VERO alla pari del filtro — stessa pillola con
   bordo e ombra, il badge navy dentro dice cosa fa. Ne' il tastone blu centrale
   della prima versione, ne' il campo invisibile della seconda (Mattias 2026-08-08). */
.grid-jump-toolbar {
  min-width: 360px;
}

.grid-jump-toolbar .picker {
  position: relative;
  display: flex;
  /* Il picker base e' a colonna (etichetta sopra il campo): qui e' una pillola e
     badge + campo stanno sulla STESSA riga — impilati facevano il gradino storto
     visto in pagina (2026-08-08). */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.15rem 1rem 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.grid-jump-toolbar .picker:focus-within {
  outline: 2px solid var(--navy-bright);
  outline-offset: -1px;
}

.grid-jump-toolbar .picker-label {
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--corallo);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.grid-jump-toolbar .picker-input {
  flex: 1;
  padding: 0.6rem 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
}

.grid-jump-toolbar .picker-input:focus {
  outline: none;
}

/* Lo spinner del picker-pillola sta al centro verticale, non in basso come nel
   picker a colonna. E mentre naviga verso il foglio, la pillola si spegne: la
   selezione ha risposto, sta solo arrivando la pagina. */
.grid-jump-toolbar .picker.is-searching::after {
  bottom: auto;
  top: 50%;
  margin-top: -7px;
  right: 1rem;
}

.grid-jump-toolbar.is-navigating .picker {
  opacity: 0.7;
}

.grid-jump-toolbar.is-navigating .picker-label {
  background: var(--semaforo-verde);
}

/* La lente del filtro della landing e' gia' corallo via .proposal-search .icon
   (proposal.css): qui non si ridefinisce niente — una fonte sola per accento. */

/* Nel picker-pillola la ✕ sta al centro verticale, come lo spinner. */
.grid-jump-toolbar .picker-clear {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  right: 0.7rem;
}

.grid-jump-toolbar .picker.is-searching::after {
  right: 2.6rem;
}

/* Il filtro e il "Nuovo cluster" sulla stessa riga della landing. */
.grid-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.grid-search-row .proposal-search {
  flex: 1;
}

/* Il tag dei cluster CREATI DAL BUYER (non dagli YAML del calendario): in corallo,
   il colore delle cose sue — la variante "solo analisi" resta grigia. */
.grid-sheet-custom {
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--corallo);
  border-radius: 999px;
  background: var(--corallo-soft);
  color: var(--corallo-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Variante del tag per i cluster SOLO ANALISI (niente giri d'ordine). */
.grid-sheet-custom.is-analisi {
  border-color: var(--border);
  color: var(--gray-text);
  background: var(--bg);
}

/* ---- La striscia KPI delle righe della landing: TESSERE TINTE, una per numero.
   Quattro numeri grigi in fila erano un muro monotono (Mattias 2026-08-09): il
   colore dice la famiglia del dato prima ancora di leggerlo — azzurro vendite,
   verde magazzino, rosso rotture (spento a zero), ambra il prossimo giro. ---- */

.grid-sheet-kpis {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex: none;
}

.grid-sheet-kpi {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 8.2rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-small);
}

.kpi-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
}

.kpi-icona .icon {
  width: 1rem;
  height: 1rem;
}

.kpi-numeri {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1;
}

.grid-sheet-kpi strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-label {
  font-size: 0.72rem;
  color: var(--gray-text);
  white-space: nowrap;
}

.grid-sheet-kpi.is-vendite {
  background: var(--azure-soft);
}

.grid-sheet-kpi.is-vendite .kpi-icona {
  color: var(--navy);
}

.grid-sheet-kpi.is-vendite strong {
  color: var(--navy);
}

.grid-sheet-kpi.is-stock {
  background: #e5f3e9;
}

.grid-sheet-kpi.is-stock .kpi-icona,
.grid-sheet-kpi.is-stock strong {
  color: var(--semaforo-verde);
}

/* Rotture: spenta a zero, accesa rossa appena esiste — e' un allarme, non un dato. */
.grid-sheet-kpi.is-rotture {
  background: var(--bg);
}

.grid-sheet-kpi.is-rotture .kpi-icona {
  color: var(--gray-logo);
}

.grid-sheet-kpi.is-rotture.has-rotture {
  background: #fdeceb;
}

.grid-sheet-kpi.is-rotture.has-rotture .kpi-icona,
.grid-sheet-kpi.is-rotture.has-rotture strong {
  color: var(--danger);
}

.grid-sheet-kpi.is-giro {
  background: #fdf0e3;
}

.grid-sheet-kpi.is-giro .kpi-icona,
.grid-sheet-kpi.is-giro strong {
  color: var(--semaforo-arancio);
}

/* Il trend delle vendite: su verde, giu' rosso, accanto ai kg. */
.grid-kpi-trend {
  margin-left: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
}

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

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

/* ---- Il velo di Oracle: copre la pagina mentre un foglio si costruisce ---- */

.oracle-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 50, 126, 0.28);
  backdrop-filter: blur(3px);
}

.oracle-loading[hidden] {
  display: none;
}

.oracle-loading-box {
  min-width: 320px;
  padding: 2rem 2.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}

/* La sfera di Oracle sopra il grafico mentre i dati arrivano dalla sua fetch. */
.grid-chart-wrap {
  position: relative;
}

.grid-chart-attesa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
}

.grid-chart-attesa[hidden] {
  display: none;
}

/* ---- Le tessere KPI della griglia, tinte come le due linee del grafico: blu il
   venduto, ambra il previsto — la coerenza fa da legenda. I due giudizi (scarto,
   centrato) si tingono da soli con is-fatti/is-alert. ---- */

.grid-kpis .proposal-stat {
  border-left: none;
}

.grid-kpis .proposal-stat.is-kpi-venduto {
  background: var(--azure-soft);
  border-color: transparent;
}

.grid-kpis .proposal-stat.is-kpi-venduto .proposal-stat-value {
  color: #3547ab;
}

.grid-kpis .proposal-stat.is-kpi-previsto {
  background: #fdf0e3;
  border-color: transparent;
}

.grid-kpis .proposal-stat.is-kpi-previsto .proposal-stat-value {
  color: #b45309;
}

.grid-kpis .proposal-stat.is-fatti {
  background: #e5f3e9;
  border-color: transparent;
}

.grid-kpis .proposal-stat.is-fatti .proposal-stat-value {
  color: var(--semaforo-verde);
}

.grid-kpis .proposal-stat.is-alert {
  border-color: transparent;
}

.grid-kpis .proposal-stat.is-alert .proposal-stat-value {
  color: var(--danger);
}

/* La finestra settimane sopra la tabella a cui appartiene. */
.grid-weeks-nav {
  margin: 0 0 0.5rem;
}

/* I preset dell'orizzonte delle stime: pillole in fila, l'attivo pieno navy. */
.grid-chart-presets {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}

.grid-chart-preset {
  padding: 0.3rem 0.7rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-text);
  cursor: pointer;
  white-space: nowrap;
}

.grid-chart-preset:hover {
  color: var(--navy);
}

.grid-chart-preset.is-active {
  background: var(--navy);
  color: #fff;
}

/* I due gruppi di preset del grafico, ognuno con la sua etichetta in corallo. */
.grid-chart-range {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.grid-chart-rangegroup {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.grid-chart-rangelabel {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corallo-dark);
}