/* ============================================================
   TEAM E PERMESSI
   Le carte in cima sono filtri, non un riassunto; la tabella e' una
   griglia di righe alte abbastanza da contenere nome ed email; il
   pannello di modifica entra da destra e lascia la pagina dietro.
   ============================================================ */
.tm-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
.tm-card{min-width:0;padding:0;overflow:visible;}

/* ---- le quattro carte-filtro ---- */
.tm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.tm-kpis.due{grid-template-columns:repeat(2,minmax(0,1fr));}
.tm-kpi{all:unset;box-sizing:border-box;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:12px;min-width:0;
  transition:box-shadow .15s,border-color .15s;}
.tm-kpi:hover{box-shadow:var(--shadow-lift);}
.tm-kpi.on{border-color:var(--primary);}
.tm-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tm-kpi-top span{font-size:12.5px;font-weight:500;color:var(--neutral-ink);}
/* **La tinta arrivava e non la leggeva nessuno.** Ogni carta porta il
   suo colore in `--tint` (`dsTint`), ma qui non c'era una regola che lo
   usasse: quattro intenzioni diverse finivano tutte dello stesso
   arancione, quello ereditato dal pulsante. Il fondo tenue si ricava dal
   colore stesso invece di tenere una seconda variabile: una tinta sola,
   due mestieri — ed e' la coppia «fondo tenue piu' inchiostro forte»
   di §2, che di notte si gira da sola perche' i token si girano. */
/* Il selettore parte da `.tm-kpi-top` apposta: la riga qui sopra veste
   **tutti** gli `span` della testata, pastiglia dell'icona compresa, e
   con la stessa specificita' vinceva lei — le quattro icone erano
   davvero identiche, grigie, e il colore non c'entrava niente. */
.tm-kpi-top .tm-kpi-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:color-mix(in srgb,var(--tint,var(--primary)) 15%,transparent);color:var(--tint,var(--primary));}
.tm-kpi-ic svg{width:15px;height:15px;}
.tm-kpi-v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.tm-kpi-v b{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1;font-variant-numeric:tabular-nums;}
.tm-kpi-v small{font-size:12px;color:var(--muted);}
.tm-kpi.warn .tm-kpi-v b{color:var(--amber-dark);}
.tm-kpi.warn .tm-kpi-v small{color:var(--amber-dark);font-weight:600;}

/* ---- testata del pannello ---- */
.tm-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 16px;flex-wrap:wrap;}
.tm-ph h2{margin:0;font-size:16px;font-weight:700;}
.tm-ph p{margin:4px 0 0;color:var(--muted);font-size:12.5px;max-width:68ch;line-height:1.5;}
.tm-ph .end{display:flex;gap:8px;flex-wrap:wrap;}

/* Le tre viste sono link con il loro indirizzo, non bottoni: una scheda
   aperta si puo' mandare a qualcuno. */
/* `overflow-y:hidden` non e' pignoleria: la sottolineatura della scheda attiva
   sporge di un pixel sotto il bordo (`margin-bottom:-1px`), e quando un asse
   non e' `visible` l'altro diventa `auto` da solo. Risultato: una barra di
   scorrimento verticale per un pixel, che su una striscia alta 40px si vede
   solo come due freccette in un angolo. */
.tm-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;}
.tm-tabs a{border:none;background:none;padding:10px 4px 11px;margin-right:18px;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;text-decoration:none;}
.tm-tabs a svg{width:15px;height:15px;}
.tm-tabs a:hover{color:var(--text);}
.tm-tabs a.active{color:var(--primary-dark);border-bottom-color:var(--primary);}
.tm-tabs .n{font-size:10.5px;font-weight:700;background:var(--track);color:var(--neutral-ink);border-radius:6px;padding:1px 6px;}
.tm-tabs a.active .n{background:var(--primary-soft);color:var(--primary-dark);}

/* ---- barra dei filtri ---- */
.tm-toolbar{display:flex;align-items:center;gap:10px;padding:14px 20px;flex-wrap:wrap;}
.tm-seg{display:inline-flex;gap:2px;background:var(--track);border-radius:10px;padding:3px;overflow-x:auto;max-width:100%;}
.tm-seg button{border:none;background:transparent;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;
  color:var(--neutral-ink);cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center;font-family:inherit;}
.tm-seg button.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(46,33,25,.08);}
.tm-seg .n{font-size:10.5px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;}
.tm-seg button.active .n{color:var(--primary-dark);}
.tm-fchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;background:var(--primary-soft);
  color:var(--primary-dark);border-radius:8px;padding:4px 4px 4px 10px;}
.tm-fchip button{border:none;background:transparent;width:20px;height:20px;border-radius:5px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:inherit;}
.tm-fchip button:hover{background:rgba(46,33,25,.08);}
.tm-fchip svg{width:12px;height:12px;}
.tm-search{position:relative;margin-left:auto;}
.tm-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);}
.tm-search input{border:1px solid var(--border);background:var(--card);border-radius:10px;padding:7px 10px 7px 30px;
  width:220px;font-size:13px;font-family:inherit;color:inherit;}
.tm-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.tm-toolbar .aselect{flex:0 0 auto;}

/* ---- la tabella ---- */
.tm-scroll{overflow-x:auto;}
/* Otto colonne in un pannello largo mille pixel: le misure sono quelle
   minime per non tagliare le parole, e sotto la soglia la tabella scorre di
   lato invece di stringersi fino a diventare illeggibile. */
.tm-grid{min-width:700px;}
.tm-grid.access{min-width:1020px;}
.tm-tr{display:grid;grid-template-columns:minmax(200px,1.7fr) 96px minmax(130px,1fr) 140px 44px;
  align-items:center;column-gap:20px;padding:0 20px;}
/* I progetti visibili: fino a quattro segni, o tre e «+N», piu' il conto.
   Sotto ai 150px il conto finiva a puntini («5 pro…»). */
.tm-grid.access .tm-tr{grid-template-columns:minmax(160px,1.3fr) 92px 144px minmax(150px,1.1fr) 124px 132px 100px 44px;
  column-gap:18px;}
/* Senza questo una cella di griglia non scende sotto la larghezza del suo
   contenuto, e i puntini di sospensione non entrano mai in funzione: la
   tabella si allargava di qualche pixel e finiva tagliata. */
.tm-tr>div{min-width:0;}
.tm-thead{height:36px;background:var(--field);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.tm-th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);white-space:nowrap;}
.tm-tbody .tm-tr{min-height:62px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
.tm-tbody .tm-tr:last-child{border-bottom:none;}
.tm-tbody .tm-tr:hover{background:var(--hover);}
.tm-tbody .tm-tr.dim .tm-who,.tm-tbody .tm-tr.dim .tm-role{opacity:.7;}
.tm-tbody .tm-tr:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}

.tm-who{display:flex;align-items:center;gap:10px;min-width:0;}
.tm-who>div{min-width:0;}
.tm-who .nm{font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.tm-who .em{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Il bordo pieno dice "e' dello studio", il contorno "viene da fuori": si
   distinguono prima di leggere la colonna Tipo. */
.tm-av{width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-accent);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tm-av.ext{background:var(--card);color:var(--primary-dark);box-shadow:inset 0 0 0 2px var(--primary);}
.tm-av svg{width:15px;height:15px;}
.tm-arch{font-size:10px;font-weight:700;background:var(--track);color:var(--neutral-ink);border-radius:5px;padding:1px 6px;}
.tm-you{font-size:10px;font-weight:700;background:var(--primary-soft);color:var(--primary-dark);border-radius:5px;padding:1px 6px;}

.tm-role{display:inline-flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap;font-size:13px;}
.tm-role svg{width:14px;height:14px;color:var(--muted);}
.tm-role.none{color:var(--muted);font-weight:500;}

.tm-projs{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;}
/* Figli diretti: la pila dei segni e' anch'essa uno `span`, e con le regole
   del testo veniva tagliata e l'icona dentro al segno diventava grigia. */
.tm-projs>svg{width:14px;height:14px;color:var(--muted);flex-shrink:0;}
.tm-projs>span:not(.tm-stack){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--neutral-ink);}
.tm-projs.all>span{font-weight:600;color:var(--text);}
.tm-stack{display:inline-flex;flex-shrink:0;}
/* I segni dei clienti in fila, un poco sovrapposti: il bordo del colore
   della scheda li stacca l'uno dall'altro. */
.tm-stack .client-mark{width:20px;height:20px;box-shadow:0 0 0 2px var(--card);}
.tm-stack .client-mark svg{width:11px;height:11px;}
.tm-stack .client-mark+.client-mark,.tm-stack .tm-more{margin-left:-6px;}
.tm-stack .tm-more{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--track);color:var(--neutral-ink);font-size:10px;font-weight:700;box-shadow:0 0 0 2px var(--card);}

.tm-rate b{font-weight:700;font-variant-numeric:tabular-nums;}
.tm-rate small{display:block;font-size:11px;color:var(--muted);}
/* Il costo che manca non e' una cella vuota: e' un lavoro da fare, quindi ha
   la forma di un pulsante. */
.tm-setrate{border:1px dashed var(--amber);background:var(--amber-soft);color:var(--amber-dark);border-radius:7px;padding:4px 8px;
  font-size:11.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:inherit;}
.tm-setrate svg{width:12px;height:12px;}
.tm-setrate:hover{border-style:solid;}
.tm-ovn{display:inline-block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--primary-dark);}

.tm-last{font-size:12px;color:var(--neutral-ink);white-space:nowrap;}
.tm-last.never{color:var(--muted);}
.tm-acts{display:flex;justify-content:flex-end;}

.tm-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;}
.tm-empty.tall{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 24px;}
.tm-empty.tall svg{width:22px;height:22px;color:var(--dim);}
.tm-empty.tall b{color:var(--text);font-size:14px;}
.tm-empty.tall span{max-width:46ch;line-height:1.55;}

/* ---- paginazione ---- */

/* ---- matrice dei ruoli ---- */
.tm-matrix{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;min-width:860px;}
.tm-matrix col.first{width:300px;}
.tm-matrix th,.tm-matrix td{padding:9px 14px;border-top:1px solid var(--border);text-align:center;}
.tm-matrix th:first-child,.tm-matrix td:first-child{text-align:left;padding-left:20px;}
/* Il `th` dell'app scrive in maiuscolo, che qui e' sbagliato: queste
   intestazioni sono nomi di ruolo, non etichette di colonna. */
.tm-matrix thead th{padding:14px 10px;border-top:none;background:var(--card);vertical-align:top;font-weight:700;
  text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--text);}
.tm-matrix .first-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);vertical-align:bottom;}
.tm-matrix .rh-cell{display:flex;flex-direction:column;align-items:center;gap:5px;}
.tm-matrix .rh-ic{width:30px;height:30px;border-radius:9px;background:var(--track);color:var(--neutral-ink);
  display:flex;align-items:center;justify-content:center;}
.tm-matrix .rh-ic svg{width:15px;height:15px;}
.tm-matrix .rh-cell b{font-size:12.5px;font-weight:700;}
.tm-matrix .rcount{border:none;background:none;padding:2px 6px;border-radius:6px;font-size:11.5px;font-weight:600;
  color:var(--primary-dark);cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:inherit;}
.tm-matrix .rcount svg{width:12px;height:12px;}
.tm-matrix .rcount:hover{background:var(--primary-soft);}
.tm-matrix .rcount.none{color:var(--muted);font-weight:500;cursor:default;}
.tm-matrix .rcount.none:hover{background:none;}
.tm-matrix tr.grp th{background:var(--field);text-align:left;padding:7px 20px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.tm-matrix tbody tr:not(.grp):hover td{background:var(--hover);}
.tm-matrix td:first-child{font-weight:500;}
.tm-matrix td svg{width:16px;height:16px;}
.tm-matrix .yes{color:var(--primary);}
.tm-matrix .no{color:var(--dim);}
.tm-matrix .part{display:inline-block;background:var(--track);border-radius:6px;padding:2px 7px;font-size:11px;
  color:var(--neutral-ink);font-weight:600;}
.tm-note{display:flex;gap:8px;align-items:center;margin:0;padding:12px 20px;border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);}
.tm-note svg{width:14px;height:14px;flex-shrink:0;}

/* ---- registro ---- */
.tm-logday{padding:8px 20px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--field);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.tm-log{list-style:none;margin:0;padding:0;}
.tm-log li{display:flex;gap:12px;align-items:flex-start;padding:9px 20px;}
.tm-log li:hover{background:var(--hover);}
.tm-log .li{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:var(--track);color:var(--neutral-ink);}
.tm-log .li svg{width:14px;height:14px;}
.tm-log .li.k-access{background:var(--primary-soft);color:var(--primary-dark);}
.tm-log .li.k-cost{background:var(--amber-soft);color:var(--amber-dark);}
.tm-log .li.k-danger{background:var(--red-soft);color:var(--red-dark);}
.tm-log .tx{flex:1;min-width:0;line-height:1.45;font-size:12.5px;}
.tm-log .tx b{font-weight:600;}
.tm-log .ch{display:block;font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.tm-log time{font-size:11.5px;color:var(--muted);white-space:nowrap;}

/* ============================================================
   IL PANNELLO DI MODIFICA
   ============================================================ */
.modal.drawer.team{max-width:520px;padding:0;display:flex;flex-direction:column;}
.tm-dh{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.tm-dh h3{margin:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tm-dh p{margin:1px 0 0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tm-dh .icon-btn{margin-left:auto;flex-shrink:0;}
.tm-db{flex:1;overflow-y:auto;padding:4px 20px 20px;}
.tm-df{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border);
  background:var(--field);flex-shrink:0;}
.tm-df .sum{font-size:12px;color:var(--muted);margin-right:auto;}
.tm-df .sum.err{color:var(--red-dark);font-weight:600;}

.tm-sec{padding:18px 0;border-bottom:1px solid var(--border);}
.tm-sec:last-child{border-bottom:none;}
.tm-sech{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
/* Stessa misura dei titoletti con icona del resto dell'app: il quadratino e'
   il riquadro dell'icona piu' 5px di respiro per lato. */
.tm-sech h4{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;}
.tm-sech h4>svg{width:15px;height:15px;padding:5px;box-sizing:content-box;border-radius:8px;
  background:var(--primary-soft);color:var(--primary-dark);flex-shrink:0;stroke-width:2;}
.tm-sech h4 .info-tip{margin-left:-4px;}
.tm-sech h4 .info-tip svg{width:13px;height:13px;padding:0;background:none;border-radius:0;}
.tm-sech span{font-size:11.5px;color:var(--muted);}
.tm-help{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.45;}
.tm-db .req{color:var(--red-dark);}
.tm-db .lbl{display:block;font-size:12px;font-weight:600;color:var(--neutral-ink);margin:0 0 5px;}
.tm-db .lbl .info-tip{margin-left:5px;vertical-align:-2px;}
.tm-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;}
.tm-fg{margin-bottom:12px;}
.tm-fg:last-child{margin-bottom:0;}
/* Il simbolo sta dentro il campo, a destra del numero: cosi' si legge
   "40 €/h" come si direbbe, e il numero resta allineato con gli altri. */
.tm-money{position:relative;max-width:200px;}
.tm-money span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none;}
.tm-db .tm-money input{padding-right:40px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}

.tm-segfull{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--track);border-radius:10px;padding:3px;}
.tm-segfull button{border:none;background:transparent;padding:7px;border-radius:8px;font-weight:600;font-size:12.5px;
  color:var(--neutral-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;}
.tm-segfull button svg{width:14px;height:14px;}
.tm-segfull button.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(46,33,25,.08);}

.tm-roles{display:flex;flex-direction:column;gap:6px;}
.tm-rc{all:unset;box-sizing:border-box;display:flex;gap:11px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--border);border-radius:11px;cursor:pointer;}
.tm-rc:hover{background:var(--hover);}
.tm-rc.on{border-color:var(--primary);background:var(--primary-soft);}
.tm-rc .ri{width:30px;height:30px;border-radius:8px;background:var(--track);color:var(--neutral-ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tm-rc.on .ri{background:var(--primary);color:var(--on-accent);}
.tm-rc .ri svg{width:15px;height:15px;}
.tm-rc b{display:block;font-weight:600;font-size:13px;}
.tm-rc small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;line-height:1.4;}
.tm-rc .radio{margin-left:auto;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--dim);flex-shrink:0;margin-top:7px;}
.tm-rc.on .radio{border:5px solid var(--primary);}

.tm-caps{list-style:none;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--field);
  border:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;font-size:12px;}
.tm-caps li{display:flex;gap:6px;align-items:flex-start;color:var(--neutral-ink);}
.tm-caps li svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;}
.tm-caps li.off{color:var(--muted);}
.tm-caps li.off svg{color:var(--dim);}
.tm-caps li.on svg{color:var(--primary);}
.tm-caps .caps-h{grid-column:1/-1;font-weight:600;color:var(--text);margin-bottom:2px;}

.tm-info{display:flex;gap:8px;padding:10px 12px;border-radius:10px;background:var(--field);border:1px solid var(--border);
  font-size:12px;color:var(--neutral-ink);line-height:1.45;margin-top:10px;}
.tm-info svg{width:15px;height:15px;flex-shrink:0;color:var(--primary-dark);margin-top:1px;}
.tm-info.warn{background:var(--amber-soft);border-color:transparent;color:var(--amber-dark);}
.tm-info.warn svg{color:var(--amber-dark);}

.tm-picker{border:1px solid var(--border);border-radius:11px;overflow:hidden;}
.tm-picker .ps{position:relative;border-bottom:1px solid var(--border);}
.tm-picker .ps svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);}
.tm-picker .ps input{border:none;width:100%;padding:9px 10px 9px 30px;background:var(--field);font-size:13px;
  font-family:inherit;color:inherit;}
.tm-picker .ps input:focus{outline:none;}
.tm-plist{max-height:260px;overflow:auto;padding-bottom:6px;}
.pgroup-h{display:flex;align-items:center;gap:8px;padding:8px 12px 4px;font-size:12px;font-weight:600;color:var(--neutral-ink);}
/* «Tutto il cliente»: una casella, perche' e' uno stato che resta, non un
   gesto che spunta le righe una volta sola. */
.tm-whole{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--primary-dark);font-size:11.5px;
  font-weight:600;cursor:pointer;padding:2px 4px;border-radius:5px;}
.tm-whole:hover{background:var(--primary-soft);}
.tm-noproj{padding:0 12px 6px 40px;}
.pitem.via-client{cursor:default;}
.pitem.via-client .nm{color:var(--muted);}
.pitem.via-client .tm-chk{opacity:.55;cursor:default;}
.pitem{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 40px;cursor:pointer;font-size:13px;}
.pitem:hover{background:var(--hover);}
.pitem .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pitem .dt{font-size:11px;color:var(--muted);white-space:nowrap;}
.tm-chk{appearance:none;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--dim);background:var(--card);
  cursor:pointer;display:grid;place-items:center;margin:0;flex-shrink:0;}
.tm-chk:checked{background:var(--primary);border-color:var(--primary);}
.tm-chk:checked::after{content:"";width:4px;height:8px;border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);}

.tm-switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tm-switchrow b{font-weight:600;font-size:13px;}
.tm-switchrow small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;}
.tm-switch{appearance:none;width:36px;height:20px;border-radius:12px;background:var(--dim);position:relative;
  cursor:pointer;flex-shrink:0;transition:background .15s;margin:0;}
.tm-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--card);
  transition:transform .15s;box-shadow:0 1px 2px rgba(46,33,25,.25);}
.tm-switch:checked{background:var(--primary);}
.tm-switch:checked::after{transform:translateX(16px);}

.tm-presets{display:flex;gap:6px;flex-wrap:wrap;align-content:flex-start;}
.tm-chip{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:4px 9px;font-size:12px;
  font-weight:600;cursor:pointer;color:var(--neutral-ink);font-family:inherit;}
.tm-chip:hover{border-color:var(--primary);color:var(--primary-dark);}

/* ---- eccezioni di tariffa ---- */
.tm-ovlist{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.tm-ov{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:9px;font-size:12.5px;}
.tm-ov .client-mark{box-shadow:none;}
.tm-ov .sc{font-size:11px;color:var(--muted);}
.tm-ov b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;}
.tm-ovadd{border:none;background:none;color:var(--primary-dark);font-weight:600;font-size:12px;cursor:pointer;
  padding:4px 0;margin-top:8px;display:inline-flex;align-items:center;gap:5px;font-family:inherit;}
.tm-ovadd svg{width:13px;height:13px;}
.tm-ovform{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;margin-top:8px;align-items:center;}
.tm-ovform .tm-money{max-width:none;}

/* Ricalcola le ore passate: una scelta con una conseguenza, quindi la
   conseguenza sta scritta sotto la scelta. */
.tm-check{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;cursor:pointer;line-height:1.4;}
.tm-check input{margin-top:1px;}
.tm-check small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.45;}

.tm-rates{margin-top:10px;border:1px solid var(--border);border-radius:10px;background:var(--field);}
.tm-rates summary{list-style:none;cursor:pointer;padding:8px 12px;font-size:12px;font-weight:600;
  color:var(--neutral-ink);display:flex;align-items:center;gap:8px;}
.tm-rates summary::-webkit-details-marker{display:none;}
.tm-rates summary::before{content:"";width:0;height:0;border-left:5px solid var(--muted);
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s;}
.tm-rates[open] summary::before{transform:rotate(90deg);}
.tm-rates summary span{margin-left:auto;color:var(--muted);font-weight:500;}
.tm-rates ul{list-style:none;margin:0;padding:0 12px 10px;}
.tm-rates li{display:flex;align-items:baseline;gap:8px;font-size:12px;padding:3px 0;}
.tm-rates li b{font-variant-numeric:tabular-nums;min-width:62px;}
.tm-rates li span{color:var(--muted);}

.tm-hist{list-style:none;margin:0;padding:0;}
.tm-hist li{display:flex;gap:10px;padding:7px 0;font-size:12.5px;line-height:1.45;border-top:1px solid var(--border);}
.tm-hist li:first-child{border-top:none;}
.tm-hist li b{font-weight:600;}
.tm-hist time{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap;}

.tm-danger{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tm-danger b{font-weight:600;font-size:13px;}
.tm-danger small{display:block;color:var(--muted);font-size:11.5px;line-height:1.45;margin-top:2px;}

@media (max-width:1180px){ .tm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:980px){
  .tm-search{margin-left:0;width:100%;}
  .tm-search input{width:100%;}
}
@media (max-width:640px){
  .tm-kpis,.tm-kpis.due{grid-template-columns:1fr;}
  .tm-row2,.tm-segfull,.tm-caps{grid-template-columns:1fr;}
  .tm-ovform{grid-template-columns:1fr;}
}
.tm-help-tight{margin:-4px 0 10px;}
.tm-help-flat{margin:0;}
.tm-optional{font-weight:500;}

/* ---- le richieste d'accesso ----
   Una riga per richiesta, con il motivo scritto sotto: quello e' il dato
   su cui si decide, e nasconderlo dietro a un clic vorrebbe dire
   decidere senza. Le gia' decise restano sotto, spente. */
/* **La scheda non ha margini suoi** (`.tm-card{padding:0}`): ogni
   sezione si mette i propri venti pixel, e questa non lo faceva. Le
   righe finivano a filo del bordo della scheda — il loro contorno e
   quello della scheda si sovrapponevano in una riga doppia, e
   l'intestazione «In attesa» cominciava sul raggio dell'angolo, dove
   sembra tagliata. Era il difetto che si vedeva per primo, e non era
   nella riga: era nel fatto che la riga non aveva dove stare. */
.tm-reqs{display:flex;flex-direction:column;padding:4px 20px 18px;}
.tm-req-h{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:14px 0 4px;}
.tm-req-h:first-child{padding-top:2px;}

/* **Una lista di persone, non una pila di cornici.** Ogni riga era una
   scheda con il suo bordo: cinque cornici dentro a una cornice, che e'
   il «riquadri annidati dentro riquadri» da non fare. Qui e' un elenco,
   e un elenco si separa con una riga sottile — la stessa grammatica di
   `.pf-log-row` e di `.gd-row`.

   La griglia serve a tenere il **messaggio allineato al nome** e non
   rientrato sotto all'avatar: e' la citazione di quella persona, e una
   citazione comincia dove comincia chi l'ha detta. */
.tm-req{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:3px 12px;
  align-items:start;padding:14px 0;border-bottom:1px solid var(--line-soft);}
.tm-req:last-child{border-bottom:none;}
/* Quella su cui si sta decidendo si stacca dalle altre: il modulo del
   ruolo che si apre e' suo, e senza un fondo non si vede di chi sia. */
.tm-req.on{background:var(--primary-tint);border-radius:12px;padding:14px 12px;margin:0 -12px;
  border-bottom-color:transparent;}
.tm-req-who{grid-column:2;min-width:0;}
.tm-req-who b{display:block;font-size:13.5px;font-weight:700;}
.tm-req-who small{display:block;color:var(--muted);font-size:12px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;}
.tm-req-act{grid-column:3;grid-row:1;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.tm-req-when{grid-column:3;grid-row:1;font-size:12px;color:var(--muted);flex-shrink:0;padding-top:3px;}

/* **Il messaggio e' una citazione**, non un riquadro grigio. E' l'unica
   prova su cui si decide — di queste persone non c'e' nient'altro
   scritto da nessuna parte — e per un pezzo era la cosa meno visibile
   della riga: un fondo neutro sotto a tutto, con l'aria di una nota a
   pie' di pagina. Un filetto a sinistra e il testo alla misura in cui si
   legge: basta quello perche' l'occhio ci arrivi. */
.tm-req-msg{grid-column:2/-1;margin:6px 0 0;padding:1px 0 1px 12px;
  /* Il filetto e' il segno che quelle sono parole sue, quindi si deve
     vedere: con `--primary-soft` spariva del tutto sul fondo tenue della
     riga aperta, che e' proprio quella che si sta leggendo. */
  border-left:2px solid var(--primary-mid);
  font-size:13px;line-height:1.55;color:var(--neutral-ink);white-space:pre-wrap;max-width:76ch;}
/* «Non ha scritto niente» e' un'assenza, non una citazione: si dice piu'
   piano, e senza il filetto che annuncerebbe delle parole sue. */
.tm-req-msg.vuoto{border-left-color:transparent;padding-left:14px;color:var(--muted);font-style:italic;font-size:12.5px;}

.tm-req-role{grid-column:2/-1;display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap;}
.tm-req-role .lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}

/* **Chi bussa non e' ancora del team**, e il cerchio pieno di primario e'
   il segno di chi c'e' gia' dentro: qui e' vuoto, con il contorno. Le
   iniziali e non un'icona ripetuta — tre quadratini identici non
   distinguono nessuno, e queste righe parlano di persone. */
.tm-av.req{background:var(--card);color:var(--neutral-ink);box-shadow:inset 0 0 0 1.5px var(--border);}
.tm-av.req.vuoto{color:var(--muted);}
.tm-req.done{color:var(--muted);}
.tm-req.done .tm-req-who b{font-weight:600;color:var(--neutral-ink);}

@media (max-width:760px){
  /* L'avatar esce dalla griglia e le due colonne diventano una: a
     trecentonovanta pixel due pulsanti con il loro nome accanto a un
     nome e un indirizzo non ci stanno, e il messaggio nemmeno. */
  .tm-req{grid-template-columns:32px minmax(0,1fr);}
  .tm-req-act,.tm-req-when{grid-column:2;grid-row:auto;margin-top:8px;}
  .tm-req-act{justify-content:flex-start;}
  .tm-req-msg,.tm-req-role{grid-column:1/-1;}
}

/* ---- la password provvisoria, una volta sola ----
   Quello che si legge al telefono sta in chiaro e in grande: e' l'unico
   momento in cui quella stringa si vede, e trascriverla male vuol dire
   una seconda telefonata. Il carattere e' a spaziatura fissa perche' i
   gruppi si dettino a blocchi, come un numero. */
.tm-temp{margin:14px 0;padding:12px 14px;border-radius:10px;background:var(--field);border:1px solid var(--border);}
.tm-temp-row{display:flex;align-items:center;gap:10px;padding:5px 0;}
.tm-temp-row > span{flex:0 0 88px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.tm-temp-row code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--text);word-break:break-all;}
/* **La classe da sola qui non basta**: `.tm-temp-row code` pesa una
   classe piu' un elemento, `.tm-temp-pw` una classe sola, e a quel gioco
   vince la riga di sopra — la password usciva della stessa misura
   dell'indirizzo, cioe' esattamente il contrario di quello che questa
   finestra serve a fare. */
.tm-temp-row code.tm-temp-pw{font-size:17px;font-weight:600;letter-spacing:.5px;}
/* Il titolo con il suo disegno accanto: `.modal h2` non e' una riga
   flessibile, e l'icona finiva incollata alla prima lettera. */
.tm-temp-h{display:flex;align-items:center;gap:8px;}
.tm-temp-h svg{width:17px;height:17px;color:var(--primary-dark);flex:none;}
.tm-temp-row .icon-btn{margin-left:auto;flex:none;}

/* ---- i numeri del team sul telefono ----
   In fila, come le schede di un numero delle altre pagine: quattro schede
   impilate si prendevano la prima schermata prima delle persone. */
@media (max-width:640px){
  .tm-kpis{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-12px;padding:2px 12px 6px;}
  .tm-kpis::-webkit-scrollbar{display:none;}
  .tm-kpis > .tm-kpi{flex:0 0 74%;scroll-snap-align:start;}

  /* ---- le persone come schede (`team/mobile.js`) ----
     La forma e' `.m-card` del vestito comune; qui chi e' in cima, le tre
     pastiglie di tipo, ruolo e progetti, e il costo nel piede. */
  .tm-mseg a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
  .tm-mseg-n{font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
  .tm-mseg a.active .tm-mseg-n{color:var(--primary-dark);}
  /* Fuori dalla cornice la barra dei filtri non ha piu' da rientrare dal
     suo bordo: i venti pixel del desktop la staccavano dalle schede. */
  .tm-col > .tm-toolbar{padding:0;gap:8px;}
  .tm-col{gap:12px;}
  .tm-mlist{display:flex;flex-direction:column;gap:10px;}
  .tm-mlist > .m-card{margin:0;cursor:pointer;}
  .tm-mcard:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .tm-mcard .m-card-top{align-items:center;}
  .tm-mcard.dim .tm-mwho,.tm-mcard.dim .tm-av{opacity:.7;}
  .tm-mwho{display:flex;flex-direction:column;gap:2px;}
  .tm-mnm{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
  .tm-mwho small{font-size:11.5px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tm-mcard .tm-acts{margin:-10px -8px -10px -4px;}
  .tm-mchips{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0;}
  .tm-mchips .tm-projs{max-width:100%;}
  .tm-mrate{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;min-width:0;}
  .tm-mrate b{font-size:13px;color:var(--text);}
  .tm-mrate small{display:inline;}
  .tm-mcard .tm-last{flex:none;}
  /* Le altre viste restano nella loro cornice, con la spiegazione in
     cima: sul desktop sta nella testata del pannello. */
  .tm-mdesc{margin:0;padding:14px 16px 6px;font-size:12.5px;line-height:1.5;color:var(--muted);}
  /* Vanno a capo: a 360 «Aggiungi senza accesso» e «Invita persona» non
     stanno sulla stessa riga, e un pulsante non si stringe sotto al suo
     testo — la pagina scorreva di lato di otto pixel. */
  .tm-mfoot .end{display:flex;flex-wrap:wrap;gap:10px;}
  .tm-mfoot .btn{flex:1 1 140px;min-height:44px;justify-content:center;}
}
/* «Gestisci i mestieri»: un rimando, sotto alla tendina che li usa. */
.tm-link{display:inline-block;background:none;border:none;padding:0;margin-top:6px;font:inherit;font-size:12px;font-weight:600;color:var(--primary-dark);cursor:pointer;}
.tm-link:hover{text-decoration:underline;}