/* ============================================================
   MODULI: Servizi (step verticali), Google Drive per cliente,
   Contratti, Promemoria — stili coerenti col design system esistente.
   ============================================================ */

/* ---- Step verticali (catalogo Servizi, aggiungi servizio, sottoticket) ---- */
/* ---- Binario verticale ----
   Il gutter e' il diametro del nodo piu' lo spazio: un token solo da cui
   discende l'allineamento di tutta la colonna. */
.vstep{--vs-node:24px;--vs-gap:12px;--vs-seg:2px;
  list-style:none;margin:0;padding:0;}
.vstep-row{display:flex;gap:var(--vs-gap);align-items:stretch;}
.vstep-rail{display:flex;flex-direction:column;align-items:center;width:var(--vs-node);flex-shrink:0;}
.vstep-dot{width:var(--vs-node);height:var(--vs-node);border-radius:50%;flex-shrink:0;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  background:var(--card);border:2px solid var(--border);color:var(--muted);
  transition:border-color .12s,background .12s,box-shadow .12s;}
.vstep-dot i,.vstep-dot svg{width:12px;height:12px;}
.vstep-dot.clickable{cursor:pointer;}
.vstep-dot.clickable:hover{border-color:var(--primary);}

/* Fatto: nodo pieno. E' l'unico stato che riempie il cerchio, cosi' il
   progresso si conta a colpo d'occhio dalla lunghezza del pieno. */
.vstep-row.done .vstep-dot{background:var(--primary);border-color:var(--primary);color:var(--on-accent);}
/* In corso: l'unico con l'alone. Se ce ne sono due, il binario ha smesso
   di dire cosa stai facendo adesso. */
.vstep-row.current .vstep-dot{border-color:var(--primary);background:var(--card);
  color:var(--primary-dark);box-shadow:0 0 0 4px var(--primary-soft);}
/* Bloccato: tratteggiato e ambra. E' l'unico stato che chiede di uscire dal
   ticket e parlare con qualcuno, quindi non usa il colore del prodotto. */
.vstep-row.blocked .vstep-dot{border-style:dashed;border-color:var(--amber-dark);color:var(--amber-dark);background:var(--amber-soft);}

/* Il segmento: pieno dove il lavoro e' passato, tratteggiato dove deve
   ancora arrivare. */
.vstep-seg{flex:1;min-height:14px;width:var(--vs-seg);margin:3px 0;
  border-left:var(--vs-seg) dashed var(--border);}
.vstep-seg.done{border-left-style:solid;border-left-color:var(--primary);}
.vstep-seg.blocked{border-left-color:var(--amber);}

.vstep-body{flex:1;min-width:0;padding:1px 0 16px 0;}
.vstep-row:last-child .vstep-body{padding-bottom:0;}
.vstep-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:7px;
  margin:-3px -7px;padding:3px 7px;}
.vstep-line[onclick]{cursor:pointer;}
.vstep-line[onclick]:hover{background:var(--bg);}
.vstep-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);}
/* Arretra di un gradino, mai barrato: il barrato dice "cancellato". */
.vstep-row.done .vstep-title{color:var(--muted);font-weight:500;}
.vstep-row.blocked .vstep-title{color:var(--muted);}
.vstep-row.current .vstep-title{font-weight:700;}
.vstep-meta{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;}
.vstep-right{flex-shrink:0;display:flex;align-items:center;gap:6px;}
.vstep-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.vstep-row.current .vstep-sub{color:var(--primary-dark);font-weight:600;}
.vstep-row.blocked .vstep-sub{color:var(--amber-dark);font-weight:600;}
/* Il ritardo era una stringa rossa dentro la riga secondaria: gridava
   quanto un errore e non aveva una forma. Ora e' una pillola nella colonna
   di destra, nello stesso rosso tenue degli altri stati critici. */
.vstep-late{display:inline-flex;align-items:center;gap:4px;background:var(--red-soft);color:var(--red-dark);
  border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700;white-space:nowrap;cursor:help;}
.vstep-late svg{width:11px;height:11px;flex-shrink:0;}
/* Colonna fissa: con una larghezza minima le chiavi restano incolonnate
   anche fra IDEA-124 e NM-30. */
.vstep-key{min-width:62px;text-align:right;}
.vstep-num{font-size:11.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ---- Step editabili a card (editor catalogo Servizi) ---- */
.step-card{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:var(--card);}
.step-card-head{display:flex;align-items:center;gap:10px;padding:10px 12px;}
.step-grip{width:14px;height:14px;color:var(--dim);cursor:grab;flex-shrink:0;}
.step-num-badge{width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0;}
.step-title-input{flex:1;min-width:0;border:none;background:transparent;font-size:13.5px;font-weight:600;padding:4px 0;font-family:inherit;color:var(--text);}
.step-title-input:focus{outline:none;}
.step-card-body{padding:0 12px 12px 46px;}
.step-card-body input{width:100%;border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:inherit;}
.step-add-btn{width:100%;border:1.5px dashed var(--border);border-radius:10px;padding:10px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;}
.step-add-btn:hover{border-color:var(--primary);color:var(--primary-dark);}

/* ---- Anagrafica cliente: sezioni con editing inline ---- */
.pf-hint-bar{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);margin-bottom:14px;}
.pf-hint-bar svg{width:13px;height:13px;flex-shrink:0;}
.pf-hint-bar kbd{font-family:inherit;font-size:10.5px;font-weight:700;background:var(--track);border-radius:4px;padding:1px 5px;color:var(--text);}
/* Due colonne quando ci stanno davvero: queste sono righe etichetta-valore,
   e sotto ai 330px il valore va a capo due volte per riga. */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:start;}
.pf-col{display:flex;flex-direction:column;gap:16px;}
.pf-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px 16px 18px;}
.pf-head{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.pf-head-icon{width:28px;height:28px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pf-head-icon svg{width:15px;height:15px;}
.pf-head-title{font-size:13.5px;font-weight:700;}
.pf-head .btn{margin-left:auto;}

/* L'etichetta prende 150px dove ce n'e', e si stringe fino a 92 dove non
   ce n'e': in un riquadro stretto una colonna fissa lasciava al valore una
   cinquantina di pixel, e «Passaparola» andava a capo in mezzo. */
.pf-row{display:grid;grid-template-columns:minmax(92px,150px) minmax(0,1fr) 26px;align-items:center;gap:10px;min-height:38px;padding:5px 8px;margin:0 -8px;border-radius:9px;}
.pf-row.editable{cursor:pointer;}
.pf-row.editable:hover{background:var(--hover);}
.pf-row.editable:hover .pf-pencil{opacity:1;}
.pf-row.editing{background:var(--hover);}
.pf-label{font-size:11.5px;font-weight:600;color:var(--muted);}
/* `overflow-wrap` e non `word-break`: una parola si spezza solo se da sola
   non ci sta, non appena la riga si stringe. */
.pf-val{font-size:13px;font-weight:600;overflow-wrap:break-word;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.pf-val.empty{font-weight:500;color:var(--dim);}
.pf-pencil{opacity:0;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:opacity .12s;}
.pf-pencil svg{width:13px;height:13px;}
.pf-tag-inherit{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--track);border-radius:5px;padding:2px 6px;}
.pf-editor{grid-column:2/-1;display:flex;align-items:center;gap:6px;}
.pf-editor input,.pf-editor textarea{width:100%;border:1.5px solid var(--primary);border-radius:8px;padding:6px 9px;font-size:13px;font-family:inherit;color:var(--text);background:var(--card);outline:none;resize:vertical;}
.pf-row-stack{grid-template-columns:minmax(0,1fr) 26px;align-items:start;padding-top:8px;padding-bottom:8px;}
.pf-row-stack .pf-label{grid-column:1/-1;margin-bottom:3px;}
.pf-row-stack .pf-val{grid-column:1/2;}
.pf-row-stack .pf-editor{grid-column:1/-1;}
.pf-row-stack .pf-pencil{align-self:end;}

.pf-contact{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-top:1px solid var(--border);}
.pf-head + .pf-contact{border-top:none;padding-top:6px;}
.pf-contact-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0;}
.pf-contact-info{flex:1;min-width:0;}
.pf-contact-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;}
.pf-badge-primary{background:var(--primary-soft);color:var(--primary-dark);}
.pf-contact-role{font-size:11.5px;color:var(--muted);margin-top:2px;}
.pf-contact-line{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:5px;word-break:break-all;}
.pf-contact-line svg{width:12px;height:12px;color:var(--muted);flex-shrink:0;}
.pf-contact-empty{font-size:12.5px;color:var(--muted);padding:14px 0 6px 0;}
@media(max-width:1080px){.pf-grid{grid-template-columns:1fr;}}
@media(max-width:560px){.pf-row{grid-template-columns:minmax(0,1fr) 26px;}.pf-label{grid-column:1/-1;}.pf-val{grid-column:1/2;}.pf-editor{grid-column:1/-1;}}

/* ---- Dettaglio fattura (modale) ---- */
tr.row-clickable{cursor:pointer;}
tr.row-clickable:hover{background:var(--hover);}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px;}
.inv-head-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.inv-title{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-.2px;}
.inv-desc{font-size:12.5px;color:var(--muted);margin-top:4px;}
.inv-divider{border-top:1px solid var(--border);margin:0 -24px 18px -24px;}
.inv-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px;background:var(--field);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:18px;}
.inv-amount-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-bottom:3px;}
.inv-amount-value{font-size:18px;font-weight:700;}
.inv-progress{grid-column:1/-1;height:6px;background:var(--track);border-radius:5px;overflow:hidden;margin-top:12px;}
.inv-progress>div{height:100%;background:var(--primary);}
.inv-progress-label{grid-column:1/-1;font-size:11px;color:var(--muted);font-weight:600;margin-top:6px;}
.inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
.inv-meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.8px;padding:8px 0;border-top:1px solid var(--border);}
.inv-meta-row:nth-child(1),.inv-meta-row:nth-child(2){border-top:none;}
.inv-meta-row span{color:var(--muted);}
.inv-meta-row b{font-weight:700;text-align:right;}
.inv-meta-full{grid-column:1/-1;}
.inv-late{display:inline-block;font-size:10.5px;font-weight:700;background:var(--red-soft);color:var(--red-dark);border-radius:5px;padding:2px 6px;margin-left:7px;}
.inv-section-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:700;margin:20px 0 4px 0;padding-top:16px;border-top:1px solid var(--border);}
.inv-empty{font-size:12.5px;color:var(--muted);padding:12px 0 2px 0;}
.inv-pay{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-top:1px solid var(--border);}
.inv-section-title + .inv-pay{border-top:none;padding-top:8px;}
.inv-pay-icon{width:30px;height:30px;border-radius:9px;background:var(--green-soft);color:var(--green-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.inv-pay-icon svg{width:15px;height:15px;}
.inv-pay-info{flex:1;min-width:0;}
.inv-pay-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.inv-pay-amount{font-size:14px;font-weight:700;}
.inv-pay-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.inv-pay-note{font-size:12px;margin-top:5px;}
@media(max-width:560px){.inv-meta{grid-template-columns:1fr;}.inv-meta-row:nth-child(2){border-top:1px solid var(--border);}.inv-amounts{grid-template-columns:1fr;}}

/* ---- Richieste al cliente (ClientRequest) ---- */
.creq-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-top:1px solid var(--border);}
.creq-row:first-child{border-top:none;}
.creq-row.open{background:var(--field);}
.creq-icon{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
.creq-body{flex:1;min-width:0;}
.creq-label{font-weight:600;font-size:13px;margin-bottom:3px;}
.creq-meta{font-size:11.5px;color:var(--muted);}

/* ---- Documenti cliente: vista in stile Google Drive ---- */
.gd-conn{display:flex;align-items:center;gap:9px;background:var(--field);border:1px solid var(--border);border-radius:10px;padding:9px 13px;font-size:11.5px;color:var(--muted);margin-bottom:14px;}
.gd-conn svg{width:14px;height:14px;flex-shrink:0;color:var(--muted);}
.gd-conn b{color:var(--text);font-weight:700;}

.gd-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.gd-crumb{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:700;letter-spacing:-.2px;min-width:0;}
.gd-crumb a{color:var(--muted);cursor:pointer;}
.gd-crumb a:hover{color:var(--primary-dark);}
.gd-crumb svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.gd-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.gd-viewtoggle button{padding:5px 9px;}
.gd-viewtoggle button svg{width:14px;height:14px;}

.gd-section-label{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:10px;}
.gd-section-label span{background:var(--track);border-radius:20px;padding:1px 7px;letter-spacing:0;font-size:10px;}

.gd-grid{display:grid;gap:12px;}
.gd-grid.folders{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.gd-grid.files{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}

.gd-tile{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 12px;cursor:pointer;}
.gd-tile:hover{background:var(--hover);border-color:var(--primary);}
.gd-tile-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gd-tile-icon.folder{background:var(--primary-soft);color:var(--primary-dark);}
.gd-tile-icon svg{width:17px;height:17px;}
.gd-tile-body{flex:1;min-width:0;}
.gd-tile-name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-tile-sub{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-synced{width:14px;height:14px;color:var(--green);flex-shrink:0;}

.gd-file-tile{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;}
.gd-file-tile:hover{border-color:var(--primary);}
.gd-file-preview{height:104px;display:flex;align-items:center;justify-content:center;}
.gd-file-preview svg{width:34px;height:34px;opacity:.85;}
.gd-file-foot{display:flex;align-items:center;gap:8px;padding:9px 10px;border-top:1px solid var(--border);}
.gd-file-foot>svg{width:15px;height:15px;flex-shrink:0;}
.gd-file-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.gd-list{padding:4px 10px;}
.gd-row{display:flex;align-items:center;gap:12px;padding:var(--row-y) 6px;border-top:1px solid var(--border);cursor:pointer;}
.gd-row:first-child{border-top:none;}
.gd-row:hover{background:var(--hover);}
.gd-row-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gd-row-icon.folder{background:var(--primary-soft);color:var(--primary-dark);}
.gd-row-icon svg{width:15px;height:15px;}
.gd-row-name{flex:1;min-width:0;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-row-meta{width:190px;flex-shrink:0;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-row-date{width:70px;flex-shrink:0;font-size:11.5px;color:var(--muted);text-align:right;}
@media(max-width:720px){.gd-row-meta,.gd-row-date{display:none;}}

/* ---- Contratti ---- */
.ctr-row{display:flex;justify-content:space-between;align-items:center;font-size:12.8px;padding:8px 0;border-top:1px solid var(--border);gap:10px;flex-wrap:wrap;}
.ctr-row:first-child{border-top:none;}

/* ---- Promemoria / Reminder ---- */
/* Promemoria — la card «Prossimi passi».

   Queste regole erano in `sales.css` e sono cadute in un rifacimento:
   restavano solo le due tinte qui sotto, che da sole non bastavano a
   niente. Il titolo di un gruppo («Scaduti (3)») si leggeva come una
   riga qualsiasi, le righe non erano in fila e i pallini erano larghi
   zero, quindi invisibili. Rimesse com'erano, con i token al posto dei
   due colori scritti a mano. */
.fu-bucket-title{font-size:11px;text-transform:uppercase;letter-spacing:.3px;font-weight:700;color:var(--muted);padding:10px 2px 6px 2px;}
.fu-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--border);font-size:12.8px;}
.fu-row:first-child{border-top:none;}
.fu-row .fu-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.fu-row .fu-dot.overdue{background:var(--red);}
.fu-row .fu-dot.today{background:var(--amber);}
/* `--dim` e' il token dei pallini spenti: quello che non e' ancora ora. */
.fu-row .fu-dot.upcoming{background:var(--dim);}
.fu-row .fu-dot.compleanno{background:var(--pink);}
.fu-row .fu-dot.inattivita{background:var(--amber);}
.fu-actions{display:flex;gap:4px;margin-left:auto;}

/* ============================================================
   TEAM E PERMESSI
   ============================================================ */
.team-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.team-head .btn{flex-shrink:0;}
.team-note{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.5;max-width:62ch;}

.team-list{display:flex;flex-direction:column;}
/* Le colonne dipendono da cosa c'e' da mostrare: la persona sempre, il costo
   con l'economia visibile, ruolo/progetti/stato solo quando c'e' un server
   che gli accessi li conosce davvero. */
.team-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:14px;padding:calc(var(--row-y) + 3px) 0;border-bottom:1px solid var(--border);}
.team-row:last-child{border-bottom:none;}
.team-who{min-width:0;}
.team-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.team-mail{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.team-you{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--primary-dark);background:var(--primary-soft);padding:1px 6px;border-radius:100px;}
.team-role{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;}
.team-scope{font-size:12px;color:var(--muted);white-space:nowrap;}
.team-warn{color:var(--amber);font-weight:600;}
.team-state{font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;white-space:nowrap;}
.team-state.on{background:var(--primary-soft);color:var(--primary-dark);}
.team-state.off{background:var(--track);color:var(--muted);}
.team-actions{display:flex;gap:2px;}
.team-row.spenta{opacity:.55;}
/* Con l'economia visibile la riga porta anche il costo: una colonna in piu',
   in coda ai dati dell'accesso e prima dello stato. */
.team-eco .team-row{grid-template-columns:auto minmax(0,1fr) auto auto;}
.team-access .team-row{grid-template-columns:auto minmax(0,1fr) auto auto auto auto;}
.team-access.team-eco .team-row{grid-template-columns:auto minmax(0,1fr) auto auto auto auto auto;}
.team-cost{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:12.5px;white-space:nowrap;}
.team-cost b{font-weight:700;font-variant-numeric:tabular-nums;}
.team-cost-kind{font-size:11px;color:var(--muted);}
.team-cost-none{font-size:12px;color:var(--muted);font-weight:500;}

.team-legend{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:9px;}
.team-legend-row{display:flex;gap:10px;font-size:12.5px;line-height:1.5;}
.team-legend-row b{flex:0 0 118px;font-weight:700;}
.team-legend-row span{color:var(--muted);}

/* Elenco progetti assegnabili: scorre, perché possono essere molti. */
.team-projects{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow-y:auto;
  border:1px solid var(--border);border-radius:11px;padding:6px;}
.team-proj{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer;}
.team-proj:hover{background:var(--primary-soft);}
.team-proj input{width:15px;height:15px;flex-shrink:0;accent-color:var(--primary);}
.team-proj span{display:flex;flex-direction:column;min-width:0;}
.team-proj b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.team-proj-client{font-size:11.5px;color:var(--muted);}

@media (max-width:820px){
  .team-row,.team-eco .team-row,.team-access .team-row,.team-access.team-eco .team-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px;}
  .team-role,.team-scope,.team-cost{grid-column:2;}
  .team-cost{align-items:flex-start;}
  .team-actions{grid-column:3;}
}

/* ---- Profilo: testata, sezioni a due colonne, barra di salvataggio ----
   Niente tetto sulla larghezza: il Profilo e' una scheda di Impostazioni
   come le altre (`.set-wrap`, che tetto non ne ha), e con i suoi 1080px
   era l'unica a fermarsi prima del bordo, lasciando una fascia vuota a
   destra su uno schermo largo. I campi restano stretti dove devono, ma
   quello lo decide la colonna (`.pf-sec-r`), non il foglio intero. */
.pf-wrap{display:flex;flex-direction:column;gap:16px;min-width:0;}
/* `.pfu-card` e non `.pf-card`: quest'ultima e' la scheda modificabile di
   Contatti e Clienti, definita piu' su, e due regole con lo stesso nome in
   uno stesso foglio vuol dire che l'ultima vince su tutte e due le pagine
   — il padding della scheda contatto spariva, e tornava solo perche'
   `.ct-rec-l .pf-card` lo rimetteva. Qui la sezione del profilo utente ha
   il suo prefisso, e aggiunge al `.card` di base solo quello che le serve. */
.pfu-card{overflow:hidden;}

.pf-hero{display:flex;align-items:center;gap:18px;padding:20px;flex-wrap:wrap;}
.pf-avatar-wrap{position:relative;flex:0 0 auto;}
.pf-avatar{width:72px;height:72px;border-radius:50%;color:var(--on-accent);font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.5px;}
.pf-avatar-edit{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--neutral-ink);box-shadow:var(--shadow);}
.pf-avatar-edit:hover{color:var(--primary-dark);}
.pf-avatar-edit svg{width:14px;height:14px;}
.pf-hero-info{flex:1;min-width:220px;}
.pf-hero-info h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pf-hero-info p{margin:3px 0 0;color:var(--muted);font-size:12.5px;}
.pf-role{font-size:11px;font-weight:700;background:var(--primary-soft);color:var(--primary-dark);border-radius:6px;padding:3px 8px;display:inline-flex;align-items:center;gap:5px;}
.pf-role svg{width:12px;height:12px;}
.pf-hero-meta{display:flex;gap:22px;flex-wrap:wrap;}
/* Solo l'etichetta sopra il valore, non ogni span dentro la voce: cosi'
   scritto prendeva anche le pastiglie, le rendeva blocchi e mandava
   l'icona fuori asse rispetto al testo. */
.pf-hero-meta .hm>span{display:block;font-size:11px;color:var(--muted);}
.pf-hero-meta .hm b{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;}
.pf-bar{height:4px;border-radius:3px;background:var(--track);margin-top:6px;width:120px;overflow:hidden;}
.pf-bar i{display:block;height:100%;background:var(--primary);}

/* La tavolozza si apre dalla matita sull'avatar: otto tinte della palette,
   nessun selettore di colore libero che produrrebbe verdi fuori marchio. */
.pf-colors{display:none;gap:8px;align-items:center;padding:0 20px 18px 110px;flex-wrap:wrap;}
.pf-colors.open{display:flex;}
.pf-colors .lbl{margin:0 4px 0 0;}
.pf-sw{width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
.pf-sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--text);}

/* A sinistra cosa si sta impostando e perche', a destra i campi: la riga di
   spiegazione sta accanto alla sezione invece che sotto ogni campo. */
.pf-sec{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:22px 20px;border-top:1px solid var(--border);}
.pfu-card>.pf-sec:first-child{border-top:none;}
/* L'icona nel quadratino arancione, come ogni altra testata di scheda
   dell'app (`pj-panel-head`, `journalHead`): una sola grammatica. */
/* Stessa misura dei titoletti con icona del resto dell'app (.card-title
   .with-icon, per esempio nella panoramica cliente): il quadratino e' il
   riquadro dell'icona piu' 5px di respiro per lato, non una misura fissa
   scelta a parte. */
.pf-sec-l h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;}
.pf-sec-l h3 .ic{border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:5px;}
.pf-sec-l h3 svg{width:15px;height:15px;color:inherit;stroke-width:2;}
.pf-danger .pf-sec-l h3 .ic{background:var(--red-soft);color:var(--red-dark);}
.pf-sec-l p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.55;}
.pf-sec-r{max-width:600px;min-width:0;}
.pf-wrap .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
.pf-wrap .fg{min-width:0;}
.pf-wrap .fg.full{grid-column:1 / -1;}
.pf-wrap .lbl{display:block;font-size:12px;font-weight:600;color:var(--neutral-ink);margin:0 0 5px;}
.pf-wrap .req{color:var(--red-dark);}
.pf-wrap select.field{appearance:none;padding-right:28px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;}
.pf-wrap .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.pf-wrap .hint.err{color:var(--red-dark);font-weight:600;}
.pf-wrap .with-btn{display:flex;gap:8px;}
.pf-wrap .with-btn .field{flex:1;}
.pf-wrap .with-btn .tp{flex:1;}
.pf-link{border:none;background:none;color:var(--primary-dark);font-weight:600;cursor:pointer;padding:0;font-size:12.5px;display:inline-flex;align-items:center;gap:4px;font-family:inherit;}
.pf-link svg{width:13px;height:13px;}
.pf-link:hover{text-decoration:underline;}

.pf-days{display:flex;gap:6px;flex-wrap:wrap;}
.pf-day{width:38px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--card);font-weight:600;cursor:pointer;color:var(--neutral-ink);font-family:inherit;font-size:13px;}
.pf-day.on{background:var(--primary);border-color:var(--primary);color:var(--on-accent);}
.pf-day:hover:not(.on){background:var(--hover);}
.pf-summary{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--field);border:1px solid var(--border);font-size:12.5px;}
.pf-summary svg{width:16px;height:16px;color:var(--primary-dark);flex-shrink:0;}
.pf-ro{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-top:12px;flex-wrap:wrap;}
.pf-ro>div{line-height:1.35;}
.pf-ro b{font-size:13px;}
.pf-ro span{font-size:12px;color:var(--muted);display:block;}
.pf-ro b{font-weight:600;}

.pf-wrap .segfull{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--track);border-radius:10px;padding:3px;}
.pf-wrap .segfull button{border:none;background:transparent;padding:6px 12px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--neutral-ink);cursor:pointer;white-space:nowrap;font-family:inherit;}
.pf-wrap .segfull button.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(46,33,25,.08);}

.pf-srow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);flex-wrap:wrap;}
.pf-srow:first-child{border-top:none;padding-top:0;}
.pf-srow .ic{width:34px;height:34px;border-radius:9px;background:var(--track);color:var(--neutral-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pf-srow .ic.ok{background:var(--primary-soft);color:var(--primary-dark);}
.pf-srow .ic svg{width:16px;height:16px;}
.pf-srow .tx{flex:1;min-width:200px;}
.pf-srow .tx b{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.35;}
.pf-srow .tx small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.45;}

/* Le impostazioni non si salvano da sole: la barra dice quante cose sono
   cambiate e resta finche' non si decide. */
.pf-savebar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,160%);background:var(--inverse);color:var(--on-inverse);border-radius:14px;padding:8px 8px 8px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lift);transition:transform .22s ease;z-index:60;max-width:calc(100vw - 32px);}
.pf-savebar.show{transform:translate(-50%,0);}
.pf-savebar>span{font-size:13px;font-weight:600;margin-right:8px;white-space:nowrap;}
.pf-savebar>span small{font-weight:500;opacity:.7;margin-left:6px;}
.pf-savebar .btn-ghost{background:transparent;border-color:rgba(255,255,255,.25);color:inherit;}
.pf-savebar .btn-ghost:hover{background:rgba(255,255,255,.12);}

@media (max-width:1100px){
  .pf-sec{grid-template-columns:1fr;gap:14px;}
  .pf-colors{padding-left:20px;}
}
@media (max-width:560px){
  .pf-wrap .grid2{grid-template-columns:1fr;}
  .pf-savebar>span small{display:none;}
}

/* ---- Notifiche: sei eventi per due canali ---- */
.pf-ntable{width:100%;border-collapse:collapse;}
.pf-ntable th{font-size:11px;font-weight:600;color:var(--muted);text-align:center;padding:0 8px 8px;width:74px;}
.pf-ntable th:first-child{text-align:left;width:auto;padding-left:0;}
.pf-ntable td{padding:9px 8px;border-top:1px solid var(--border);text-align:center;vertical-align:middle;}
.pf-ntable td:first-child{text-align:left;padding-left:0;}
.pf-ntable td b{font-weight:600;display:block;}
.pf-ntable td small{color:var(--muted);font-size:11.5px;}
.pf-switch{appearance:none;width:34px;height:20px;border-radius:12px;background:var(--dim);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;margin:0;vertical-align:middle;}
.pf-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);}
.pf-switch:checked{background:var(--primary);}
.pf-switch:checked::after{transform:translateX(14px);}
.pf-switch:disabled{opacity:.45;cursor:not-allowed;}
.pf-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--field);border:1px solid var(--border);font-size:12.5px;line-height:1.5;}
.pf-note svg{width:16px;height:16px;color:var(--primary-dark);flex-shrink:0;margin-top:1px;}
/* Quello che si vede ma non e' ancora collegato lo dice una pastiglia, non
   un pulsante spento senza spiegazione. */
.pf-soon{margin-left:2px;}

/* ---- Sicurezza ---- */
.pf-panel{padding:12px;border-radius:10px;background:var(--field);border:1px solid var(--border);margin:0 0 12px 46px;}
.pf-panel-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.pf-strength{height:4px;border-radius:3px;background:var(--track);overflow:hidden;margin-top:6px;}
.pf-strength i{display:block;height:100%;transition:width .2s,background .2s;}
.pf-tfa{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.pf-tfa-tx{flex:1;min-width:220px;}
.pf-tfa-tx b{font-weight:600;}
/* Le tue attività nel registro: righe corte, una sotto l'altra. */
.pf-log{max-height:52vh;overflow:auto;margin-top:6px;}
.pf-log-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);}
.pf-log-row:last-child{border-bottom:none;}
.pf-log-row svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.pf-log-row .tx b{display:block;font-size:13px;font-weight:600;}
.pf-log-row .tx small{color:var(--muted);font-size:11.5px;}

/* I codici di recupero: si leggono una volta e si copiano a mano, quindi
   stanno larghi e in colonne, non in un paragrafo. */
.pf-recovery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px;}
.pf-recovery code{background:var(--field);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;font-size:13px;letter-spacing:1px;text-align:center;}
.pf-code{letter-spacing:6px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;}
.pf-sessions{margin-top:8px;}
.pf-sess{display:flex;align-items:center;gap:10px;padding:8px 0;}
.pf-sess svg{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
.pf-sess .tx{flex:1;min-width:0;}
.pf-sess .tx b{font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:6px;}
.pf-sess .tx small{display:block;color:var(--muted);font-size:11.5px;}
.pf-here{font-size:10.5px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);border-radius:5px;padding:1px 6px;}

/* ---- Dati e account ---- */
.pf-drow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--border);flex-wrap:wrap;}
.pf-drow:first-child{border-top:none;padding-top:0;}
.pf-drow b{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pf-drow small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;max-width:56ch;line-height:1.45;}
.btn-danger{background:var(--red-soft);color:var(--red-dark);border:none;}
.btn-danger:disabled{opacity:.55;cursor:not-allowed;}

@media (max-width:560px){
  .pf-panel{margin-left:0;}
}

/* Le quattro tinte dei promemoria. Erano un token composto da
   `reminderColor()` e infilato in un attributo `style`, in due punti
   distanti fra loro; qui la tinta si dichiara una volta e la leggono sia
   il pallino della cronologia sia l'icona dell'elenco. */
.rm-k-compleanno{--rm-tint:var(--pink);}
.rm-k-inattivita{--rm-tint:var(--amber-dark);}
.rm-k-rinnovo{--rm-tint:var(--primary-dark);}
.rm-k-altro{--rm-tint:var(--violet);}
.timeline-item .dot.rm-tinted{background:var(--rm-tint,var(--violet));}
.rm-ico{width:12px;height:12px;color:var(--rm-tint,var(--violet));margin-right:4px;vertical-align:-1px;}

/* ---- Panoramica cliente: le misure che stavano nel markup ---- */
.cl-pinnote{font-size:12.8px;padding:6px 0;}
.cl-pinico{width:12px;height:12px;color:var(--amber-dark);}
.cl-headacts{display:flex;gap:6px;}
.cl-minipct{font-size:11px;color:var(--muted);}
.cl-actbar{display:flex;justify-content:flex-end;margin-bottom:12px;}
.cl-progcell{width:80px;margin-bottom:0;}
.cl-dim{color:var(--muted);}

/* ---- Spese: il segno di un numero e' una classe ---- */
/* Il rosso e' per le perdite vere; una quota non fatturata al cliente non
   e' una perdita, e' un costo assorbito, quindi resta grigia. */
.exp-neg{color:var(--red-dark);}
.exp-pos{color:var(--primary-dark);}
.exp-off{color:var(--muted);}
.exp-urgent{color:var(--red-dark);font-weight:700;}
.exp-outcome{font-size:11px;font-weight:600;color:var(--muted);}
.exp-outcome.exp-neg{color:var(--red-dark);}

.gd-freelist{max-height:320px;overflow:auto;}
.gd-nofree{font-size:13px;color:var(--muted);}
.gd-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.exp-amtsub{font-size:11px;color:var(--muted);font-weight:600;}
.exp-amount.exp-neg{color:var(--red-dark);}

/* I cinque riquadri della scheda cliente: erano due token a testa, dentro
   all'elenco che li descrive, e finivano in un attributo `style`. */
.cl-link{color:var(--primary);}
.cl-contact{font-size:12.5px;color:var(--muted);}
.cl-tabs{margin-bottom:18px;width:fit-content;}
.cl-econ-neg{color:var(--red-dark);}
.cl-econ-pos{color:var(--primary-dark);}
.inv-amount-value.cl-econ-pos{color:var(--primary-dark);}
.inv-pay-icon.inv-planned{background:var(--track);color:var(--neutral-ink);}
.cl-cardtop{display:flex;gap:9px;align-items:center;}

.fu-main{flex:1;cursor:pointer;min-width:0;}
.fu-when{font-size:11px;color:var(--muted);}
.tmr-link{color:var(--primary);}
.tmr-ring{width:30px;height:30px;margin:0 auto 10px auto;display:block;}
.tmr-stop{background:var(--on-accent);color:var(--primary);justify-content:center;width:100%;}
.cl-actbar-right{display:flex;justify-content:flex-end;margin-bottom:12px;}
.cl-reqacts{display:flex;gap:4px;flex-shrink:0;}
.cl-jlink{color:var(--primary-dark);}
.cl-wizacts{display:flex;gap:9px;margin-left:auto;}
.ctr-gap{margin-top:26px;}
.cred-hint{font-size:13px;color:var(--muted);}

/* ---- scegliere una cartella dal Drive collegato ----
   Le briciole qui sono pulsanti e non link: non portano da nessuna parte,
   rileggono da Google. Stessa aria di quelle del navigatore, perche' e'
   la stessa idea. */
.gd-cr{border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gd-cr:hover{color:var(--primary-dark);}
.gd-cr:last-child{color:var(--text);}
.gd-sep{color:var(--dim);flex-shrink:0;}
.dr-pick-list{max-height:270px;overflow:auto;margin:12px 0 4px;border:1px solid var(--border);border-radius:12px;}
.dr-pick{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-bottom:1px solid var(--line-soft);}
.dr-pick:last-child{border-bottom:none;}
.dr-pick.on{background:var(--primary-tint);}
.dr-pick-main{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:9px 8px;border:0;
  background:none;font:inherit;color:var(--text);text-align:left;cursor:pointer;border-radius:9px;}
.dr-pick-main:hover:not(:disabled){background:var(--hover);}
.dr-pick-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dr-pick-main svg{width:16px;height:16px;color:var(--primary-dark);flex-shrink:0;}
/* Gia' collegata: si vede, ma non si sceglie — riprovarci darebbe un 409
   («radici sovrapposte») senza far capire perche'. */
.dr-pick.gia .dr-pick-main{color:var(--muted);cursor:default;}
.dr-pick.gia .dr-pick-main svg{color:var(--dim);}
.dr-pick-main em{font-style:normal;font-size:11.5px;color:var(--muted);flex-shrink:0;margin-left:auto;}
/* Cosa si sta per collegare, scritto sempre: senza, si preme «collega» e
   non si sa su cosa. */
.dr-pick-sel{display:flex;align-items:center;gap:8px;margin:10px 0 14px;padding:10px 12px;
  border-radius:10px;background:var(--field);font-size:12.5px;color:var(--neutral-ink);}
.dr-pick-sel svg{width:15px;height:15px;color:var(--primary-dark);flex-shrink:0;}

/* Le cartelle collegate, nelle impostazioni: la risposta alla domanda
   «cosa vede il gestionale del mio Drive?», che prima si poteva dare solo
   aprendo i clienti uno per uno. */
.dr-roots{display:flex;flex-direction:column;gap:2px;margin-top:10px;}
.dr-root{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);
  border-radius:11px;background:var(--card);}
.dr-root > svg{width:16px;height:16px;color:var(--primary-dark);flex-shrink:0;}
.dr-root-tx{flex:1;min-width:0;}
.dr-root-tx b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dr-root-tx small{display:block;color:var(--muted);font-size:11.5px;}
/* Una cartella ferma: chi l'aveva collegata non ha piu' un Drive, oppure
   la cartella di la' non risponde. Si vede dalla riga, con il motivo
   sotto al nome — il fondo ambra e non rosso perche' non e' un guasto
   dell'app: e' una cosa da sistemare, e si sistema ricollegandola. */
.dr-root.is-stuck{border-color:var(--amber);background:var(--amber-soft);}
.dr-root-stuck{color:var(--amber-dark);}

/* ---- il passo da fare, quando l'account e' collegato ma non c'e'
   ancora nessuna cartella ----
   Non e' un avviso: e' il lavoro, e ha l'aria del lavoro. Prima era un
   riquadro identico a quello dello stato, attaccato sotto, e chi
   guardava vedeva due note uguali senza capire quale fosse la cosa da
   fare. */
.dr-next{display:flex;gap:13px;align-items:flex-start;margin-top:14px;padding:15px 16px;
  border:1px solid var(--primary-mid);border-radius:13px;background:var(--primary-soft);}
.dr-next .ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:10px;background:var(--card);color:var(--primary-dark);}
.dr-next .ic svg{width:17px;height:17px;}
.dr-next .tx{min-width:0;}
.dr-next b{display:block;font-size:13.5px;color:var(--primary-deep);}
.dr-next p{margin:5px 0 11px;font-size:12.5px;line-height:1.5;color:var(--neutral-ink);}

/* L'intestazione dell'elenco: quante ce ne sono, e il modo di aggiungerne
   un'altra. Il pulsante e' tenue perche' il lavoro grosso e' gia' fatto. */
.dr-roots-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);}

/* «Ricollega»: una riga di servizio, staccata da quello che si fa ogni
   giorno, con accanto la frase che dice quando serve. */
.dr-spare{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line-soft);}
.dr-spare .hint{margin:0;}

/* La barra di scorrimento dell'elenco delle cartelle, con l'arancione
   dell'app. Stesso accorgimento del calendario: 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){
  .dr-pick-list{scrollbar-width:thin;scrollbar-color:var(--primary) transparent;}
}
.dr-pick-list::-webkit-scrollbar{width:10px;}
.dr-pick-list::-webkit-scrollbar-track{background:transparent;}
.dr-pick-list::-webkit-scrollbar-thumb{background:var(--primary);border-radius:99px;
  border:3px solid var(--card);background-clip:padding-box;min-height:36px;}
.dr-pick-list::-webkit-scrollbar-thumb:hover{background:var(--primary-dark);background-clip:padding-box;}

/* L'autorizzazione caduta: un avviso con il rimedio dentro, e si vede
   **solo quando serve**. Prima «ricollega» stava li' sempre con accanto
   scritto «serve solo se e' scaduta»: un pulsante che chiede di essere
   ignorato quasi ogni giorno e' un pulsante che confonde. */
.dr-broken{display:flex;gap:13px;align-items:flex-start;margin-top:16px;padding:14px 16px;
  border-radius:13px;background:var(--amber-soft);color:var(--amber-dark);}
.dr-broken .ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:10px;background:var(--card);}
.dr-broken .ic svg{width:16px;height:16px;}
.dr-broken .tx{min-width:0;}
.dr-broken b{display:block;font-size:13.5px;}
.dr-broken p{margin:4px 0 10px;font-size:12.5px;line-height:1.5;}

/* La «i» accanto a un'etichetta: la spiegazione sta dietro, non sotto in
   un paragrafo che occupa cinque righe per una cosa che si legge una
   volta sola. */
.dr-info{border:0;background:none;padding:0;margin-left:5px;cursor:help;color:var(--muted);
  display:inline-flex;vertical-align:-2px;}
.dr-info:hover{color:var(--primary-dark);}
.dr-info svg{width:13px;height:13px;}
.pop-tx{margin:0;font-size:12.5px;line-height:1.55;color:var(--neutral-ink);max-width:270px;}

/* Le briciole e «nuova cartella» sulla stessa riga: si crea dove si e'. */
.dr-pick-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px;}

/* Chi vede una cartella: si legge, e si cambia premendolo. */
/* La pastiglia di «chi la vede». `font:inherit` le faceva prendere la
   misura della riga invece di quella di un badge: la scritta usciva piu'
   grande delle altre pastiglie dell'app, che e' l'unico posto dove
   quella parola si legge. */
.dr-root-see{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.01em;}
.dr-root-see svg{width:12px;height:12px;}
.dr-root-see:hover{filter:brightness(.96);}
.icon-btn.danger:hover{color:var(--red-dark);background:var(--red-soft);}