/* ============================================================================
   PIANIFICAZIONE DEI GIRI — il banco a tre colonne: coda, mappa e settimana, ottimizzazione.
   ============================================================================ */

.banco-giri { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.banco-giri__colonna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.banco-giri__colonna[hidden], .banco-giri__divisore[hidden] { display: none; }
/* La colonna dell'ottimizzazione si nasconde: mappa e calendario prendono lo spazio; la scelta resta nel browser di chi guarda. */
.banco-giri--senza-ottimizzazione .banco-giri__ottimizzazione { display: none; }
.banco-giri--impilata.banco-giri--senza-ottimizzazione { grid-template-columns: 300px minmax(0, 1fr); }
.banco-giri--impilata.banco-giri--senza-ottimizzazione .mappa-giro__tela { height: 560px; }

/* Le tre disposizioni (04/11/2026): impilata (mappa sopra il calendario, ottimizzazione a destra), affiancata (coda |
   mappa | calendario alti quanto lo schermo, col divisore trascinabile; l'ottimizzazione sotto la coda), staccata (il
   calendario prende il centro, la mappa è un riquadro flottante). Lo script sposta i pezzi; qui le colonne e le misure. */
.banco-giri__disposizioni { display: inline-flex; gap: 2px; }
.banco-giri--affiancata { grid-template-columns: 300px var(--banco-mappa, minmax(0, 1fr)) 8px minmax(0, 1.2fr); --banco-altezza: calc(100vh - var(--altezza-barra, 56px) - 210px); }
.banco-giri--staccata { grid-template-columns: 300px minmax(0, 1fr); }
.banco-giri__divisore { width: 8px; align-self: stretch; min-height: 240px; border-radius: 4px; background: var(--bordo); cursor: col-resize; touch-action: none; }
.banco-giri__divisore:hover { background: var(--primario-tenue); }
.banco-giri--affiancata .mappa-giro__tela { height: var(--banco-altezza); }
.banco-giri--affiancata .mappa-giro__statica { height: var(--banco-altezza); object-fit: cover; }
.banco-giri--affiancata .banco-giri__calendario { display: flex; flex-direction: column; height: calc(var(--banco-altezza) + 110px); }
.banco-giri--affiancata .banco-giri__calendario [data-banco-settimana] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.banco-giri--affiancata .banco-giri__calendario .calendario.griglia-ore { flex: 1 1 auto; min-height: 0; }
.banco-giri--affiancata .banco-giri__calendario .griglia-ore__corpo { flex: 1 1 auto; min-height: 0; max-height: none; }
.banco-giri--affiancata [data-riquadro-mappa], .banco-giri--affiancata .banco-giri__calendario { position: sticky; top: calc(var(--altezza-barra, 56px) + 12px); }
/* La mappa staccata: un riquadro fisso che si trascina per la presa e si ridimensiona dall'angolo. */
.riquadro-mappa--flottante {
    position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 440px; height: 360px; min-width: 280px; min-height: 220px;
    display: flex; flex-direction: column; overflow: hidden; resize: both; border: 1px solid var(--bordo); border-radius: 10px;
    background: var(--superficie); box-shadow: var(--ombra-media);
}
.riquadro-mappa--flottante .mappa-giro__presa {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px;
    border-bottom: 1px solid var(--bordo); background: var(--superficie-2); cursor: move; user-select: none; touch-action: none;
}
.riquadro-mappa--flottante .mappa-giro { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; }
.riquadro-mappa--flottante .mappa-giro__tela { flex: 1 1 auto; min-height: 0; height: auto; }
.riquadro-mappa--flottante .mappa-giro__statica { flex: 1 1 auto; min-height: 0; height: auto; object-fit: cover; }
.riquadro-mappa--flottante .mappa-giro__legenda, .riquadro-mappa--flottante .mappa-giro__avviso { display: none; }
.riquadro-mappa--flottante .mappa-giro__comandi { top: 46px; }
.banco-giri__conteggio {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 11px; background: var(--primario-tenue); color: var(--primario); font-size: .78rem; font-weight: 600; margin-left: 4px;
}
.pulsante--principale .banco-giri__conteggio { background: rgba(255, 255, 255, .22); color: var(--su-tinta); }
.banco-giri__tutte { margin-left: auto; display: inline-flex; gap: 2px; }
.banco-giri__obiettivi { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.banco-giri__obiettivi legend { padding: 0; margin-bottom: 4px; }
.banco-giri__genera { width: 100%; }
.stacco-sopra { margin-top: var(--spazio); }
.elenco-semplice { margin: 6px 0 0; padding-left: 18px; }

/* La coda e l'ordine consigliato: una riga per tappa, col numero che è lo stesso sulla mappa. */
.coda-giro { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 440px; overflow: auto; }
.coda-giro--ordine { max-height: 560px; }
.coda-giro__voce {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: start;
    padding: 8px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); background: var(--superficie);
}
.coda-giro__voce input[type="checkbox"] { margin-top: 5px; }
.coda-giro__voce--ferma { opacity: .72; }
.coda-giro__voce--fisso { grid-template-columns: auto minmax(0, 1fr); }
.coda-giro__voce--evidenziata { outline: 2px solid var(--primario); outline-offset: -2px; }
/* Il trascinamento dalla coda al calendario (04/11/2026): la riga si prende, la colonna del rilascio mostra il fantasma. */
.coda-giro__voce[draggable="true"] { cursor: grab; }
.coda-giro__voce--in-trascinamento { opacity: .5; }
/* La modalità manuale (ottimizzazione spenta): niente spunte in coda, il suggerimento del trascinamento al loro posto. */
.banco-giri__solo-manuale { display: none; }
.banco-giri--senza-ottimizzazione .banco-giri__solo-manuale { display: inline; }
.banco-giri--senza-ottimizzazione [data-coda] input[name="chiavi"], .banco-giri--senza-ottimizzazione [data-spunta-tutte] { display: none; }
.coda-giro__testo { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.coda-giro__km { font-weight: 600; white-space: nowrap; color: var(--primario-pieno); font-size: .86rem; padding-top: 3px; }
/* Il lato destro di una riga: i chilometri e, sotto, «Fissa a mano» (coda) o «Cambia» (giro). */
.coda-giro__lato { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.coda-giro__azione { padding: 1px 6px; font-size: .78rem; white-space: nowrap; color: var(--primario); }
/* Una tappa del giro corretta a mano: il bollo con giorno e persona scelti, finché non si fissa. */
.coda-giro__a-mano {
    display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 9px;
    background: var(--attesa-tenue); color: var(--attesa); font-size: .76rem; font-weight: 600;
}
.coda-giro__voce--a-mano { border-color: var(--attesa); }
.coda-giro__avviso { color: var(--attesa); }
.coda-giro__giornata { padding: 8px 4px 2px; border-bottom: 1px solid var(--bordo); }
.coda-giro__giornata:first-child { padding-top: 0; }
.numero-tappa {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--primario-pieno); color: var(--su-tinta); font-weight: 600; font-size: .8rem; flex: 0 0 auto;
}
.numero-tappa--fisso { background: var(--testo-tenue); }
.numero-tappa--proposta { background: var(--attesa); }
.coda-giro__voce--proposta { border-style: dashed; }
.banco-giri__coda { display: flex; flex-direction: column; gap: 16px; }
.coda-giro--proposte { max-height: 360px; }
.numero-tappa--fermo { background: var(--bordo-forte); }
.numero-tappa--sede { background: var(--ok); }
.numero-tappa--piccolo { width: 20px; height: 20px; font-size: .72rem; vertical-align: middle; }

/* Gli interruttori delle persone sopra il calendario: l'agenda del genere accesa, gli altri insiemi da aggiungere. */
.banco-giri__insiemi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 0; }
.banco-giri__avviso-persone { margin: 8px 10px 0; }

/* Le pastiglie dei giorni: scelgono il giorno di mappa e calendario; un pallino segna i giorni con tappe nel giro. */
.banco-giri__giorni { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--bordo); }
.giorno-chip {
    border: 1px solid var(--bordo); border-radius: 14px; padding: 3px 10px; background: var(--superficie); color: var(--testo);
    font: inherit; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.giorno-chip:hover { background: var(--primario-tenue); }
.giorno-chip--attivo { background: var(--primario-pieno); border-color: var(--primario-pieno); color: var(--su-tinta); }
.giorno-chip--festivo:not(.giorno-chip--attivo) { opacity: .55; }
.giorno-chip--con-tappe::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.giorno-chip--attivo.giorno-chip--con-tappe::after { background: var(--su-tinta); }
.coda-giro__giornata[data-scegli-giorno] { cursor: pointer; }
.coda-giro__giornata--attiva { background: var(--primario-tenue); border-radius: var(--raggio-piccolo); padding-left: 6px; }
[data-banco-settimana] .griglia-ore__intestazione, [data-banco-settimana] .griglia-ore__colonna { cursor: pointer; }

/* La griglia a ore nel banco: il corpo scorre e ha la barra verticale, le righe delle intestazioni e di «tutto il giorno»
   no, e le colonne dei giorni non coincidevano con le teste di un quindicesimo di pixel per colonna. Tutte e tre le righe
   riservano lo stesso spazio per la barra, così i bordi delle celle stanno in colonna. */
[data-banco-settimana] .griglia-ore__intestazioni,
[data-banco-settimana] .griglia-ore__tutto,
[data-banco-settimana] .griglia-ore__corpo { scrollbar-gutter: stable; }
[data-banco-settimana] .griglia-ore__intestazioni,
[data-banco-settimana] .griglia-ore__tutto { overflow-y: auto; overflow-x: hidden; }

/* La mappa: la tela di Google, i comandi sopra, l'immagine statica quando manca la chiave del browser. */
.mappa-giro { position: relative; border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.mappa-giro__tela { height: 480px; background: var(--superficie-2); }
.mappa-giro__comandi {
    position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 10px; align-items: center;
    padding: 6px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); background: var(--superficie);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12); font-size: .86rem;
}
.mappa-giro__giornate { padding: 2px 6px; max-width: 220px; }
.mappa-giro__statica { display: block; width: 100%; height: auto; }
.mappa-giro__avviso { margin: 10px; }
/* La legenda è una frase con i bollini in linea (vertical-align in .numero-tappa--piccolo): da flex ogni pezzo era
   un elemento a sé, e un testo che non stava nella riga saltava intero sotto invece di andare a capo fra le parole
   (28/10/2026). */
.mappa-giro__legenda { margin: 0; padding: 6px 10px; border-top: 1px solid var(--bordo); line-height: 1.8; }
.mappa-giro__finestra { font-size: .86rem; line-height: 1.35; max-width: 240px; color: #222; }
.mappa-giro__finestra strong { display: block; }

/* La finestra «Fissa a mano»: la voce, i tre campi in riga, la disponibilità di chi va letta sul posto. */
dialog.finestra-fissa-mano { width: min(560px, calc(100vw - 32px)); }
.fissa-mano__voce { margin: 0 0 10px; line-height: 1.35; overflow-wrap: anywhere; }
.fissa-mano__disponibilita { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 28px; }
.fissa-mano__disponibilita [data-fissa-mano-esito] { line-height: 1.35; }
.fissa-mano__esito--ok { color: var(--ok); font-weight: 600; }
.fissa-mano__esito--attenzione { color: var(--attesa); font-weight: 600; }

/* I risparmi del giro. */
.kpi-giro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi-giro__voce { padding: 10px 12px; border-radius: var(--raggio-piccolo); background: var(--ok-tenue); border: 1px solid var(--ok-bordo); }
.kpi-giro__voce--neutra { grid-column: 1 / -1; background: var(--superficie-2); border-color: var(--bordo); }
.kpi-giro__valore { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.kpi-giro__delta { color: var(--ok); font-weight: 600; font-size: .86rem; }

@media (max-width: 1360px) {
    /* Sotto i 1360 px si impila comunque: le disposizioni larghe non ci stanno. */
    .banco-giri, .banco-giri--senza-ottimizzazione, .banco-giri--affiancata, .banco-giri--staccata { grid-template-columns: 280px minmax(0, 1fr); }
    .banco-giri__ottimizzazione { grid-column: 1 / -1; }
    .banco-giri--affiancata .banco-giri__divisore { display: none; }
    .banco-giri--affiancata .banco-giri__calendario { height: auto; position: static; }
    .banco-giri--affiancata [data-riquadro-mappa] { position: static; }
    .banco-giri--affiancata .mappa-giro__tela { height: 420px; }
    .banco-giri--affiancata .banco-giri__calendario .griglia-ore__corpo { max-height: calc(100vh - var(--altezza-barra) - 236px); }
}
@media (max-width: 860px) {
    .banco-giri, .banco-giri--senza-ottimizzazione, .banco-giri--affiancata, .banco-giri--staccata { grid-template-columns: minmax(0, 1fr); }
    .riquadro-mappa--flottante { position: static; width: auto; height: auto; resize: none; }
    .mappa-giro__tela { height: 360px; }
    .coda-giro { max-height: none; }
}