/* Aggiunte della demo sopra lo stile della dashboard vera (stile.css e' una copia). */

.utente { font-size: 11px; letter-spacing: .04em; }
.errore-box {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px;
  color: oklch(0.90 0.06 25); background: oklch(0.68 0.19 25 / .14); border: 1px solid oklch(0.68 0.19 25 / .5);
}

/* ---------- sezione demo ---------- */

.demo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 18px;
  margin: 10px 44px 0 108px; padding: 28px 0 90px; border-top: 1px solid var(--bordo);
}

/* pulisce la dashboard in un clic, fra un cliente e l'altro */
.azzera {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro); background: transparent; border: 1px solid oklch(0.84 0.12 85 / .55);
  border-radius: 9px; padding: 7px 12px; cursor: pointer; transition: background .15s, border-color .15s;
}
.azzera:hover { background: oklch(0.84 0.12 85 / .12); border-color: var(--oro); }

/* ---------- percorso dell'ordine: cinque fasi collegate ---------- */

.percorso-pannello {
  position: relative; overflow: hidden; margin-bottom: 26px;
  padding: 26px 34px 30px; border: 1px solid var(--bordo); border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, oklch(0.84 0.12 85 / .07), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, oklch(0.82 0.16 155 / .05), transparent 60%),
    var(--pannello);
}
.percorso-testata { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.percorso-dettaglio { margin: 0; font-size: 12px; color: oklch(0.72 0.02 265); }

.flusso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fase { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-right: 18px; }
.fase-testa { display: flex; align-items: center; margin-bottom: 14px; }
.fase-nodo {
  position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  color: oklch(0.60 0.02 265); background: oklch(0.21 0.02 265); border: 1px solid oklch(0.34 0.02 265);
  transition: background .4s, color .4s, box-shadow .4s, border-color .4s;
}
.fase-nodo svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.fase-linea { position: relative; flex: 1; height: 3px; margin: 0 12px; border-radius: 3px; background: oklch(0.30 0.02 265); overflow: hidden; }
.fase-linea::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--verde), oklch(0.82 0.16 155 / .55)); transition: transform .7s ease;
}
.fase-linea.piena::after { transform: scaleX(1); }
.fase-linea.verso-errore::after { background: linear-gradient(90deg, var(--verde), var(--rosso)); }
.fase-linea.verso-controllo::after { background: linear-gradient(90deg, var(--verde), oklch(0.78 0.15 60)); }
.fase-linea.scorre::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; z-index: 1;
  background: linear-gradient(90deg, transparent, oklch(0.95 0.08 90), transparent); animation: scorre 1.1s linear infinite;
}

.fase-numero { font-size: 10.5px; letter-spacing: .16em; color: oklch(0.55 0.02 265); }
.fase-nome { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: oklch(0.70 0.015 265); }
.fase-sotto { font-size: 11.5px; line-height: 1.4; color: oklch(0.60 0.02 265); min-height: 1.4em; }

.fase.fatto .fase-nodo {
  color: oklch(0.20 0.04 155); border-color: transparent;
  background: radial-gradient(circle at 35% 30%, oklch(0.90 0.13 155), oklch(0.64 0.15 155));
  box-shadow: 0 0 0 6px oklch(0.82 0.16 155 / .12), 0 0 26px oklch(0.82 0.16 155 / .45);
}
.fase.fatto .fase-nome { color: var(--testo); }
.fase.fatto .fase-sotto { color: oklch(0.80 0.08 155); }

.fase.attivo .fase-nodo {
  color: var(--oro); border-color: oklch(0.84 0.12 85 / .6); background: oklch(0.84 0.12 85 / .12);
  animation: respiro 1.6s ease-out infinite;
}
.fase.attivo .fase-nodo::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--oro); border-right-color: oklch(0.84 0.12 85 / .35);
  animation: gira .9s linear infinite;
}
.fase.attivo .fase-nome { color: var(--testo); }
.fase.attivo .fase-sotto { color: var(--oro); }

.fase.errore .fase-nodo {
  color: oklch(0.98 0.01 25); border-color: transparent;
  background: radial-gradient(circle at 35% 30%, oklch(0.78 0.17 25), oklch(0.55 0.20 25));
  box-shadow: 0 0 0 6px oklch(0.68 0.19 25 / .14), 0 0 26px oklch(0.68 0.19 25 / .5);
}
.fase.errore .fase-nome, .fase.errore .fase-sotto { color: var(--rosso); }

.fase.controllo .fase-nodo {
  color: oklch(0.22 0.05 60); border-color: transparent;
  background: radial-gradient(circle at 35% 30%, oklch(0.90 0.13 75), oklch(0.68 0.15 55));
  box-shadow: 0 0 0 6px oklch(0.78 0.15 60 / .14), 0 0 26px oklch(0.78 0.15 60 / .5);
}
.fase.controllo .fase-nome, .fase.controllo .fase-sotto { color: oklch(0.82 0.13 65); }

@keyframes scorre { to { left: 100%; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes respiro {
  0% { box-shadow: 0 0 0 0 oklch(0.84 0.12 85 / .4); }
  100% { box-shadow: 0 0 0 16px oklch(0.84 0.12 85 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fase-linea.scorre::before, .fase.attivo .fase-nodo, .fase.attivo .fase-nodo::before { animation: none; }
}

/* ---------- ordini e foglio ---------- */

/* ordini sopra, foglio sotto: tutti e due a tutta larghezza */
.demo-griglia { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
#ordini { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 28px; }

.riquadro {
  display: flex; flex-direction: column; padding: 18px 22px 8px;
  border: 1px solid var(--bordo); border-radius: 18px; background: var(--pannello);
}
.riquadro-testata { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.ordine { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--bordo-2); animation: riseIn .25s ease-out; }
.ordine-testa { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; }
.ordine-nome { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; min-width: 0; }
.ordine-nome span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordine-numero { font-size: 11.5px; font-weight: 500; color: oklch(0.62 0.02 265); }
.ordine-totale { font-size: 13.5px; }
.ordine-sotto { font-size: 11px; color: oklch(0.62 0.02 265); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge-stato {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.badge-stato.ok { color: var(--verde); }
.badge-stato.controllare { color: var(--rosso); }
.badge-stato.lettura { color: var(--oro); }
.badge-stato.importato { color: oklch(0.66 0.02 265); }

.correzioni { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.correzione {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  border: 1px solid oklch(0.68 0.19 25 / .45); border-radius: 12px; background: oklch(0.68 0.19 25 / .07);
}
.correzione-motivo { font-size: 13px; line-height: 1.45; color: oklch(0.86 0.07 25); }
.correzione-campi { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.correzione-campi label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 10px;
                          letter-spacing: .08em; text-transform: uppercase; color: oklch(0.68 0.02 265); }
.correzione-campi input {
  font-family: inherit; font-size: 14px; color: var(--testo); background: oklch(1 0 0 / .05);
  border: 1px solid oklch(0.36 0.03 265); border-radius: 10px; padding: 8px 10px; outline: none; min-width: 0;
}
.correzione-campi input[type="text"] { flex: 1; min-width: 160px; }
.correzione-campi input[type="number"] { width: 92px; }
.correzione-campi input:focus { border-color: var(--oro); }
.correzione-campi .secondario { padding: 9px 14px; font-size: 13px; border-radius: 10px; }

/* il foglio: chiaro come un vero Excel, dentro la pagina scura */
.foglio {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid oklch(0.40 0.03 265); border-radius: 14px; background: oklch(0.99 0 0);
  box-shadow: 0 24px 60px oklch(0.06 0.02 265 / .45); color: oklch(0.22 0.01 265);
}
.foglio-barra {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: oklch(0.47 0.11 150); color: oklch(0.98 0.01 150);
}
.foglio-icona {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px;
  background: oklch(0.98 0.01 150); color: oklch(0.47 0.11 150); font: 700 12px/1 var(--sans);
}
.foglio-nome { font-size: 13px; font-weight: 600; }
.foglio-stato { margin-left: auto; font-family: var(--mono); font-size: 11px; opacity: .85; }

.foglio-scorri { overflow-x: auto; max-height: 520px; overflow-y: auto; }
.foglio-tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.foglio-tabella th, .foglio-tabella td {
  border: 1px solid oklch(0.89 0.005 265); padding: 7px 10px; text-align: left; white-space: nowrap;
}
.foglio-tabella thead th { position: sticky; background: oklch(0.95 0.005 265); font-weight: 500; }
.foglio-tabella .lettere th { top: 0; z-index: 2; text-align: center; font-size: 11px; color: oklch(0.50 0.01 265); padding: 4px 10px; }
.foglio-tabella .intestazioni th { top: 25px; z-index: 2; font-weight: 700; background: oklch(0.93 0.04 90); }
.foglio-tabella .intestazioni th:first-child,
.foglio-tabella td.num-riga, .foglio-tabella tfoot td:first-child {
  width: 36px; text-align: center; font-size: 11px; font-weight: 400; color: oklch(0.50 0.01 265);
  background: oklch(0.95 0.005 265);
}
.foglio-tabella td.num { text-align: right; font-variant-numeric: tabular-nums; }
.foglio-tabella td.cella-ivato { font-weight: 700; }
/* riga di totale sotto ogni ordine */
.riga-totale-ordine td {
  background: oklch(0.955 0.025 150); border-bottom: 2px solid oklch(0.62 0.08 150);
}
.riga-totale-ordine td.num-riga { background: oklch(0.95 0.005 265); }
.riga-totale-ordine td.cella-ivato { font-size: 14px; color: oklch(0.30 0.08 150); }
.foglio-tabella td.totale-dettaglio { white-space: normal; font-weight: 600; color: oklch(0.32 0.03 150); }
.foglio-tabella td.totale-etichetta { font-size: 11px; font-weight: 500; color: oklch(0.45 0.04 150); }
/* omaggio: casella prezzo vuota e sbarrata */
.foglio-tabella td.cella-omaggio {
  background-image: linear-gradient(to top right, transparent calc(50% - .5px), oklch(0.75 0.01 265) 50%, transparent calc(50% + .5px));
}
.foglio-tabella td.stato { font-size: 12px; font-weight: 600; white-space: normal; min-width: 150px; }
.stato-ok { color: oklch(0.50 0.13 150); }
.stato-errore { color: oklch(0.52 0.19 25); }
.stato-lettura { color: oklch(0.55 0.02 265); font-style: italic; font-weight: 400 !important; }
.stato-importato { color: oklch(0.50 0.01 265); }
.riga-errore td:not(.num-riga) { background: oklch(0.96 0.03 25); }
.riga-lettura td:not(.num-riga):not(.stato) { color: oklch(0.52 0.01 265); }
.cella-errore { color: oklch(0.52 0.19 25); font-weight: 600; }
.foglio-vuoto td { padding: 40px 16px; text-align: center; color: oklch(0.55 0.01 265); white-space: normal; }
.foglio-tabella tfoot td { font-weight: 700; background: oklch(0.97 0.005 265); }

/* ---------- ordine bloccato per fatture scadute ---------- */

.badge-stato.bloccato { color: oklch(0.78 0.15 60); }
.correzione.blocco { border-color: oklch(0.78 0.15 60 / .55); background: oklch(0.78 0.15 60 / .08); }
.correzione.blocco .correzione-motivo { color: oklch(0.90 0.07 70); }
.correzione.blocco .primario { align-self: flex-start; padding: 9px 14px; font-size: 13px; border-radius: 10px; }
.riga-bloccata td:not(.num-riga) { background: oklch(0.97 0.035 75); }
.stato-bloccato { color: oklch(0.52 0.14 55); }

/* il foglio si corregge dentro le celle, come in Excel */
.foglio-tabella td.modificabile { cursor: cell; }
.foglio-tabella td.modificabile:hover { box-shadow: inset 0 0 0 1px oklch(0.47 0.11 150 / .5); }
.foglio-tabella td.modificabile:focus {
  outline: 2px solid oklch(0.47 0.11 150); outline-offset: -2px; cursor: text;
  background: oklch(1 0 0); color: oklch(0.22 0.01 265); font-weight: 400;
}
.riquadro-testata { flex-wrap: wrap; }
.riquadro-azioni { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.riquadro-azioni button { white-space: nowrap; }
/* il nome del cliente va a capo invece di tagliarsi accanto all'etichetta */
.ordine-nome span:last-child { white-space: normal; overflow: visible; }
.suggerimento {
  margin-top: 4px; padding: 10px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.5;
  color: oklch(0.86 0.07 25); border: 1px dashed oklch(0.68 0.19 25 / .55); background: oklch(0.68 0.19 25 / .06);
}

/* tre caselle: ordini, in errore, da controllare */
.metriche { grid-template-columns: repeat(3, 1fr); }
.metriche .scheda { padding: 18px 16px; }

@keyframes cella {
  0%   { opacity: 0; background-color: oklch(0.92 0.09 90); }
  35%  { opacity: 1; background-color: oklch(0.92 0.09 90); }
  100% { opacity: 1; }
}
.nuova td:not(.num-riga) { animation: cella 1.1s ease-out both; }

@media (max-width: 1080px) {
  .demo { margin: 10px 24px 0; padding-bottom: 120px; }
  .demo-griglia { grid-template-columns: 1fr; }
  .percorso-pannello { padding: 22px 20px 24px; overflow-x: auto; }
  .flusso { min-width: 860px; }
}