/* ============================================================
   PROGETTI — la scheda di un progetto.
   Cockpit, tab, pannelli, registro ore, conto, fatturazione, accessi,
   materiali ed economia. L'elenco sta in projects.css; le due parti
   condividono solo il prefisso pj- e i token.
   ============================================================ */

/* ---- Intestazione del progetto: titolo, e sotto una riga sola ---- */
.pj-detail .topbar h1{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;}
.pj-htitle{min-width:0;}
.pj-hedit{border:none;background:transparent;color:var(--dim);width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s;flex:0 0 auto;}
.pj-detail .topbar h1:hover .pj-hedit,.pj-hedit:focus-visible{opacity:1;}
.pj-hedit:hover{background:var(--hover);color:var(--text);}
.pj-hedit svg{width:14px;height:14px;}
.pj-detail .topbar h1 .pj-star{width:28px;height:28px;}
.pj-detail .topbar h1 .pj-star svg{width:17px;height:17px;}

/* Ogni voce e' icona piu' testo, alla stessa altezza: al passaggio si
   accende come un campo, perche' e' un campo. */
.pj-hmeta{display:flex;align-items:center;gap:2px;margin-top:7px;flex-wrap:wrap;}
.pj-hmi{border:none;background:transparent;height:27px;padding:0 8px;border-radius:7px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--neutral-ink);cursor:pointer;white-space:nowrap;font-family:inherit;}
.pj-hmi:hover{background:var(--hover);color:var(--text);}
.pj-hmi svg{width:14px;height:14px;color:var(--muted);flex:0 0 auto;}
.pj-hmi.soon,.pj-hmi.soon svg{color:var(--amber-dark);}
.pj-hmi.late,.pj-hmi.late svg{color:var(--red-dark);}
.pj-hmi.soon,.pj-hmi.late{font-weight:600;}
.pj-hmi.none,.pj-hmi.none svg{color:var(--dim);}
.pj-hmi.wait{cursor:default;color:var(--amber-dark);font-weight:600;}
.pj-hmi.wait svg{color:var(--amber-dark);}
.pj-hmi.wait:hover{background:transparent;color:var(--amber-dark);}
.pj-hsep{width:1px;height:16px;background:var(--border);margin:0 7px;flex:0 0 auto;}

/* Lo stato e' la pastiglia di sempre con un chevron: si vede che si apre. */
.pj-hstatus{position:relative;display:inline-flex;}
.pj-hstatus-btn{border:none;background:transparent;padding:0;border-radius:8px;display:inline-flex;align-items:center;cursor:pointer;height:27px;font-family:inherit;}
.pj-hstatus-pill{display:inline-flex;align-items:center;gap:5px;padding-right:6px;}
.pj-hstatus-pill svg{width:12px;height:12px;opacity:.65;}
.pj-hstatus-btn:hover .pj-hstatus-pill{filter:brightness(.96);}
.pj-hstatus-btn:hover .pj-hstatus-pill svg{opacity:1;}
.pj-hstatus-menu{position:absolute;left:0;top:32px;z-index:40;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lift);padding:5px;min-width:212px;display:none;}
.pj-hstatus-menu.open{display:block;}
.pj-hstatus-menu .mh{font-size:11px;color:var(--muted);padding:6px 10px 4px;}
.pj-hstatus-menu button{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:6px 10px;border:none;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font-family:inherit;}
.pj-hstatus-menu button:hover,.pj-hstatus-menu button:focus-visible{background:var(--hover);}
.pj-hstatus-menu .ck{margin-left:auto;width:14px;height:14px;color:var(--primary);flex:0 0 auto;}
.pj-crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.pj-crumbs a{cursor:pointer;padding:2px 4px;border-radius:6px;}
.pj-crumbs a:hover{color:var(--primary-dark);background:var(--primary-soft);}
.pj-crumbs b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw;}
.pj-crumbs svg{width:13px;height:13px;flex-shrink:0;}

/* ---- Registro ore: testata con i filtri, righe raggruppate, piede ---- */
.pj-rt{overflow:visible;}
.pj-rt-head{display:flex;align-items:center;gap:12px;padding:12px 16px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.pj-rt-title{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;}
.pj-rt-title .ic{width:28px;height:28px;border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pj-rt-title .ic svg{width:15px;height:15px;}
.pj-rt-title h3{margin:0;font-size:14px;font-weight:700;white-space:nowrap;}
.pj-rt-title .count{font-size:12px;color:var(--muted);white-space:nowrap;}

.pj-rt-seg{display:inline-flex;gap:2px;background:var(--track);border-radius:10px;padding:3px;}
.pj-rt-seg button{border:none;background:transparent;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--neutral-ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.pj-rt-seg button:hover{color:var(--text);}
.pj-rt-seg button.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(46,33,25,.08);}
.pj-rt-seg button svg{width:13px;height:13px;}
.pj-rt-seg .n{font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.pj-rt-seg button.active .n{color:var(--primary-dark);}

/* intestazione di gruppo: giorno o ticket */
.pj-rt-gh{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 50px;background:var(--field);border-bottom:1px solid var(--border);}
.pj-rt-gh:not(:first-child){border-top:1px solid var(--border);}
.pj-rt-gh svg{width:13px;height:13px;color:var(--muted);flex-shrink:0;}
.pj-rt-gh .lbl{font-weight:700;font-size:12.5px;}
.pj-rt-gh .sub{font-size:11.5px;color:var(--muted);}
.pj-rt-gh .tk{font-size:10.5px;font-weight:700;background:var(--track);color:var(--neutral-ink);border-radius:5px;padding:2px 6px;}
.pj-rt-gh .tot{margin-left:auto;display:flex;gap:8px;align-items:baseline;font-size:12.5px;font-variant-numeric:tabular-nums;}
.pj-rt-gh .tot b{font-weight:700;}
.pj-rt-gh .tot span{color:var(--muted);}

.pj-rt-row{display:grid;grid-template-columns:18px 24px minmax(0,1fr) 150px 152px 96px;align-items:center;column-gap:12px;padding:9px 16px;border-bottom:1px solid var(--line-soft);position:relative;min-height:50px;}
.pj-rt-list>.pj-rt-row:last-child{border-bottom:none;}
.pj-rt-row:hover,.pj-rt-row:focus-within{background:var(--hover);}
.pj-rt-row.selected{background:var(--primary-soft);}
/* La riga del timer acceso: uno stato che dura pochi minuti, non un colore
   d'identita', quindi la spina sul bordo qui ci sta. */
.pj-rt-row.live{background:var(--primary-soft);}
.pj-rt-row.live::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--primary);}

/* la casella compare al passaggio, o quando una selezione e' gia' aperta */
.pj-rt-row .chk{opacity:0;transition:opacity .12s;padding:0;}
.pj-rt-row:hover .chk,.pj-rt-row:focus-within .chk,.pj-rt-row .chk.on,.pj-rt.has-sel .chk{opacity:1;}

.pj-rt-what{min-width:0;display:flex;align-items:center;gap:8px;}
.pj-rt-what .txt{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pj-rt-what .tk{font-size:10.5px;font-weight:700;background:var(--track);color:var(--neutral-ink);border-radius:5px;padding:2px 6px;white-space:nowrap;flex:0 0 auto;}
.pj-rt-what .tk-title{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.pj-rt-when{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pj-rt-when .range{font-size:12px;color:var(--muted);}
.pj-rt-when .dur{font-weight:700;font-size:13px;min-width:52px;text-align:right;}
.pj-rt-when .dur.live{color:var(--primary-dark);min-width:66px;}

/* pastiglia dello stato di fatturazione, con il suo menu */
.pj-rt-bill{position:relative;justify-self:end;}
.pj-rt-pill{border:none;border-radius:7px;padding:4px 8px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pj-rt-pill svg{width:12px;height:12px;}
.pj-rt-pill .st{font-weight:600;}
.pj-rt-pill .chev{opacity:.55;}
.pj-rt-pill.todo{background:var(--amber-soft);color:var(--amber-dark);}
.pj-rt-pill.done{background:var(--primary-soft);color:var(--primary-dark);}
.pj-rt-pill.no{background:var(--track);color:var(--muted);}

.pj-rt-menu{position:absolute;right:0;top:32px;z-index:30;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lift);padding:5px;min-width:196px;display:none;}
.pj-rt-menu.open{display:block;}
.pj-rt-menu button{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:7px 10px;border:none;background:transparent;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;}
.pj-rt-menu button:hover,.pj-rt-menu button:focus-visible{background:var(--hover);}
.pj-rt-menu button svg{width:14px;height:14px;color:var(--muted);flex:0 0 auto;}
.pj-rt-menu button .ck{margin-left:auto;color:var(--primary);}
.pj-rt-menu hr{border:none;border-top:1px solid var(--border);margin:4px 0;}
.pj-rt-menu .danger,.pj-rt-menu .danger svg{color:var(--red-dark);}

.pj-rt-acts{display:flex;justify-content:flex-end;gap:2px;position:relative;}
.pj-rt-acts .icon-btn{opacity:0;transition:opacity .12s;}
.pj-rt-row:hover .icon-btn,.pj-rt-row:focus-within .icon-btn,.pj-rt-acts .icon-btn.keep{opacity:1;}
.pj-rt-acts .icon-btn.play:hover{color:var(--primary-dark);}
.pj-rt-stop{border:none;background:var(--primary);color:var(--on-accent);border-radius:8px;height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;cursor:pointer;}
.pj-rt-stop svg{width:12px;height:12px;}

.pj-rt-foot{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--border);background:var(--field);border-radius:0 0 var(--radius) var(--radius);min-height:46px;}
.pj-rt-foot .info{font-size:12px;color:var(--muted);}
.pj-rt-foot .info b{color:var(--text);font-variant-numeric:tabular-nums;}
.pj-rt-foot .right{margin-left:auto;display:flex;gap:6px;align-items:center;}
/* Con una selezione aperta il piede diventa la barra delle azioni, come
   nell'elenco progetti: stesso fondo scuro, stessa famiglia. */
.pj-rt-foot.sel{background:var(--inverse);color:var(--on-inverse);}
.pj-rt-foot.sel .info,.pj-rt-foot.sel .info b{color:var(--on-inverse);}
.pj-rt-foot.sel .btn-ghost{background:transparent;border-color:rgba(255,255,255,.25);color:var(--on-inverse);}
.pj-rt-foot.sel .btn-ghost:hover{background:rgba(255,255,255,.12);}

@media (max-width:1100px){
  .pj-rt-row{grid-template-columns:24px minmax(0,1fr) auto;row-gap:8px;
    grid-template-areas:"av what what" ". when bill" ". acts acts";}
  .pj-rt-row>.c-chk{display:none;}
  .pj-rt-row>.pj-av{grid-area:av;}
  .pj-rt-what{grid-area:what;}
  .pj-rt-when{grid-area:when;justify-content:flex-start;}
  .pj-rt-bill{grid-area:bill;}
  .pj-rt-acts{grid-area:acts;}
  .pj-rt-acts .icon-btn{opacity:1;}
  .pj-rt-gh{padding-left:16px;}
  .pj-rt-what .tk-title{display:none;}
}

/* ---- Conto del progetto: quattro cifre, dove finisce il valore, le ore ---- */
.pj-ec .pj-panel-head .right{margin-left:auto;}
.pj-ec-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.pj-ec-kpi{padding:16px 18px;border-right:1px solid var(--border);min-width:0;}
.pj-ec-kpi:last-child{border-right:none;}
.pj-ec-kpi .l{font-size:12px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px;}
.pj-ec-kpi .l svg{width:13px;height:13px;}
.pj-ec-kpi .v{font-size:24px;font-weight:700;letter-spacing:-.5px;margin:6px 0 4px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pj-ec-kpi .v small{font-size:14px;font-weight:600;color:var(--muted);margin-left:1px;}
.pj-ec-kpi .s{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
/* Il profitto e' la cifra per cui si apre questa scheda: ha un fondo suo.
   Rosso solo quando e' negativo, che e' l'unico giudizio che il conto sa dare. */
.pj-ec-kpi.hero{background:var(--primary-soft);}
.pj-ec-kpi.hero .v{color:var(--primary-dark);}
.pj-ec-kpi.loss{background:var(--red-soft);}
.pj-ec-kpi.loss .v{color:var(--red-dark);}

.pj-ec-block{padding:16px 18px;border-top:1px solid var(--border);}
.pj-ec-bh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.pj-ec-bh h4{margin:0;font-size:13px;font-weight:700;}
.pj-ec-bh p{margin:0;font-size:12px;color:var(--muted);}

/* Una barra sola: i costi da sinistra, il profitto in coda. Se si e' in
   perdita l'ultimo pezzo e' quello che sfonda i ricavi. */
.pj-ec-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--track);}
.pj-ec-stack>i{display:block;height:100%;transition:width .35s ease;}
.sg-done{background:var(--amber);}
.sg-plan{background:repeating-linear-gradient(135deg,var(--amber) 0 5px,var(--amber-soft) 5px 9px);}
.sg-extra{background:var(--amber-dark);}
.sg-profit{background:var(--primary);}
.sg-loss{background:var(--red);}
.pj-ec-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;}
.pj-ec-legend .lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--neutral-ink);}
.pj-ec-legend .sw{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.pj-ec-legend b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}
.pj-ec-legend .muted{color:var(--muted);font-variant-numeric:tabular-nums;}

/* Il righello delle ore: fatte, previste, pareggio. Tre numeri che da soli
   non si confrontano, messi in fila sulla stessa scala. */
.pj-ec-scale{position:relative;height:58px;margin-top:6px;}
.pj-ec-scale .rail{position:absolute;left:0;right:0;top:23px;height:8px;border-radius:5px;background:var(--track);overflow:hidden;}
.pj-ec-scale .rail .safe{position:absolute;left:0;top:0;bottom:0;background:var(--primary-soft);}
.pj-ec-scale .rail .plan{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,var(--primary) 0 4px,transparent 4px 8px);opacity:.5;}
.pj-ec-scale .rail .done{position:absolute;left:0;top:0;bottom:0;background:var(--primary);border-radius:5px;}
.pj-ec-scale .mk{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;}
.pj-ec-scale .mk.start{transform:none;align-items:flex-start;}
.pj-ec-scale .mk.end{transform:translateX(-100%);align-items:flex-end;}
.pj-ec-scale .mk .t{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.pj-ec-scale .mk .line{width:2px;height:18px;margin-top:2px;border-radius:1px;}
.pj-ec-scale .mk.done .t{color:var(--primary-dark);}
.pj-ec-scale .mk.done .line{background:var(--primary);}
.pj-ec-scale .mk.bottom{top:33px;}
.pj-ec-scale .mk.bottom .t{order:2;font-weight:600;color:var(--neutral-ink);}
.pj-ec-scale .mk.bottom .line{height:8px;margin:0 0 2px;background:var(--neutral-ink);}
.pj-ec-scale .mk.be .t{color:var(--red-dark);}
.pj-ec-scale .mk.be .line{background:var(--red);height:26px;}

.pj-ec-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--field);border:1px solid var(--border);font-size:12.5px;line-height:1.45;}
.pj-ec-note svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--primary-dark);}
.pj-ec-note b{font-weight:700;}
.pj-ec-note.bad{background:var(--red-soft);border-color:transparent;color:var(--red-dark);}
.pj-ec-note.bad svg{color:var(--red-dark);}

.pj-ec-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;}
.pj-ec-rates .rate{border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0;}
.pj-ec-rates .rate span{font-size:11.5px;color:var(--muted);display:block;}
.pj-ec-rates .rate b{font-size:15px;font-weight:700;display:block;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ---- Fatturazione: lo stato di cassa del progetto ---- */
.pj-inv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;}
.pj-inv-top b{font-size:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.pj-inv-top span{font-size:12px;color:var(--muted);text-align:right;}
.pj-inv-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--track);}
.pj-inv-bar i{display:block;height:100%;}
.ib-paid{background:var(--primary);}
.ib-due{background:var(--amber);}
.ib-todo{background:repeating-linear-gradient(135deg,var(--dim) 0 4px,transparent 4px 8px);}
.pj-kv dt .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto;}
.pj-kv dt .sw.ib-todo{border:1px solid var(--dim);}
.pj-kv dd.due{color:var(--amber-dark);}
.pj-inv-unbilled{margin-top:14px;padding:12px;border-radius:10px;background:var(--primary-soft);}
.pj-inv-unbilled .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.pj-inv-unbilled span{font-size:12px;color:var(--primary-dark);font-weight:600;}
.pj-inv-unbilled b{font-size:16px;color:var(--primary-dark);font-variant-numeric:tabular-nums;}
.pj-inv-unbilled p{margin:2px 0 10px;font-size:11.5px;color:var(--neutral-ink);font-variant-numeric:tabular-nums;}

@media (max-width:900px){
  .pj-ec-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pj-ec-kpi:nth-child(2){border-right:none;}
  .pj-ec-kpi:nth-child(-n+2){border-bottom:1px solid var(--border);}
  .pj-ec-rates{grid-template-columns:1fr;}
}

/* ---- Dettaglio: cockpit ---- */
.pj-cockpit{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px;}
.pj-ck{background:var(--card);padding:15px 17px;min-width:0;}
.pj-ck-lab{font-size:11.5px;color:var(--muted);font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.pj-ck-lab svg{width:14px;height:14px;flex-shrink:0;}
.pj-ck-row{display:flex;align-items:center;gap:13px;min-width:0;}
.pj-ring{width:56px;height:56px;flex:0 0 auto;position:relative;display:grid;place-items:center;}
.pj-ring svg{position:absolute;inset:0;transform:rotate(-90deg);width:56px;height:56px;}
.pj-ring b{font-size:12.5px;font-weight:700;letter-spacing:-.3px;}
.pj-ck-big{font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1.1;min-width:0;}
.pj-ck-big span{font-size:12.5px;font-weight:500;color:var(--muted);}
.pj-ck-note{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.pj-ck-note.warn{color:var(--amber-dark);font-weight:600;}
.pj-ck-note.bad{color:var(--red-dark);font-weight:600;}
.pj-ck-note svg{width:12px;height:12px;flex-shrink:0;}
.pj-ck .pj-bar{margin-top:9px;height:5px;}
.pj-segbar{display:flex;gap:2px;height:7px;margin-top:9px;}
.pj-segbar i{flex:1;background:var(--track);border-radius:2px;}
.pj-segbar i.on{background:var(--primary);}
.pj-segbar i.rev{background:var(--violet);}

/* ---- Tab: la barra condivisa .tabbtns, piu' i due segni che servono qui ---- */
.pj-tabbtns{width:fit-content;max-width:100%;margin-bottom:18px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;}
.pj-tabbtns::-webkit-scrollbar{display:none;}
.pj-tabbtns button{white-space:nowrap;}
.pj-tabbtns .n{font-size:10.5px;font-weight:700;background:var(--card);color:var(--muted);border-radius:6px;padding:1px 6px;}
.pj-tabbtns button.active .n{background:var(--primary-soft);color:var(--primary-dark);}
.pj-tabbtns .alert{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;}
/* le righe dei ticket riempiono la card: il bordo lo mette gia' la riga */
.pj-tlist{margin:-18px;}
.pj-tlist .pj-trow:first-child{border-radius:var(--radius) var(--radius) 0 0;}
.pj-tlist .pj-trow:last-child{border-radius:0 0 var(--radius) var(--radius);}

/* ---- Pannelli e rail ---- */
.pj-cols{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:16px;align-items:start;}
.pj-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.pj-panel+.pj-panel,.pj-alertbox+.pj-panel{margin-top:14px;}
.pj-panel-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.pj-panel-head h3{font-size:13.5px;font-weight:700;margin:0;letter-spacing:-.1px;}
/* l'icona in pastiglia e' la stessa delle sezioni della scheda cliente */
.pj-panel-head>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;}
.pj-panel-head .muted{font-size:11.5px;color:var(--muted);}
.pj-panel-head .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.pj-panel-body{padding:16px;}
.pj-panel-body.flush{padding:0;}
.pj-rail-lab{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);margin:0 0 9px;display:flex;align-items:center;gap:6px;}
.pj-rail-lab svg{width:12px;height:12px;color:var(--muted);flex-shrink:0;}
.pj-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:12.5px;}
.pj-kv:first-child{border-top:none;padding-top:0;}
/* L'icona rende la riga scansionabile senza leggerla: allineata al testo,
   spenta, della stessa misura di quelle delle altre liste. */
.pj-kv dt{color:var(--muted);display:flex;align-items:center;gap:7px;min-width:0;}
.pj-kv dt svg{width:13px;height:13px;flex:0 0 auto;color:var(--dim);}
.pj-kv dd{margin:0;font-weight:600;text-align:right;min-width:0;}
.pj-kv dd.bad{color:var(--red-dark);}
.pj-kv dd.good{color:var(--primary-dark);}
.pj-detail dl{margin:0;}
.pj-desc{font-size:13px;line-height:1.6;color:var(--text);margin:0;white-space:pre-wrap;}
.pj-desc.muted{color:var(--muted);}
.pj-desc-edit{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.55;font-family:inherit;resize:vertical;min-height:90px;outline:none;background:var(--card);}
.pj-desc-edit:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.pj-inline-actions{display:flex;gap:8px;margin-top:10px;}
.pj-people{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pj-people b{font-size:12.5px;font-weight:600;}
.pj-svc{padding:14px 16px;border-top:1px solid var(--line-soft);}
.pj-svc:first-child{border-top:none;}
.pj-svc-top{display:flex;align-items:center;gap:9px;margin-bottom:10px;min-width:0;}
.pj-svc-top b{font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-svc-top .n{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;}
.pj-svc-next{font-size:11.5px;color:var(--muted);margin-top:7px;}
.pj-svc-next b{color:var(--text);font-weight:600;}
.pj-svc-actions{display:flex;gap:4px;margin-left:6px;}

/* ---- Avviso in cima a un tab ---- */
.pj-alertbox{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--red-soft);border:1px solid var(--red-soft);}
.pj-alertbox>svg{width:16px;height:16px;color:var(--red-dark);margin-top:1px;flex-shrink:0;}
.pj-alertbox b{font-size:12.5px;display:block;margin-bottom:2px;}
.pj-alertbox p{margin:0;font-size:11.5px;color:var(--muted);}
.pj-alertbox p a{color:var(--red-dark);font-weight:600;cursor:pointer;}
.pj-alertbox.amber{background:var(--amber-soft);border-color:var(--amber-soft);}
.pj-alertbox.amber>svg,.pj-alertbox.amber p a{color:var(--amber-dark);}
.pj-alertbox .right{margin-left:auto;flex-shrink:0;}

/* ---- Ticket del progetto ---- */
.pj-trow{display:grid;grid-template-columns:22px 62px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;}
.pj-trow:last-child{border-bottom:none;}
.pj-trow:hover{background:var(--field);}
.pj-trow.selected{background:var(--primary-soft);}
.pj-trow.dragging{opacity:.4;}
.pj-trow.nosel{grid-template-columns:62px minmax(0,1fr) auto;}
.pj-detail .card{margin-bottom:0;}
.pj-detail .topbar-actions .action-menu .btn{padding:9px 11px;}
.pj-chk{width:17px;height:17px;border-radius:6px;border:1.5px solid var(--dim);background:var(--card);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0;}
.pj-chk.on{background:var(--primary);border-color:var(--primary);color:var(--on-accent);}
.pj-chk svg{width:11px;height:11px;}
.pj-tkey{font-size:11px;font-weight:700;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;}
.pj-tmain{min-width:0;}
.pj-ttitle{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;min-width:0;}
.pj-ttitle>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-trow.done .pj-ttitle>span{text-decoration:line-through;color:var(--muted);font-weight:500;}
.pj-tsub{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:4px;flex-wrap:wrap;}
.pj-tsub .aselect{min-height:0;}
.pj-tright{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.pj-tprog{width:96px;}
.pj-tprog-lab{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px;font-variant-numeric:tabular-nums;}
.pj-subline{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap;}
.pj-subline svg{width:12px;height:12px;}
.pj-prio{display:inline-flex;align-items:center;gap:5px;}
/* ---- Board ----
   La colonna e' un elenco: nessun fondo pieno, un'intestazione che fa da
   titolo e le card come unica superficie bianca. Le colonne senza niente
   restano una striscia stretta invece di occupare lo stesso spazio delle
   altre. ---- */
/* Cinque corsie larghe uguali, che riempiono lo spazio: una colonna vuota
   non e' meno importante, e' solo vuota — rimpicciolirla la faceva sembrare
   un'altra cosa e lasciava un vuoto a destra della board. Sotto la larghezza
   minima le colonne smettono di crescere e la board scorre. */
.pj-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px;align-items:stretch;}
/* Ogni colonna porta la tinta del suo stato, la stessa di `statusBadge`:
   `--col-bg` riempie la pastiglia, `--col-ink` ci scrive sopra. Il fondo
   della corsia e' la stessa tinta lavata quasi fino al bianco: separa le
   colonne senza diventare una superficie colorata: il colore pieno resta
   nella pastiglia, che e' la stessa che il ticket porta ovunque. */
.pj-bcol{--col-bg:var(--track);--col-ink:var(--neutral-ink);
  min-width:0;display:flex;flex-direction:column;gap:10px;
  border-radius:14px;padding:8px;background:color-mix(in srgb,var(--col-bg) 22%,var(--card));transition:background .14s;}
.pj-bcol.s-incorso{--col-bg:var(--blue-soft);--col-ink:var(--blue);}
.pj-bcol.s-inrevisione{--col-bg:var(--violet-soft);--col-ink:var(--violet);}
.pj-bcol.s-completato{--col-bg:var(--green-soft);--col-ink:var(--green-dark);}
.pj-bcol.over{background:var(--primary-soft);outline:2px dashed var(--primary);outline-offset:-2px;}
.pj-bcol-head{display:flex;align-items:center;gap:8px;padding:1px 2px;}
.pj-bcol-pill{display:inline-flex;align-items:center;gap:7px;background:var(--col-bg);color:var(--col-ink);
  border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;}
.pj-bcol-pill .n{font-size:11px;font-weight:800;background:rgba(255,255,255,.65);border-radius:5px;padding:0 5px;font-variant-numeric:tabular-nums;}
.pj-bcol-head .icon-btn{margin-left:auto;width:26px;height:26px;color:var(--neutral-ink);}
.pj-bcol-head .icon-btn:hover{background:var(--card);}
.pj-bcol-body{display:flex;flex-direction:column;gap:9px;}
.pj-bcol-body:hover .pj-bcol-add,.pj-bcol-add:focus-visible{opacity:1;}
.pj-bcol-add{opacity:0;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:1px dashed var(--border);background:none;color:var(--muted);font-size:12px;font-weight:600;padding:8px;border-radius:11px;cursor:pointer;font-family:inherit;transition:border-color .14s,color .14s,background .14s,opacity .14s;}
.pj-bcol.empty .pj-bcol-add{opacity:.7;}
.pj-bcol-add:hover{background:var(--card);border-color:var(--primary);color:var(--primary-dark);}
.pj-bcol-add svg{width:14px;height:14px;}
.pj-bcard{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:11px 12px;box-shadow:0 1px 2px rgba(46,33,25,.04);cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:box-shadow .16s,transform .16s;}
.pj-bcard:hover,.pj-bcard:focus-visible{box-shadow:var(--shadow-lift);transform:translateY(-1px);}
.pj-bcard.dragging{opacity:.4;}
.pj-bcard.done{background:var(--field);}
.pj-bcard.done .pj-bcard-title{color:var(--muted);text-decoration:line-through;}
.pj-bcard-key{display:flex;align-items:center;gap:6px;min-width:0;}
.pj-bcard-key .pj-av{margin-left:auto;}
.pj-bcard-title{font-size:12.5px;font-weight:600;line-height:1.35;word-break:break-word;}
.pj-bcard-parent{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-3px;}
.pj-bcard-parent::before{content:"↳ ";font-weight:700;}
.pj-bcard-time{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.pj-bcard-time>span:first-child{white-space:nowrap;}
.pj-bcard-time .pj-bar{flex:1;height:4px;min-width:34px;}
.pj-bcard-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* La scadenza su una riga sua: e' il dato che si cerca per primo scorrendo
   una colonna, e in fondo alla card si perdeva fra i contatori. */
.pj-bcard-when{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted);}
.pj-bcard-when svg{width:12px;height:12px;}
.pj-bcard-when.soon{color:var(--amber-dark);}
.pj-bcard-when.late{color:var(--red-dark);}
.pj-bcard>.pj-bar{height:4px;}
/* La pastiglia della priorita' compare solo sull'alta: a destra, dove nel
   riferimento sta il segnale che ferma l'occhio. */
.pj-bcard-prio{margin-left:auto;display:inline-flex;align-items:center;gap:4px;}
.pj-bcard-prio svg{width:11px;height:11px;}

/* ---- Tempo ---- */
.pj-week-chart{display:flex;align-items:flex-end;gap:10px;height:96px;padding:0 2px;}
.pj-wc{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0;}
.pj-wc .col{width:100%;background:var(--primary-soft);border-radius:6px 6px 3px 3px;position:relative;}
.pj-wc .col b{position:absolute;top:-17px;left:0;right:0;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;}
.pj-wc.on .col{background:var(--primary);}
.pj-wc small{font-size:10.5px;color:var(--muted);font-weight:600;}
.pj-wc.on small{color:var(--primary-dark);}
.pj-daygroup{border-top:1px solid var(--border);}
.pj-daygroup:first-child{border-top:none;}
.pj-daygroup-head{display:flex;align-items:center;gap:9px;padding:9px 16px;background:var(--field);font-size:11.5px;font-weight:700;}
.pj-daygroup-head svg{width:13px;height:13px;color:var(--muted);}
.pj-daygroup-head .tot{margin-left:auto;font-weight:700;white-space:nowrap;}
.pj-daygroup-head .tot span{color:var(--muted);font-weight:500;}
.pj-tline{display:grid;grid-template-columns:minmax(0,1fr) 92px 78px 92px 34px 28px;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line-soft);font-size:12.5px;}
.pj-tline:hover{background:var(--field);}
.pj-tline .ttl{font-weight:600;display:flex;align-items:center;gap:8px;min-width:0;}
.pj-tline .ttl>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-tline .meta{color:var(--muted);font-size:11.5px;white-space:nowrap;}
.pj-tline .dur{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pj-tline .val{text-align:right;white-space:nowrap;}
.pj-bigval{font-size:24px;font-weight:700;letter-spacing:-.6px;line-height:1.1;}

/* ---- Economia ---- */
.pj-econ-note{font-size:11.5px;color:var(--muted);margin:14px 0 0;}
.pj-detail .adm-block{margin-top:14px;margin-bottom:0;}
/* Il blocco spese tiene le sue righe ma prende la testata delle schede:
   la testata corre da bordo a bordo come le righe, che hanno gia' i
   margini negativi per farlo. */
.pj-costs{padding-top:0;}
.pj-costs .pj-panel-head{margin:0 -18px;padding-left:18px;padding-right:18px;}
.pj-costs .pj-panel-head + .adm-row{border-top:none;}
.pj-costs .adm-empty{padding-top:30px;}

/* ---- Materiali ---- */
.pj-mat{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line-soft);}
.pj-mat:first-child{border-top:none;}
.pj-mat-ic{width:30px;height:30px;border-radius:9px;background:var(--track);color:var(--muted);display:grid;place-items:center;flex:0 0 auto;}
.pj-mat-ic svg{width:15px;height:15px;}
.pj-mat-ic.late{background:var(--red-soft);color:var(--red-dark);}
.pj-mat-ic.ok{background:var(--primary-soft);color:var(--primary-dark);}
.pj-mat-main{min-width:0;flex:1;}
.pj-mat b{font-size:12.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-mat small{font-size:11.5px;color:var(--muted);display:block;margin-top:1px;}
.pj-mat .r{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.pj-mat-head-bar{width:90px;margin-left:8px;}

/* ---- Note: le schede sono quelle condivise (.note-grid), qui resta
   solo la nota fissata che compare in panoramica ---- */
.pj-pinned-note{padding:11px 14px;border-radius:10px;background:var(--field);border:1px solid var(--border);font-size:12.5px;line-height:1.5;margin-top:10px;}
.pj-pinned-note:first-child{margin-top:0;}
.pj-pinned-note .who{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.pj-pinned-note .who svg{width:12px;height:12px;color:var(--primary-dark);}

/* I chip dei servizi: nella card degli accessi e sui file di Drive. */
.pj-svc-chip{font-size:11px;font-weight:600;color:var(--neutral-ink);background:var(--field);border:1px solid var(--border);border-radius:999px;padding:2px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;}
.pj-svc-chip.more{color:var(--muted);background:transparent;}

/* Cosa manca per procedere: righe come i materiali, con l'azione a destra. */
.pj-missing .pj-panel-head>svg{background:var(--amber-soft);color:var(--amber-dark);}
.pj-missing.bad .pj-panel-head>svg{background:var(--red-soft);color:var(--red-dark);}
.pj-miss{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line-soft);}
.pj-miss:first-child{border-top:none;}
.pj-miss-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--track);color:var(--neutral-ink);flex-shrink:0;}
.pj-miss-ic svg{width:15px;height:15px;}
.pj-miss.bad .pj-miss-ic{background:var(--red-soft);color:var(--red-dark);}
.pj-miss.warn .pj-miss-ic,.pj-miss.wait .pj-miss-ic{background:var(--amber-soft);color:var(--amber-dark);}
.pj-miss-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}
.pj-miss-main b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-miss-main small{font-size:11.5px;color:var(--muted);}
.pj-miss .r{display:flex;gap:6px;flex-shrink:0;}
/* Setup: una griglia di caselle spuntate, ogni voce porta dove si sistema. */
.pj-setup-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;}
.pj-setup-item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text);text-decoration:none;padding:4px 0;}
.pj-setup-item.ok{color:var(--muted);font-weight:500;}
.pj-setup-item:hover{color:var(--primary-dark);}
.pj-setup .pj-mat-head-bar{margin-left:10px;}
/* Modale "in attesa del cliente": la lista delle richieste come caselle. */
.pj-wait-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;}
.pj-wait-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;cursor:pointer;font-size:13px;}
.pj-wait-item:hover{background:var(--hover);}
.pj-wait-item input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
/* **La spunta segue il campo, non una classe scritta nel markup.** Il
   quadratino vero e' nascosto e quello che si vede e' `.pj-chk`: finche'
   il pieno arrivava da una classe messa a mano al momento del disegno,
   cliccare cambiava il campo e non cambiava niente a schermo — la casella
   sembrava bloccata. Succedeva in quattro punti diversi, ed era sempre
   questo. Adesso lo dice il CSS guardando il campo, e non c'e' piu' niente
   da ricordarsi. */
.pj-wait-item input:checked + .pj-chk{background:var(--primary);border-color:var(--primary);color:var(--on-accent);}
.pj-wait-item input:not(:checked) + .pj-chk svg{opacity:0;}
.pj-wait-item input:focus-visible + .pj-chk{outline:2px solid var(--primary-mid);outline-offset:2px;}
.pj-wait-item>span:last-child{display:flex;flex-direction:column;min-width:0;}
.pj-wait-item small{font-size:11.5px;color:var(--muted);}

/* ---- Responsive ---- */
@media (max-width:1240px){
  .pj-cols{grid-template-columns:1fr;}
  .pj-cockpit{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .pj-cockpit{grid-template-columns:1fr;}
  .pj-tline{grid-template-columns:1fr 70px 28px;}
  .pj-tline .meta,.pj-tline .val,.pj-tline .toggle{display:none;}
  .pj-trow{grid-template-columns:22px minmax(0,1fr);}
  .pj-tkey{display:none;}
  .pj-tright{grid-column:2;justify-content:flex-start;}
}

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

/* ---- Scheda progetto: le misure che stavano nel markup ---- */
.pj-clock{font-variant-numeric:tabular-nums;}
.pj-bar-gap{margin-top:9px;}
.pj-over{color:var(--red-dark);font-weight:600;}
.pj-railnotes{margin:-2px 0 12px 0;}
.pj-emptybox{text-align:center;color:var(--muted);font-size:12.5px;}
.pj-nosvc{padding:18px 16px;}
.pj-noticket{padding:22px 16px;}
.pj-noactivity{margin:0;color:var(--muted);font-size:12.5px;}
.pj-pencil-on{opacity:1;}
.pj-link{color:var(--primary-dark);}
.pj-role{font-weight:500;color:var(--muted);}
.pj-nosvc-btn{margin:10px auto 0;}

/* ---- Le finestre di progetto: misure che stavano nel markup ---- */
.pj-formnote{font-size:11.5px;color:var(--muted);margin:-4px 0 12px 0;}
.pj-hint{font-size:12.5px;color:var(--muted);}
.pj-svcprog{padding:4px 0;border-top:none;max-width:220px;font-size:11.5px;color:var(--muted);}
.pj-svcbar{max-width:220px;}
.pj-svcbar>div{background:var(--primary);}
.pj-svcacts{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.pj-emptybig{padding:34px 20px;}
.pj-invnote{font-size:12.5px;color:var(--muted);margin:0 0 12px;}
.pj-resico{width:14px;height:14px;color:var(--muted);flex-shrink:0;}
.pj-restext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-ressub{color:var(--muted);font-size:11.5px;}
.pj-resnone{padding:14px;font-size:13px;color:var(--muted);}
.pj-card .pj-ci{background:var(--tint,var(--primary));}
.pj-card .pj-sv .dt{background:var(--tint,var(--primary));}

.pj-actpad{padding:16px;}