/* ============================================================
   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-ci{width:24px;height:24px;border-radius:8px;color:var(--on-accent);font-size:9.5px;font-weight:800;display:grid;place-items:center;flex:0 0 auto;letter-spacing:.2px;}
.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;}
  .pj-bulk{left:12px;right:12px;bottom:12px;transform:translateY(150%);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;}
}

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