/* ============================================================
   PROGETTI — l'elenco.
   Tutte le classi hanno il prefisso pj- per non pestare quelle dei
   componenti condivisi. Colori e spaziature vengono dai token di
   base.css: qui non c'e' un solo valore scritto a mano.

   Il dettaglio di un progetto sta in project-detail.css: sono due
   schermate che cambiano per motivi diversi, e insieme superavano il
   limite di righe che questo progetto si e' dato. Le due regole qui
   sotto valgono per tutte e due, e restano dove si carica per prima.
   ============================================================ */

/* Il focus si vede sempre: chi naviga da tastiera deve sapere dov'e'. */
.pj-list :focus-visible,.pj-detail :focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px;border-radius:8px;}
@media (prefers-reduced-motion:reduce){
  .pj-list *,.pj-detail *{transition:none!important;animation:none!important;}
}

/* ---- Testata di pagina ---- */
.pj-list .topbar h1{font-size:26px;letter-spacing:-.5px;}
.pj-detail .topbar h1{font-size:22px;letter-spacing:-.4px;}
.pj-detail .topbar{margin-bottom:14px;}
/* Nel dettaglio l'unica primaria e' "Avvia timer": il pulsante generico della
   topbar sarebbe la stessa azione due volte. Il timer in corso resta visibile. */
.pj-detail .header-start-btn{display:none;}
.pj-dsub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px;}
.pj-dsub .pj-sep{width:3px;height:3px;border-radius:50%;background:var(--dim);flex-shrink:0;}

/* ---- Riepilogo: le .kpi-card dell'app, qui in versione filtro, con il
   pannello delle notifiche incolonnato a destra ---- */
.pj-top{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:14px;align-items:stretch;margin-bottom:14px;}
.pj-kpis{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));margin-bottom:14px;}
/* Accanto al pannello le tre card stanno sempre su una riga sola: con
   l'auto-fit, fra i 1240 e i 1400 pixel la terza andava a capo e la riga
   perdeva l'allineamento. */
.pj-top .pj-kpis{margin-bottom:0;height:100%;grid-template-columns:repeat(3,minmax(0,1fr));}
/* Tutta la riga alla stessa altezza. Le kpi-card sono <button>, e un bottone
   piu' alto del suo contenuto lo centra in verticale: qui si dichiara la
   colonna, cosi' il contenuto resta ancorato in alto. */
.pj-top .kpi-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:14px 18px;}
/* Etichetta in alto, cifra in basso: se la riga e' piu' alta del contenuto
   lo spazio si apre in mezzo e la card sembra composta, non mezza vuota. */
.pj-top .kpi-card .kpi-value{margin-top:auto;}
.pj-top .kpi-card .kpi-sub{margin-bottom:0;}
.pj-kpis .pj-bar{margin-top:8px;}

/* ---- Barre a soglie: una sola classe per tutte ---- */
.pj-bar{display:block;height:6px;border-radius:5px;background:var(--track);overflow:hidden;position:relative;}
.pj-bar>i{display:block;height:100%;border-radius:5px;background:var(--primary);transition:width .18s;}
.pj-bar.warn>i{background:var(--amber);}
.pj-bar.over>i,.pj-bar.bad>i{background:var(--red);}
.pj-bar.neutral>i{background:var(--dim);}
.pj-bar.thin{height:5px;}

/* ---- Toolbar ---- */
.pj-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.pj-seg{display:inline-flex;gap:4px;background:var(--track);border-radius:10px;padding:3px;}
.pj-seg button{background:transparent;border:none;padding:6px 11px;font-size:12.5px;font-weight:600;border-radius:8px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;white-space:nowrap;}
.pj-seg button svg{width:14px;height:14px;}
.pj-seg button:hover{color:var(--text);}
.pj-seg button.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(46,33,25,.08);}
.pj-seg .c{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--card);border-radius:5px;padding:0 5px;}
.pj-seg button.active .c{background:var(--primary-soft);color:var(--primary-dark);}
.pj-tool-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pj-viewtog{display:inline-flex;background:var(--track);border-radius:10px;padding:3px;gap:3px;}
.pj-viewtog button{width:29px;height:27px;border:none;background:transparent;border-radius:7px;color:var(--muted);cursor:pointer;display:grid;place-items:center;}
.pj-viewtog button svg{width:14px;height:14px;}
.pj-viewtog button.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(46,33,25,.08);}
/* i filtri della toolbar usano AppSelect in variante chip: qui solo l'altezza */
.pj-tool-right .aselect{min-height:33px;}

/* ---- Gruppi collassabili ---- */
.pj-group{margin-bottom:26px;}

/* ---- Card progetto ----
   Un solo asse di lettura, dall'alto in basso: chi, cosa, quanto rende,
   quante ore, chi ci lavora. Niente riquadri annidati. ---- */
/* Tutte le card della riga alla stessa altezza. Lo spazio in piu' si apre
   fra i servizi e le ore, cosi' il blocco ore-profitto resta appoggiato al
   piede e le card si leggono come una griglia, non come una scala. */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:14px;align-items:stretch;grid-auto-rows:1fr;}
.pj-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;overflow:hidden;transition:box-shadow .16s,transform .16s;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;width:100%;}
.pj-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);}
/* Il link e' sul titolo e si stende su tutta la card: un solo elemento
   focusabile invece di una card-bottone con dentro altri bottoni, e Ctrl+clic
   o tasto centrale aprono una scheda nuova come su qualunque link. */
.pj-card-link{color:inherit;}
.pj-card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;}
.pj-card:has(.pj-card-link:focus-visible){box-shadow:var(--shadow-lift);outline:2px solid var(--primary-dark);outline-offset:2px;}
.pj-card-link:focus-visible{outline:none;}
/* i comandi restano sopra al link steso, altrimenti il clic finirebbe li' */
.pj-card .pj-quick,.pj-card .pj-quick *{position:relative;z-index:2;}
.pj-row-link{color:inherit;}
.pj-row-link:hover{color:var(--primary-dark);text-decoration:underline;}
.pj-card.done{background:var(--field);}
.pj-card.done .pj-card-head,.pj-card.done .pj-card-foot{background:transparent;}
/* La testa porta il cliente: quadratino del suo colore con le iniziali,
   nome e, sotto, che tipo di lavoro e'. Poi stato, preferito e comandi. */
/* La testa porta una velatura piena del colore del cliente: riconosci di
   chi e' la card prima di leggerne il nome, senza che il colore competa
   con i dati sotto. */
.pj-card-head{display:flex;align-items:center;gap:7px;padding:9px 11px;min-width:0;background:color-mix(in srgb,var(--tint,var(--primary)) 10%,var(--card));border-bottom:1px solid color-mix(in srgb,var(--tint,var(--primary)) 14%,var(--border));}
.pj-card-head .client-ava,.wl-g-head .client-ava{width:24px;height:24px;}
.pj-card-cl{font-size:12px;font-weight:700;line-height:1.2;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-card-cl small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Il badge si stacca dalla velatura con un filo del proprio colore: un
   cliente blu e lo stato "Attivo", che e' anch'esso blu, altrimenti si
   confondono, e non e' un caso che si possa escludere a monte. */
.pj-card-head .badge{flex:0 0 auto;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 22%,transparent);}
.pj-card-head .icon-btn{width:26px;height:26px;}
.pj-card-body{padding:13px;display:flex;flex-direction:column;flex:1 1 auto;}
.pj-card-body .pj-ore{margin-top:auto;}
.pj-title{font-size:15px;font-weight:700;letter-spacing:-.3px;margin:0 0 10px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.pj-card.done .pj-title{color:var(--muted);}

/* Anello a sinistra, servizi a destra: un asse di lettura solo. */
.pj-split{display:flex;gap:13px;align-items:flex-start;padding-bottom:13px;border-bottom:1px solid var(--line-soft);}
.pj-split-left{flex:0 0 auto;width:72px;text-align:center;}
.pj-split-left small{display:block;font-size:9.5px;font-weight:600;color:var(--muted);margin-top:5px;line-height:1.25;}
.pj-split-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:2px;}
.pj-ring.lg{width:68px;height:68px;}
.pj-ring.lg svg{width:68px;height:68px;}
.pj-ring.lg b{font-size:13px;}
.pj-sv{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;min-width:0;}
.pj-sv .dt{width:8px;height:8px;border-radius:3px;flex:0 0 auto;}
.pj-sv .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-sv b{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.pj-sv.more{font-size:10.5px;color:var(--muted);font-weight:600;}
.pj-sv.empty{justify-content:center;gap:6px;font-size:11px;font-weight:500;color:var(--muted);border:1px dashed var(--dim);border-radius:9px;padding:7px 9px;}
.pj-sv.empty svg{width:13px;height:13px;}

/* Le ore a tutta larghezza: la barra e' l'unica cosa che attraversa la card. */
.pj-ore{padding-top:12px;}
.pj-ore-top{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-bottom:5px;min-width:0;}
.pj-ore-top>svg{width:13px;height:13px;flex-shrink:0;}
.pj-ore-top b{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;}
.pj-ore-top b span{color:var(--muted);font-weight:500;}
.pj-gap{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--amber-dark);background:var(--amber-soft);border-radius:6px;padding:1px 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-gap svg{width:11px;height:11px;flex-shrink:0;}

/* Il risultato: una sola pastiglia, il numero per cui si apre la pagina. */
.pj-res{display:flex;align-items:baseline;gap:7px;margin-top:12px;padding:8px 11px;border-radius:10px;background:var(--primary-soft);color:var(--primary-dark);font-size:11px;min-width:0;}
.pj-res svg{width:14px;height:14px;flex:0 0 auto;align-self:center;}
.pj-res b{font-size:15px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;}
.pj-res span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85;}
/* Come .pj-quick: sopra il link che copre la scheda, se no il riquadro
   non si apre mai perche' il passaggio del mouse non arriva fin qui. */
.pj-card .pj-res .info-tip{position:relative;z-index:2;margin-left:auto;align-self:center;color:inherit;opacity:.55;}
.pj-card .pj-res .info-tip:hover,.pj-card .pj-res .info-tip:focus-visible{opacity:1;}
.pj-res.bad{background:var(--red-soft);color:var(--red-dark);}
.pj-res.idle{background:var(--track);color:var(--neutral-ink);}

.pj-card-foot{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid var(--border);background:var(--field);min-width:0;flex-wrap:wrap;}
.pj-card-foot .pj-foot-tag{margin-left:auto;}
.pj-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--primary);display:inline-block;}
.pj-dot.warn{background:var(--amber);}
.pj-dot.bad{background:var(--red);}
.pj-dot.idle{background:var(--dim);}

.pj-foot{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);min-height:26px;flex-wrap:wrap;}
.pj-avs{display:flex;flex-shrink:0;}
.pj-av{width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-accent);font-size:9.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--card);margin-left:-6px;flex-shrink:0;}
.pj-av:first-child{margin-left:0;}
.pj-av.sm{width:20px;height:20px;font-size:9px;border:none;}
.pj-foot-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;}
.pj-foot-tag svg{width:12px;height:12px;}
.pj-quick{display:flex;gap:2px;flex:0 0 auto;}
.pj-quick .icon-btn,.pj-quick .action-menu{flex-shrink:0;}
/* timer attivo su questo progetto: il pallino batte, la card lo dice */
.pj-running{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);border-radius:6px;padding:3px 8px;white-space:nowrap;}
.pj-running i.dot{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:pulseDot 1.4s infinite;display:inline-block;}
/* alert automatici: pastiglie sotto il titolo, mai testo colorato sciolto */
.pj-alerts{display:flex;gap:5px;flex-wrap:wrap;margin:-4px 0 11px 0;}
.pj-alert-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--red-soft);color:var(--red-dark);white-space:nowrap;}
.pj-alert-chip.warn{background:var(--amber-soft);color:var(--amber-dark);}
.pj-alert-chip svg{width:11px;height:11px;}

/* ---- Pastiglia scadenza: una sola forma, in lista, tabella, panoramica
   e righe dei ticket ---- */
.pj-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px 3px 7px;border-radius:7px;background:var(--track);color:var(--neutral-ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.pj-chip svg{width:12px;height:12px;flex-shrink:0;}
.pj-chip.late{background:var(--red-soft);color:var(--red-dark);font-weight:700;}
.pj-chip.soon{background:var(--amber-soft);color:var(--amber-dark);}
.pj-chip.done{background:var(--primary-soft);color:var(--primary-dark);}
.pj-chip.none{background:transparent;color:var(--muted);padding-left:0;}
.pj-chip.sm{font-size:10.5px;padding:2px 7px 2px 6px;}
.pj-chip.sm svg{width:11px;height:11px;}

/* Percentuale in coda a una cifra, ovunque serva (economia per servizio). */
.pj-pct{font-size:10.5px;font-weight:600;color:var(--muted);margin-left:5px;}

/* ---- Vista lista: righe di griglia, non una tabella ----
   Una <table> non si ripiega: sotto i 960px le stesse celle diventano una
   scheda cambiando solo le aree della griglia, senza un secondo markup. */
.pj-rowswrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.pj-rows{overflow-x:auto;min-width:0;}
.pj-row{display:grid;grid-template-columns:var(--pj-cols);align-items:center;column-gap:12px;padding:0 14px;position:relative;min-width:1096px;}
.pj-head{background:var(--field);border-bottom:1px solid var(--border);height:38px;position:sticky;top:0;z-index:3;}
.pj-th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap;min-width:0;}
.pj-th.right{justify-content:flex-end;}
/* `:not(.chk)`: senza, questa regola toglieva bordo e fondo anche alla
   casella "seleziona tutti", che nell'intestazione spariva del tutto. */
.pj-th button:not(.chk){border:none;background:none;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;border-radius:5px;padding:2px 3px;margin:-2px -3px;}
.pj-th button:not(.chk):hover{color:var(--text);}
.pj-th button:not(.chk) svg{width:12px;height:12px;opacity:0;}
.pj-th button:not(.chk):hover svg{opacity:.45;}
.pj-th button.on{color:var(--primary-dark);}
.pj-th button.on svg{opacity:1;}
/* I soldi sono allineati a destra e finivano appiccicati alla scadenza. */
.pj-th.eco,.c-eco{padding-right:12px;}

.pj-body .pj-row{min-height:64px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .12s;}
.pj-body .pj-row:last-child{border-bottom:none;}
.pj-body .pj-row:hover{background:var(--hover);}
.pj-body .pj-row.selected{background:var(--primary-soft);}
.pj-body .pj-row.done{color:var(--muted);}
.pj-body .pj-row.done .pj-rname{color:var(--muted);}
/* Il timer acceso e' l'unica riga colorata sul bordo: e' uno stato che dura
   pochi minuti, non l'identita' di un cliente. */
.pj-row.running::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--primary);}

/* La casella qui e' un <button>, e un bottone nasce con un padding suo che
   schiaccerebbe il segno di spunta a zero. */
.pj-rows .chk{padding:0;appearance:none;}
.chk.some{background:var(--primary);border-color:var(--primary);}
.chk.some svg{width:10px;height:10px;color:var(--on-accent);}
.pj-row .chk{position:relative;z-index:2;}
.pj-row .c-chk,.pj-row .c-star{display:flex;align-items:center;}
.pj-row .c-star .pj-star{margin:0;}

/* nome, cliente e modalita' */
.c-proj{min-width:0;}
.pj-rname{display:block;font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pj-rname:hover{color:var(--primary-dark);text-decoration:underline;}
.pj-rmeta{display:flex;align-items:center;gap:7px;margin-top:5px;min-width:0;}
.pj-rmeta .nm{font-size:11.5px;font-weight:600;color:var(--neutral-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.pj-rmeta .client-mark{flex:0 0 auto;}
.pj-rmeta .tag{flex:0 0 auto;font-size:10.5px;font-weight:600;color:var(--neutral-ink);background:var(--track);border-radius:5px;padding:2px 6px;white-space:nowrap;}

/* avanzamento e ore: stessa forma, cosi' si confrontano a colpo d'occhio */
.pj-metric{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pj-metric-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;white-space:nowrap;min-width:0;}
.pj-metric-top b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
.pj-metric-top small{font-size:11px;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;}
.pj-metric-top small.warn{color:var(--amber-dark);font-weight:600;}
.pj-metric-top small.over{color:var(--red-dark);font-weight:600;}
.pj-metric .pj-bar{height:6px;}
.pj-bar.none{background:repeating-linear-gradient(90deg,var(--track) 0 4px,transparent 4px 7px);}

/* valore e margine */
.pj-eco{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap;min-width:0;}
.pj-eco b{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.pj-eco b.empty{font-size:11.5px;font-weight:600;color:var(--muted);}
.pj-eco small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);}
/* Un colore solo per la percentuale: e' un dato, non una pagella. Il rosso
   arriva quando il margine e' negativo, l'unica cosa che il conto sa
   giudicare da se'. */
.pj-mpill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--primary-soft);color:var(--primary-dark);font-variant-numeric:tabular-nums;}
.pj-mpill svg{width:11px;height:11px;}
.pj-mpill.bad{background:var(--red-soft);color:var(--red-dark);}

/* scadenza: la data nella pastiglia, il "quanto manca" sotto */
.pj-due{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0;}
.pj-due small{font-size:11px;color:var(--muted);padding-left:2px;white-space:nowrap;}
.pj-dpill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px;white-space:nowrap;background:var(--track);color:var(--neutral-ink);}
.pj-dpill svg{width:12px;height:12px;}
.pj-dpill.soon{background:var(--amber-soft);color:var(--amber-dark);}
.pj-dpill.late{background:var(--red-soft);color:var(--red-dark);}
.pj-dpill.done{background:var(--primary-soft);color:var(--primary-dark);}
.pj-due-none{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);}
.pj-due-none svg{width:13px;height:13px;}

/* ticket */
.pj-tk{display:flex;align-items:center;justify-content:flex-end;gap:5px;width:100%;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;border:none;background:none;cursor:pointer;padding:4px 6px;margin-right:-6px;border-radius:7px;color:inherit;position:relative;z-index:2;}
.pj-tk:hover{background:var(--card);box-shadow:0 0 0 1px var(--border) inset;}
.pj-tk svg{width:16px;height:16px;color:var(--muted);}
.pj-tk .tot{color:var(--muted);font-weight:500;}
.pj-tk.zero{color:var(--muted);font-weight:500;}

/* azioni: il timer compare al passaggio, il menu resta */
.pj-act{display:flex;align-items:center;justify-content:flex-end;gap:3px;position:relative;z-index:2;}
.pj-timer{width:29px;height:29px;border-radius:9px;border:none;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s;}
.pj-timer svg{width:14px;height:14px;}
.pj-row:hover .pj-timer,.pj-row:focus-within .pj-timer,.pj-timer.on{opacity:1;}
.pj-timer:hover{background:var(--primary);color:var(--on-accent);}
.pj-timer.on{background:var(--primary);color:var(--on-accent);}

/* piede: i totali sotto la colonna che riassumono */
.pj-foot{background:var(--field);border-top:1px solid var(--border);min-height:48px;}
.pj-foot .lbl{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.pj-foot .lbl.right{justify-content:flex-end;}
.pj-foot .lbl b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}

/* barra delle azioni multiple: stessa famiglia scura dei ticket, ma
   galleggia sopra la lista invece di spingerla in basso */
.pj-bulk{position:fixed;left:50%;bottom:22px;z-index:60;margin-top:0;flex-wrap:nowrap;padding:8px 8px 8px 16px;border-radius:14px;box-shadow:var(--shadow-lift);transform:translate(-50%,150%);transition:transform .22s ease;pointer-events:none;}
.pj-bulk.show{transform:translate(-50%,0);pointer-events:auto;}
.pj-bulk>span{font-size:13px;font-weight:600;margin-right:8px;white-space:nowrap;}
.pj-bulk button{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;background:transparent;}
.pj-bulk button:hover{background:rgba(255,255,255,.14);}
.pj-bulk button svg{width:14px;height:14px;}
.pj-bulk button.x{opacity:.7;padding:7px;}

/* ---- Stato vuoto (sempre con un'azione) ---- */
.pj-empty{background:var(--card);border:1px dashed var(--dim);border-radius:var(--radius);padding:40px 20px;text-align:center;}
.pj-empty-ic{width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary-dark);display:grid;place-items:center;margin:0 auto 12px;}
.pj-empty-ic svg{width:20px;height:20px;}
.pj-empty h3{font-size:14px;font-weight:700;margin:0 0 4px;}
.pj-empty p{font-size:12.5px;color:var(--muted);margin:0 auto 14px;max-width:420px;}
.pj-empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

/* ---- Preferiti, "da controllare" e filtri avanzati ---- */
/* Preferiti: una stella, spenta finche' non serve. Sopra il link steso
   della card, altrimenti il clic aprirebbe il progetto. */
.pj-star{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;border-radius:7px;color:var(--dim);cursor:pointer;padding:0;margin-left:2px;}
.pj-star svg{width:15px;height:15px;}
.pj-star:hover{background:var(--hover);color:var(--amber-dark);}
.pj-star.on{color:var(--amber);}
.pj-star.on svg{fill:var(--amber);}
.pj-th-star,.pj-td-star{width:30px;padding-right:0 !important;}
.pj-td-star .pj-star{margin:0;}

/* Da controllare: un pannello di notifiche alto quanto i numeri che gli
   stanno accanto. Il pallino porta il tono, il nome resta scuro e leggibile,
   la riga sotto dice cosa c'e' che non va. */
/* Token del brandkit, non valori scelti a occhio: padding della .kpi-card
   che gli sta accanto, etichetta maiuscola 10.5/700/.3px, pallini da 7px
   come tutti gli altri dell'app, --amber e --red riempiono, --amber-dark e
   --red-dark scrivono. */
.pj-notif{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px 4px;}
.pj-notif-head{margin-bottom:7px;}
/* Un colore per tipo di problema, portato dall'icona e non dal fondo:
   riempire ogni riga faceva sembrare tutto urgente allo stesso modo, e un
   colore che c'e' sempre smette di dire qualcosa. */
.alert-row.t-rosso{--tint:var(--red-dark);}
.alert-row.t-ambra{--tint:var(--amber-dark);}
.alert-row.t-viola{--tint:var(--violet);}
.alert-row.t-blu{--tint:var(--blue);}
.alert-row.t-neutro{--tint:var(--muted);}
.pj-notif .alert-row,.wl-g .alert-row{background:transparent;color:inherit;padding:5px 8px;margin:0 -8px 1px;gap:9px;border-radius:9px;}
.pj-notif .alert-row:hover,.wl-g .alert-row:hover{background:var(--hover);filter:none;}
.pj-notif .alert-row svg,.wl-g .alert-row svg{width:15px;height:15px;color:var(--tint,var(--muted));}
.pj-notif .alert-row b,.wl-g .alert-row b{color:var(--text);font-weight:700;max-width:none;flex:0 1 auto;}
/* Nel pannello il motivo e' secondario al progetto; nella modale il progetto
   sta nella testata del gruppo e il motivo diventa il testo principale. */
.pj-notif .alert-row span{color:var(--muted);font-weight:500;}
.wl-g .alert-row span{color:var(--text);font-weight:600;}

/* La testata del pannello e' quella delle kpi-card che gli stanno accanto. */
.pj-notif .kpi-icon.in{background:var(--primary-soft);color:var(--primary-dark);}
.pj-notif .kpi-label{display:flex;align-items:center;gap:7px;}
/* Il conteggio ha la forma della pastiglia dei segmenti di stato. */
.pj-notif .kpi-label .c{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--track);border-radius:5px;padding:1px 6px;}

.pj-notif-more{margin-top:3px;border-top:1px solid var(--line-soft);border-radius:0 0 10px 10px;text-align:center;padding:6px 0 5px;}
.pj-notif-empty{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:0 0 8px;}
.pj-notif-empty svg{width:15px;height:15px;flex:0 0 auto;color:var(--primary);}

/* ---- Modale "Da controllare": si agisce su un progetto, non su un avviso
   sciolto, quindi le segnalazioni stanno sotto il progetto che le genera.
   La testata del gruppo dice di chi e' e quante ne ha, ed e' essa stessa un
   link: a volte si vuole aprire il progetto, non il singolo problema. ---- */
.wl-sum{display:flex;flex-wrap:wrap;gap:7px;margin:-10px 0 16px;}
.wl-sum .badge{gap:5px;padding:4px 9px;}
.wl-sum .badge svg{width:12px;height:12px;}
.wl-g{margin-bottom:18px;}
.wl-g:last-child{margin-bottom:0;}
.wl-g-head{display:flex;align-items:center;gap:9px;padding:7px 8px;margin:0 -8px 7px;border-radius:10px;text-decoration:none;color:inherit;}
.wl-g-head:hover{background:var(--hover);}
.wl-g-txt{min-width:0;flex:1;}
.wl-g-txt b{display:block;font-size:13px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wl-g-txt small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wl-g-head .badge{flex:0 0 auto;}
.wl-g-head .go{width:15px;height:15px;color:var(--dim);flex:0 0 auto;}
.wl-g-head:hover .go{color:var(--muted);}
/* Le righe rientrano sotto la testata: si vede a colpo d'occhio che
   appartengono al progetto sopra, senza bisogno di una cornice. */
/* Rientro sotto la testata del gruppo: 33px meno gli 8 di cui la riga
   sborda a sinistra per l'area cliccabile. */
.wl-g .alert-row{margin-left:25px;margin-bottom:1px;}

/* Il pulsante Filtri sta accanto ai selettori a chip e ne prende la forma. */
.pj-fbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;min-height:34px;}
.pj-fbtn svg{width:14px;height:14px;}
.pj-fbtn:hover{border-color:var(--primary-mid);color:var(--text);}
.pj-fbtn.on{color:var(--text);border-color:var(--primary-mid);background:var(--primary-soft);}
.pj-fbtn .c{font-size:10.5px;font-weight:700;background:var(--primary);color:var(--on-accent);border-radius:999px;padding:1px 6px;line-height:1.5;}
#genericPopover.pj-fpop{width:min(560px,calc(100vw - 20px));padding:14px 16px 6px;}
/* Quando il pannello scorre, il titolo e la X restano raggiungibili: i
   margini negativi lo portano fino ai bordi, altrimenti i chip passerebbero
   nell'intercapedine del padding. */
.pj-fpanel-head{display:flex;align-items:center;gap:8px;position:sticky;top:-14px;z-index:1;background:var(--card);margin:-14px -16px 8px;padding:14px 16px 8px;}
.pj-fpanel-head b{font-size:13.5px;margin-right:auto;}
.pj-fgroup{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;align-items:start;padding:9px 0;border-top:1px solid var(--line-soft);}
.pj-fgroup-lab{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--neutral-ink);padding-top:5px;}
.pj-fgroup-lab svg{width:13px;height:13px;color:var(--muted);}
.pj-fopts{display:flex;flex-wrap:wrap;gap:5px;}
.qf-chip.sm{padding:4px 10px;font-size:11.5px;font-family:inherit;}
.qf-chip.sm:hover{border-color:var(--primary-mid);color:var(--text);}
.qf-chip.sm.active:hover{color:var(--on-accent);}
/* I filtri attivi restano in vista sotto la barra, ognuno si toglie da solo. */
.pj-active-filters{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 14px;}
.pj-afchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--primary-dark);background:var(--primary-soft);border:none;border-radius:999px;padding:5px 9px 5px 11px;cursor:pointer;font-family:inherit;}
.pj-afchip svg{width:12px;height:12px;}
.pj-afchip .x{opacity:.6;}
.pj-afchip:hover .x{opacity:1;}

/* ---- Responsive ---- */
@media (max-width:1240px){
  /* Sotto questa larghezza la colonna delle notifiche stringerebbe i numeri
     fino a mandarli a capo: meglio uno sotto l'altro, e le card tornano a
     disporsi da sole. */
  .pj-top{grid-template-columns:1fr;}
  .pj-top .pj-kpis{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));height:auto;}
}
@media (max-width:1000px){
  .pj-grid{grid-template-columns:1fr;}
  .pj-tool-right{margin-left:0;width:100%;}
  /* cinque stati non entrano in un telefono: il segmento scorre invece di
     sbordare fuori dalla pagina */
  .pj-seg{overflow-x:auto;scrollbar-width:none;max-width:100%;}
  .pj-seg::-webkit-scrollbar{display:none;}
}
@media (max-width:640px){
  /* Le stesse celle, ripiegate: una sola griglia per due forme. */
  .pj-row{min-width:0;grid-template-columns:26px 1fr auto;column-gap:10px;row-gap:10px;padding:14px;
    grid-template-areas:"chk proj star" ".  st  st" ".  prog prog" ".  hrs hrs" ".  eco eco" ".  due act";}
  .pj-head{display:none;}
  .pj-row .c-chk{grid-area:chk;align-self:start;margin-top:2px;}
  .pj-row .c-star{grid-area:star;align-self:start;}
  .pj-row .c-proj{grid-area:proj;}
  .pj-row .c-st{grid-area:st;}
  .pj-row .c-prog{grid-area:prog;}
  .pj-row .c-hrs{grid-area:hrs;}
  .pj-row .c-eco{grid-area:eco;}
  .pj-row .c-eco .pj-eco{flex-direction:row;align-items:baseline;justify-content:space-between;width:100%;}
  .pj-row .c-due{grid-area:due;}
  .pj-row .c-tk{display:none;}
  .pj-row .c-act{grid-area:act;}
  .pj-timer{opacity:1;}
  .pj-foot{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 14px;min-width:0;}
  .pj-foot .hide-m{display:none;}
  /* **Sopra alla barra di navigazione, non sotto.** A dodici pixel dal
     fondo la barra della selezione finiva mezza dietro ai cinque posti
     della navigazione, e i suoi pulsanti non si premevano. */
  .pj-bulk{left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0px));
    transform:translateY(200%);flex-wrap:wrap;padding:10px 12px;}
  .pj-bulk.show{transform:none;}
  .pj-bulk>span{width:100%;margin:0 0 2px;}
  .pj-list .topbar h1{font-size:22px;}

  /* **Due schede per riga**, come ogni altra pagina. `.pj-kpis` non passa
     dalla regola di `components.css` perche' non porta la classe `nX`, e
     il suo `auto-fit` con un minimo di 196px su trecentonovanta pixel fa
     **una** colonna: tre schede alte, con un'etichetta e una cifra
     corta, che si prendevano tutta la prima schermata prima che si
     arrivasse ai progetti. */
  .pj-kpis,.pj-top .pj-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  /* Una colonna sola, e `minmax(0,1fr)`: con `1fr` il carosello dei
     numeri allargava la colonna oltre lo schermo. */
  .pj-top{grid-template-columns:minmax(0,1fr);}

  /* **Gli stati vanno a capo, non scorrono.** Sono sei parole corte: a
     mille pixel scorrere era il male minore, a trecentonovanta se ne
     vedono tre e le altre stanno dietro a uno scorrimento orizzontale
     dentro a una pastigliera — il gesto che nessuno prova. Due righe
     costano trenta pixel e le fanno vedere tutte. */
  .pj-seg{overflow-x:visible;flex-wrap:wrap;max-width:100%;}

  /* ---- la testata del telefono (`projects/mobile.js`) ----
     Gli stati sono pastiglie che scorrono nella riga di contesto, con il
     pulsante dei filtri fermo a destra: e' un affinamento, non una
     destinazione, e sette pastiglie su due righe si prendevano la
     schermata. Il numero sul pulsante conta i filtri accesi, e a zero non
     c'e'. */
  .pj-mchips{display:flex;gap:7px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;}
  .pj-mchips::-webkit-scrollbar{display:none;}
  .pj-mchips .qf-chip{flex:0 0 auto;white-space:nowrap;}
  /* Ordine, cliente e i filtri veloci: una fila che esce dai margini e
     scorre, come le pastiglie rapide di Attivita'. */
  .pj-mtools{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:2px -12px 0;padding:2px 12px 4px;}
  .pj-mtools::-webkit-scrollbar{display:none;}
  .pj-mtools > *{flex:0 0 auto;}
  .pj-mcount{margin:6px 2px 10px;font-size:12px;color:var(--muted);}

  /* ---- «Da controllare»: la scheda calda ----
     Sul desktop sta accanto ai numeri e ne prende la veste; qui sta da
     sola fra i numeri e l'elenco, e il fondo caldo dice che e' la cosa
     da guardare prima. Le righe vanno separate da un filo invece di
     stare nel loro riquadro al passaggio del mouse, che qui non c'e'. */
  .pj-notif{background:var(--primary-tint);border-color:color-mix(in srgb, var(--primary-mid) 45%, var(--border));
    box-shadow:none;padding:13px 14px 12px;}
  .pj-notif .pj-notif-head{margin-bottom:6px;}
  .pj-notif .kpi-icon{display:none;}
  .pj-notif .kpi-label{flex:1;font-size:13.5px;font-weight:700;color:var(--text);}
  .pj-notif .kpi-label .c{margin-left:auto;background:var(--amber-soft);color:var(--amber-dark);}
  .pj-notif .alert-row{margin:0;padding:9px 0;border-radius:0;font-size:12.5px;
    border-top:1px solid color-mix(in srgb, var(--primary-mid) 45%, var(--border));}
  .pj-notif .alert-row b{flex:0 1 auto;}
  /* La scheda di un progetto senza la fascia colorata in testa: su una
     colonna sola le schede sono una sotto l'altra, e dieci fasce di dieci
     colori diversi fanno una pagina a righe. Il colore del cliente resta
     nel suo quadratino; sotto al nome torna il tipo di incarico, che la
     soglia dei 600 aveva tolto per far posto. */
  .pj-card-head{background:transparent;border-bottom:0;padding:13px 14px 0;align-items:flex-start;}
  .pj-card .pj-card-cl{font-size:13px;}
  .pj-card .pj-card-cl small{display:block;font-size:11px;margin-top:2px;}
  .pj-notif-more.alert-more{margin-top:8px;height:40px;padding:0;border:1px solid var(--border);border-radius:12px;
    background:var(--card);color:var(--text);font-weight:600;text-align:center;}
}

/* Telefono: la card tiene cliente, nome, stato, un avviso, profitto, barra
   e scadenza. Servizi, periodo, team e conteggi si comprimono. */
@media (max-width:600px){
  .pj-alert-chip:nth-child(n+2),.pj-gap{display:none;}
  .pj-card-cl small{display:none;}
  .alert-row b{max-width:100%;}
  .pj-fgroup{grid-template-columns:minmax(0,1fr);gap:4px;}
}

/* Le colonne dell'elenco sono due disposizioni fisse, non un dato: con i
   numeri dell'economia visibili o senza. */
.pj-rows.pj-rows-full{--pj-cols:32px 26px minmax(226px,286px) 100px minmax(126px,.9fr) minmax(138px,1.1fr) minmax(152px,.4fr) 138px 62px 70px;}
.pj-rows.pj-rows-lite{--pj-cols:32px 26px minmax(226px,300px) 100px minmax(132px,1fr) minmax(146px,1.2fr) 142px 66px 70px;}