(condiviso con la griglia di card del dettaglio cliente, che deve
restare libera di usare tutta la finestra — vedi .scheda-cliente). Oltre
una certa larghezza una tabella così densa di colonne numeriche diventa
meno leggibile, non più leggibile. */
.lista-clienti-contenuto {
max-width: 1300px;
margin: 0 auto;
}
/* Solo pagina Impostazioni: le sue card sono impilate direttamente (non
in una griglia con gap come .scheda-cliente), quindi serve una regola
di spaziatura propria — scoperta a > fieldset + fieldset perché è
l'unica pagina con più fieldset impilati come figli diretti di
.lista-clienti-contenuto (clienti.php e la dashboard non ne hanno). */
.lista-clienti-contenuto > fieldset + fieldset {
margin-top: 2rem;
}
/* Campi numerici e pulsanti leggermente più grandi, solo in questa
pagina — leggibilità/target di click su un form con più campi vicini. */
.pagina-impostazioni input[type="number"] {
padding: 0.6rem 0.7rem;
font-size: 1.05rem;
}
.pagina-impostazioni button {
padding: 0.6rem 1.3rem;
font-size: 1.05rem;
}
/* Le colonne diverse da Nome non vanno mai a capo (vedi sotto): a
larghezze molto strette la somma dei loro contenuti può comunque
superare lo spazio disponibile. Farla scorrere qui invece che lasciarla
sforare mantiene il resto della pagina (filtri, titolo) fermo. */
.tabella-scroll {
overflow-x: auto;
}
/* Colonna Nota della tabella interazioni (scheda cliente): a differenza
delle colonne di .tabella-clienti, il testo libero deve poter andare a
capo — è la difesa principale contro lo sforamento della card, con
.tabella-scroll sopra come rete di sicurezza per il caso limite di una
singola parola più lunga della card stessa. */
.tabella-interazioni td { overflow-wrap: break-word; }
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
text-align: left;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--colore-bordo);
}
th { background: var(--colore-sfondo-testa); white-space: nowrap; }
th a { color: var(--colore-testo); text-decoration: none; }
th a:hover { text-decoration: underline; }
tbody tr:nth-child(even) { background: var(--colore-sfondo-testa); }
/* Le righe dispari NON restavano semplicemente "senza sfondo" come
sembrava: ereditavano lo sfondo bianco della pagina, indistinguibile
dalle pari solo perché la pagina stessa era bianca. Da quando le
tabelle sono dentro una card (sfondo --colore-sfondo-testa, lo stesso
delle righe pari), l'ereditarietà mostra quel colore invece del
bianco — pari e dispari diventano visivamente identiche, l'alternanza
sparisce. Sfondo esplicito anche qui, non più "assente per omissione",
indipendente da qualunque contenitore la tabella si trovi ad avere. */
tbody tr:nth-child(odd) { background: var(--colore-sfondo-pagina); }
tbody tr:hover { background: var(--colore-riga-hover); }
/* Ogni colonna resta su una riga sola e si allarga quanto serve (Codice,
Tipo, Tier, Score, AUM, Provvigioni, Stato); solo Nome, marcata con
.col-nome, può restringersi e andare a capo (max 2 righe) quando lo
spazio orizzontale scarseggia. Scoperta SOLO alla tabella della lista
clienti (.tabella-clienti): applicata a th/td in generale finiva anche
sulla tabella delle interazioni nella scheda cliente, impedendo alla
colonna Nota di andare a capo — la costringeva a restare su una riga
sola, gonfiando la larghezza della tabella ben oltre la card. */
.tabella-clienti th, .tabella-clienti td { white-space: nowrap; }
.col-nome {
white-space: normal;
overflow-wrap: break-word;
}
/* Il clamp a 2 righe (con -webkit-line-clamp) va su uno span interno,
mai sulla stessa: applicato direttamente alla cella, display:
-webkit-box confonde l'algoritmo di layout della tabella e in alcuni
browser produce un riquadro anonimo con bordo/padding proprio — la
linea estranea segnalata tra le colonne Codice e Nome. Su un elemento
normale (non una cella) la stessa tecnica funziona senza effetti
collaterali. */
.col-nome .clamp-2-righe {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
tbody tr { cursor: pointer; }
.barra-filtri {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: end;
margin-bottom: 0.5rem;
}
.barra-filtri label {
display: flex;
flex-direction: column;
font-size: 0.85rem;
color: var(--colore-testo-tenue);
gap: 0.25rem;
}
.barra-filtri select, .barra-filtri input[type="text"] {
padding: 0.35rem 0.5rem;
}
.badge {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
color: var(--colore-testo-badge);
}
.badge-tier-a { background: var(--colore-a); }
.badge-tier-b { background: var(--colore-b); }
.badge-tier-c { background: var(--colore-c); }
.badge-tier-none { background: var(--colore-badge-tier-none); }
.badge-stato-completo { background: var(--colore-badge-stato-completo); }
.badge-stato-da-completare { background: var(--colore-badge-stato-da-completare); }
.badge-scaduto { background: var(--colore-c); }
.badge-in-scadenza { background: var(--colore-b); }
.badge-esito-completato { background: var(--colore-a); }
.badge-esito-avvisi { background: var(--colore-b); }
.badge-esito-fallito { background: var(--colore-c); }
/* Import (public/import*.php): riepilogo del risultato dopo un
caricamento, e l'elenco delle anomalie (può diventare lungo su un file
con molte righe da segnalare) contenuto in un'altezza massima invece
di allungare la card all'infinito. */
.riepilogo-import {
margin-top: 1rem;
}
.riepilogo-import .campo-sola-lettura {
display: inline-block;
margin-right: 2rem;
}
.lista-anomalie {
max-height: 40vh;
overflow-y: auto;
margin: 0.5rem 0 0;
padding-left: 1.2rem;
}
.lista-anomalie li {
margin-bottom: 0.3rem;
}
.griglia-import {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 1rem;
align-items: stretch;
}
.descrizione-import {
line-height: 1.4;
}
/* Ancoraggio reale del form di caricamento al fondo di ogni card
(sostituisce l'altezza minima approssimata del giro precedente): il
meccanismo flex-column vive su un interno (.corpo-import), non
sul
stesso — un reso flex perde in alcuni
browser la resa corretta del bordo superiore attorno alla
(stesso problema già documentato per .interazioni-corpo, identica
soluzione). Il , stretch dalla griglia alla stessa altezza
degli altri sulla stessa riga (align-items: stretch su .griglia-import),
dà a .corpo-import un'altezza reale al 100% su cui margin-top: auto
sul form può consumare lo spazio libero e spingersi in fondo. */
.corpo-import {
display: flex;
flex-direction: column;
height: 100%;
}
.corpo-import .form-carica {
margin-top: auto;
}
/* Storico import (public/import.php): le righe della tabella non
navigano più verso una pagina di dettaglio — l'unica cosa cliccabile è
il della riga di dettaglio sotto, per gli import con
anomalie o falliti. Override del cursore a manina globale (tbody tr),
pensato per le righe di clienti.php/dashboard che aprono un'altra
pagina al click. */
.tabella-storico tbody tr { cursor: default; }
/* Alternanza chiaro/scuro di questa tabella: niente :nth-child, né quello
generico né un neutralizzatore dedicato (due tentativi precedenti,
entrambi rotti dallo stesso problema di fondo). La posizione nel DOM
di una riga non corrisponde più al suo "indice logico" da quando
esistono righe di dettaglio a conteggio variabile intercalate tra le
righe dati — un meccanismo che conta la posizione e uno che assegna
classi in base al contenuto finiscono per contraddirsi (verificato
leggendo le regole CSS effettivamente applicate, non a occhio: il
neutralizzatore, senza una propria variante :hover, vinceva anche
sull'hover generico ogni volta che una riga capitava su una posizione
pari, dato o dettaglio indifferentemente). Unica fonte di verità
adesso: OGNI riga porta sempre una di queste due classi (mai nessuna),
assegnata in import.php in base all'indice della riga di log — la sua
eventuale riga di dettaglio riusa la stessa, così restano un unico
blocco anche nello sfondo, non due righe scollegate. */
/* --colore-sfondo-pagina esplicito, non "background: none": la card che
racchiude questa tabella ha lo stesso sfondo di .riga-storico-scura
(--colore-sfondo-testa) — "nessuno sfondo" mostrava semplicemente
quello della card, identico alla riga scura, e l'alternanza spariva. */
.tabella-storico tbody tr.riga-storico-chiara { background: var(--colore-sfondo-pagina); }
.tabella-storico tbody tr.riga-storico-scura { background: var(--colore-sfondo-testa); }
.tabella-storico tbody tr.riga-storico-chiara:hover,
.tabella-storico tbody tr.riga-storico-scura:hover {
background: var(--colore-riga-hover);
}
/* La riga dati e la sua riga di dettaglio si evidenziano INSIEME al
passaggio del mouse, come un'unica unità visiva — non indipendenti
l'una dall'altra. In avanti (hover sulla riga dati -> anche il suo
dettaglio) basta il combinatore di fratelli adiacenti, CSS2 semplice.
All'indietro (hover sulla riga di dettaglio -> anche la riga dati
sopra di lei) serve :has(), che seleziona un elemento in base a un suo
discendente/fratello — qui una riga "che ha subito dopo un fratello
.riga-dettaglio-storico attualmente in hover" — supportato da tutti i
browser moderni, non c'è un modo altrettanto semplice di risalire a un
fratello precedente in puro CSS senza. */
.tabella-storico tbody tr:hover + tr.riga-dettaglio-storico {
background: var(--colore-riga-hover);
}
.tabella-storico tbody tr:has(+ tr.riga-dettaglio-storico:hover) {
background: var(--colore-riga-hover);
}
/* La riga di dettaglio è la continuazione della riga dati sopra, non una
riga indipendente: stesso font/colore del resto della tabella (nessun
colore "da link" sul , solo il triangolino nativo di
a segnalare che è espandibile), un rientro a sinistra e un
bordo superiore leggero — invece del normale bordo tra due righe
distinte — a marcare visivamente "appartiene alla riga sopra", non
"nuova riga della tabella". */
.tabella-storico .riga-dettaglio-storico td {
white-space: normal;
padding-top: 0.3rem;
padding-bottom: 0.6rem;
padding-left: 1.8rem;
border-top: 1px solid var(--colore-bordo);
}
.tabella-storico details summary {
cursor: pointer;
color: inherit;
font-weight: 500;
}
.tabella-storico details[open] summary {
margin-bottom: 0.4rem;
}
/* Scheda cliente in tre sezioni verticali: Note da sola (stretta), poi la
griglia delle altre card, poi Interazioni a piena larghezza in fondo. */
.sezione-note {
/* Circa un terzo dello schermo, mai a piena larghezza; min-width come
le card della griglia, per restare leggibile anche su schermi
stretti dove un terzo sarebbe troppo poco. Altezza libera: nessun
max-height né stiramento forzato, si adatta al contenuto. */
width: 33%;
min-width: 280px;
margin-top: 1rem;
}
.scheda-cliente {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.sezione-interazioni {
margin-top: 1.5rem;
}
/* A differenza delle altre card, Interazioni può contenere uno storico
lungo: altezza massima invece che libera, con solo la tabella dello
storico che scorre al proprio interno — riepilogo e form restano sempre
visibili in alto. Il meccanismo (flex-column + max-height + scroll)
vive su un interno (.interazioni-corpo), non sul
stesso: un reso flex perde in alcuni browser la resa
corretta del bordo superiore attorno alla (verificato — il
bordo sparente segnalato su Note/Interazioni). Tenere il
un blocco normale, identico a tutti gli altri, elimina il problema. */
.interazioni-corpo {
display: flex;
flex-direction: column;
max-height: 50vh;
}
.interazioni-corpo .riepilogo-interazioni,
.interazioni-corpo .riga-nuova-interazione {
flex-shrink: 0;
}
.interazioni-corpo .tabella-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
margin-top: 0.75rem;
}
fieldset {
/* Un grid item (ogni fieldset è una card di .scheda-cliente) ha di
default min-width:auto, cioè non può restringersi sotto la
larghezza "min-content" del suo contenuto più largo — un
in particolare la eredita anche da un discendente con
overflow-x:auto, un quirk noto dei form element. Risultato: una
tabella con testo lungo (es. la nota di un'interazione) poteva far
sforare l'intera card nella colonna di griglia successiva, invece
di restare contenuta o scorrere al suo interno. min-width:0 forza
la card a rispettare la larghezza assegnata dalla griglia.
Regola generale: mai apparso un motivo per cui una card debba
imporre una larghezza minima propria. */
min-width: 0;
border: 1px solid var(--colore-bordo);
border-radius: 6px;
padding: 1rem;
/* Sfondo/ombra più marcati di prima (#fbfcfd, quasi indistinguibile
dal bianco pagina): riusa --colore-sfondo-testa, già nella palette
(topbar, intestazioni tabella), invece di un grigio quasi-bianco
dedicato — contrasto percepibile ma sobrio, non invadente. */
background: var(--colore-sfondo-testa);
box-shadow: 0 1px 4px var(--colore-ombra-card);
}
/* .fieldset-note NON è più un flex container (vedi .interazioni-corpo
sopra per il perché): con la scheda in sezioni verticali la card Note
non deve più riempire l'altezza di una riga di griglia condivisa —
"altezza libera in base al contenuto" è già il comportamento naturale
di un fieldset a blocco con una textarea a min-height. */
/* Unica regola per il titolo di ogni card in tutta l'app (font-size già
consolidato in --dimensione-titolo-card, line-height reso esplicito qui
apposta): un'altezza diversa tra pagine (es. Import vs scheda cliente)
era dovuta a un'eccezione page-specific pensata per allineare i
pulsanti delle 4 card di Import quando un titolo va a capo su 2 righe
— rimossa a favore di una sola regola globale, accettando che un
titolo insolitamente lungo possa spostare di qualche pixel solo il
contenuto sotto di sé, invece di introdurre un'eccezione per pagina. */
legend { font-weight: 600; font-size: var(--dimensione-titolo-card); line-height: 1.3; padding: 0 0.4rem; }
.campo {
/* Etichetta sempre sopra il controllo, mai affiancate: flex-column
esplicito invece di affidarsi al solo flusso a blocco, che una card
molto larga può lasciar prendere una disposizione inline. */
display: flex;
flex-direction: column;
margin-bottom: 0.75rem;
}
.campo label {
display: block;
font-size: 0.85rem;
color: var(--colore-testo-tenue);
margin-bottom: 0.25rem;
}
.campo input[type="text"],
.campo input[type="date"],
.campo textarea,
.campo select {
width: 100%;
padding: 0.4rem 0.5rem;
border: 1px solid var(--colore-bordo);
border-radius: 4px;
font: inherit;
}
.campo textarea { min-height: 4.5rem; resize: vertical; }
/* Nessun controllo di form dentro una card (fieldset) deve poter
fuoriuscire dal suo contenitore — regola generale invece che ripetuta
campo per campo, comprende anche le righe flessibili di copertura ed
eventi qui sotto. */
fieldset input,
fieldset select,
fieldset textarea {
box-sizing: border-box;
max-width: 100%;
}
.fieldset-note .campo {
margin-bottom: 0;
}
.fieldset-note textarea {
width: 100%;
min-height: 6rem;
resize: vertical;
}
.campo-sola-lettura {
margin-bottom: 0.6rem;
}
.campo-sola-lettura .etichetta {
font-size: 0.85rem;
color: var(--colore-testo-tenue);
display: block;
}
.campo-sola-lettura .valore { font-weight: 500; }
.didascalia {
display: block;
font-size: 0.75rem;
color: var(--colore-testo-tenue);
font-style: italic;
margin-top: 0.15rem;
}
/* Le 4 card di caricamento in public/import.php: la descrizione principale
della card (subito sotto il titolo) resta SEMPRE interamente visibile,
mai troncata — solo questa didascalia in fondo, sotto il pulsante
("Colonne attese: ...", più lunga e meno critica da leggere per intero
a colpo d'occhio), è troncata a 3 righe con puntini di sospensione
(min-height per non essere più corta, clamp per non essere più lunga —
stesso pattern già usato per il nome nella lista clienti, .col-nome
.clamp-2-righe, qui su 3 righe invece di 2). Il testo completo resta
leggibile al passaggio del mouse tramite l'attributo title sullo stesso
paragrafo. Dichiarata DOPO .didascalia (di cui .didascalia-import è
sempre usata insieme, mai da sola — vedi import.php): stessa
specificità, l'ordine nel foglio di stile decide quale display vince, e
.display:-webkit-box qui deve prevalere sul display:block di sopra
perché -webkit-line-clamp non ha alcun effetto senza. */
.didascalia-import {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
min-height: calc(1.4em * 3);
}
.stato-salvataggio {
font-size: 0.8rem;
margin-left: 0.5rem;
}
.stato-salvataggio.ok { color: var(--colore-salvato); }
.stato-salvataggio.errore { color: var(--colore-errore); }
/* Copertura consulenziale (area + stato) è passata a .campo — stessa
etichetta-sopra-controllo di ogni altro campo della scheda, non più
una riga fianco a fianco a sé stante (era l'origine del bug
ricorrente su "Protezione" e sugli altri stati di copertura). Resta
solo .riga-evento: lì l'etichetta è dentro il di una
checkbox, una convenzione diversa (etichetta accanto, mai sopra) che
non rientra nella regola "etichetta sopra il controllo" — vale per i
campi di testo/select con un'etichetta descrittiva propria, non per
una checkbox. */
.riga-evento {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
min-width: 0;
}
.riga-evento .nome-evento { flex: 1 1 180px; min-width: 0; }
.riga-evento input[type="text"] { flex: 2 1 160px; min-width: 0; padding: 0.3rem 0.5rem; }
.nascosto { display: none; }
.riga-nuova-interazione {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
.riga-nuova-interazione input[type="date"],
.riga-nuova-interazione select {
padding: 0.35rem 0.5rem;
font: inherit;
}
.riga-nuova-interazione input[type="text"] {
flex: 1 1 160px;
min-width: 0;
padding: 0.35rem 0.5rem;
}
.pulsante-link {
display: inline-block;
margin-top: 1rem;
}
/* Card "Etichette" in Impostazioni: una riga per etichetta, sia tra le
attive (frecce di riordino + Disattiva) sia tra le disattivate
(Riattiva) — stesso principio di riga flessibile già usato altrove
(.riga-da-contattare, .riga-nuova-interazione), qui con un separatore
leggero invece di uno sfondo alternato (l'elenco può essere breve e
riordinabile, un'alternanza fissa per posizione avrebbe poco senso). */
.riga-etichetta {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.2rem;
border-bottom: 1px solid var(--colore-bordo);
}
.riga-etichetta .etichetta-testo {
flex: 1 1 auto;
}
/* Coppia di frecce piccola e impilata verticalmente, a sinistra del
testo — non due pulsanti pieni affiancati come i pulsanti normali
dell'app, un'azione così frequente (riordino) chiede meno peso visivo
dei pulsanti pieni. */
.frecce-etichetta {
display: flex;
flex-direction: column;
line-height: 1;
}
/* .riga-etichetta ripetuto (non solo .frecce-etichetta button) apposta:
.pagina-impostazioni button ha già la stessa specificità di una
singola classe + elemento (0,1,1) e ingrandisce OGNI pulsante di
questa pagina — senza un selettore più specifico qui, quella regola
vincerebbe e le frecce tornerebbero grandi quanto un pulsante normale. */
.riga-etichetta .frecce-etichetta button {
background: none;
border: none;
padding: 0 0.3rem;
margin: 0;
font-size: 0.7rem;
line-height: 1.2;
color: var(--colore-testo-tenue);
cursor: pointer;
}
.riga-etichetta .frecce-etichetta button:hover {
color: var(--colore-link);
}
/* Disattiva/Riattiva: un link testuale sottolineato, non un pulsante
pieno — un'azione usata raramente non deve pesare quanto "Aggiungi" o
i pulsanti di salvataggio delle altre card. Stesso motivo di sopra per
.riga-etichetta ripetuto: batte .pagina-impostazioni button in specificità. */
.riga-etichetta button.link-etichetta {
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--colore-link);
text-decoration: underline;
cursor: pointer;
}
#etichette-disattivate-blocco {
margin: 0.75rem 0;
}
#etichette-disattivate-blocco summary {
cursor: pointer;
color: var(--colore-testo-tenue);
font-size: 0.9rem;
}
#etichette-disattivate .riga-etichetta {
color: var(--colore-testo-tenue);
}
.avviso {
background: var(--colore-avviso-sfondo);
border: 1px solid var(--colore-avviso-bordo);
padding: 0.6rem 0.9rem;
border-radius: 6px;
margin: 1rem 0;
font-size: 0.9rem;
}
.nucleo-membri {
list-style: none;
padding: 0;
margin: 0.5rem 0;
}
.nucleo-membri li {
padding: 0.3rem 0;
border-bottom: 1px dotted var(--colore-bordo);
}
/* Dashboard (public/index.php) */
.kpi-griglia {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 1rem 0 1.5rem;
}
.kpi-card {
/* Stesso contrasto delle card della scheda cliente (vedi fieldset),
per coerenza tra dashboard e resto dell'app. */
border: 1px solid var(--colore-bordo);
border-radius: 6px;
padding: 1rem;
background: var(--colore-sfondo-testa);
box-shadow: 0 1px 4px var(--colore-ombra-card);
}
.kpi-etichetta {
font-size: 0.85rem;
color: var(--colore-testo-tenue);
display: block;
margin-bottom: 0.3rem;
}
.kpi-valore {
font-size: 1.9rem;
font-weight: 700;
}
.kpi-valore.kpi-attenzione { color: var(--colore-c); }
.distribuzione-tier {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
align-items: center;
margin: 0.5rem 0 1.5rem;
}
.distribuzione-tier .voce {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.05rem;
}
.riga-da-contattare {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.2rem;
border-bottom: 1px solid var(--colore-bordo);
text-decoration: none;
color: inherit;
}
/* Righe alternate, stessa palette della lista clienti principale (vedi
tbody tr:nth-child(even) sopra, incluso lo stesso motivo per cui anche
le dispari hanno bisogno di uno sfondo esplicito ora che la lista è
dentro una card). */
.riga-da-contattare:nth-child(even) { background: var(--colore-sfondo-testa); }
.riga-da-contattare:nth-child(odd) { background: var(--colore-sfondo-pagina); }
.riga-da-contattare:hover { background: var(--colore-riga-hover); }
.riga-da-contattare .nome-cliente { flex: 1 1 auto; font-weight: 500; }
.riga-da-contattare .dettaglio-scadenza {
font-size: 0.85rem;
color: var(--colore-testo-tenue);
}