/* ============================================================================ WIDGET KPI - foglio CONDIVISO fra le due famiglie ============================================================================ Questo file lo caricano SIA la catena CLD (tpl/cld/_base_layout.html) SIA quella PG (tpl/pg/head.html), perche' i riquadri fissati dall'utente compaiono nella dashboard principale di Sublima, che e' famiglia PG. PERCHE' STA QUI E NON IN cld_components.css. Quel foglio lo carica solo il CLD: lasciandoci dentro queste regole, i widget in dashboard sarebbero usciti senza stile. E' la stessa trappola gia' pagata due volte in questo progetto - Select2 caricato dalla build sbagliata, `CLDGrafici is not defined` sulle statistiche. La regola imparata: *un pezzo condiviso ha bisogno che ENTRAMBE le catene carichino cio' che usa.* Le classi conservano il prefisso `.cld-` anche fuori dal CLD: rinominarle avrebbe voluto dire toccare le pagine statistiche che gia' le usano, per un guadagno di sola etichetta. Il prefisso qui vale "vocabolario dei blocchi dati", non "solo CLD". Nessun colore scritto a mano: solo token --s2026-*, che entrambe le famiglie definiscono. E' il motivo per cui il tema scuro funziona senza una riga in piu' da nessuna delle due parti. ============================================================================ */ /* --- barra di proporzione e legenda delle voci ------------------------- Usate dai riquadri "ripartizione" E dalle statistiche CLD (scontrini, comande): stanno qui perche' sono il vocabolario condiviso, non perche' appartengano ai widget. */ .cld-barra-prop { display: flex; gap: 2px; height: 10px; margin: 10px 0 8px; } .cld-barra-prop > i { display: block; height: 100%; background: var(--seg); min-width: 2px; } .cld-barra-prop > i:first-child { border-radius: 4px 0 0 4px; } .cld-barra-prop > i:last-child { border-radius: 0 4px 4px 0; } .cld-barra-prop > i:only-child { border-radius: 4px; } /* l'elenco valori fa da legenda: l'identita' non e' MAI il solo colore - pallino + nome + importo. E' anche il rimedio che il validatore richiede per l'avviso di contrasto sui colori piu' chiari. */ .cld-voci { display: grid; gap: 3px; } .cld-voce { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: baseline; font-size: 13px; font-variant-numeric: tabular-nums; } .cld-voce__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--seg); align-self: center; } .cld-voce__nome { color: var(--s2026-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* il conteggio sta dentro il nome, non in una colonna sua: aggiungere una quinta colonna alla griglia della voce spingerebbe importo e percentuale fuori asse rispetto agli altri blocchi della pagina */ .cld-voce__conteggio { color: var(--s2026-ink-4); font-size: 12px; } .cld-voce__imp { font-weight: 600; color: var(--s2026-ink); } .cld-voce__pct { color: var(--s2026-ink-3); font-size: 12px; min-width: 44px; text-align: right; } /* le voci a zero restano leggibili ma non rubano l'occhio: chi cerca "quanto bonifico?" lo trova comunque */ .cld-voce--zero .cld-voce__nome, .cld-voce--zero .cld-voce__imp { color: var(--s2026-ink-4); font-weight: 400; } /* === Widget KPI ======================================================== Solo il GUSCIO. Il contenuto riusa il vocabolario gia' presente in questo foglio (.cld-barra-prop, .cld-voci/.cld-voce) e i token --s2026-*: qui non si scrive nessun colore a mano, ed e' il motivo per cui il tema scuro funziona senza una riga in piu'. Il modificatore --compatto e' la versione "fissata" nella pagina iniziale: stesso disegnatore, meno cose. Non e' un secondo componente. */ .cld-widget { background: var(--s2026-bg-panel); border: 1px solid var(--s2026-rule); border-radius: var(--s2026-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; /* o il contenuto lungo sfonda la griglia */ } /* Accento di FAMIGLIA: un filetto in cima, non un fondo e non un gradiente. Il colore lo passa il disegnatore in `--fam` leggendo la famiglia dichiarata dal registro; senza famiglia resta il bordo neutro e non si vede nulla. Perche' in CIMA e non a sinistra: il bordo sinistro e' gia' preso dalla marcatura del riquadro FISSATO (`.is-fissato`), e due filetti che si contendono lo stesso lato non si leggono piu' ne' l'uno ne' l'altro. Cosi' invece i due segnali stanno su assi diversi e restano entrambi chiari: in alto "di che cosa parla", a sinistra "l'ho messo in home". E' anche la versione misurata della striscia colorata da 7px che i pannelli vecchi avevano in testa: stessa idea, un ottavo del peso. */ .cld-widget { border-top: 2px solid var(--fam, var(--s2026-rule)); } .cld-widget__testa { display: flex; align-items: baseline; gap: 8px; } .cld-widget__nome { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--s2026-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cld-widget__azioni { margin-left: auto; flex: 0 0 auto; } .cld-widget__numero { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--s2026-ink); font-variant-numeric: tabular-nums; } .cld-widget__numero--medio { font-size: 22px; } .cld-widget__riga-conf { display: flex; align-items: baseline; gap: 8px; font-size: 12px; } .cld-widget__conf-testo { color: var(--s2026-ink-4); } .cld-widget__delta { font-weight: 700; font-variant-numeric: tabular-nums; } /* il colore NON e' l'unico segnale: c'e' anche la freccia, perche' il verde e il rosso non si distinguono per tutti */ .cld-widget__delta--su { color: var(--s2026-cat-2, var(--s2026-ink-2)); } .cld-widget__delta--giu { color: var(--s2026-brand); } .cld-widget__delta--nd { color: var(--s2026-ink-4); font-weight: 400; } .cld-widget__dettagli { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--s2026-ink-4); margin-top: 2px; } .cld-widget__dett b { color: var(--s2026-ink-2); font-variant-numeric: tabular-nums; } /* Altezza DICHIARATA sul contenitore del canvas: un grafico responsive senza un'altezza risalta il genitore e innesca il ciclo infinito di resize gia' pagato una volta sui 16 grafici delle statistiche. */ .cld-widget__grafico { position: relative; height: 220px; } .cld-widget__grafico--basso { height: 90px; } .cld-widget__attesa, .cld-widget__errore { font-size: 13px; color: var(--s2026-ink-4); padding: 6px 0; } .cld-widget__errore { color: var(--s2026-brand); } .cld-widget__avviso { font-size: 11.5px; color: var(--s2026-warning-fg, var(--s2026-ink-3)); line-height: 1.35; } .cld-widget__meta { font-size: 10.5px; color: var(--s2026-ink-4); } /* Interruttore "fissa in home". ⚠ Lo stato NON e' affidato al colore. Prima lo era, e col colore del passaggio del mouse UGUALE a quello dello stato acceso i due casi si somigliavano; per chi non distingue i rossi erano proprio indistinguibili. Ora i segnali sono tre e indipendenti: icona piena vs vuota, scritta che cambia, e sfondo pieno. La scheda fissata prende in piu' un filetto sul bordo sinistro, cosi' si riconosce a colpo d'occhio anche senza leggere il pulsante. */ .cld-widget__pin { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--s2026-rule); border-radius: 999px; padding: 3px 10px; line-height: 1.4; font-size: 11.5px; font-weight: 600; color: var(--s2026-ink-3); cursor: pointer; white-space: nowrap; transition: var(--s2026-transition); } .cld-widget__pin:hover { border-color: var(--s2026-brand); color: var(--s2026-brand); background: var(--s2026-brand-tint, transparent); } .cld-widget__pin.is-attivo { background: var(--s2026-brand); border-color: var(--s2026-brand); color: var(--s2026-brand-fg, #fff); } .cld-widget__pin.is-attivo:hover { background: var(--s2026-brand-hover, var(--s2026-brand)); color: var(--s2026-brand-fg, #fff); } .cld-widget__pin .bi { font-size: 13px; } /* Pillola dentro un riquadro (quote, residui, conteggi). Esiste perche' `.c-status-badge` del design system e' scoped sotto `.s2026` e i riquadri della dashboard non ci stanno dentro. Due varianti bastano: normale e allarme - se servissero i sei stati completi, allora converrebbe avvolgere e usare quella vera. */ .cld-widget__badge { display: inline-block; padding: 1px 7px; border-radius: var(--s2026-radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--s2026-neutral-bg); color: var(--s2026-neutral-fg); } .cld-widget__badge--allarme { background: var(--s2026-danger-bg); color: var(--s2026-danger-fg); } /* Filtri dentro un riquadro: una forma sola, discreta. ⚠ Non si riusa `.filter-bar` di sublima2026.css: quella e' scoped sotto `.s2026`, e i riquadri della dashboard NON stanno dentro quel contenitore - la regola non li raggiungerebbe. Avvolgerli servirebbe a portarsi dietro 288 regole che rimetterebbero mano a form, card e tabelle interne. Qui bastano dieci righe, non scoped come tutto questo foglio. */ .cld-widget__filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; } .cld-widget__filtro { flex: 1 1 120px; min-width: 0; } .cld-widget__filtro label { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--s2026-ink-4); margin-bottom: 2px; } .cld-widget__filtri select { width: 100%; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--s2026-rule); border-radius: var(--s2026-radius-sm); background: var(--s2026-bg-input); color: var(--s2026-ink); } .cld-widget__filtri select:focus { outline: 0; border-color: var(--s2026-brand); box-shadow: var(--s2026-focus-ring); } /* la scheda fissata si riconosce senza leggere il pulsante */ .cld-widget.is-fissato { border-color: var(--s2026-brand); box-shadow: inset 3px 0 0 var(--s2026-brand); } /* Compatto: meta' altezza, stessi dati, stesso disegnatore (`opz.compatto`). Nasce per la striscia che scorre sul telefono, ma dal 2026-08-02 e' anche la densita' che l'utente puo' scegliere per i riquadri fissati in dashboard: con 12 fissati la forma estesa occupa quattro righe e spinge sotto la piega tutto il resto della pagina. Va in coppia con `.cld-widget-griglia--fitta`. */ .cld-widget--compatto { padding: 10px 12px; gap: 4px; } .cld-widget--compatto .cld-widget__numero { font-size: 22px; } .cld-widget--compatto .cld-widget__nome { font-size: 10px; } /* la griglia dei widget: colonne fisse, non auto-fit - con auto-fit il numero di colonne lo decide il browser e nessun selettore sa piu' chi apre una riga */ .cld-widget-griglia { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 576px) { .cld-widget-griglia { grid-template-columns: 1fr 1fr; } } @media (min-width: 1200px) { .cld-widget-griglia { grid-template-columns: repeat(3, 1fr); } } /* Griglia FITTA: la stessa griglia quando i riquadri sono in forma compatta. Serve perche' il compatto da solo non basta: un riquadro alto la meta' dentro una griglia a 3 colonne resta comunque su 4 righe se i fissati sono 12. E' il numero di COLONNE a decidere se ci stanno tutti in una schermata. ⚠ Queste regole devono stare DOPO quelle di `.cld-widget-griglia`: hanno la stessa specificita' (una classe), quindi a parita' vince l'ordine nel file. Spostarle piu' in alto le renderebbe inefficaci senza nessun errore. */ .cld-widget-griglia--fitta { grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 576px) { .cld-widget-griglia--fitta { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .cld-widget-griglia--fitta { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1400px) { .cld-widget-griglia--fitta { grid-template-columns: repeat(6, 1fr); } } /* Griglia a TESSERE: la pagina iniziale in densita' estesa. Qui nessun riquadro supera un tetto, dichiarato una volta sola. ⚠ Perche' serve: una griglia allinea le celle di una riga all'altezza della PIU' ALTA (`align-items: stretch`, il default). Nella fascia dei fissati il `.cld-widget` e' figlio diretto della griglia, quindi una classifica da dieci voci (~500px) non cresceva da sola: gonfiava i due vicini, che diventavano scatole mezze vuote. La scatola diceva "qui dentro c'e' roba" e non era vero. (Nel catalogo il figlio della griglia e' `.cw-posto`, che assorbe lo stiramento e lascia la scheda alla sua altezza: li' il difetto non c'e'.) La cura NON e' lasciar crescere la riga: e' dare un TETTO. E un tetto e' `max-height`, non `height`: con un'altezza fissa un riquadro senza dati - "Segmenti di clientela" fuori stagione mostra uno zero e basta - occupava 300px di niente, cioe' la stessa bugia di prima in formato ridotto. Cosi' invece chi e' corto resta corto e chi e' lungo si ferma. ⚠ `align-items: start` non e' una rifinitura, e' la condizione perche' il tetto valga: senza, la cella tornerebbe alta quanto la riga e la scheda con lei - e aprendone UNA si gonfierebbero di nuovo le vicine, cioe' il difetto rientrerebbe dalla porta che l'apertura ha appena aperto. 300px non e' un numero scelto a occhio: e' l'altezza che ha gia' un riquadro con un grafico (220px dichiarati + testata + piede), cioe' l'unica forma che non poteva sfondare perche' l'altezza se l'era gia' scritta. Il conto delle altre: la scheda spende ~68px fra bordi, testata e piede, quindi al contenuto ne restano ~230; cinque voci di classifica col conteggio in linea ne misurano ~190, cinque voci di ripartizione ~180. Quel che non ci sta non sparisce: il piede porta "e altri N", che APRE il riquadro alla sua altezza intera senza chiedere di nuovo i dati al server. */ .cld-widget-griglia--tessere { --cw-tessera: 300px; align-items: start; } .cld-widget-griglia--tessere .cld-widget { max-height: var(--cw-tessera); } /* E' il CORPO a cedere, non la scheda: cosi' un'avvertenza in piu' nel piede accorcia il contenuto invece di sfondare la tessera, e il pulsante "e altri N" resta l'unica cosa che il tetto non taglia mai. `min-height: 0` perche' senza, un figlio flex non scende mai sotto la sua dimensione naturale e l'`overflow` non entrerebbe mai in funzione. */ .cld-widget-griglia--tessere .cld-widget__corpo { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; } .cld-widget-griglia--tessere .cld-widget__testa, .cld-widget-griglia--tessere .cld-widget__piede { flex: 0 0 auto; } /* Il grafico resta a un'altezza DICHIARATA (qui derivata dalla tessera, ma sempre una lunghezza definita): un canvas responsive senza altezza risale il genitore e innesca il ciclo infinito di resize gia' pagato una volta. */ .cld-widget-griglia--tessere .cld-widget__grafico { height: calc(var(--cw-tessera) - 96px); } /* Il segnaposto del trascinamento deve essere una tessera anche lui, o trascinando la griglia si accorcia sotto il dito. */ .cld-widget-griglia--tessere .cld-widget-placeholder { height: var(--cw-tessera); } /* Tessera APERTA: il tetto cade e il riquadro mostra quello che mostrerebbe nel catalogo. Il grafico torna alla sua altezza piena, che e' quella per cui era stato tarato. */ .cld-widget-griglia--tessere .cld-widget.is-espanso { max-height: none; } .cld-widget-griglia--tessere .cld-widget.is-espanso .cld-widget__corpo { overflow: visible; } .cld-widget-griglia--tessere .cld-widget.is-espanso .cld-widget__grafico { height: 220px; } /* La sfumatura sul taglio. Serve a distinguere due cose che altrimenti si somigliano: un elenco che FINISCE e un elenco che CONTINUA sotto il bordo. Senza, l'ultima riga visibile sembra l'ultima riga esistente - o peggio, si vede tagliata a meta' e sembra un difetto. `pointer-events: none` o la sfumatura intercetterebbe i clic delle voci sotto di se'. La classe la mette il JS solo dopo aver MISURATO che c'e' davvero qualcosa oltre il bordo. */ .cld-widget__corpo.is-tagliato::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(to bottom, transparent, var(--s2026-bg-panel)); pointer-events: none; } /* Griglia RIORDINABILE col trascinamento. Il modificatore serve a dire "questi si spostano" senza mettere il cursore a tutte le griglie di widget: nel catalogo i riquadri NON si riordinano, e un cursore che promette un'azione che non esiste e' peggio di nessun cursore. */ .cld-widget-griglia--ordinabile > .cld-widget > .cld-widget__testa { cursor: move; } /* Il segnaposto che resta al posto del riquadro mentre lo si trascina. ⚠ Quello dei riquadri storici (`card-placeholder`, dashboard.html) e' dichiarato ma NON esiste in nessun foglio: durante il trascinamento lascia un buco invisibile. Qui e' definito, cosi' si vede dove si sta per lasciare. */ .cld-widget-placeholder { border: 2px dashed var(--s2026-rule); border-radius: var(--s2026-radius); background: var(--s2026-bg-raised); min-height: 80px; } /* striscia dei fissati: una riga che scorre, col primo sempre visibile */ .cld-widget-striscia { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; } .cld-widget-striscia > .cld-widget { flex: 0 0 220px; scroll-snap-align: start; } /* --- invito alla personalizzazione (dashboard) ------------------------- Il titolo dell'invito NON e' `.cld-widget__nome`: quella e' l'etichetta micro che sta sopra un numero (11px, maiuscoletto, `ink-3`), tarata per farsi leggere SENZA rubare la scena alla cifra sotto. Usata come titolo di un messaggio che deve farsi notare otteneva l'effetto opposto: la frase si mimetizzava con le etichette dei riquadri intorno e l'invito non veniva letto - cioe' esattamente il problema che l'invito esiste per risolvere. Qui serve la gerarchia contraria: e' la riga piu' importante del riquadro. Stessa forma del titolo di pagina (`.page-header__h1`) scesa di un gradino nella scala, inchiostro pieno e niente maiuscoletto - a 18px il tutto-maiuscole diventa un grido e si legge anche peggio. */ .cld-widget__invito-titolo { font-size: var(--s2026-fs-xl); font-weight: 700; letter-spacing: -.2px; line-height: 1.25; color: var(--s2026-ink); } /* --- widget: classifica ------------------------------------------------ Barre rapportate al PRIMO della classifica, non al totale: qui interessa il confronto fra le voci. Un solo colore, il brand: sono la stessa grandezza misurata su soggetti diversi, non categorie da distinguere. */ .cld-classifica { display: grid; gap: 9px; } .cld-classifica__testa { display: flex; align-items: baseline; gap: 8px; font-size: 13px; } .cld-classifica__nome { color: var(--s2026-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cld-classifica__val { margin-left: auto; font-weight: 600; color: var(--s2026-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .cld-classifica__barra { height: 6px; border-radius: 3px; background: var(--s2026-rule-2); overflow: hidden; margin-top: 3px; } .cld-classifica__barra > i { display: block; height: 100%; background: var(--s2026-brand); border-radius: 3px; } .cld-classifica__nota { font-size: 11.5px; color: var(--s2026-ink-4); margin-top: 2px; } /* Il conteggio accanto al nome, nella versione a tessera. `flex: 0 0 auto` e `nowrap` perche' a stringersi dev'essere il NOME, che ha gia' i puntini di sospensione: "3 docume…" accanto a un nome intero sarebbe il taglio fatto sulla parte che non si puo' indovinare. */ .cld-classifica__conteggio { flex: 0 0 auto; white-space: nowrap; font-size: 11px; color: var(--s2026-ink-4); } /* "e altri N ▾": apre e richiude la tessera. E' un `