/* Lavorazioni a gruppi (owner 3-10): l'elenco dei lavori, prefisso lv-. Solo gettoni di app.css (--piano, --linea,
   --ink*, --bordo-ctl, --campo, --accento*, --marchio, --allerta, --cifre): chiaro e scuro vengono da li'. Il fucsia
   solo per oggi e l'allerta (ritardo, senza preventivo, il documento che il passo dopo chiede). Le righe e le testate
   dei gruppi stanno su una griglia sola: nome · stato · scadenza o passo · imponibile · pallini.
   La striscia delle fasi e i pallini sono di lavoro_filiera.css. Le misure sono quelle della proposta (giudice 2). */

.lv-elenco { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-content:start; min-width:0; }
.lv-elenco > * { min-width:0; }
.lv-elenco [hidden] { display:none !important; }
.lv-nb { white-space:nowrap; }
.lv-tenue { color:var(--ink-3); }

/* la testata: titolo, numeri dei gruppi, ricerca */
.lv-testa { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 20px; }
.lv-testa h1 { margin:0; font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.lv-numeri { margin:2px 0 0; font-size:13px; color:var(--ink-2); }
.lv-numeri .manager-number { color:var(--ink); }
.lv-numeri .lv-tenue .manager-number { color:var(--ink-3); }
.lv-cerca-riga { display:flex; gap:8px; align-items:center; min-width:0; }
.lv-cerca { display:flex; align-items:center; gap:8px; height:34px; width:340px; max-width:100%; padding:0 10px;
  border:1px solid var(--bordo-ctl); border-radius:7px; background:var(--campo); }
.lv-cerca:focus-within { border-color:var(--accento); }
.lv-cerca input { flex:1; width:100%; min-width:0; height:100%; border:0; background:none; outline:none; color:var(--ink);
  font:inherit; font-size:13px; text-overflow:ellipsis; }
.lv-cerca input::placeholder { color:var(--ink-3); }
.lv-kbd { flex:none; padding:0 5px; border:1px solid var(--linea); border-radius:4px; font-family:var(--cifre); font-size:11px; color:var(--ink-3); }

/* la frase in testa: i pezzi sottolineati sono filtri (lf-lk), la freccia porta al gruppo */
.lv-frase { margin:0; font-size:15px; line-height:1.6; max-width:92ch; text-wrap:pretty; color:var(--ink); }
.lf-lk { display:inline; border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--linea); }
.lf-lk:hover { text-decoration-color:currentColor; }
.lf-lk:focus-visible { outline:2px solid var(--accento); outline-offset:2px; border-radius:2px; }
.lf-lk.lf-allerta { color:var(--allerta); }
.lf-lk[aria-pressed="true"] { text-decoration-color:currentColor; text-decoration-thickness:2px; }
.lf-lk.lv-vai { text-decoration-style:dotted; }

/* i controlli: cliente, Filtri, i filtri accesi come etichette con ×, Azzera */
.lv-controlli { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; }
.lv-ctl { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--bordo-ctl); border-radius:7px;
  background:transparent; color:var(--ink); font:inherit; font-size:13px; line-height:18px; white-space:nowrap; cursor:pointer; }
.lv-ctl:hover { background:var(--piano-2); }
.lv-ctl:focus-visible { outline:2px solid var(--accento); outline-offset:2px; }
.lv-ctl[aria-expanded="true"], .lv-ctl[aria-pressed="true"] { background:var(--accento-tinta); border-color:var(--ink-2); }
.lv-ctl b { font-weight:400; color:var(--ink-3); }
.lv-ctl b:empty { display:none; }
.lv-pillole { display:contents; }
/* Raggruppa per stato | cliente: a destra nella riga dei controlli (al telefono nel pannello) */
.lv-raggruppa { display:inline-flex; align-items:center; gap:8px; margin-left:auto; font-size:12px; color:var(--ink-2); white-space:nowrap; }
.lv-seg { display:inline-flex; border:1px solid var(--linea); border-radius:7px; overflow:hidden; }
.lv-seg button { padding:3px 10px; border:0; background:none; color:var(--ink-2); font:inherit; font-size:12px; line-height:18px; cursor:pointer; }
.lv-seg button + button { border-left:1px solid var(--linea); }
.lv-seg button[aria-pressed="true"] { background:var(--accento-tinta); color:var(--ink); font-weight:600; }
.lv-seg button:focus-visible { outline:2px solid var(--accento); outline-offset:-2px; }
.lv-pillola { display:inline-flex; align-items:center; gap:2px; max-width:100%; min-width:0; padding:0 2px 0 10px;
  border:1px solid var(--ink-2); border-radius:999px; font-size:12px; white-space:nowrap; color:var(--ink); }
.lv-pl-t { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lv-pillola button { display:inline-grid; place-items:center; flex:none; min-width:30px; min-height:30px; padding:0; border:0;
  border-radius:999px; background:none; color:var(--ink-2); font-size:15px; line-height:1; cursor:pointer; }
.lv-pillola button:hover { background:var(--piano-2); color:var(--ink); }
.lv-pillola button:focus-visible { outline:2px solid var(--accento); outline-offset:-2px; }
.lv-cliente { position:relative; min-width:0; }
.lv-cliente-in { width:220px; max-width:100%; padding:5px 10px; border:1px solid var(--bordo-ctl); border-radius:7px;
  background:var(--campo); color:var(--ink); font:inherit; font-size:13px; line-height:18px; }
.lv-cliente-in::placeholder { color:var(--ink-3); }
.lv-cliente-in:focus { outline:none; border-color:var(--accento); }
.lv-sugg { position:absolute; left:0; top:calc(100% + 4px); z-index:40; display:grid; min-width:260px;
  max-width:min(360px, calc(100vw - 48px)); max-height:320px; overflow:auto; padding:4px; background:var(--piano);
  border:1px solid var(--linea); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.lv-sugg button { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 9px; border:0;
  border-radius:5px; background:none; color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.lv-sugg button:hover, .lv-sugg button:focus { background:var(--piano-2); outline:none; }
.lv-sugg button:focus-visible { outline:2px solid var(--accento); outline-offset:-2px; }
.lv-sugg small { color:var(--ink-3); font-size:12px; white-space:nowrap; }
.lv-sugg-vuoto { padding:6px 9px; color:var(--ink-3); }

/* il pannello Filtri */
.lv-filtri { display:grid; gap:10px; max-width:680px; padding:12px 14px; border:1px solid var(--linea); border-radius:8px;
  background:var(--piano); }
.lv-f-riga { display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; align-items:center; }
.lv-f-riga > span { font-size:12px; line-height:1.3; color:var(--ink-2); }
.lv-f-riga > span small { display:block; font-size:11px; color:var(--ink-3); }
.lv-scelte { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.lv-scelte > button { padding:2px 10px; border:1px solid var(--linea); border-radius:999px; background:none; color:var(--ink-2);
  font:inherit; font-size:12px; line-height:18px; cursor:pointer; }
.lv-scelte > button:hover { color:var(--ink); }
.lv-scelte > button[aria-pressed="true"] { border-color:var(--ink); color:var(--ink); background:var(--accento-tinta); }
.lv-scelte > button:focus-visible { outline:2px solid var(--accento); outline-offset:1px; }
.lv-f-piede { display:flex; justify-content:flex-end; }

/* i gruppi: righe e testate sulla stessa griglia. --lv-colonne sono le colonne del link (nome · stato · scadenza o
   passo · imponibile), --lv-pallini la colonna dei pallini, fuori dal link. */
.lv-gruppi { container:lv-elenco / inline-size; display:grid; gap:8px; min-width:0; }
.lv-gruppo { overflow:hidden; border:1px solid var(--linea-2); border-radius:8px; background:var(--piano);
  --lv-colonne:minmax(220px,1fr) 140px minmax(200px,1fr) 92px; --lv-imp:92px; --lv-pallini:166px; --lv-gap:16px; }
.lv-elenco:not(.lv-soldi) .lv-gruppo { --lv-colonne:minmax(220px,1fr) 150px minmax(200px,1fr); }
/* i gruppi di righe compatte (Fermi, Da chiudere, Archivio) senza sottogriglie (browser vecchi; con le sottogriglie vale
   la griglia del gruppo, piu' sotto): il nome ha il doppio dello spazio, il perche' o il passo dopo ne usano al piu' ~300
   px; l'imponibile e i pallini restano dove sono negli altri gruppi */
.lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) { --lv-colonne:minmax(220px,2fr) 140px minmax(200px,1fr) 92px; }
.lv-elenco:not(.lv-soldi) .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) { --lv-colonne:minmax(220px,2fr) 150px minmax(200px,1fr); }
.lv-g-titolo { margin:0; font:inherit; }
.lv-g-testa { display:grid; grid-template-columns:var(--lv-colonne) var(--lv-pallini); column-gap:var(--lv-gap); row-gap:2px;
  align-items:baseline; width:100%; padding:10px 14px; border:0; border-left:3px solid transparent; background:none;
  color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.lv-elenco:not(.lv-soldi) .lv-g-testa { grid-template-columns:var(--lv-colonne); }
/* il passaggio del mouse: un velo leggero, perche' l'allerta e l'inchiostro tenue restino leggibili (4,5:1) anche nel chiaro */
.lv-g-testa:hover { background:color-mix(in srgb, var(--piano-2) 55%, var(--piano)); }
.lv-g-testa:focus-visible { outline:2px solid var(--accento); outline-offset:-2px; }
.lv-g-nome { grid-column:1; grid-row:1; display:flex; align-items:baseline; gap:8px; min-width:0; }
.lv-g-nome strong { display:flex; gap:8px; align-items:baseline; min-width:0; font-size:15px; font-weight:600; }
.lv-g-nome strong .manager-number { font-weight:400; color:var(--ink-2); }
.lv-freccia { flex:none; width:14px; font-size:15px; line-height:1; color:var(--ink-2); }
.lv-g-testa:hover .lv-freccia { color:var(--ink); }
.lv-g-col { grid-row:1; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.lv-g-c2 { grid-column:2; }
.lv-g-c3 { grid-column:3; }
.lv-g-testa:not(.lv-g-piena) .lv-g-c3 { grid-column:2 / 4; }
.lv-g-c4 { grid-column:4; text-align:right; }
.lv-g-regola { grid-column:1 / -1; grid-row:2; min-width:0; padding-left:22px; font-size:12px; color:var(--ink-3); }
.lv-corta { display:none; }
.lv-vuoto { margin:0; padding:12px 14px; border-top:1px solid var(--linea-2); font-size:13px; color:var(--ink-2); }
.lv-g-frase { margin:0; padding:8px 12px; border-top:1px solid var(--linea-2); font-size:13px; }
.lv-g-frase .lf-lk, .lv-vuoto .lf-lk { display:inline; }
.lv-vuoto.lv-solo { border:1px solid var(--linea-2); border-radius:8px; background:var(--piano); }
.lv-nota { margin:0; padding:2px 4px; font-size:12px; color:var(--ink-3); }

/* la riga: [link | pallini]; il link ha le sue colonne, la striscia sotto (solo In corso) */
.lv-riga { position:relative; display:grid; grid-template-columns:minmax(0,1fr) var(--lv-pallini); column-gap:var(--lv-gap);
  padding-right:14px; border-top:1px solid var(--linea-2); border-left:3px solid var(--client-tint, var(--linea)); }
.lv-elenco:not(.lv-soldi) .lv-riga { grid-template-columns:minmax(0,1fr); }
.lv-riga:hover { background:color-mix(in srgb, var(--piano-2) 55%, var(--piano)); }
.lv-elenco .lv-riga > a.lv-link { display:grid; grid-template-columns:var(--lv-colonne); column-gap:var(--lv-gap); row-gap:2px; align-items:center;
  min-width:0; padding:10px 0 6px 14px; border:0; color:var(--ink); text-decoration:none; background:none; }
.lv-elenco .lv-link:hover { background:none; }
.lv-elenco .lv-link:focus-visible { outline:2px solid var(--accento); outline-offset:-2px; }
.lv-elenco .lv-link small { margin-top:0; }
.lv-elenco .lv-nome { grid-column:1; grid-row:1; min-width:0; }
.lv-elenco .lv-nome strong { display:block; overflow:hidden; font-size:15px; font-weight:600; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.lv-elenco .lv-nome small { display:block; font-size:12px; color:var(--ink-2); }
.lv-cod { color:var(--ink-3); white-space:nowrap; }
.lv-elenco .lv-stato { grid-column:2; grid-row:1; min-width:0; }
.lv-elenco .lv-quando { grid-column:3; grid-row:1; min-width:0; font-size:12px; line-height:1.35; overflow-wrap:normal; }
.lv-quando > time { color:var(--ink); }
.lv-quando > time.manager-overdue { color:var(--allerta); }
.lv-elenco .lv-quando small { display:block; font-size:12px; color:var(--ink-3); text-wrap:balance; }
.lv-quando .lf-quanto b { color:var(--allerta); font-weight:500; }
.lv-elenco .lv-quando small.lv-poi { color:var(--ink); }
.lv-elenco .lv-quando small.lv-attesa { color:var(--ink-2); }
.lv-elenco .lv-importo { grid-column:4; grid-row:1; text-align:right; white-space:nowrap; }
/* l'imponibile e' il valore del lavoro (owner 5-10): la cifra in B612 e, sotto, in piccolo, da dove viene quando non e' il
   preventivo approvato («ultima versione», «consuntivo», «fattura», «fatture»; nelle righe brevi la riga resta alta una
   riga: piu' sotto) */
.lv-elenco .lv-importo small.lv-fonte { display:block; margin:0; font-size:11px; line-height:13px; color:var(--ink-3); }
/* (la cifra e' un blocco: la sua riga ha la sua altezza, senza mescolarsi con quella della cella, che e' in Inter) */
.lv-elenco .lv-importo > .manager-number { display:block; }
/* Quinto giro (C1 del controllo dell'importo): la stessa cella nella scheda del cliente («Storico progetti»,
   pages/clienti.js), con la stessa nota sotto la cifra. */
.manager-cliente-lavori .lv-importo { white-space:nowrap; }
.manager-cliente-lavori .lv-importo > .manager-number { display:block; }
.manager-cliente-lavori .lv-importo small.lv-fonte { display:block; margin:0; font-size:11px; line-height:13px; font-weight:400; color:var(--ink-3); }
.lv-link > .lf-striscia { grid-column:1 / -1; grid-row:2; }
.lv-riga > .lf-pallini { align-self:start; justify-content:flex-end; padding-top:17px; }
.lv-riga .lf-et.lf-poi { color:var(--ink); }
.lv-riga .lf-pal:hover { background:none; box-shadow:inset 0 0 0 1px var(--bordo-ctl); }
/* compatta (Fermi, Da chiudere, Archivio: domanda 6): una riga. Se non c'e' posto cede prima il codice (intero o niente, e
   il suo punto con lui), poi il cliente, che resta almeno in parte (36 px, ~5 lettere: «Publi…»), per ultimo il titolo
   (controllo indipendente 2, C3). Il nome intero sta nel suggerimento. */
.lv-elenco .lv-riga.lv-compatta > a.lv-link { padding:8px 0 8px 14px; }
.lv-compatta > .lf-pallini { padding-top:6px; }
/* (il peso enorme fa cedere prima «cliente · codice»: con pesi vicini il ritiro si dividerebbe col titolo) */
.lv-elenco .lv-compatta .lv-nome { display:flex; align-items:baseline; gap:8px; overflow:hidden; }
.lv-elenco .lv-compatta .lv-nome strong { flex:0 1 auto; min-width:0; max-width:100%; font-size:13px; }
.lv-elenco:not([data-forma="telefono"]) .lv-compatta .lv-nome:has(.lv-cl:not(:empty)) strong { max-width:calc(100% - 44px); }
/* cliente e codice su una riga sola alta una riga: quello che non ci sta va a capo, dove non si vede (il codice intero) */
.lv-elenco .lv-compatta .lv-nome small { display:flex; flex-wrap:wrap; align-items:baseline; flex:0 1000000 auto; min-width:0;
  height:16px; line-height:16px; overflow:hidden; white-space:nowrap; }
/* (uno spazio di larghezza zero dopo il cliente: il codice non e' mai il primo della riga, quindi se non ci sta va a capo
   intero anche senza cliente, nei gruppi per cliente; il cliente, primo, si accorcia e non va a capo. Uno spazio e non un
   elemento vuoto: la prima riga resta alta una riga di testo e la linea di base resta quella del testo) */
.lv-elenco .lv-compatta .lv-nome small::before { content:"\200b"; }
.lv-compatta .lv-cl { order:-1; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lv-compatta .lv-codice { flex:none; }
.lv-compatta .lv-sep { white-space:pre; }
.lv-elenco .lv-manca { grid-column:2 / 4; grid-row:1; min-width:0; font-size:12px; color:var(--ink-2); }
.lv-manca b { color:var(--ink); font-weight:500; }
.lv-elenco .lv-spenta .lv-nome strong { color:var(--ink-2); font-weight:500; }
/* la linea di oggi e la fascia senza date, dentro In corso */
.lv-oggi { display:flex; align-items:center; height:22px; margin:2px 0; padding:0 14px; }
.lv-oggi span { padding-right:8px; font-family:var(--cifre); font-size:12px; color:var(--allerta); white-space:nowrap; }
.lv-oggi::after { content:""; flex:1; height:1.5px; background:var(--marchio); }
.lv-senza-date { margin:0; padding:10px 14px 4px; border-top:1px solid var(--linea-2); font-size:12px; font-weight:500; color:var(--ink-2); }
.lv-senza-date + .lv-riga { border-top:0; }
/* l'archivio per anno */
.lv-anno { display:flex; align-items:center; gap:6px; width:100%; min-height:36px; padding:6px 14px; border:0;
  border-top:1px solid var(--linea-2); background:none; color:var(--ink-2); font:inherit; font-size:12px; text-align:left; }
button.lv-anno { cursor:pointer; }
button.lv-anno:hover, .lv-altri:hover { background:var(--piano-2); color:var(--ink); }
.lv-anno .lv-freccia { font-size:13px; }
.lv-altri { display:block; width:100%; min-height:36px; padding:8px 14px; border:0; border-top:1px solid var(--linea-2);
  background:none; color:var(--ink-2); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.lv-anno:focus-visible, .lv-altri:focus-visible { outline:2px solid var(--accento); outline-offset:-2px; }
.lv-legenda { margin:4px 0 0; max-width:90ch; }

/* col tocco (tablet, telefono girato) le misure del telefono anche nella vista computer */
@media (pointer:coarse) {
  .lv-ctl, .lv-scelte > button, .lv-seg button { min-height:36px; }
  .lv-seg button { padding-inline:12px; }
  .lv-scelte > button { padding-inline:12px; }
  .lv-cliente-in { min-height:36px; }
  .lv-cerca { height:40px; }
  .lv-pillola button { min-width:36px; min-height:36px; }
  .lv-sugg button, .lv-anno, .lv-altri { min-height:40px; }
  .lv-riga .lf-pal { min-height:32px; padding-inline:6px; }
  .lv-frase { line-height:2.2; }
  .lv-vuoto, .lv-g-frase { line-height:2.5; }
}

/* elenco medio (finestra fra circa 1066 e 1265 px): stesse colonne, piu' strette */
@container lv-elenco (max-width:999px) {
  .lv-gruppo { --lv-colonne:minmax(170px,1fr) 124px minmax(190px,1fr) 84px; --lv-imp:84px; --lv-pallini:152px; --lv-gap:14px; }
  .lv-elenco:not(.lv-soldi) .lv-gruppo { --lv-colonne:minmax(170px,1fr) 130px minmax(170px,1fr); }
  .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) { --lv-colonne:minmax(170px,2fr) 124px minmax(190px,1fr) 84px; }
  .lv-elenco:not(.lv-soldi) .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) { --lv-colonne:minmax(170px,2fr) 130px minmax(170px,1fr); }
}
/* elenco stretto (finestra fra circa 986 e 1075 px): le righe piene in tre colonne, lo stato sotto il nome e la scadenza
   accanto; le righe brevi restano su una riga (la loro griglia e' piu' sotto) e le testate restano (controllo indipendente
   2, C4: andavano a capo, due lavori per schermo). Fino a 809 px: le quattro colonne dell'elenco medio chiedono 809 px
   (fra 800 e 808 sbordavano di qualche px). Chi non vede i soldi ha posto per le sue tre colonne di sempre. */
@container lv-elenco (min-width:720px) and (max-width:809px) {
  .lv-elenco.lv-soldi .lv-gruppo { --lv-colonne:minmax(0,1fr) minmax(170px,1fr) 84px; }
  .lv-elenco.lv-soldi .lv-g-c2 { display:none; }
  .lv-elenco.lv-soldi .lv-g-c3 { grid-column:2; }
  .lv-elenco.lv-soldi .lv-g-c4 { grid-column:3; }
  /* (la seconda riga prende l'altezza in piu' della scadenza: lo stato resta attaccato al nome) */
  .lv-elenco.lv-soldi .lv-riga:not(.lv-compatta) > a.lv-link { grid-template-rows:auto 1fr auto; }
  .lv-elenco.lv-soldi .lv-stato { grid-column:1; grid-row:2; align-self:start; justify-self:start; }
  .lv-elenco.lv-soldi .lv-quando { grid-column:2; grid-row:1 / span 2; align-self:start; }
  .lv-elenco.lv-soldi .lv-importo { grid-column:3; }
  .lv-elenco.lv-soldi .lv-manca { grid-column:2; }
  .lv-elenco.lv-soldi .lv-link > .lf-striscia { grid-row:3; }
}
/* Righe brevi con la nota sotto la cifra: la cella e' alta due righe di testo (15 + 13 px) e la riga ne ha una (18 px,
   quella della cifra); la cella sale e scende di 5 px nel margine della riga (8 px sopra e sotto) e la riga resta alta
   come le altre (35 px). Dove la riga va a capo no. */
@container lv-elenco (min-width:720px) {
  .lv-elenco .lv-compatta .lv-importo:has(> .lv-fonte) { margin-block:-5px; line-height:15px; }
}
/* Le righe brevi (Fermi, Da chiudere, Archivio) su una griglia sola per gruppo, con una sottogriglia per la testata e per ogni
   riga: la colonna del perche' / passo dopo e' larga quanto il suo testo piu' lungo (o la sua testata) e tutto il resto va al
   nome; testata, righe, imponibile e pallini restano allineati (controllo indipendente 2, C3: la colonna aveva 50-170 px
   vuoti mentre il cliente spariva). Dove la riga va a capo (sotto i 720 px di elenco) no. */
@supports (grid-template-columns:subgrid) {
  @container lv-elenco (min-width:720px) {
    /* (la colonna dei pallini comprende il margine destro della riga, 14 px, come negli altri gruppi: imponibile e pallini
       restano sopra quelli di In corso) */
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) { display:grid; column-gap:var(--lv-gap);
      grid-template-columns:[nome] minmax(0,1fr) [passo] max-content [importo] var(--lv-imp) [pallini] calc(var(--lv-pallini) + 14px) [fine]; }
    .lv-elenco:not(.lv-soldi) .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) {
      grid-template-columns:[nome] minmax(0,1fr) [passo] max-content [importo pallini fine]; }
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) > * { grid-column:nome / fine; }
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) :is(.lv-g-titolo, .lv-g-testa, .lv-riga, .lv-riga > a.lv-link) {
      display:grid; grid-template-columns:subgrid; }
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) .lv-g-testa { grid-column:nome / fine; }
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) .lv-riga > a.lv-link { grid-column:nome / pallini; }
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) .lv-riga > .lf-pallini { grid-column:pallini; }
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) :is(.lv-manca, .lv-g-c3) { grid-column:passo; white-space:nowrap; }
    .lv-elenco .lv-gruppo:is([data-gruppo="fermi"], [data-gruppo="chiudere"], [data-gruppo="archivio"]) :is(.lv-importo, .lv-g-c4) { grid-column:importo; }
  }
}
/* elenco a capo (tablet, telefono: sotto i 720 px di elenco): la riga va a capo, niente si taglia; i pallini in basso a destra */
@container lv-elenco (max-width:719px) {
  .lv-g-testa, .lv-elenco:not(.lv-soldi) .lv-g-testa { grid-template-columns:minmax(0,1fr); padding:10px 12px; }
  .lv-g-col { display:none; }
  .lv-g-regola { padding-left:22px; }
  .lv-riga, .lv-elenco:not(.lv-soldi) .lv-riga { display:block; padding-right:0; }
  .lv-elenco .lv-riga > a.lv-link, .lv-elenco .lv-riga.lv-compatta > a.lv-link { grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:3px; padding:10px 12px; }
  .lv-elenco .lv-nome { grid-column:1; grid-row:1; }
  .lv-elenco .lv-importo { grid-column:2; grid-row:1; align-self:start; }
  .lv-elenco .lv-quando { grid-column:1 / -1; grid-row:2; }
  .lv-link > .lf-striscia { grid-column:1 / -1; grid-row:3; }
  .lv-elenco .lv-stato { grid-column:1 / -1; grid-row:4; justify-self:start; min-height:24px; display:flex; align-items:center; }
  .lv-elenco .lv-manca { grid-column:1 / -1; grid-row:2; min-height:24px; padding-top:3px; }
  .lv-riga > .lf-pallini, .lv-compatta > .lf-pallini { position:absolute; right:12px; bottom:10px; padding:0; }
  .lv-riga:has(> .lf-pallini) .lv-manca { padding-right:156px; }
  .lv-oggi, .lv-anno, .lv-altri, .lv-senza-date, .lv-vuoto { padding-inline:12px; }
}

/* il telefono (la stessa soglia del Manager, 760 px): numeri in alto, ricerca con «Filtri» accanto, frase corta */
.lv-elenco[data-forma="telefono"] { gap:10px; }
.lv-elenco[data-forma="telefono"] .lv-testa { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.lv-elenco[data-forma="telefono"] .lv-testa h1 { display:none; }
.lv-elenco[data-forma="telefono"] .lv-numeri { margin:0; }
.lv-elenco[data-forma="telefono"] .lv-cerca-riga { align-items:stretch; }
.lv-elenco[data-forma="telefono"] .lv-cerca { flex:1; width:auto; min-width:0; height:40px; }
.lv-elenco[data-forma="telefono"] .lv-cerca-riga .lv-ctl { min-height:40px; }
.lv-elenco[data-forma="telefono"] .lv-kbd, .lv-elenco[data-forma="telefono"] .lv-controlli .lv-raggruppa { display:none; }
.lv-elenco[data-forma="telefono"] .lv-frase { font-size:13px; line-height:2.5; }
.lv-elenco[data-forma="telefono"] .lv-vuoto, .lv-elenco[data-forma="telefono"] .lv-g-frase { line-height:2.5; }
.lv-elenco[data-forma="telefono"] .lv-ctl { min-height:36px; }
.lv-elenco[data-forma="telefono"] .lv-pillola button { min-width:36px; min-height:36px; }
.lv-elenco[data-forma="telefono"] .lv-filtri { max-width:none; padding:10px 12px; }
.lv-elenco[data-forma="telefono"] .lv-f-riga { grid-template-columns:minmax(0,1fr); gap:6px; }
.lv-elenco[data-forma="telefono"] .lv-f-riga > span small { display:inline; margin-left:6px; }
.lv-elenco[data-forma="telefono"] .lv-scelte > button { min-height:36px; padding:4px 12px; }
.lv-elenco[data-forma="telefono"] .lv-filtri .lv-cliente, .lv-elenco[data-forma="telefono"] .lv-filtri .lv-cliente-in { width:100%; }
.lv-elenco[data-forma="telefono"] .lv-filtri .lv-cliente-in { min-height:40px; }
.lv-elenco[data-forma="telefono"] .lv-sugg { right:0; min-width:0; max-width:none; }
.lv-elenco[data-forma="telefono"] .lv-sugg button { min-height:40px; }
.lv-elenco[data-forma="telefono"] .lv-g-regola .lv-lunga { display:none; }
.lv-elenco[data-forma="telefono"] .lv-g-regola .lv-corta { display:inline; }
.lv-elenco[data-forma="telefono"] .lv-nome strong { display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lv-elenco[data-forma="telefono"] .lv-compatta .lv-nome { display:block; }
.lv-elenco[data-forma="telefono"] .lv-compatta .lv-nome small { display:block; height:auto; overflow:visible; white-space:normal; }
.lv-elenco[data-forma="telefono"] .lv-anno, .lv-elenco[data-forma="telefono"] .lv-altri { min-height:40px; }
.lv-elenco[data-forma="telefono"] .lv-riga .lf-pal { min-height:32px; padding-inline:6px; }

/* «Già fatturati» (owner 6-10): scegliere i lavori fatturati fuori dal Manager e chiuderli insieme. Solo l'admin e solo le
   righe dove il gesto e' possibile; la casella entra a sinistra e la riga si sposta solo scegliendo. */
.lv-elenco.lv-scegliendo .lv-riga > a.lv-link, .lv-elenco.lv-scegliendo .lv-riga.lv-compatta > a.lv-link { padding-left:40px; }
.lv-scegli { position:absolute; left:4px; top:4px; z-index:1; display:flex; align-items:center; justify-content:center; width:36px; height:36px; cursor:pointer; }
/* controllo 6-10: al telefono la casella si tocca in 44 px, staccata dal link del lavoro */
@media (max-width:760px) { .lv-scegli { left:0; top:0; width:44px; height:44px; } .lv-elenco.lv-scegliendo .lv-riga > a.lv-link, .lv-elenco.lv-scegliendo .lv-riga.lv-compatta > a.lv-link { padding-left:48px; } }
.lv-compatta > .lv-scegli { top:1px; }
.lv-scegli input { width:16px; height:16px; margin:0; accent-color:var(--ink); cursor:pointer; }
/* la barra dei scelti resta in vista mentre si scorre (l'elenco e' una griglia: sticky non basta), in basso a destra accanto
   alla bolla della Team Chat (right 16 + 56), sotto le finestre modali; l'elenco lascia il posto per l'ultima riga */
.lv-barra-scelta { position:fixed; right:calc(84px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:50; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; max-width:calc(100vw - 100px); padding:10px 12px;
  border:1px solid var(--linea); border-radius:8px; background:var(--piano); box-shadow:0 6px 24px color-mix(in srgb, var(--ink) 18%, transparent); }
.lv-elenco.lv-scegliendo { padding-bottom:84px; }
@media (max-width:760px) {
  .lv-barra-scelta { left:16px; right:84px; max-width:none; }
  .lv-elenco.lv-scegliendo { padding-bottom:150px; }
}
.lv-scelti { margin-right:auto; padding-right:6px; font-size:13px; color:var(--ink-2); }
.lv-scelti .manager-number { color:var(--ink); }
.lv-ctl.lv-ctl-pieno { background:var(--ink); border-color:var(--ink); color:var(--piano); }
.lv-ctl.lv-ctl-pieno:hover { background:var(--ink); }
.lv-ctl.lv-ctl-pieno:disabled { opacity:.45; cursor:default; }