/* ============================================================
   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){
  /* I quattro numeri in fila, come le schede di un numero delle altre
     pagine: se ne vede uno e si intravede il successivo. */
  .pj-cockpit{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 -12px 14px;padding:2px 12px 6px;background:none;border:0;border-radius:0;box-shadow:none;}
  .pj-cockpit::-webkit-scrollbar{display:none;}
  .pj-cockpit > .pj-ck{flex:0 0 74%;scroll-snap-align:start;border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow);padding:14px;}
  .pj-ck-big{font-size:22px;}
  /* La testata: la riga dei dettagli va a capo invece di stringersi, e
     i divisori fra i gruppi, che sul desktop separano quattro cose in
     fila, qui separerebbero il niente a fine riga. */
  .pj-detail .topbar .pj-hmeta{gap:2px 4px;margin-top:6px;}
  .pj-detail .topbar .pj-hsep{display:none;}
  .pj-detail .topbar .pj-hmi{height:24px;padding:0 6px 0 0;font-size:12px;}
  .pj-detail .topbar .pj-hstatus{margin-right:6px;}
  /* Le sezioni salgono nella testata: stanno ferme mentre si scorre, e il
     loro posto sotto ai numeri non serve piu'. Senza icone: sette parole
     corte si leggono da sole, e l'icona accanto mangia il posto che serve
     a vederne una in piu'. */
  .pj-detail .topbar .pj-tabbtns{width:auto;margin:0;}
  .pj-detail .topbar .pj-tabbtns svg{display:none;}
  .pj-tline{grid-template-columns:1fr 70px 28px;}
  .pj-tline .meta,.pj-tline .val,.pj-tline .toggle{display:none;}
  /* Un ticket e' una scheda, come sulla Bacheca e in Attivita': la
     chiave e l'avvio in cima, il titolo intero sotto, e in fondo il tempo
     con chi ci lavora. La riga del desktop tiene tutto su una linea, che
     qui era un titolo di due lettere e una tendina tagliata a meta'. La
     colonna di destra si scioglie (`display:contents`) perche' i suoi
     tre pezzi vanno in tre posti diversi. */
  .pj-trow,.pj-trow.nosel{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"chk key play" "main main main" "prog prog av";gap:8px 10px;
    padding:12px;margin:0 0 9px;border:1px solid var(--border);border-radius:14px;background:var(--card);}
  .pj-trow.nosel{grid-template-areas:"key key play" "main main main" "prog prog av";}
  .pj-trow:last-child{border-bottom:1px solid var(--border);margin-bottom:0;}
  .pj-tlist .pj-trow:first-child,.pj-tlist .pj-trow:last-child{border-radius:14px;}
  .pj-trow .pj-chk{grid-area:chk;}
  .pj-trow .pj-tkey{grid-area:key;justify-self:start;padding:3px 7px;border-radius:6px;
    background:var(--track);color:var(--neutral-ink);font-size:10.5px;}
  .pj-trow .pj-tmain{grid-area:main;}
  .pj-trow .pj-ttitle{flex-wrap:wrap;gap:5px 6px;}
  .pj-trow .pj-ttitle>span:not([class]){order:2;flex:1 1 100%;white-space:normal;font-size:14px;line-height:1.3;}
  .pj-trow .pj-tsub{margin-top:8px;}
  .pj-trow .pj-tright{display:contents;}
  .pj-trow .pj-tprog{grid-area:prog;width:auto;align-self:end;}
  .pj-trow .pj-av{grid-area:av;align-self:end;}
  .pj-trow .pj-tright .icon-btn{grid-area:play;width:30px;height:30px;border:1px solid var(--border);
    border-radius:9px;color:var(--primary-dark);}
  .pj-trow .pj-tright .icon-btn svg{width:14px;height:14px;}
  /* Dentro a un pannello senza margini (`flush`) le schede si staccano dal
     bordo: una cornice appoggiata su un'altra cornice e' una riga doppia. */
  .pj-panel-body.flush:has(> .pj-trow){padding:12px;}
}

/* ---- 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-sv .dt{background:var(--tint,var(--primary));}

.pj-actpad{padding:16px;}