/* ============================================================================
   CALENDARIO — il calendario aziendale come Google Calendar: il pannello dei
   calendari con le spunte, la griglia a ore, il mese, il planning, la scheda
   rapida di un evento. Si carica dopo componenti.css (che ha le celle del mese e
   le strisce degli eventi) e prima di utilita e adattamento.
   I colori dei calendari arrivano come variabile --colore sugli elementi.
   ============================================================================ */

/* ─────────────── La pagina: pannello a sinistra, griglia a destra ─────────────── */

/* La pagina prende l'altezza che resta sotto la barra e l'intestazione (--calendario-cima la misura app.js, perché
   l'intestazione cambia altezza coi pulsanti che vanno a capo): la pagina non scorre sotto la barra, come il menu;
   scorrono la griglia delle ore, il mese o il planning dentro il loro riquadro, e il pannello dei calendari per conto suo. */
.calendario-pagina {
    display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 16px; align-items: stretch;
    height: calc(100vh - var(--calendario-cima, 150px) - var(--calendario-fondo, 18px)); min-height: 420px;
}
@supports (height: 100dvh) { .calendario-pagina { height: calc(100dvh - var(--calendario-cima, 150px) - var(--calendario-fondo, 18px)); } }
.calendario-pagina--pannello-chiuso { grid-template-columns: minmax(0, 1fr); }
.calendario-pagina--pannello-chiuso .calendario-pannello { display: none; }
.calendario-corpo { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.calendario-corpo > .calendario { flex: 1 1 auto; min-height: 0; }
.calendario-pagina .calendario--mese, .calendario-pagina .planning { overflow-y: auto; overscroll-behavior: contain; }
.calendario-pagina .griglia-ore__corpo { flex: 1 1 auto; min-height: 0; max-height: none; }
.calendario-azioni { align-items: center; }
.calendario-viste { display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-piccolo); overflow: hidden; }
.calendario-viste .pulsante { border: 0; border-radius: 0; border-right: 1px solid var(--bordo); min-height: 36px; }
.calendario-viste .pulsante:last-child { border-right: 0; }
.calendario-fab { display: none; }

/* ─────────────── Il pannello ─────────────── */

/* Due riquadri uno sopra l'altro: il mini mese (fisso) e la scelta dei calendari, che scorre da sé se è lunga. */
.calendario-pannello { display: flex; flex-direction: column; gap: 12px; min-height: 0; max-height: 100%; }
.calendario-pannello__riquadro { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px; }
.calendario-pannello__mese { flex: 0 0 auto; }
.calendario-pannello__scelta { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.calendario-pannello__titolo { font-size: .86rem; margin-bottom: 2px; }
.calendario-pannello__elenco { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
/* La testa con la ✕ serve solo al cassetto del telefono. */
.calendario-pannello__testa { display: none; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calendario-pannello__chiudi { display: none; }
.calendario-pannello__sezione h3 { font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); margin: 12px 0 4px; }
.calendario-pannello__gruppo { margin-top: 8px; }
.calendario-pannello__gruppo summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.calendario-pannello__gruppo summary::-webkit-details-marker { display: none; }
.calendario-pannello__gruppo summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--testo-tenue); transition: transform .15s; flex: 0 0 auto; }
.calendario-pannello__gruppo[open] summary::before { transform: rotate(90deg); }
.calendario-pannello__voce { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--raggio-piccolo); font-size: .86rem; cursor: pointer; min-width: 0; }
.calendario-pannello__voce:hover { background: var(--superficie-2); }
.calendario-pannello__voce input { width: 16px; height: 16px; accent-color: var(--primario); flex: 0 0 auto; margin: 0; }
.calendario-pannello__voce--gruppo { flex: 1; font-weight: 600; }
.calendario-pannello__calendari { padding-left: 14px; }
.calendario-pannello__colore { width: 12px; height: 12px; border-radius: 3px; background: var(--colore, var(--bordo-forte)); flex: 0 0 auto; }
.calendario-pannello__nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendario-pannello__livello { color: var(--attesa); font-size: .7rem; }
.calendario-pannello__livello--modifica { color: var(--testo-tenue); font-size: .8rem; }
.calendario-pannello__azioni { display: flex; gap: 6px; margin-top: 12px; }

/* Il mini mese: per saltare a un giorno senza perdere la vista. */
.mini-mese { margin-bottom: 0; }
.mini-mese__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mini-mese__testa strong { font-size: .86rem; }
.mini-mese__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mini-mese__nome { font-size: .66rem; font-weight: 600; color: var(--testo-tenue); padding: 2px 0; }
.mini-mese__giorno { display: block; height: 28px; line-height: 28px; border-radius: 50%; font-size: .78rem; color: var(--testo); text-decoration: none; font-variant-numeric: tabular-nums; }
.mini-mese__giorno:hover { background: var(--primario-tenue); text-decoration: none; }
.mini-mese__giorno--fuori { color: var(--testo-tenue); opacity: .55; }
.mini-mese__giorno--periodo { background: var(--neutro-tenue); border-radius: 6px; }
.mini-mese__giorno--oggi { box-shadow: inset 0 0 0 1px var(--primario); font-weight: 600; }
.mini-mese__giorno--scelto, .mini-mese__giorno--scelto:hover { background: var(--primario-pieno); color: var(--su-tinta); font-weight: 600; }

/* ─────────────── La griglia a ore ─────────────── */

.calendario.griglia-ore { --altezza-ora: 56px; --larghezza-ore: 52px; --larghezza-colonna: 110px; display: flex; flex-direction: column; overflow-x: auto; overflow-y: hidden; }
/* Tante colonne (la vista giorno con molti calendari accesi): nessuna più stretta di --larghezza-colonna, la griglia scorre in orizzontale tutta insieme. */
.calendario--giorno .griglia-ore__intestazioni, .calendario--giorno .griglia-ore__tutto, .calendario--giorno .griglia-ore__corpo { min-width: calc(var(--larghezza-ore) + var(--colonne) * var(--larghezza-colonna)); }
.griglia-ore__intestazioni, .griglia-ore__tutto { display: grid; grid-template-columns: var(--larghezza-ore) repeat(var(--colonne), minmax(0, 1fr)); border-bottom: 1px solid var(--bordo); }
.griglia-ore__intestazioni { background: var(--superficie-2); }
.griglia-ore__angolo { border-right: 1px solid var(--bordo); }
.griglia-ore__angolo--testo { font-size: .6rem; color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .04em; padding: 6px 4px 0; text-align: right; line-height: 1.1; }
.griglia-ore__intestazione { padding: 8px 8px 6px; border-right: 1px solid var(--bordo); display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--testo-piccolo); }
.griglia-ore__intestazione:last-child, .griglia-ore__tutto-cella:last-child, .griglia-ore__colonna:last-child { border-right: 0; }
.griglia-ore__pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--colore); flex: 0 0 auto; }
.griglia-ore__nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.griglia-ore__nome-giorno { text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); font-weight: 600; font-size: var(--testo-minuto); }
.griglia-ore__numero { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; }
.griglia-ore__numero--oggi { background: var(--primario-pieno); color: var(--su-tinta); }
.griglia-ore__intestazione--oggi .griglia-ore__nome-giorno { color: var(--primario-pieno); }
.griglia-ore__tutto-cella { min-height: 26px; padding: 3px 4px; border-right: 1px solid var(--bordo); display: flex; flex-direction: column; gap: 2px; }
.griglia-ore__corpo {
    position: relative; display: grid; grid-template-columns: var(--larghezza-ore) minmax(0, 1fr);
    max-height: calc(100vh - var(--altezza-barra) - 230px); min-height: 360px; overflow-y: auto; overscroll-behavior: contain;
}
.griglia-ore__ore { position: relative; height: calc(var(--ore) * var(--altezza-ora)); border-right: 1px solid var(--bordo); }
.griglia-ore__ora { position: absolute; right: 6px; transform: translateY(-50%); font-size: var(--testo-minuto); color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.griglia-ore__colonne { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); height: calc(var(--ore) * var(--altezza-ora)); }
/* La colonna: grigia fuori dalla fascia lavorativa, chiara dentro (la fascia è un rettangolo posato sopra). I gesti
   verticali col dito scorrono la griglia; quelli orizzontali cambiano giorno (app.js). */
.griglia-ore__colonna { position: relative; border-right: 1px solid var(--bordo); background: var(--sfondo); touch-action: pan-y; }
.griglia-ore__colonna--festiva { background: var(--neutro-tenue); }
.griglia-ore__fascia { position: absolute; left: 0; right: 0; background: var(--superficie); pointer-events: none; }
/* Le righe delle ore corrono su tutta la griglia, in ogni vista a ore: un velo per colonna sopra il fondo e la fascia
   lavorativa (che le coprivano) e sotto gli eventi; piena all'ora, appena accennata alla mezz'ora. */
.griglia-ore__colonna::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image:
        linear-gradient(to bottom, var(--bordo) 1px, transparent 1px),
        linear-gradient(to bottom, transparent calc(50% - 1px), color-mix(in srgb, var(--bordo) 55%, transparent) calc(50% - 1px), color-mix(in srgb, var(--bordo) 55%, transparent) 50%, transparent 50%);
    background-size: 100% var(--altezza-ora), 100% var(--altezza-ora);
}
.griglia-ore__adesso { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--errore); z-index: 3; pointer-events: none; }
.griglia-ore__adesso::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--errore); }
.griglia-ore__evento {
    position: absolute; box-sizing: border-box; padding: 3px 6px 3px 8px; border-radius: 6px; font-size: 12px; line-height: 1.3;
    overflow: hidden; cursor: pointer; z-index: 2; display: flex; flex-direction: column; gap: 1px; color: var(--testo);
    background: color-mix(in srgb, var(--colore, var(--bordo-forte)) 18%, var(--superficie)); border-left: 3px solid var(--colore, var(--bordo-forte));
    transition: box-shadow .12s; user-select: none; -webkit-user-select: none;
}
.griglia-ore__evento:hover, .griglia-ore__evento:focus-visible { box-shadow: var(--ombra-media); z-index: 4; }
.griglia-ore__evento--spostabile { cursor: grab; }
.griglia-ore__evento--occupato {
    color: var(--testo-tenue);
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--colore) 12%, var(--superficie)) 0 6px, color-mix(in srgb, var(--colore) 24%, var(--superficie)) 6px 12px);
}
.griglia-ore__evento-ora { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 11px; }
.griglia-ore__evento-titolo { font-weight: 600; display: flex; align-items: center; gap: 4px; min-width: 0; }
.griglia-ore__evento-titolo .icona { width: 12px; height: 12px; flex: 0 0 auto; opacity: .8; }
.griglia-ore__evento-sotto { color: var(--testo-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.griglia-ore__evento--breve { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.griglia-ore__evento--breve .griglia-ore__evento-sotto { display: none; }
.griglia-ore__segno { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--errore); }
.griglia-ore__maniglia { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.griglia-ore__evento--in-presa, .calendario__chip--in-presa { opacity: .45; }
.griglia-ore__fantasma {
    position: absolute; left: 2px; right: 2px; border: 2px dashed var(--primario); border-radius: 6px; background: var(--primario-tenue);
    z-index: 5; pointer-events: none; font-size: 11px; font-weight: 600; color: var(--primario-pieno); padding: 2px 6px;
}
.griglia-ore__colonna--bersaglio { outline: 2px dashed var(--primario); outline-offset: -2px; }
.griglia-ore__evento--scelto { outline: 2px solid var(--primario); outline-offset: 1px; z-index: 5; }
.calendario--in-trascinamento, .calendario--in-trascinamento * { cursor: grabbing !important; }
/* Un calendario spento nel pannello: le sue cose restano nella pagina, nascoste, finché la spunta non le riaccende. */
.calendario--spento { display: none !important; }

/* Le strisce (tutto il giorno, mese, planning) col colore del calendario. */
.calendario__chip { position: relative; border-left-color: var(--colore, var(--bordo-forte)); background: color-mix(in srgb, var(--colore, var(--bordo-forte)) 16%, var(--superficie)); user-select: none; -webkit-user-select: none; }
.calendario__chip--occupato { color: var(--testo-tenue); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--colore) 10%, var(--superficie)) 0 6px, color-mix(in srgb, var(--colore) 20%, var(--superficie)) 6px 12px); }
.calendario__chip--spostabile { cursor: grab; }
.calendario__chip .icona { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; opacity: .8; }
.calendario__chip .griglia-ore__segno { position: static; display: inline-block; margin-left: auto; flex: 0 0 auto; }
.calendario__giorno--bersaglio { background: var(--primario-tenue); outline: 2px dashed var(--primario); outline-offset: -3px; }
a.calendario__numero { color: inherit; text-decoration: none; }
a.calendario__numero:hover { background: var(--primario-tenue); }
.calendario__giorno--oggi a.calendario__numero:hover { background: var(--primario-premuto); }
.calendario__altri { border: 0; background: transparent; color: var(--primario-pieno); font: inherit; font-size: 11px; font-weight: 600; text-align: left; padding: 2px 6px; cursor: pointer; }
.calendario__altri:hover { text-decoration: underline; }

/* ─────────────── Il planning ─────────────── */

.planning { padding: 4px 0; }
.planning__giorno { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
.planning__giorno:last-child { border-bottom: 0; }
.planning__data { display: flex; align-items: center; gap: 6px; color: var(--testo); text-decoration: none; align-self: start; }
.planning__data:hover { text-decoration: none; }
.planning__numero { font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.planning__giorno--oggi .planning__numero { background: var(--primario-pieno); color: var(--su-tinta); }
.planning__nome { font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); }
.planning__eventi { display: flex; flex-direction: column; gap: 4px; }
.planning .calendario__chip { white-space: normal; flex-wrap: wrap; padding: 6px 10px; }

/* ─────────────── La scheda rapida di un evento ─────────────── */

.scheda-evento {
    position: fixed; z-index: 70; width: min(360px, calc(100vw - 24px)); background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-media); padding: 14px 16px; border-top: 4px solid var(--colore, var(--primario));
}
.scheda-evento__testa { display: flex; align-items: flex-start; gap: 8px; }
.scheda-evento__testa h3 { margin: 0; font-size: 1rem; flex: 1; overflow-wrap: anywhere; }
.scheda-evento__genere { font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); margin-bottom: 2px; }
.scheda-evento__dati { margin: 8px 0 0; font-size: .86rem; display: grid; gap: 4px; }
.scheda-evento__dati div { display: flex; gap: 8px; align-items: baseline; }
.scheda-evento__dati dt, .scheda-evento__etichetta { flex: 0 0 56px; font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); }
.scheda-evento__azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.scheda-evento__sposta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.scheda-evento__sposta .riga { align-items: flex-end; }
.scheda-evento__sposta .campo { flex: 1 1 86px; }

/* ─────────────── Telefono ─────────────── */

@media (max-width: 860px) {
    .calendario-pagina { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Il pannello è un cassetto che scorre da sinistra, come il menu. */
    .calendario-pannello {
        position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); height: 100vh; max-height: none; border-radius: 0;
        transform: translateX(-100%); transition: transform .2s ease; z-index: 60; box-shadow: var(--ombra-media); display: flex;
        background: var(--superficie); padding: 12px; overflow-y: auto; overscroll-behavior: contain; gap: 8px;
    }
    .calendario-pagina--pannello-chiuso .calendario-pannello { display: flex; }
    .calendario-pannello--aperto { transform: none; }
    .calendario-pannello__testa { display: flex; flex: 0 0 auto; }
    .calendario-pannello__chiudi { display: inline-flex; }
    .calendario-pannello__riquadro { border: 0; border-radius: 0; padding: 0; }
    .calendario-pannello__scelta { border-top: 1px solid var(--bordo); padding-top: 10px; flex: 0 0 auto; }
    .calendario-pannello__elenco { overflow: visible; }
    .calendario-viste__settimana { display: none; }
    .calendario-nuovo { display: none; }
    .calendario-fab {
        display: inline-flex; position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 56px; height: 56px;
        border-radius: 50%; font-size: 1.8rem; padding: 0; z-index: 40; box-shadow: var(--ombra-media);
    }
    .calendario-testata .intestazione-pagina__testo > p { display: none; }
    .calendario-azioni { gap: 6px; }
    .calendario-azioni .pulsante { min-height: 36px; padding: 6px 10px; }
    .calendario.griglia-ore { --altezza-ora: 52px; --larghezza-ore: 44px; --larghezza-colonna: 96px; }
    .griglia-ore__corpo { max-height: calc(100vh - var(--altezza-barra) - 236px); }
    .griglia-ore__evento { font-size: 11px; padding: 2px 4px 2px 6px; }
    .griglia-ore__evento-sotto { display: none; }
    .griglia-ore__intestazione { padding: 6px 4px; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
    .griglia-ore__nome { font-size: .72rem; max-width: 100%; }
    /* La scheda rapida è un foglio dal basso. */
    .scheda-evento {
        left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: 100%; border-radius: 14px 14px 0 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto;
    }
    .scheda-evento__azioni .pulsante { flex: 1 1 auto; justify-content: center; min-height: 40px; }
    .calendario--mese .calendario__oltre[hidden] { display: none; }
    .planning__giorno { grid-template-columns: 64px minmax(0, 1fr); padding: 10px 8px; }
}

@media print {
    .calendario-pannello, .calendario-fab, .calendario-azioni { display: none !important; }
    .calendario-pagina { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .calendario-corpo > .calendario, .calendario-pagina .calendario--mese, .calendario-pagina .planning { overflow: visible; }
    .griglia-ore__corpo { max-height: none; overflow: visible; }
}

/* La risposta del cliente dal link del messaggio (fase 5): il segno sulle strisce e la riga nelle schede. */
.griglia-ore__conferma { position: absolute; top: 2px; right: 16px; font-size: 12px; font-weight: 700; line-height: 1; }
.griglia-ore__conferma--1 { color: var(--ok-pieno, #2e7d32); }
.griglia-ore__conferma--2 { color: var(--allerta-pieno, #e65100); }
.calendario__chip .griglia-ore__conferma { position: static; margin-left: auto; flex: 0 0 auto; }
.conferma-cliente { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; margin-top: 6px; }
.conferma-cliente__etichetta { color: var(--testo-tenue); text-transform: uppercase; font-size: 11px; letter-spacing: .02em; }
.conferma-cliente__valore { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }

/* ─────────────── Le pose del Gantt: proposta tratteggiata, pallino della difficoltà ─────────────── */
/* Una posa proposta e non ancora concordata col cliente: contorno tratteggiato e fondo appena tinto (prompt «Pianificazione pose», § 5). */
.griglia-ore__evento--proposta, .calendario__chip--proposta {
    border: 1px dashed var(--colore, var(--bordo-forte)); border-left-width: 3px;
    background: color-mix(in srgb, var(--colore, var(--bordo-forte)) 7%, var(--superficie));
}
/* La difficoltà della posa, uguale in ogni posto in cui la posa compare: 1 verde facile, 2 giallo medio, 3 arancione difficile. */
.difficolta-posa { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .18); }
.difficolta-posa--1 { background: #43a047; }
.difficolta-posa--2 { background: #fbc02d; }
.difficolta-posa--3 { background: #fb8c00; }
.difficolta-posa__testo { display: inline-flex; align-items: center; gap: 6px; }

/* La proposta di posa col cliente già contattato: il telefono accanto al titolo. */
.calendario__contattato { color: var(--ok, #1f8f4e); display: inline-flex; align-items: center; margin-left: 2px; }
.calendario__contattato .icona { width: .85em; height: .85em; }