/* Calendario scheduler */
.cal-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:34px;}
.cal-toolbar .lbl{font-weight:700;font-size:14.5px;}
/* `--cal-h` la misura `calFitHeight()` in calendar.js: e' lo spazio che
   resta davvero sotto la testata. Il ripiego serve solo al primo fotogramma,
   prima che il JS abbia misurato. */
/* Due colonne e due righe: la barra degli strumenti sta sulla prima riga
   della colonna di sinistra, e la seconda riga si prende tutto il resto.
   Cosi' la colonna di destra parte da sola all'altezza giusta, senza il
   margine che prima veniva calcolato in JavaScript. */
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;
  grid-template-rows:auto minmax(0,1fr);column-gap:20px;align-items:stretch;
  --cal-h:calc(100vh - 154px);height:var(--cal-h);}
.cal-layout > .cal-toolbar{grid-column:1;grid-row:1;}
.cal-main{grid-column:1;grid-row:2;min-width:0;min-height:0;display:flex;flex-direction:column;}
.cal-layout > .cal-sidebar{grid-column:2;grid-row:2;}
.cal-layout.month{grid-template-rows:auto minmax(0,1fr);}
/* Nel mese la barra e la card stanno nella stessa colonna, e la card si
   adatta: le settimane si accorciano invece di uscire dallo schermo. */
.cal-layout.month .cal-main{min-height:0;}
/* Il calendario **dentro a un'altra pagina**: la scheda di un cliente e
   la sezione Attivita' di un progetto. Li' non c'e' il guscio a due
   colonne che gli da' l'altezza, e `.cal-scroll` e' `flex:1 1 auto` con
   `min-height:0` — senza un contenitore che la misuri, la griglia delle
   ventiquattro ore si srotolerebbe per qualche migliaio di pixel
   spingendo fuori schermo tutto quello che c'e' sotto. Un tetto in
   viewport: abbastanza per una giornata, poco abbastanza da restare una
   sezione fra le altre. */
.cal-embed{display:flex;flex-direction:column;height:min(62vh,620px);}

.cal-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;border:1px solid var(--border);
  border-radius:13px;background:var(--card);position:relative;}
/* La barra del calendario e' di marca, non quella del sistema: e' lunga
   quanto tutta la giornata e la si guarda spesso.

   Le due dichiarazioni non convivono: da Chrome 121 `scrollbar-width` vince
   e spegne i pseudo-elementi, che pero' sono l'unico modo per avere una
   barra davvero personalizzata. Quindi i pseudo-elementi valgono dove
   esistono, e `scrollbar-color` resta a Firefox, che li ignora. */
@supports not selector(::-webkit-scrollbar){
  .cal-scroll{scrollbar-width:thin;scrollbar-color:var(--primary) transparent;}
}
.cal-scroll::-webkit-scrollbar{width:11px;}
.cal-scroll::-webkit-scrollbar-track{background:transparent;}
.cal-scroll::-webkit-scrollbar-thumb{background:var(--primary);border-radius:99px;
  border:3px solid var(--card);background-clip:padding-box;min-height:44px;}
.cal-scroll::-webkit-scrollbar-thumb:hover{background:var(--primary-dark);background-clip:padding-box;}
.cal-scroll::-webkit-scrollbar-thumb:active{background:var(--primary-dark);background-clip:padding-box;}
/* Testata e fascia del giorno intero restano ferme insieme: sono due righe
   di uno stesso blocco appiccicato in cima, non due sticky che si rincorrono
   con un `top` da ricalcolare ogni volta che la testata cambia altezza. */
/* La testata sta sopra a tutto quello che scorre sotto di lei, anche a un
   evento sollevato dal puntatore (20) o in trascinamento (30). Con un
   valore piu' basso la card scorreva sopra ai nomi dei giorni. */
.cal-top{position:sticky;top:0;z-index:40;background:var(--card);}
.cal-grid-head{display:grid;background:var(--card);border-bottom:1px solid var(--border);}
.cal-head-cell{padding:10px 4px;text-align:center;border-left:1px solid var(--border);}
.cal-head-cell:first-child{border-left:none;}
.cal-head-cell .dow{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;}
.cal-head-cell .dnum{font-size:15px;font-weight:700;margin-top:2px;}
.cal-head-cell.today .dnum{color:var(--primary);}
/* Quello che dura tutto il giorno non sta in griglia: una colonna alta
   ventiquattr'ore coprirebbe l'intera giornata. Sta qui sopra, in una riga
   che si allunga solo se serve. */
.cal-allday{display:grid;border-bottom:1px solid var(--border);background:var(--card);}
.cal-ad-label{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);
  text-align:right;padding:7px 9px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-ad-cell{border-left:1px solid var(--border);padding:5px 4px;display:flex;flex-direction:column;
  gap:3px;min-width:0;}
.cal-ad-item{display:flex;align-items:center;gap:5px;min-width:0;width:100%;border:1px solid
  color-mix(in srgb, var(--tint, var(--primary)) 40%, transparent);border-radius:6px;
  background:color-mix(in srgb, var(--tint, var(--primary)) 13%, var(--card));
  padding:3px 7px;font-family:inherit;font-size:10.5px;font-weight:600;color:var(--text);
  cursor:pointer;text-align:left;}
.cal-ad-item:hover{background:color-mix(in srgb, var(--tint, var(--primary)) 22%, var(--card));}
.cal-ad-item.planned{border-style:dashed;}
.cal-ad-dot{width:6px;height:6px;border-radius:50%;background:var(--tint, var(--primary));flex-shrink:0;}
.cal-ad-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-ad-more{font-size:10px;font-weight:700;color:var(--muted);padding-left:4px;}
.cal-body-grid{display:grid;position:relative;}
.cal-time-col{border-right:1px solid var(--border);}
.cal-time-label{position:relative;height:var(--hrpx,56px);font-size:10px;color:var(--muted);text-align:right;padding-right:9px;transform:translateY(-6px);}
.cal-day-col{border-left:1px solid var(--border);position:relative;background-image:repeating-linear-gradient(to bottom, transparent, transparent calc(var(--hrpx,56px) - 1px), var(--border) calc(var(--hrpx,56px) - 1px), var(--border) var(--hrpx,56px));cursor:crosshair;}
.cal-day-col.weekend{background-color:var(--field);}
/* Le ore fuori dalla fascia lavorativa: spente, non chiuse. Ci si puo'
   ancora registrare sopra, ma l'occhio va prima alla giornata di lavoro. */
.cal-off{position:absolute;left:0;right:0;background:var(--bg);pointer-events:none;z-index:0;}
.cal-day-col.weekend .cal-off{background:var(--track);opacity:.55;}
.cal-now-line{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--red);z-index:8;pointer-events:none;}
.cal-now-line::before{content:'';position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--red);}
/* Il colore del cliente tinge tutto il blocco allo stesso modo — fondo e
   bordo, nessuna striscia a lato. Il testo resta l'inchiostro normale: con
   un fondo tenue il contrasto e' lo stesso per ogni cliente, anche per
   quelli con una tinta chiara.

   Il fondo non e' pieno. Gli eventi sovrapposti si accavallano invece di
   dividersi la colonna, e uno appoggiato sopra a un altro deve lasciar
   intravedere quello sotto, se no sparisce. Quello che guardi — hover, o
   quello che stai trascinando — torna pieno, cosi' si legge senza velo. */
/* La posizione di una card: `top` la scrive il codice dai minuti (e'
   l'unica cosa che dipende da `--hrpx`, che e' una preferenza), mentre
   l'altezza, lo scostamento della cascata e l'ordine si calcolano qui da
   due numeri — quanto dura (`--val`, in ore) e quanto e' rientrata
   (`--depth`). Prima erano quattro pezzi di un attributo `style`
   concatenati a mano. */
.cal-event{position:absolute;border-radius:8px;overflow:hidden;padding:5px 8px;
  --cal-cascade:min(20px, 13%);
  height:calc(var(--hrpx) * var(--val,0) - 2px);
  left:calc(2px + var(--depth,0) * var(--cal-cascade));right:2px;
  z-index:calc(2 + var(--depth,0));
  --ce-veil:color-mix(in srgb, var(--tint, var(--primary)) 17%, transparent);
  font-size:11.5px;line-height:1.3;cursor:grab;
  border:1px solid color-mix(in srgb, var(--tint, var(--primary)) 45%, transparent);
  background:linear-gradient(var(--ce-veil), var(--ce-veil)),
    color-mix(in srgb, var(--card) 89%, transparent);
  box-shadow:var(--shadow);user-select:none;touch-action:none;}
.cal-event:hover{box-shadow:var(--shadow-lift);z-index:20;
  border-color:color-mix(in srgb, var(--tint, var(--primary)) 70%, transparent);
  background:linear-gradient(var(--ce-veil), var(--ce-veil)), var(--card);}
.cal-event.dragging{opacity:.72;z-index:30;cursor:grabbing;
  background:linear-gradient(var(--ce-veil), var(--ce-veil)), var(--card);}
.cal-event .ce-title{font-weight:700;color:var(--text);white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.cal-event .ce-time{color:var(--neutral-ink);font-size:11px;font-weight:600;margin-top:1px;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.cal-event .ce-client{color:var(--muted);font-size:10.5px;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Mezz'ora o meno: orario e titolo su una riga sola, senza troncare il
   titolo a due lettere. */
.cal-event.tiny{padding:2px 7px;display:flex;align-items:center;}
.cal-event.tiny .ce-line{display:flex;align-items:baseline;gap:6px;min-width:0;width:100%;}
.cal-event.tiny .ce-time{margin:0;flex-shrink:0;font-size:10.5px;}
.cal-event.tiny .ce-title{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;font-size:11px;}
/* Il pianificato e' tratteggiato su tutti e quattro i lati: non e' ancora
   successo, e si vede dal bordo invece che da una striscia. */
.cal-event.planned{border-style:dashed;border-width:1.5px;}
.cal-resize-handle{position:absolute;left:0;right:0;height:8px;cursor:ns-resize;z-index:3;}
.cal-resize-handle.top{top:0;}
.cal-resize-handle.bottom{bottom:0;}
/* L'ombra di quello che stai disegnando: era di un indaco rimasto da una
   palette precedente, dentro un bordo arancione. */
.cal-ghost{position:absolute;border-radius:8px;background:var(--primary-soft);border:1.5px dashed var(--primary);pointer-events:none;z-index:15;padding:4px 7px;font-size:11px;color:var(--primary-dark);font-weight:600;}
/* Anche la colonna di destra sta dentro l'altezza misurata: quando non ci
   sta, scorre lei, non la pagina. */
.cal-sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow-y:auto;}
@supports not selector(::-webkit-scrollbar){
  .cal-sidebar{scrollbar-width:thin;scrollbar-color:var(--dim) transparent;}
}
.cal-sidebar::-webkit-scrollbar{width:8px;}
.cal-sidebar::-webkit-scrollbar-track{background:transparent;}
.cal-sidebar::-webkit-scrollbar-thumb{background:var(--dim);border-radius:99px;
  border:2px solid var(--bg);background-clip:padding-box;}
.cal-sidebar .card{padding:14px 14px 15px 14px;margin-bottom:0;border-radius:13px;}
.cal-sidebar .card-title{font-size:13.5px;margin-bottom:10px;}
.cal-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11px;text-align:center;}
.cal-mini-grid .dow{font-weight:700;color:var(--muted);padding:4px 0 6px 0;font-size:10px;}
.cal-mini-grid .day{padding:6px 0;border-radius:7px;cursor:pointer;min-height:25px;}
.cal-mini-grid .day:hover{background:var(--hover);}
.cal-mini-grid .day.today{background:var(--primary);color:var(--on-accent);font-weight:700;}
.cal-mini-grid .day.selected:not(.today){background:var(--primary-soft);color:var(--primary-dark);font-weight:700;}
.cal-mini-grid .day.empty{cursor:default;}
.day-summary-row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px;}
.day-summary-row:first-child{border-top:none;}
/* Stava scritto tre volte dentro l'attributo `style` di altrettante icone.
   Una regola sola, e le tre righe non possono piu' divergere. */
.cal-sum-ico{width:13px;height:13px;color:var(--muted);vertical-align:-2px;margin-right:6px;}
.cal-legend{display:flex;flex-direction:column;gap:7px;margin-top:4px;}
.cal-legend-item{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);}
.cal-legend-swatch{width:14px;height:10px;border-radius:3px;flex-shrink:0;background:color-mix(in srgb, var(--tint, var(--primary)) 22%, var(--card));border:1px solid color-mix(in srgb, var(--tint, var(--primary)) 55%, var(--card));}
.cal-legend-swatch.dashed{border-style:dashed;}
/* Anche il mese prende l'altezza misurata invece di un altro numero
   indovinato: `--cal-h` arriva da `.cal-layout`. */
.month-card{height:var(--cal-h, calc(100vh - 154px));min-height:360px;margin-bottom:0;
  display:flex;flex-direction:column;}
.month-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;font-size:11px;color:var(--muted);font-weight:700;text-align:center;flex:0 0 auto;text-transform:capitalize;}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(var(--month-rows, 5), minmax(0,1fr));gap:6px;flex:1;min-height:0;}
.month-cell{min-height:0;min-width:0;border:1px solid var(--border);border-radius:9px;padding:6px;background:var(--card);overflow:hidden;}
.month-cell.empty{background:transparent;border:none;}
.month-cell.today{border-color:var(--primary);}
.month-cell .num{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:4px;}
/* Stessa regola dei blocchi della settimana: il colore del cliente sta nel
   fondo tenue e nella riga a sinistra, il testo usa l'inchiostro normale. */
.month-event{background:color-mix(in srgb, var(--tint, var(--muted)) 14%, var(--card));
  color:var(--text);border:1px solid color-mix(in srgb, var(--tint, var(--muted)) 38%, transparent);
  border-radius:5px;padding:2px 5px;margin-bottom:2px;font-size:9.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.month-more{font-size:9.5px;color:var(--muted);}
.month-total{font-size:9.5px;color:var(--primary-dark);font-weight:700;margin-top:2px;}

/* Il guscio non si tocca da qui. Ci stavano `.app`, `.sidebar` e
   `.main`, e `tasks.css` — caricato per tutta l'app come questo — ne
   dava una versione diversa alla sua soglia: chi vinceva lo decideva
   l'ordine dei `<link>`, non chi aveva ragione. Adesso lo dice
   `base.css` una volta sola. */
@media(max-width:900px){
  /* Su schermo stretto le due colonne si impilano: un'altezza fissa qui
     taglierebbe la seconda, quindi la pagina torna a scorrere per intero. */
  .cal-layout{grid-template-columns:1fr;grid-template-rows:none;height:auto;}
  .cal-layout > .cal-toolbar, .cal-main, .cal-layout > .cal-sidebar{grid-column:1;grid-row:auto;}
  .cal-scroll{height:calc(100vh - 180px);height:calc(100dvh - 180px);min-height:460px;}
  .cal-sidebar{height:auto;overflow:visible;}
  .month-card{height:auto;min-height:calc(100vh - 172px);min-height:calc(100dvh - 172px);}
  .cal-sidebar{position:static;}
}

@media(min-width:901px) and (max-width:1280px){
  .cal-layout{grid-template-columns:minmax(0,1fr) 248px;gap:16px;}
  .cal-sidebar .card{padding:13px;}
  .cal-mini-grid{gap:2px;}
}

/* ---- Quello che non e' mai stato un dato ----
   Le colonne della griglia sono sette giorni piu' la fascia delle ore, e
   l'altezza sono le ventiquattro ore di `--hrpx`: due costanti che pero'
   stavano in un attributo `style` ricomposto a ogni disegno, perche' il
   markup le riceveva come stringhe gia' fatte. */
.cal-cols-week{grid-template-columns:52px repeat(7,minmax(0,1fr));}
.cal-cols-day{grid-template-columns:52px minmax(0,1fr);}
.cal-body-grid, .cal-body-grid .cal-day-col{height:calc(var(--hrpx) * 24);}
.cal-lbl-cap{text-transform:capitalize;}
.cal-mininav{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.cal-minititle{font-size:12.5px;text-transform:capitalize;}
.cal-todaybtn{width:100%;margin-top:10px;justify-content:center;}
/* Quante righe ha il mese: quattro, cinque o sei, mai altro. */
.month-grid.mg-r4{--month-rows:4;}
.month-grid.mg-r5{--month-rows:5;}
.month-grid.mg-r6{--month-rows:6;}