/* AIDEV-NOTE: pagina Calendario (change pianificazione-calendario, design D2): riepilogo per linea, griglia a mezz'ora come il
   foglio Calendario dell'Excel ("B" scarico bobine, "C" cambio), elenco eventi per linea. Tutto sotto .calendario. */

.calendario {
    --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: 12px;
}

.calendario .barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 4px 8px 4px; }
.calendario .filtro-linee { display: flex; gap: 2px; }
.calendario .chip-linea.mud-chip-filled { background: var(--colore-linea); color: #fff; }
.calendario .chip-linea.mud-chip-outlined { border-color: var(--colore-linea); color: var(--colore-linea); }
.calendario .fonti { display: flex; gap: 12px; color: #555; margin-left: auto; }
.calendario .fonti .avviso { color: #c62828; font-weight: 600; }

/* Riepilogo */
.calendario table.riepilogo { border-collapse: collapse; margin: 0 4px 12px 4px; }
.calendario .riepilogo th, .calendario .riepilogo td { padding: 2px 10px; border-bottom: 1px solid #e0e0e0; white-space: nowrap; }
.calendario .riepilogo th { background: #eceff1; font-weight: 600; text-align: left; }
.calendario .riepilogo .num { text-align: right; }
.calendario .riepilogo td.linea { border-left: 4px solid var(--colore-linea); font-weight: 600; }
.calendario .riepilogo tr.totale td { font-weight: 700; border-top: 2px solid #90a4ae; }

/* Griglia */
.calendario .griglia-contenitore { overflow-x: auto; margin: 0 4px 12px 4px; border: 1px solid #cfd8dc; }
.calendario table.griglia { border-collapse: collapse; table-layout: fixed; }
.calendario .griglia th, .calendario .griglia td { border: 1px solid #eceff1; padding: 0; height: 22px; }
.calendario .griglia th.nome {
    position: sticky; left: 0; z-index: 2; background: #fff; min-width: 76px; max-width: 76px; text-align: left;
    padding: 0 4px; border-left: 4px solid var(--colore-linea, #cfd8dc); white-space: nowrap; font-weight: 600;
}
.calendario .griglia th.giorno { background: #eceff1; font-weight: 600; text-align: left; padding-left: 4px; border-left: 2px solid #90a4ae; }
.calendario .griglia th.ora { background: #f5f7f8; font-weight: 400; color: #546e7a; font-size: 10px; min-width: 28px; }
.calendario .griglia td.cella { min-width: 14px; max-width: 14px; width: 14px; text-align: center; font-size: 10px; font-weight: 700; cursor: default; }
.calendario .griglia td.op-a { background: #e3f2fd; }
.calendario .griglia td.op-b { background: #e8f5e9; }
.calendario .griglia td.con-scarico { color: #0d47a1; }
/* Fermi programmati (change pianificazione-fermi-programmati, D4) */
.calendario .griglia td.fermo { background: #b0bec5; color: #263238; }
.calendario .griglia td.con-cambio { color: #e65100; background: #ffe0b2; }
.calendario .griglia td.passata { opacity: .45; }
.calendario .griglia td.adesso { box-shadow: inset 2px 0 0 #d32f2f; }
.calendario .griglia td.nuovo-giorno { border-left: 2px solid #90a4ae; }
.calendario .griglia .stato { font-weight: 400; font-size: 10px; color: #757575; margin-left: 2px; }
.calendario .griglia .stato.ferma { color: #c62828; font-weight: 600; }

/* Elenco eventi, una colonna per linea come nell'Excel */
.calendario .elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin: 0 4px 12px 4px; }
.calendario .elenco .colonna { border: 1px solid #e0e0e0; }
.calendario .elenco .titolo { background: var(--colore-linea); color: #fff; padding: 3px 6px; font-weight: 600; }
.calendario .elenco .evento { padding: 1px 6px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario .elenco .evento .quando { color: #546e7a; margin-right: 4px; }
.calendario .elenco .evento.scarico b { color: #0d47a1; }
.calendario .elenco .evento.cambio { background: #fff3e0; }
.calendario .elenco .evento.cambio b { color: #e65100; }
.calendario .elenco .evento.passato { opacity: .5; }
.calendario .elenco .evento.vuoto { color: #9e9e9e; font-style: italic; }