/* ============================================================
   LE CARTELLE DI DRIVE

   Sceglierne una dal Drive collegato (`drive-picker.js`): le briciole, le
   righe, quella gia' collegata, la strada del link incollato; e
   nelle Impostazioni le cartelle collegate, quella ferma, il passo da
   fare, «Ricollega» e chi vede una cartella.

   Stava in fondo a `modules.css` e si carica subito dopo di lui: la
   cascata e' quella di prima.
   ============================================================ */
/* ---- 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;}

/* Di chi e' la cartella, quando non c'e' niente da scegliere: si arriva
   qui dalla scheda di un cliente, e la risposta e' dove si e' premuto.
   Ha l'aria di un campo compilato e non di un campo da compilare —
   stessa altezza della tendina di fianco, cosi' le due colonne restano
   allineate. */
.dr-pick-who{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--field);font-size:13px;}
.dr-pick-who svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.dr-pick-who b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* L'altra strada, in fondo e in piccolo: e' quella che serve a pochi, e
   se avesse il peso di «collega» competerebbe con quello che fanno
   tutti. Il link ha una regola sua e non quella della schermata
   d'accesso: `.login-link` e' `display:block;width:100%`, e presa in
   prestito qui mandava «incolla il suo indirizzo» a capo, centrata e
   staccata dalla frase che la introduce. E' §12 al lavoro — una classe
   di un'altra pagina porta con se' le decisioni di quella pagina. */
.dr-pick-alt{font-size:12px;color:var(--muted);margin:2px 0 14px;}
.dr-pick-alt button{display:inline;padding:0;border:0;background:none;font:inherit;
  color:var(--primary-dark);text-decoration:underline;cursor:pointer;}
.dr-pick-alt button:hover{color:var(--primary-deep);}
.dr-pick-alt button:focus-visible{outline:2px solid var(--primary-mid);outline-offset:2px;border-radius:4px;}

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