/* 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;}
.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;}

@media(max-width:900px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:relative;height:auto;}
  .main{padding:14px;}
  /* 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;}
}


/* ===== SCHEDA DI UN EVENTO =====
   Vive dentro #genericPopover, e va da bordo a bordo: la fascia in cima e'
   colorata, quindi il riquadro non puo' avere il suo solito margine interno.

   Il colore del cliente fa una cosa sola — la fascia — e non tinge mai un
   testo: con un cliente giallo il titolo spariva. Sul fondo tenue (quindici
   per cento sopra la carta) l'inchiostro resta quello di sempre, di giorno
   come di notte. */
#genericPopover:has(.cev){width:min(360px, calc(100vw - 20px));padding:0;}
/* La tinta della card viene dal cliente: arriva in `--tint`, e `--cc`
   la legge di qui invece che da un attributo `style`. */
.cev{--cc:var(--tint,var(--primary));}

.cev-hero{background:color-mix(in srgb, var(--cc) 15%, var(--card));
  border-bottom:1px solid color-mix(in srgb, var(--cc) 25%, transparent);
  padding:14px 12px 16px 18px;}
.cev-hero-top{display:flex;align-items:center;gap:12px;}
.cev-tile{width:46px;height:46px;border-radius:13px;font-size:14px;font-weight:800;letter-spacing:.2px;}
.cev-tile svg{width:20px;height:20px;}
.cev-tile.empty{background:var(--track);color:var(--neutral-ink);}
/* Chi un colore proprio non ce l'ha: fondo tenue e inchiostro forte della
   stessa famiglia, che al buio si rovesciano da soli. */
.cev-tile.mark.amber{background:var(--amber-soft);color:var(--amber-dark);}
.cev-hero-txt{flex:1;min-width:0;}
.cev-who{font-size:13px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cev-where{font-size:12px;color:var(--neutral-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cev-x{width:28px;height:28px;border:none;background:transparent;border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex-shrink:0;}
.cev-x:hover{background:color-mix(in srgb, var(--cc) 22%, var(--card));color:var(--text);}
.cev-x svg{width:15px;height:15px;}
.cev-title{margin:14px 0 8px;font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.2;
  color:var(--text);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;}

/* L'orario ha il peso di un titolo perche' e' la risposta che si cerca. */
.cev-time{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.cev-time > svg{width:15px;height:15px;color:var(--neutral-ink);flex-shrink:0;}
.cev-hours{white-space:nowrap;}
.cev-dash{color:var(--muted);font-weight:500;padding:0 3px;}
.cev-dur{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  padding:3px 8px;border-radius:7px;background:var(--card);color:var(--primary-dark);}
.cev-dur svg{width:12px;height:12px;}
/* `capitalize` metterebbe la maiuscola a ogni parola: «Mercoledì 16
   Settembre». La prima lettera basta, e la fa il CSS su quella sola. */
.cev-date{font-size:12.5px;font-weight:500;color:var(--neutral-ink);}
.cev-date::first-letter{text-transform:uppercase;}

/* Il contesto in celle: due per riga, e quello che in mezza riga non ci sta
   la prende tutta. Una riga vuota non esiste — «Progetto —» occupa lo stesso
   spazio di una piena e non dice niente. */
.cev-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 14px 0;}
.cev-cell{background:var(--field);border:1px solid var(--border);border-radius:10px;
  padding:8px 10px;min-width:0;text-align:left;}
.cev-cell.wide{grid-column:1 / -1;}
.cev-cell-k{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.cev-cell-k svg{width:12px;height:12px;flex-shrink:0;}
.cev-cell-v{display:flex;align-items:center;gap:6px;margin-top:3px;
  font-size:12.5px;font-weight:600;color:var(--text);min-width:0;overflow-wrap:anywhere;}
.cev-cell-v.none{color:var(--muted);font-weight:500;}
.cev-cell-v .badge{flex-shrink:0;}
button.cev-cell{width:100%;font-family:inherit;cursor:pointer;}
button.cev-cell:hover{background:var(--hover);border-color:var(--dim);}
button.cev-cell:hover .cev-cell-v{color:var(--primary-dark);}
button.cev-cell .cev-cell-k svg:last-child{margin-left:auto;}
.cev-cell-note .cev-cell-v{display:block;font-weight:500;color:var(--neutral-ink);
  line-height:1.45;white-space:pre-line;max-height:76px;overflow:auto;}
.cev-key{font-weight:700;color:var(--primary-dark);flex-shrink:0;}
.cev-muted{color:var(--muted);font-weight:500;}

/* Il valore e la sua eccezione nello stesso blocco: il numero a zero e il
   motivo per cui e' zero non possono stare in due riquadri diversi. */
.cev-val{padding:14px;}
.cev-val-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.cev-val-main{min-width:0;}
.cev-val-k{font-size:11.5px;color:var(--muted);}
.cev-amount{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);
  font-variant-numeric:tabular-nums;margin-top:1px;}
.cev-amount.off{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--dim);}
.cev-calc{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px;}
.cev-link{border:none;background:none;padding:0;font:inherit;font-weight:600;
  color:var(--primary-dark);cursor:pointer;}
.cev-link:hover{text-decoration:underline;}
.cev-switch{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  border:none;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--neutral-ink);}
.cev-bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden;margin-top:10px;}
.cev-bar i{display:block;height:100%;background:var(--primary);border-radius:3px;}
.cev-bar.over i{background:var(--amber);}
.cev-over{display:flex;align-items:center;gap:6px;margin-top:8px;
  font-size:11.5px;color:var(--amber-dark);line-height:1.4;}
.cev-over svg{width:13px;height:13px;flex-shrink:0;}

.cev-warn{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 10px 9px 11px;
  border-radius:10px;background:var(--amber-soft);color:var(--amber-dark);
  font-size:12px;line-height:1.35;}
.cev-warn > svg{width:15px;height:15px;flex-shrink:0;}
.cev-warn-t{flex:1;}
.cev-warn-b{background:var(--card);color:var(--amber-dark);
  border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);flex-shrink:0;}
.cev-warn-b:hover{background:var(--hover);}

.cev-rate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.cev-rate-f{display:flex;align-items:center;gap:0;height:32px;padding:0 10px;flex:1;min-width:110px;
  border:1px solid var(--border);border-radius:9px;background:var(--field);}
.cev-rate-f:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.cev-rate-f > span{font-size:12.5px;color:var(--muted);flex-shrink:0;}
.cev-rate-f input{border:none;background:transparent;outline:none;font:inherit;font-size:13px;
  font-weight:600;color:var(--text);width:100%;min-width:0;padding:0 6px;text-align:right;
  font-variant-numeric:tabular-nums;}
.cev-rate-scope{width:100%;font-size:11.5px;color:var(--muted);}

/* Le azioni seguono il rischio: quella di tutti i giorni e' piena, quelle
   che distruggono sono icone in fondo a destra. */
.cev-foot{display:flex;align-items:center;gap:8px;padding:12px 14px 14px;
  border-top:1px solid var(--border);}
.cev-foot .btn{flex:1;justify-content:center;min-width:0;}
.cev-iconbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);
  background:var(--card);display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;flex:0 0 auto;text-decoration:none;}
.cev-iconbtn:hover{background:var(--hover);color:var(--text);}
.cev-iconbtn svg{width:15px;height:15px;}
.cev-iconbtn.danger:hover{background:var(--red-soft);color:var(--red-dark);border-color:transparent;}

/* La conferma nasce dove stava il bottone che l'ha chiesta, al posto della
   barra delle azioni: la scheda non si sposta e non si apre niente sopra. */
.cev-confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;
  border-top:1px solid var(--border);background:var(--red-soft);}
.cev-confirm-t{flex:1;min-width:120px;font-size:12.5px;font-weight:600;color:var(--red-dark);}
/* Il pieno rosso con sopra l'inchiostro della superficie: di notte
   `--red-dark` e' chiaro e `--card` e' scuro, quindi la coppia si rovescia
   da sola invece di sparire come farebbe un bianco fisso. */
.cev-del{background:var(--red-dark);color:var(--card);flex:0 0 auto;}
.cev-del:hover{filter:brightness(1.08);}

/* ===== REGISTRARE DEL TEMPO =====
   Due colonne: a sinistra quello che si scrive, a destra quello che si
   guarda. Su schermo normale la finestra non scorre — una finestra che
   scorre nasconde proprio il totale, che e' la ragione per cui la guardi. */
.modal.te-modal{max-width:1020px;padding:0;overflow:hidden;display:flex;flex-direction:column;}
.te{display:flex;flex-direction:column;min-height:0;}
.te-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--border);}
.te-icon{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.te-icon svg{width:19px;height:19px;}
.te-headtext{min-width:0;flex:1;}
.te-headtext h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.3px;}
.te-ctx{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;margin-top:2px;}
.te-ctx svg{width:12px;height:12px;flex-shrink:0;}
.te-ctx span::first-letter{text-transform:uppercase;}
/* I due comandi in testata sono una coppia: uno da 28 e uno da 30 farebbe
   lo scalino. Fra loro il gap e' quello della testata. */
.te-head .icon-btn{width:30px;height:30px;}

.te-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:0;}
.te-col{padding:16px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;}
.te-col.te-side{border-left:1px solid var(--border);background:var(--field);}
.te-group{display:flex;flex-direction:column;gap:10px;}
.te-gtitle{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;margin:0;}
.te-gtitle svg{width:15px;height:15px;color:var(--primary);}
.te-divider{height:1px;background:var(--border);}
.te .form-row{margin-bottom:0;}
/* Cliente/Progetto e Ticket sono due righe, non un blocco solo: senza questo
   si toccano, perche' dentro la finestra le righe di form non hanno margine
   e il contenitore non aveva un passo suo. */
.te-who{display:flex;flex-direction:column;gap:10px;}
.te-big input{height:44px;font-size:15px;font-weight:600;}
.te-note{flex:1;display:flex;flex-direction:column;}
.te-note textarea{flex:1;min-height:70px;resize:none;}
/* Il campo sbagliato si segna, e il perche' compare sotto invece che in un
   messaggio che sparisce da solo. */
.te-err{display:none;font-size:11.5px;color:var(--red-dark);font-weight:500;margin-top:4px;}
.te .form-row.bad input, .te .form-row.bad .aselect{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft);}
.te .form-row.bad .te-err{display:block;}

/* ---- quando ---- */
.te-dayrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.te-dayrow .adate{flex:1;min-width:150px;}
.te-seg{display:inline-flex;gap:2px;background:var(--track);border-radius:9px;padding:3px;flex-shrink:0;}
.te-seg button{border:0;background:transparent;padding:0 10px;height:28px;border-radius:7px;font-size:12px;
  font-weight:600;color:var(--neutral-ink);cursor:pointer;font-family:inherit;}
.te-seg button:hover{color:var(--text);}
.te-seg button.on{background:var(--card);color:var(--primary-dark);box-shadow:var(--shadow);}

/* La barra del giorno: si trascina il blocco invece di scrivere due orari, e
   le registrazioni gia' salvate stanno li' accanto. */
.te-tlwrap{user-select:none;}
.te-tl{position:relative;height:46px;background:var(--card);border:1px solid var(--border);border-radius:10px;
  cursor:copy;touch-action:none;overflow:hidden;}
.te-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--border);}
.te-busy{position:absolute;top:7px;bottom:7px;border-radius:6px;overflow:hidden;cursor:help;
  background:color-mix(in srgb, var(--b, var(--dim)) 20%, var(--card));
  border:1px solid color-mix(in srgb, var(--b, var(--dim)) 45%, transparent);
  display:flex;align-items:center;padding:0 6px;}
.te-busy span{font-size:10.5px;font-weight:600;color:var(--neutral-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.te-now{position:absolute;top:0;bottom:0;width:2px;background:var(--red);border-radius:2px;pointer-events:none;}
.te-sel{position:absolute;top:4px;bottom:4px;min-width:16px;background:var(--primary);border-radius:8px;
  color:var(--on-accent);cursor:grab;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px color-mix(in srgb, var(--primary) 40%, transparent);}
.te-sel.dragging{cursor:grabbing;}
.te-sel.clash{background:var(--red);box-shadow:0 2px 8px color-mix(in srgb, var(--red) 40%, transparent);}
.te-sel-label{font-size:11.5px;font-weight:700;white-space:nowrap;pointer-events:none;}
.te-h{position:absolute;top:0;bottom:0;width:12px;cursor:ew-resize;display:flex;align-items:center;justify-content:center;}
.te-h::after{content:'';width:3px;height:16px;border-radius:2px;background:var(--on-accent);opacity:.75;}
.te-h.l{left:0;} .te-h.r{right:0;}
.te-scale{position:relative;height:14px;margin-top:3px;}
.te-scale span{position:absolute;transform:translateX(-50%);font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;}

/* `minmax(0,1fr)` e non `1fr`: senza, il selettore dell'orario impone la
   sua larghezza minima e la colonna della durata finisce fuori dalla
   finestra. */
.te-timerow{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) minmax(0,1fr);
  gap:8px;align-items:end;}
.te-timerow > .form-row{min-width:0;}
.te-timerow .tp{min-width:0;}
.te-arrow{height:38px;display:flex;align-items:center;justify-content:center;color:var(--dim);}
.te-arrow svg{width:14px;height:14px;}
.te-dur{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border-radius:10px;
  border:1px solid transparent;background:var(--primary-soft);min-width:0;}
.te-dur:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.te-dur > svg{width:15px;height:15px;color:var(--primary-dark);flex-shrink:0;}
/* La regola generica `.form-row input` di tasks.css e' piu' forte di una
   classe sola: il campo si riprende il suo aspetto da dentro il contenitore,
   se no si vede un riquadro dentro il riquadro. */
.te .te-dur input{flex:1;min-width:0;border:0;background:transparent;padding:0;height:auto;
  font-size:15px;font-weight:700;color:var(--primary-dark);font-variant-numeric:tabular-nums;outline:none;}
.te .te-dur input:focus{background:transparent;}
.te-chips{display:flex;gap:6px;flex-wrap:wrap;}
.te-chip{flex:1;min-width:52px;border:1px solid var(--border);background:var(--card);border-radius:8px;height:28px;
  padding:0 8px;font-size:12px;font-weight:600;color:var(--neutral-ink);cursor:pointer;
  font-variant-numeric:tabular-nums;font-family:inherit;}
.te-chip:hover{border-color:var(--dim);color:var(--text);}
.te-chip.on{background:var(--primary);border-color:var(--primary);color:var(--on-accent);}
/* Una sovrapposizione non blocca il salvataggio: si registra quello che e'
   successo davvero, anche se due cose si accavallano. Si dice, e basta. */
.te-clash{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;font-size:12px;
  background:var(--red-soft);color:var(--red-dark);font-weight:500;}
.te-clash svg{width:14px;height:14px;flex-shrink:0;}
.te-clash span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.te-clash button{border:0;background:var(--card);color:var(--red-dark);font-weight:700;cursor:pointer;
  padding:3px 8px;border-radius:6px;font-size:11.5px;white-space:nowrap;font-family:inherit;}

/* ---- valore ---- */
.te-valrow{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end;}
.te-bill{display:flex;align-items:center;gap:9px;height:38px;padding:0 11px;border:1px solid var(--border);
  border-radius:10px;background:var(--card);cursor:pointer;font-weight:600;font-size:12.5px;
  color:var(--neutral-ink);font-family:inherit;white-space:nowrap;}
.te-bill svg{width:15px;height:15px;color:var(--muted);}
.te-bill.on{color:var(--text);}
.te-bill.on svg{color:var(--primary-dark);}
.te-switch{width:34px;height:20px;border-radius:10px;background:var(--dim);position:relative;flex-shrink:0;
  transition:background .15s;}
.te-switch::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--card);transition:transform .18s;}
.te-bill.on .te-switch{background:var(--primary);}
.te-bill.on .te-switch::after{transform:translateX(14px);}
.te-rate{display:flex;align-items:center;gap:6px;height:38px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);padding:0 10px;}
.te-rate > span{color:var(--muted);font-size:13px;}
.te .te-rate input{border:0;background:transparent;outline:none;flex:1;min-width:0;padding:0;height:auto;
  font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.te-rate .te-suffix{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.te-rate:focus-within{border-color:var(--primary);}
.te-reset{width:18px;height:18px;border:0;border-radius:50%;background:transparent;color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.te-reset:hover{background:var(--track);color:var(--text);}
.te-reset svg{width:13px;height:13px;}
.te-ratefield.off{opacity:.45;}
.te-total{height:38px;border-radius:10px;background:var(--primary-soft);padding:0 11px;display:flex;
  flex-direction:column;justify-content:center;color:var(--primary-dark);overflow:hidden;}
.te-total b{font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.15;font-variant-numeric:tabular-nums;}
.te-total span{font-size:10.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.te-total.off{background:var(--track);color:var(--muted);}
.te-total.warn{background:var(--amber-soft);color:var(--amber-dark);}

/* Due gruppi ai due capi: a sinistra quello che distrugge, a destra quello
   che conclude. `margin-left:auto` regge anche da solo, se un domani lo slot
   di sinistra non venisse disegnato affatto. */
.te-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 20px;border-top:1px solid var(--border);}
.te-foot-l{display:flex;align-items:center;}
.te-foot-r{display:flex;align-items:center;gap:8px;margin-left:auto;}
/* `.te-keys` non ha piu' uno stile suo: e' un `.icon-btn` come la X. Resta la
   classe perche' e' da li' che lo schermo stretto lo nasconde. */

@media(max-width:1000px), (max-height:680px){
  .modal.te-modal{max-height:94vh;}
  .te{max-height:94vh;}
  .te-body{grid-template-columns:minmax(0,1fr);overflow-y:auto;min-height:0;}
  .te-col.te-side{border-left:none;border-top:1px solid var(--border);}
  .te-keys{display:none;}
}
@media(max-width:620px){
  .te-valrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .te-valrow .form-row:first-child{grid-column:1/-1;}
  .te-timerow{grid-template-columns:1fr 16px 1fr;}
  .te-durfield{grid-column:1/-1;}
  /* Il gruppo di destra scende intero su una riga sua: «Elimina» non deve
     mai ritrovarsi accanto a «Salva». */
  .te-foot{flex-wrap:wrap;}
  .te-foot-r{flex:1 1 100%;}
  .te-foot-r .btn{flex:1;justify-content:center;}
  /* In creazione lo slot vuoto lascerebbe una riga alta zero e il suo gap. */
  .te-foot-l:empty{display:none;}
}

/* ---- 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;}