/* AIDEV-NOTE: dashboard di magazzino e bordo macchina (change pianificazione-dashboard-materiali, design D7): riquadri grandi,
   stato con colore e testo, leggibili da lontano per il futuro pannello fisso. Tutto sotto .dashboard-materiali; colori delle
   linee come Scaletta e Bordo macchina, colori di stato come Piano carichi. */

.dashboard-materiali {
    --linea-01: #1565c0;
    --linea-02: #616161;
    --linea-03: #2e7d32;
    --linea-04: #00838f;
    --linea-06: #ef6c00;
    --linea-07: #6d4c41;
    --linea-08: #6a1b9a;
    --linea-09: #ad1457;
    --rosso: #c62828;
    --rosso-chiaro: #ffebee;
    --arancio: #ef6c00;
    --arancio-chiaro: #fff3e0;
    --verde: #2e7d32;
    --verde-chiaro: #f1f8e9;
    --blu: #1565c0;
    font-size: 14px;
    max-width: 100%;
}

.dashboard-materiali .barra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 4px 4px 4px; }
.dashboard-materiali .barra .campo { display: flex; align-items: center; gap: 6px; color: #455a64; font-size: 13px; }
.dashboard-materiali .barra select { font-size: 13px; padding: 2px 4px; border: 1px solid #b0bec5; border-radius: 3px; background: #fff; }
.dashboard-materiali .fonti { display: flex; gap: 14px; color: #555; padding: 0 4px 8px 4px; flex-wrap: wrap; font-size: 12px; }
.dashboard-materiali .fonti .avviso { color: var(--rosso); font-weight: 600; }
.dashboard-materiali .fonti .automatico { color: #78909c; font-style: italic; }

/* Indicatori */
.dashboard-materiali .indicatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0 4px 12px 4px; }
.dashboard-materiali .indicatore { border: 1px solid #cfd8dc; border-left: 6px solid #90a4ae; border-radius: 6px; padding: 10px 12px; background: #fff; }
.dashboard-materiali .indicatore .titolo { color: #546e7a; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.dashboard-materiali .indicatore .valore { font-size: 32px; font-weight: 700; line-height: 1.15; color: #263238; }
.dashboard-materiali .indicatore .dettaglio { color: #546e7a; font-size: 13px; }
.dashboard-materiali .indicatore.rosso { border-left-color: var(--rosso); background: var(--rosso-chiaro); }
.dashboard-materiali .indicatore.rosso .valore { color: var(--rosso); }
.dashboard-materiali .indicatore.arancio { border-left-color: var(--arancio); background: var(--arancio-chiaro); }
.dashboard-materiali .indicatore.arancio .valore { color: #b34f00; }
.dashboard-materiali .indicatore.verde { border-left-color: var(--verde); }
.dashboard-materiali .indicatore.grigio .valore { color: #90a4ae; }

/* Magazzino: carichi di oggi e domani affiancati sopra la tabella, che usa tutta la larghezza */
.dashboard-materiali .carichi-giorni { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; margin: 0 4px 12px 4px; }
.dashboard-materiali .riquadro-carichi .carichi { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-materiali .scorri { overflow-x: auto; margin: 0 4px; }

.dashboard-materiali table { border-collapse: collapse; width: 100%; background: #fff; }
.dashboard-materiali th, .dashboard-materiali td { padding: 5px 6px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; }
.dashboard-materiali th { background: #eceff1; font-weight: 600; text-align: left; white-space: nowrap; font-size: 13px; }
.dashboard-materiali .num { text-align: right; white-space: nowrap; }
.dashboard-materiali td.materiale, .dashboard-materiali td.finisce { white-space: nowrap; }
.dashboard-materiali td.arrivo { font-size: 13px; white-space: nowrap; }
.dashboard-materiali td.arrivo .nota, .dashboard-materiali .carico-breve .nota { display: block; font-size: 11px; }
.dashboard-materiali td.materiale .nome { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
    margin-left: 6px; color: #546e7a; font-size: 12px; }
.dashboard-materiali td.silos { color: #607d8b; font-size: 12px; }
.dashboard-materiali .ritardo { color: var(--rosso); }
.dashboard-materiali .presto { color: var(--rosso); font-weight: 700; }

/* Stato con colore e testo */
.dashboard-materiali .stato { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dashboard-materiali .stato.critico { background: var(--rosso); color: #fff; }
.dashboard-materiali .stato.attenzione { background: var(--arancio); color: #fff; }
.dashboard-materiali .stato.regolare { background: #c8e6c9; color: #1b5e20; }
.dashboard-materiali .stato.senza-silo { background: #eceff1; color: #607d8b; font-weight: 600; }
.dashboard-materiali tr.critico td { background: var(--rosso-chiaro); }
.dashboard-materiali tr.attenzione td { background: var(--arancio-chiaro); }
.dashboard-materiali tr.senza-silo td { color: #78909c; }

.dashboard-materiali .giacenza .riempimento { height: 5px; background: #eceff1; border-radius: 3px; overflow: hidden; margin-top: 2px; min-width: 70px; }
.dashboard-materiali .giacenza .riempimento .pieno { height: 100%; background: #42a5f5; }

.dashboard-materiali .carico-breve { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 13px; white-space: nowrap; }
.dashboard-materiali .carico-breve.confermato { border: 2px solid var(--verde); background: var(--verde-chiaro); }
.dashboard-materiali .carico-breve.proposto { border: 2px dashed var(--blu); background: #f3f8fd; }

/* Carichi di oggi e domani */
.dashboard-materiali .riquadro-carichi { border: 1px solid #cfd8dc; border-radius: 6px; padding: 8px; background: #fff; }
.dashboard-materiali .riquadro-carichi .titolo { font-weight: 700; margin-bottom: 6px; }
.dashboard-materiali .carico { border-radius: 4px; padding: 4px 8px; min-width: 200px; }
.dashboard-materiali .carico.confermato { border: 2px solid var(--verde); background: var(--verde-chiaro); }
.dashboard-materiali .carico.proposto { border: 2px dashed var(--blu); background: #f3f8fd; }
.dashboard-materiali .carico.fatto { border: 2px solid #b0bec5; background: #f5f5f5; color: #78909c; }
.dashboard-materiali .carico .silos { color: #607d8b; font-size: 12px; }
.dashboard-materiali .carico .riga1 { display: flex; align-items: baseline; gap: 6px; }
.dashboard-materiali .carico .etichetta { margin-left: auto; padding-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #546e7a; }
.dashboard-materiali .carico.fatto .etichetta { color: var(--verde); }
.dashboard-materiali .nessuno { color: #9e9e9e; font-style: italic; padding: 2px 4px; }

/* Bordo macchina: riquadri delle linee */
.dashboard-materiali h2.sezione { font-size: 16px; font-weight: 700; color: #37474f; margin: 6px 4px 8px 4px; }
.dashboard-materiali .linee { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0 4px 16px 4px; }
.dashboard-materiali .linea { border: 1px solid #cfd8dc; border-top: 6px solid var(--colore-linea); border-radius: 6px; padding: 8px; background: #fff; }
.dashboard-materiali .linea .intestazione { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dashboard-materiali .linea .nome { font-size: 20px; font-weight: 700; color: var(--colore-linea); }
.dashboard-materiali .linea .ferma { background: var(--rosso); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.dashboard-materiali .op { border-left: 4px solid #cfd8dc; padding: 4px 8px; margin-bottom: 6px; }
.dashboard-materiali .op.in-corso { border-left-color: var(--colore-linea); background: #fafafa; }
.dashboard-materiali .op.imminente { border-left-color: var(--arancio); background: var(--arancio-chiaro); }
.dashboard-materiali .op .quando { color: #455a64; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dashboard-materiali .op .etichetta { background: var(--arancio); color: #fff; border-radius: 10px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.dashboard-materiali .op .numero { font-size: 14px; }
.dashboard-materiali .op .senza-formula { color: var(--rosso); font-weight: 600; }

/* Bordo macchina: un materiale per riga nei gruppi bordo macchina, mescolatori (blu) e big bag (arancio), sempre con l'etichetta
   (change pianificazione-dashboard-schermo, D9) */
.dashboard-materiali .op .gruppo { margin-top: 4px; padding: 1px 0 1px 6px; border-left: 3px solid #b0bec5; }
.dashboard-materiali .op .titolo-gruppo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #546e7a; }
.dashboard-materiali .op .gruppo-bm { border-left-color: var(--colore-linea); }
.dashboard-materiali .op .gruppo-bm .titolo-gruppo { color: var(--colore-linea); }
.dashboard-materiali .op .gruppo-mescolatori { border-left-color: var(--blu); background: #f3f8fd; }
.dashboard-materiali .op .gruppo-mescolatori .titolo-gruppo { color: var(--blu); }
.dashboard-materiali .op .gruppo-bigbag { border-left-color: var(--arancio); background: var(--arancio-chiaro); }
.dashboard-materiali .op .gruppo-bigbag .titolo-gruppo { color: #b34f00; }
.dashboard-materiali .op .materiale { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.dashboard-materiali .op .materiale .descrizione { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #546e7a; font-size: 13px; }
.dashboard-materiali .op .materiale .kg { margin-left: auto; white-space: nowrap; font-weight: 600; }
.dashboard-materiali .gruppo-etichetta { padding: 1px 6px; border-radius: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dashboard-materiali .gruppo-etichetta.gruppo-bm { background: #eceff1; color: #37474f; }
.dashboard-materiali .gruppo-etichetta.gruppo-mescolatori { background: #e3f2fd; color: var(--blu); }
.dashboard-materiali .gruppo-etichetta.gruppo-bigbag { background: var(--arancio-chiaro); color: #b34f00; }

/* Bordo macchina: prossimi giorni */
.dashboard-materiali .weekend { background: #ede7f6; }
.dashboard-materiali th.weekend { background: #d1c4e9; }
.dashboard-materiali th.fino { border-bottom: 3px solid var(--blu); }
.dashboard-materiali td.esaurito { background: #ffcdd2; color: #b71c1c; font-weight: 700; }
.dashboard-materiali .portare { background: #e3f2fd; }
.dashboard-materiali th.portare { background: #bbdefb; }
.dashboard-materiali .portare .pallet { color: #37474f; }
.dashboard-materiali .portare .mancanti { color: var(--rosso); font-weight: 700; font-size: 12px; }

.dashboard-materiali .legenda { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 4px 12px 4px; color: #607d8b; font-size: 12px; }
.dashboard-materiali .legenda > span.weekend,
.dashboard-materiali .legenda > span.esaurito { padding: 1px 6px; border-radius: 3px; }
.dashboard-materiali .legenda > span.esaurito { background: #ffcdd2; color: #b71c1c; }

/* Pagina schermo per il monitor di reparto (change pianificazione-dashboard-schermo, D9): caratteri circa 1,6 volte, colonne che
   riempiono la larghezza, nessuno scorrimento. Quello che non ci sta in fondo alla colonna non si vede. */
body.schermo-body { margin: 0; overflow: hidden; background: #f5f7f8; font-family: Roboto, Arial, sans-serif; }
.dashboard-materiali.schermo { position: relative; font-size: 22px; height: 100vh; overflow: hidden; }
.dashboard-materiali.schermo .testata { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; padding: 8px 260px 10px 16px; }
.dashboard-materiali.schermo .logo { position: absolute; top: 6px; right: 16px; height: 48px; }
.dashboard-materiali.schermo .testata h1 { font-size: 32px; margin: 0; color: #263238; }
.dashboard-materiali.schermo .testata .aggiornata { font-size: 20px; color: #546e7a; }
.dashboard-materiali.schermo .testata .avviso { font-size: 20px; color: var(--rosso); font-weight: 700; }
.dashboard-materiali.schermo .linee { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin: 0 16px; }
.dashboard-materiali.schermo .linea { padding: 10px 12px; border-top-width: 10px; }
.dashboard-materiali.schermo .linea .nome { font-size: 36px; }
.dashboard-materiali.schermo .linea .ferma { font-size: 18px; padding: 2px 12px; }
.dashboard-materiali.schermo .op { border-left-width: 6px; padding: 6px 10px; margin-bottom: 10px; }
.dashboard-materiali.schermo .op .quando { font-size: 20px; }
.dashboard-materiali.schermo .op .etichetta { font-size: 18px; padding: 1px 10px; }
.dashboard-materiali.schermo .op .numero { font-size: 22px; }
.dashboard-materiali.schermo .op .senza-formula { font-size: 22px; }
.dashboard-materiali.schermo .op .gruppo { border-left-width: 5px; padding-left: 10px; margin-top: 6px; }
.dashboard-materiali.schermo .op .titolo-gruppo { font-size: 16px; }
.dashboard-materiali.schermo .op .materiale { font-size: 26px; gap: 12px; }
.dashboard-materiali.schermo .op .materiale .descrizione { font-size: 20px; }
.dashboard-materiali.schermo .nessuno { font-size: 26px; padding: 16px; }
.dashboard-materiali.schermo .fascia-errore { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 12px 16px;
    background: var(--rosso); color: #fff; font-size: 30px; font-weight: 700; text-align: center; }
.dashboard-materiali.schermo .fascia-errore.visibile { display: block; }