/* ===========================================================================
   Programma industriale AFEA — foglio di stile
   Usa i token di colore già definiti in style.css: stesso tema chiaro e scuro,
   stessi componenti. Qui ci sono solo i pezzi che servono a questo programma:
   riquadri dei numeri, barre di giacenza, righe di pesata, albero della
   tracciabilità e il foglio di stampa della scheda di lavorazione.
   =========================================================================== */

/* ------------------------------- schede -------------------------------- */

.ind-schede {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .3rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 3.4rem;
  z-index: 5;
}

.btn.ind-scheda {
  border: none;
  background: none;
  color: var(--muted);
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: 9px;
}
.btn.ind-scheda:hover { background: var(--surface-2); color: var(--text); }
.btn.ind-scheda.attiva { background: var(--accent); color: #fff; }

/* Il punto interrogativo dell'aiuto: sempre in fondo alla barra, sempre lì. */
.btn.ind-aiuto {
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
  width: 2rem;
  padding: .5rem 0;
  border-radius: 50%;
}
.btn.ind-aiuto:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* -------------------------------- utenti ------------------------------- */

/* Le sezioni di un'utenza: tante parole corte, che devono restare leggibili. */
.ind-sezioni { display: flex; flex-wrap: wrap; gap: .25rem; }
.ind-chip {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

/* Le caselle delle sezioni: due colonne, così si abbracciano con lo sguardo. */
.ind-caselle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .2rem 1rem;
  margin: .4rem 0;
}
.ind-caselle .check { align-items: flex-start; margin: .1rem 0; }
.ind-caselle .check p { margin: .1rem 0 0; }

/* -------------------------------- guida -------------------------------- */

.ind-guida-titolo {
  margin: 1.4rem 0 .6rem;
  font-size: 1.05rem;
}

.ind-guida-giro { margin: 0 0 1rem; padding-left: 1.2rem; }
.ind-guida-giro li { margin-bottom: .5rem; }

.ind-guida-passi { margin: .4rem 0 0; padding-left: 1.2rem; }
.ind-guida-passi li { margin-bottom: .35rem; }

.ind-guida-elenco > div { margin-bottom: .7rem; }
.ind-guida-elenco dt { font-weight: 700; }
.ind-guida-elenco dd { margin: .15rem 0 0; color: var(--muted); }

.ind-riservato {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ---------------------------- riquadri numeri --------------------------- */

.ind-riquadri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}
.ind-riquadri.piccoli { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.ind-riquadro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ind-riquadro .valore {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ind-riquadro .etichetta { color: var(--muted); font-size: .78rem; }
.ind-riquadro.allarme { border-left-color: var(--error); }
.ind-riquadro.allarme .valore { color: var(--error); }
.ind-riquadro.attenzione { border-left-color: var(--warning); }
.ind-riquadro.attenzione .valore { color: var(--warning); }

/* -------------------------------- avvisi -------------------------------- */

.ind-avvisi { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }

.ind-avviso {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .7rem;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  font-size: .9rem;
}
.ind-avviso.alta { border-left-color: var(--error); background: var(--error-soft); }
.ind-avviso.media { border-left-color: var(--warning); background: var(--warning-soft); }
.ind-avviso.bassa { border-left-color: var(--accent); }

/* ------------------------------- magazzino ------------------------------ */

.ind-giacenza { display: flex; flex-direction: column; gap: .25rem; min-width: 7rem; }
.ind-barra {
  display: block;
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.ind-barra-piena { display: block; height: 100%; background: var(--success); }
.ind-barra-piena.scarsa { background: var(--error); }

.ind-riga-articolo.sotto-scorta td:first-child { border-left: 3px solid var(--error); }
.ind-nota-riga { color: var(--warning); font-size: .78rem; }
.table tr.esaurito { opacity: .55; }
.ind-azioni-riga { display: flex; gap: .3rem; flex-wrap: wrap; }

/* -------------------------------- moduli -------------------------------- */

/* I filtri stanno nella testata della scheda: senza un freno, un campo di
   ricerca largo il 100 % spingerebbe il titolo su una riga tutta sua. */
.ind-corpo .head-actions input[type="search"] { width: 16rem; }
.ind-corpo .head-actions select { width: auto; min-width: 9rem; }
.ind-corpo .head-actions .check { margin: 0; align-items: center; }

.ind-campo { margin-bottom: .2rem; }
.ind-campo label { margin-top: .7rem; }
.ind-campo p { margin: .2rem 0 0; }

.ind-vuoto { padding: .8rem 0; }

/* Riquadro delle operazioni irreversibili: si deve vedere che è diverso. */
.card.ind-pericolo { border-color: var(--error); }
.card.ind-pericolo .inline { max-width: 32rem; }
.card.ind-pericolo .ind-conferma { text-transform: uppercase; }
.btn.pericolo {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  font-weight: 600;
}
.btn.pericolo:hover { filter: brightness(1.08); }
.ind-errore { color: var(--error); font-weight: 700; }
.ind-ok { color: var(--success); font-weight: 700; }
.ind-somma { align-self: center; font-variant-numeric: tabular-nums; }
.ind-fase { text-transform: uppercase; text-align: center; }
.ind-file-piccolo { max-width: 220px; }

.ind-dialogo {
  /* Il foglio di stile generale tiene i dialoghi stretti (480px): vanno bene
     per una domanda, non per un piano di pesata o per le righe di una bolla. */
  width: min(1040px, 94vw);
  max-width: min(1040px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 1.3rem;
}
.ind-dialogo::backdrop { background: rgba(15, 23, 42, .55); }
.ind-dialogo .card { box-shadow: none; }
.ind-dialogo .table { font-size: .85rem; }

.ind-righe-documento select { min-width: 12rem; }
.ind-righe-documento input { min-width: 6rem; }

.ind-previsione { margin-top: 1rem; }
.ind-riepilogo { font-weight: 600; }

.ind-inci { font-style: italic; line-height: 1.6; }
.ind-inci-etichetta {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  padding: .6rem .8rem;
  border-radius: 6px;
  font-style: normal;
}

/* Analisi dei prezzi: la riga dei totali chiude la tabella e va staccata. */
.ind-totali td {
  border-top: 2px solid var(--border);
  font-weight: 600;
  background: var(--surface-2);
}

/* Inventario: tabella lunga, campi stretti, gruppi per ubicazione. */
.ind-inventario { max-height: 65vh; overflow-y: auto; }
.ind-inventario .ind-contato { width: 7rem; text-align: right; }
.ind-inventario .ind-costo { width: 6.5rem; text-align: right; }
.ind-riga-gruppo td {
  background: var(--accent-soft);
  color: var(--accent);
  position: sticky;
  top: 0;
}
.ind-istruzioni { white-space: pre-wrap; }

/* -------------------------------- pesate -------------------------------- */

.ind-fase-titolo {
  margin: 1rem 0 .4rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .82rem;
}

.ind-pesate { display: grid; gap: .5rem; }

.ind-pesata {
  display: grid;
  grid-template-columns: 1.4fr auto 1.6fr auto;
  gap: .7rem;
  align-items: center;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.ind-pesata.fatta { border-left-color: var(--success); background: var(--success-soft); }
.ind-pesata-testa { display: flex; flex-direction: column; }
.ind-pesata-nome { font-weight: 700; }
.ind-pesata-peso { display: flex; flex-direction: column; align-items: flex-end; }
.ind-teorico {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ind-pesata-campi { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ind-pesata-campi .ind-peso-reale { width: 7rem; font-size: 1.1rem; text-align: right; }
.ind-pesata-campi select { min-width: 10rem; }
.ind-esito-pesata { font-variant-numeric: tabular-nums; min-width: 4rem; }
.ind-reale { font-size: 1.1rem; font-weight: 700; }
.ind-nota-processo { color: var(--warning); font-size: .8rem; font-style: italic; }

@media (max-width: 820px) {
  .ind-pesata { grid-template-columns: 1fr; }
  .ind-pesata-peso { align-items: flex-start; }
}

/* ----------------------------- verifica conf. --------------------------- */

.ind-verifica { margin-top: .8rem; }

/* ------------------------------- albero --------------------------------- */

.ind-albero h3 { margin-top: 1.2rem; }
.ind-ramo, .ind-ramo ul { list-style: none; margin: .3rem 0 0; padding-left: 1rem; }
.ind-ramo li { position: relative; padding: .25rem 0 .25rem .8rem; }
.ind-ramo li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-left: 2px solid var(--border);
}
.ind-nodo { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }

/* -------------------------- pastiglie di stato -------------------------- */

.pill.approvato, .pill.registrato, .pill.abbinata, .pill.fatturata,
.pill.finito { background: var(--success-soft); color: var(--success); }
.pill.quarantena, .pill.da_fatturare, .pill.differenza_prezzo,
.pill.differenza_quantita, .pill.carica_con_dubbio,
.pill.pianificata { background: var(--warning-soft); color: var(--warning); }
.pill.bloccato, .pill.annullato, .pill.solo_in_fattura { background: var(--error-soft); color: var(--error); }
.pill.esaurito, .pill.obsoleta { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.pill.ddt, .pill.bulk, .pill.approvata, .pill.valorizza,
.pill.magazzino, .pill.produzione, .pill.documenti { background: var(--accent-soft); color: var(--accent); }
.pill.fattura, .pill.materia_prima, .pill.confezionamento, .pill.carica {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.pill.vendita, .pill.registrata, .pill.cliente { background: var(--success-soft); color: var(--success); }
.pill.omaggio, .pill.campione, .pill.persona { background: var(--warning-soft); color: var(--warning); }
.pill.annullata { background: var(--error-soft); color: var(--error); }
.pill.rivenditore, .pill.interno { background: var(--accent-soft); color: var(--accent); }
.pill.riuscito, .pill.registrato { background: var(--success-soft); color: var(--success); }
.pill.da_correggere { background: var(--warning-soft); color: var(--warning); }
.pill.fallito, .pill.annullato { background: var(--error-soft); color: var(--error); }
.pill.da_valutare { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* Pezzi pronti alla vendita: è il numero che si guarda per primo. */
.ind-pezzi { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------- stampa --------------------------------- */

.ind-stampa { display: none; }

.ind-stampa-testata { border-collapse: collapse; margin-bottom: 1rem; }
.ind-stampa-testata th {
  text-align: left; padding: .2rem 1rem .2rem 0; color: #555; font-weight: 600;
}
.ind-stampa-tabella { width: 100%; border-collapse: collapse; font-size: 11pt; }
.ind-stampa-tabella th, .ind-stampa-tabella td {
  border: 1px solid #999; padding: .25rem .4rem; text-align: left;
}
.ind-firme { display: flex; gap: 3rem; margin-top: 2.5rem; }
.ind-firme .ind-riga-firma {
  display: block; width: 14rem; border-bottom: 1px solid #333; margin-top: 2rem;
}

@media print {
  /* Si stampa solo la scheda di lavorazione: il resto della pagina sparisce. */
  body > *:not(.ind-stampa) { display: none !important; }
  .ind-stampa {
    display: block;
    color: #000;
    background: #fff;
    font-size: 11pt;
  }
  .ind-stampa h1 { font-size: 16pt; }
  .ind-stampa h2 { font-size: 12pt; margin-top: 1.2rem; }
}