/* abcsocial — calendario.css
   Colonna clienti, griglia del mese, celle, chip, trascinamento, vista lista.
   Estratto dal prototipo senza modifiche ai valori. */

/* colonna clienti */
.split{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.side{position:sticky;top:92px;max-height:calc(100dvh - 112px);display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
/* bottone della tendina: solo telefono */
.side-toggle{display:none}
.side .sh{padding:14px;border-bottom:1px solid var(--line)}
.side .lista{overflow-y:auto;padding:8px}
.side .lista::-webkit-scrollbar{width:9px}
.side .lista::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:2px solid var(--paper);background-clip:content-box}
.side .sf{padding:10px 14px;border-top:1px solid var(--line)}
.crow{display:flex;align-items:center;gap:11px;padding:10px;border-radius:14px;width:100%;text-align:left;transition:background .12s}
.crow:hover{background:var(--canvas)}
.crow.on{background:var(--ink);color:#fff}
.crow.on .t3,.crow.on .t2{color:rgba(255,255,255,.72)}
.crow.on .prog{background:rgba(255,255,255,.18)}
.crow .n,.side-toggle .n{font-size:13.5px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.crow .m,.side-toggle .m{font-size:11.5px;line-height:1.2;margin-top:3px;font-weight:600}
.crow .prog{height:5px;margin-top:7px}
.crow .go{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;flex:none;color:var(--t3);opacity:0;transition:opacity .12s}
.crow:hover .go,.crow.on .go{opacity:1}
/* accessibilita': la freccia resta visibile anche quando la riga ha il fuoco da tastiera */
.crow:focus-visible .go{opacity:1}
.crow.on .go{color:#fff}
.crow .go:hover{background:rgba(127,127,127,.2)}
.fbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fbar button{padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;background:var(--canvas);color:var(--t2)}
.fbar button.on{background:var(--ink);color:#fff}

/* griglia del mese */
.cal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.cal .head,.cal .body{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal .dw{padding:13px 14px;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--t3);
  border-bottom:1px solid var(--line);background:linear-gradient(var(--dw1),var(--dw2))}
.cal .dw.we{color:var(--br)}
.cell{min-height:150px;min-width:0;padding:8px 7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:background .12s,box-shadow .16s;position:relative}
.body>.cell:nth-child(7n){border-right:0}
.cell.we{background:var(--we-bg)}
.cell:hover:not(.out){background:var(--cell-hover);box-shadow:inset 0 0 0 2px var(--br-s)}
/* trascinamento: cella di destinazione sotto il puntatore */
.cell.over{background:var(--br-s)!important;box-shadow:inset 0 0 0 2px var(--br)!important}
.cell.out{background:var(--cell-off);cursor:default;opacity:.55}
.cell.past{background:var(--cell-off)}
.cell .dh{display:flex;align-items:center;gap:7px}
.dn{font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:700;letter-spacing:-.03em;
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.cell.today .dn{background:linear-gradient(135deg,var(--br),var(--br2));color:#fff;box-shadow:0 6px 14px -6px var(--br)}
.cell.today{box-shadow:inset 0 0 0 2px var(--br)}
.oggi-tag{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--br)}

/* chip del contenuto */
.chip{display:block;padding:5px 7px 6px 11px;border-radius:11px;background:var(--paper);width:100%;text-align:left;min-width:0;
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,13,20,.05);overflow:hidden;position:relative;transition:transform .12s,box-shadow .16s}
.chip:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.chip.drag{opacity:.4}
.chip .rail{position:absolute;left:0;top:0;bottom:0;width:4px}
.chip .l1,.chip .l2{display:flex;align-items:center;gap:6px;min-width:0}
.chip .l2{margin-top:2px}
.chip .ora{font-family:"Bricolage Grotesque",sans-serif;font-size:11.5px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--txt);flex:none}
.chip .who{flex:1;font-size:10.5px;font-weight:700;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .fi{width:14px;height:14px;flex:none;display:grid;place-items:center}
.chip .fi svg{width:14px;height:14px}
.chip img.fi{width:16px;height:16px;border-radius:4px;object-fit:cover}
.chip .nn{flex:1;font-size:12px;font-weight:700;line-height:1.25;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.attesa{border-color:var(--attesa-line);background:var(--attesa-bg)}
.chip.modifiche{border-color:var(--red-line);background:var(--modifiche-bg)}
/* chip della giornata di registrazione */
.chip.ses{background:var(--ses-bg);border-color:var(--ses-line)}
.chip.ses .nn{color:var(--ink)}
.chip.ses .fi{color:var(--ink)}

.thumb{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff}
.thumb svg{width:15px;height:15px}
.stdot{width:8px;height:8px;border-radius:999px;flex:none}
.piu{border:1.5px dashed var(--line2);border-radius:11px;padding:5px;font-size:11.5px;color:var(--t3);font-weight:700;margin-top:auto;opacity:0;transition:opacity .12s;width:100%}
.cell:hover .piu{opacity:1}
/* accessibilita': il bottone "aggiungi" compare anche col fuoco da tastiera */
.piu:focus-visible{opacity:1}
.piu:hover{border-color:var(--br);color:var(--br);background:var(--br-s)}
.altri{font-size:11.5px;font-weight:700;color:var(--t2);padding:3px 6px;border-radius:8px;text-align:left;width:100%}
.altri:hover{background:var(--canvas)}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;margin-top:16px;align-items:center;color:var(--t2);font-weight:600}
.legenda .dot{width:10px;height:10px}
/* "vedi come cliente" accanto ad "apri progetto": serve solo dove la colonna
   clienti e' una striscia senza occhio e freccia (blocco 900px qui sotto). */
.solo-striscia{display:none}

/* vista lista / settimana */
.agenda .giorno{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.agenda .giorno:last-child{border-bottom:0}
.agenda .gd{position:sticky;top:96px;align-self:start}
.agenda .gd b{font-family:"Bricolage Grotesque",sans-serif;font-size:26px;letter-spacing:-.04em;display:block;line-height:1}
.agenda .gd span{font-size:12px;color:var(--t3);font-weight:700;text-transform:capitalize}
.agenda .gd.today b{color:var(--br)}
.agenda .items{display:flex;flex-direction:column;gap:8px}
.riga{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;width:100%;text-align:left;transition:background .12s;background:var(--paper);border:1px solid var(--line)}
.riga:hover{background:var(--canvas)}
.riga .thumb{width:46px;height:46px;border-radius:12px}
.riga .thumb svg{width:20px;height:20px}
.riga .hh{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:800;min-width:50px;font-variant-numeric:tabular-nums;line-height:1.1}
.riga .hh small{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:11px;color:var(--t3);font-weight:700}

@media (max-width:1080px){
  .split{grid-template-columns:minmax(0,1fr)}
  .side{position:static;max-height:none}
  .side .lista{max-height:330px}
}
@media (max-width:900px){
  /* Sul telefono la colonna clienti diventa una striscia orizzontale sopra al
     calendario: un elenco verticale alto 260px era uno scorrimento dentro lo
     scorrimento. Niente <details>: la colonna viene riscritta a ogni ridisegna
     (anche a ogni tasto della ricerca) e perderebbe lo stato aperto/chiuso.
     Occhio e freccia spariscono: per il cliente scelto ci sono i link nel
     sottotitolo (.solo-striscia); "Nuovo cliente" resta in Progetti.
     app.js porta in vista il cliente attivo dopo ogni disegno. */
  /* Elenco clienti a tendina verticale: chiuso c'e' solo il bottone con il
     cliente scelto, aperto compaiono ricerca e lista (scorre in verticale). */
  .side-toggle{display:flex;align-items:center;gap:11px;width:100%;padding:12px 16px;text-align:left}
  .side-toggle svg{flex:none;transition:transform .2s}
  .side.aperta .side-toggle svg{transform:rotate(180deg)}
  .side:not(.aperta) .sh,.side:not(.aperta) .lista,.side:not(.aperta) .sf{display:none}
  .side.aperta .sh{border-top:1px solid var(--line)}
  .side .lista{max-height:min(55dvh,420px);overflow-y:auto}
  .solo-striscia{display:inline}
  /* La testata del telefono e' alta 56px piu' il margine sicuro in alto. */
  .agenda .gd{top:calc(56px + var(--sat) + 8px)}
  .cell{padding:8px 7px;gap:6px}
  .riga{flex-wrap:wrap}
  .riga .col{flex:1 1 55%;min-width:140px}
  .riga .pill,.riga .p-go,.riga .p-bad,.riga .p-wait{flex:0 0 auto}
  /* Mese: calendario orizzontale, sette colonne da 140px che scorrono di lato
     dentro il riquadro (la pagina resta ferma). */
  .cal{overflow-x:auto;position:relative;-webkit-overflow-scrolling:touch}
  .cal .head,.cal .body{grid-template-columns:repeat(7,140px);min-width:980px}
  .cal .dw{padding:10px 10px}
  .piu{opacity:1}
  .agenda .giorno{grid-template-columns:64px minmax(0,1fr);gap:12px}
}
/* Col dito: bersagli piu' alti e testo delle chip leggibile senza zoom. */
@media (pointer:coarse){
  .fbar button{min-height:40px;padding:0 14px}
  .altri{padding:10px 6px}
  .piu{padding:11px}
  .chip{padding:9px 9px 10px 13px}
  .chip .nn{font-size:13.5px}
  .chip .ora{font-size:12.5px}
}
/* Occhio e freccia a 44px solo dove la colonna e' a tutta larghezza: nella
   colonna da 270px (tablet col dito sopra i 1080px) due bersagli da 44px
   lascerebbero ~90px al nome del cliente. */
@media (pointer:coarse) and (max-width:1080px){
  .crow .go{width:44px;height:44px}
}
/* Senza passaggio del mouse quello che compare "al passaggio" deve esserci
   sempre, e il sollevamento della chip resterebbe appiccicato dopo il tocco. */
@media (hover:none){
  .crow .go{opacity:1}
  .piu{opacity:1}
  .chip:hover{transform:none;box-shadow:0 1px 2px rgba(11,13,20,.05)}
}

/* Con piu' larghezza disponibile la colonna dei clienti puo' respirare: a 270px
   i nomi lunghi (Agriturismo Cascina Sole, Scuola di Danza Elan) finivano
   troncati anche quando lo spazio per scriverli c'era. */
@media (min-width:1760px){.split{grid-template-columns:310px minmax(0,1fr);gap:24px}}
@media (min-width:2000px){.split{grid-template-columns:340px minmax(0,1fr)}}

/* Miniatura vera (copertina o prima foto) al posto del segnaposto colorato:
   stessa misura e stesso raggio della .thumb che sostituisce. */
.thumb.thumbmedia{object-fit:cover;display:block;border:1px solid var(--line)}

/* Vista settimanale: sette colonne piene di chip, senza fasce orarie. */
.wk{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.wk-head,.wk-body{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.wk-head{border-bottom:1px solid var(--line);background:linear-gradient(var(--dw1),var(--dw2))}
.wk-dw{padding:10px 8px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--t3);text-transform:capitalize}
.wk-dw b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:20px;letter-spacing:-.03em;color:var(--ink);margin-top:2px}
.wk-dw.we{color:var(--br)}
.wk-dw.today b{display:inline-grid;place-items:center;min-width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,var(--br),var(--br2));color:#fff}
.wk-col{min-height:460px;min-width:0;padding:8px 7px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;cursor:pointer;position:relative;transition:background .12s,box-shadow .16s}
.wk-body>.wk-col:nth-child(7n){border-right:0}
.wk-col.we{background:var(--we-bg)}
.wk-col.past{background:var(--cell-off)}
.wk-col.today{box-shadow:inset 0 0 0 2px var(--br)}
.wk-col:hover{background:var(--cell-hover)}
.wk-col.over{background:var(--br-s)!important;box-shadow:inset 0 0 0 2px var(--br)!important}
.wk-col .chip{width:100%}
.wk-col .piu{margin-top:auto}
.wk-vuoto{padding:14px 4px;text-align:center}
.wk-gl{display:none}
@media (max-width:900px){
  /* Settimana: stesse sette colonne, scorrono di lato nel riquadro. */
  .wk{overflow-x:auto;position:relative;-webkit-overflow-scrolling:touch}
  .wk-head,.wk-body{grid-template-columns:repeat(7,140px);min-width:980px}
  .wk-col{min-height:320px}
}

/* Vista del giorno (calendario.js, giornata()) */
.gio-t{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gio-t b{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;letter-spacing:-.03em;text-transform:capitalize}
.gio-l{display:flex;flex-direction:column;gap:6px}
.gio-add{margin-top:14px;width:100%;justify-content:center}
@media (min-width:901px){.gio{max-width:760px}}
.wk-col:hover .piu{opacity:1}
@media (hover:none){.wk-col .piu{opacity:1}}