/* La finestra per registrare del tempo (`pages/calendar-entry/`). Stava in `calendar.css` e si carica subito dopo di lui,
   nello stesso ordine: la cascata e' quella di prima. */
/* ===== 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;}
}