/* ============================================================
   PROGETTI — TRE LINGUETTE DELLA SCHEDA

   Accessi (le righe con la password mascherata), Materiali (ricerca,
   stadi, anteprima) ed Economia (le cinque cifre, i collaboratori, il
   conto per servizio): le tre sezioni che hanno un banner loro, ognuna
   con la sua soglia del telefono.

   Stavano in fondo a `project-detail.css` e si caricano subito dopo; le
   misure che stavano nel markup, che erano in coda a tutte e tre, sono
   tornate nel foglio della scheda: nessuna di quelle regole veste un
   elemento di qui.
   ============================================================ */
/* ============================================================
   ACCESSI — righe con la password mascherata, copia e apertura
   ============================================================ */
.cr-card{padding:0;overflow:hidden;}
.cr-group-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-ink);padding:11px 16px 6px;border-top:1px solid var(--line-soft);}
.cr-group-head:first-child{border-top:none;}
.cr-group-head svg{width:13px;height:13px;color:var(--muted);}
.cr-group-head .n{font-size:10.5px;background:var(--track);border-radius:999px;padding:1px 7px;letter-spacing:0;}
.cr-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line-soft);}
.cr-list:first-child .cr-row:first-child{border-top:none;}
.cr-row.off{opacity:.6;}
.cr-ic{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-dark);flex-shrink:0;}
.cr-ic svg{width:16px;height:16px;}
.cr-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.cr-main b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr-main .pj-svc-chip{align-self:flex-start;margin:1px 0;}
.cr-main small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr-note{color:var(--amber-dark);font-weight:600;}
/* La password e' un campo a se': monospazio, mai selezionabile trascinando,
   con l'occhio e la copia accanto. */
.cr-pass{display:inline-flex;align-items:center;gap:2px;background:var(--field);border:1px solid var(--border);border-radius:8px;padding:2px 4px 2px 10px;flex-shrink:0;}
.cr-pass-val{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:var(--neutral-ink);min-width:96px;user-select:none;}
.cr-pass.shown .cr-pass-val{color:var(--text);letter-spacing:0;user-select:all;}
.cr-pass.empty{font-size:11.5px;color:var(--muted);border-style:dashed;padding:6px 10px;}
.cr-pass .icon-btn{width:26px;height:26px;}
.cr-passfield{display:flex;align-items:center;gap:4px;}
.cr-passfield input{flex:1;min-width:0;}
@media (max-width:640px){
  .cr-row{flex-wrap:wrap;}
  .cr-main{flex-basis:calc(100% - 44px);}
  .cr-pass{margin-left:44px;}
}


/* ============================================================
   MATERIALI DEL PROGETTO — ricerca, stadi, anteprima
   ============================================================ */
.pj-msearch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);border-radius:9px;padding:0 10px;min-height:34px;color:var(--muted);}
.pj-msearch svg{width:14px;height:14px;flex-shrink:0;}
.pj-msearch input{border:none;background:transparent;font:inherit;font-size:12.5px;color:var(--text);width:150px;min-width:0;outline:none;padding:6px 0;}
.pj-msearch:focus-within{border-color:var(--primary-mid);}
.pj-mat-crumb{margin-bottom:12px;font-size:14px;}
.pj-mat-crumb .badge{margin-left:6px;}
.pj-mat-crumb .right{margin-left:auto;display:flex;gap:6px;}
.gd-file-tags{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 10px;}
.gd-file-tags .badge svg,.gd-row-tags .badge svg{width:11px;height:11px;margin-right:3px;vertical-align:-1px;}
.gd-row-tags{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle;}
.gd-pv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.gd-pv-head h2{margin:0;font-size:16px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gd-pv-head .right{display:flex;gap:6px;margin-left:auto;}
.gd-pv{background:var(--track);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:200px;}
.gd-pv iframe{width:100%;height:70vh;border:none;background:var(--card);}
.gd-pv img{max-width:100%;max-height:70vh;display:block;}
.gd-pv p{color:var(--muted);font-size:13px;padding:30px;}
.modal.gd-pv-modal{max-width:960px;}
@media (max-width:640px){ .pj-msearch input{width:110px;} }


/* ============================================================
   ECONOMIA — cinque cifre, collaboratori, per servizio
   ============================================================ */
.pj-people-table{display:flex;flex-direction:column;}
.pj-pt-head,.pj-pt-row{display:grid;grid-template-columns:minmax(0,2fr) repeat(5,minmax(70px,1fr));gap:10px;align-items:center;padding:10px 16px;}
.pj-people-table.svc .pj-pt-head,.pj-people-table.svc .pj-pt-row{grid-template-columns:minmax(0,2fr) repeat(4,minmax(80px,1fr));}
.pj-people-table.people .pj-pt-head,.pj-people-table.people .pj-pt-row{grid-template-columns:minmax(0,1.8fr) minmax(62px,.7fr) minmax(84px,.85fr) minmax(70px,.75fr) minmax(190px,1.5fr);column-gap:26px;}
/* Il costo e' allineato a destra e lo stato del pagamento comincia subito
   dopo: senza un respiro in mezzo i due si leggevano come una cosa sola. */
.pj-people-table.people .pj-pt-head>:last-child,.pj-people-table.people .pj-pt-row>:last-child{padding-left:4px;}
.pj-pt-row .pay{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.pj-pt-row .pay small{font-size:11px;color:var(--muted);}
/* Lo stato del pagamento e' una pastiglia sola: da pagare in ambra, saldato
   nel primario, e per chi e' interno un'etichetta spenta che dice che non
   c'e' niente da saldare. */
.pj-paytag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--track);color:var(--neutral-ink);white-space:nowrap;}
.pj-paytag svg{width:12px;height:12px;flex:0 0 auto;}
.pj-paytag.due{background:var(--amber-soft);color:var(--amber-dark);}
.pj-paytag.ok{background:var(--primary-soft);color:var(--primary-dark);}
.pj-paytag.none{background:transparent;color:var(--dim);padding-left:0;}
.pj-pt-head{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line-soft);padding-top:4px;}
.pj-pt-row{border-top:1px solid var(--line-soft);font-size:13px;}
.pj-pt-row:first-of-type{border-top:none;}
/* Nome e ruolo sono una colonna sola accanto all'avatar, che si centra sui
   due righi: il ruolo mandato a capo con un rientro a occhio restava
   staccato dal nome e disallineato rispetto al bollino. */
.pj-pt-row .who{display:flex;align-items:center;gap:10px;min-width:0;}
.pj-pt-row .who .nm{display:flex;flex-direction:column;min-width:0;line-height:1.3;}
.pj-pt-row .who b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pj-pt-row .who small{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.pj-pt-row .who .pj-unassign{margin-left:4px;opacity:0;flex:0 0 auto;}
.pj-pt-row:hover .who .pj-unassign,.pj-pt-row .who .pj-unassign:focus-visible{opacity:1;}
.pj-pt-row .who .pj-unassign:hover{color:var(--red-dark);}
.pj-people-table.svc .pj-pt-row .who{display:block;}
.pj-pt-row .n,.pj-pt-head .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pj-pt-row .n.muted{color:var(--dim);}
.pj-pt-row .n.due{color:var(--amber-dark);font-weight:700;}
.pj-pt-row .n .pj-bar{display:block;margin-top:5px;}
.pj-pt-foot{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted);flex-wrap:wrap;}
.pj-share{display:flex;flex-direction:column;gap:9px;}
.pj-share-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:12.5px;}
.pj-share-row .lab{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-share-row .val{font-weight:700;font-variant-numeric:tabular-nums;}
.pj-share-row .pj-bar{grid-column:1/-1;}
.pj-tline .ttl .pj-av{margin-right:2px;}
@media (max-width:900px){
  .pj-pt-head{display:none;}
  .pj-pt-row{grid-template-columns:1fr 1fr 1fr;}
  .pj-pt-row .who{grid-column:1/-1;}
  .pj-people-table.svc .pj-pt-row{grid-template-columns:1fr 1fr;}
  .pj-people-table.people .pj-pt-row{grid-template-columns:1fr 1fr;}
  .pj-pt-row .pay{grid-column:1/-1;}
}

/* Otto tab non ci stanno in 390px: la barra scorre, la pagina no. */
.pj-tabbtns{max-width:100%;overflow-x:auto;}

/* Le colonne del dettaglio non si allargano mai oltre lo schermo: le
   intestazioni lunghe vanno a capo. */
.pj-cols>div,.pj-cols>aside{min-width:0;}
.pj-missing .pj-panel-head,.pj-setup .pj-panel-head{flex-wrap:wrap;row-gap:6px;}
@media (max-width:640px){ .pj-miss{flex-wrap:wrap;} .pj-miss-main{flex-basis:calc(100% - 42px);} .pj-miss-main b{white-space:normal;} .pj-miss .r{margin-left:42px;} }

/* La salute del progetto colora la barra del margine. Tre valori, tre
   tinte, dette una volta: `pj-h-idle` usa il grigio del binario, perche'
   un progetto fermo non e' ne' sano ne' malato. */
.pj-bar.pj-h-bad i{background:var(--red);}
.pj-bar.pj-h-idle i{background:var(--track);}
.pj-bar.pj-h-ok i{background:var(--primary);}