/* AIDEV-NOTE: pagina Bordo macchina (change pianificazione-bordo-macchina, design D4): un riquadro per linea con i materiali a
   bordo macchina e la sequenza OP, leggibile in reparto anche su un tablet. Tutto sotto .bordo-macchina; colori come Scaletta. */

.bordo-macchina {
    --linea-01: #1565c0;
    --linea-02: #616161;
    --linea-03: #2e7d32;
    --linea-04: #00838f;
    --linea-06: #ef6c00;
    --linea-07: #6d4c41;
    --linea-08: #6a1b9a;
    --linea-09: #ad1457;
    font-size: 14px;
    max-width: 100%;
}

.bordo-macchina .barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 4px 4px 4px; }
.bordo-macchina .barra .campo { display: flex; align-items: center; gap: 4px; color: #455a64; font-size: 13px; }
.bordo-macchina .barra select,
.bordo-macchina .barra input { font-size: 13px; padding: 2px 4px; border: 1px solid #b0bec5; border-radius: 3px; background: #fff; }
.bordo-macchina .barra input[type=number] { width: 56px; text-align: right; }

.bordo-macchina .chip-linee { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bordo-macchina .chip-linea { border: 2px solid var(--colore-linea, #90a4ae); color: var(--colore-linea, #455a64); background: #fff;
    border-radius: 14px; padding: 2px 10px; font-weight: 600; cursor: pointer; font-size: 13px; }
.bordo-macchina .chip-linea.scelta { background: var(--colore-linea); color: #fff; }
.bordo-macchina .chip-linea.tutte { border-style: dashed; font-weight: 400; }

.bordo-macchina .fonti { display: flex; gap: 14px; color: #555; padding: 0 4px 8px 4px; flex-wrap: wrap; font-size: 12px; }
.bordo-macchina .fonti .avviso { color: #c62828; font-weight: 600; }
.bordo-macchina .fonti .margine { color: #37474f; font-weight: 600; }

.bordo-macchina .riquadri { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 12px; padding: 0 4px; }
.bordo-macchina .riquadro { border: 1px solid #cfd8dc; border-top: 6px solid var(--colore-linea); border-radius: 4px; background: #fff;
    padding: 8px 10px; min-width: 0; }
.bordo-macchina .riquadro header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.bordo-macchina .riquadro header .linea { font-size: 22px; font-weight: 700; color: var(--colore-linea); }
.bordo-macchina .riquadro header .in-corso { font-weight: 600; color: #263238; }
.bordo-macchina .riquadro header .fine { color: #607d8b; font-size: 12px; }
.bordo-macchina .riquadro header .fattore { margin-left: auto; color: #607d8b; font-size: 12px; cursor: help; }

.bordo-macchina .scorri { overflow-x: auto; }
.bordo-macchina table { border-collapse: collapse; width: 100%; }
.bordo-macchina th, .bordo-macchina td { padding: 4px 8px; border-bottom: 1px solid #e0e0e0; vertical-align: top; }
.bordo-macchina th { background: #eceff1; font-weight: 600; text-align: left; white-space: nowrap; font-size: 13px; }
.bordo-macchina .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bordo-macchina .oggi { background: #f3f8fd; }
.bordo-macchina th.oggi { background: #dbe9f6; }
.bordo-macchina td.materiale { min-width: 200px; }
.bordo-macchina td.materiale b { white-space: nowrap; }
.bordo-macchina td.materiale .nome { color: #546e7a; font-size: 12px; }
.bordo-macchina td.totale { font-weight: 700; }
.bordo-macchina td.oltre { color: #78909c; }
.bordo-macchina tr.riga-totale td { font-weight: 700; border-top: 2px solid #90a4ae; }
.bordo-macchina .stimato { color: #e65100; font-size: 12px; margin-left: 4px; cursor: help; }

.bordo-macchina .titolo-sequenza { margin: 10px 0 4px 0; color: #78909c; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.bordo-macchina ol.sequenza { list-style: none; margin: 0; padding: 0; }
.bordo-macchina ol.sequenza li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 6px; border-bottom: 1px solid #eceff1; }
.bordo-macchina ol.sequenza li.in-corso { background: #fff8e1; border-left: 4px solid #ffa000; }
.bordo-macchina ol.sequenza .quando { color: #455a64; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bordo-macchina ol.sequenza .op { font-weight: 700; }
.bordo-macchina ol.sequenza .cliente { color: #546e7a; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bordo-macchina ol.sequenza .kg { flex-basis: 100%; font-weight: 600; color: #263238; }

.bordo-macchina .senza-formula { margin-top: 6px; padding: 4px 8px; background: #fff3e0; color: #e65100; border-left: 4px solid #ef6c00; font-size: 13px; }
.bordo-macchina .vuoto,
.bordo-macchina .nota { color: #78909c; font-style: italic; padding: 8px 4px; }

@media (max-width: 900px) {
    .bordo-macchina .riquadri { grid-template-columns: 1fr; }
}