/** * BI Perspect - App Stylesheet * Single source of truth for all UI styles * * SECTIONS: * 1. Design Tokens (CSS Variables) * 2. Base & Reset * 3. Typography * 4. Layout & Sidebar * 5. Cards & Widgets * 6. Buttons * 7. Forms & Inputs * 8. Tables * 9. Badges, Pills, Chips * 10. Progress Bars * 11. Tabs * 12. Charts * 13. Alerts * 14. Utilities */ /* ============================================================================= 1. DESIGN TOKENS ============================================================================= */ :root { /* ═══ Palette definitiva — 11 colori ═══ */ /* ⚠️ I NOMI sono quelli di sempre, i VALORI no: dal 07/09/2026 la palette e' quella del marchio Axerta (`#002C57` e `#4384F7`, letti dal tema di `axerta.it`), e i neutri sono virati sul freddo per stare con quel blu. I nomi non sono stati rifatti apposta: valgono 1.500 riferimenti fra `.php`, `.js`, `.css` e `.md`, e una rinomina di quella misura nasconderebbe dentro il proprio diff qualunque errore di colore. Il colore vero lo dice il commento accanto a ciascuno. Il solo nome davvero fuorviante e' `--jet`, che oggi e' un blu. */ --snow: #FAFBFD; /* Bright Snow — sfondo body e widget */ --platinum: #F1F4F8; /* Platinum — sfondo hover, header tabelle. Contro il bianco misura 1,103:1, cioe' la stessa zebratura di prima (1,101): la riga alternata non e' cambiata. */ --alabaster: #D5D5D5; /* Alabaster Grey — bordi, divisori */ --silver: #A5AAAE; /* Silver — bordi, campioni, e testo SOLO su fondo scuro: 2,34 su bianco · 2,26 su --snow · 2,12 su --platinum. Su fondo chiaro non e' un testo, e' una decorazione. */ --stone: #657179; /* Stone — testo muted leggibile, 87 usi (`text-ui-light`). Rimisurato l'11/09/2026 sui fondi di HEAD: 5,01:1 su bianco · 4,84 su --snow · 4,54 su --platinum. ⚠️⚠️ 4,54 e' 0,04 sopra il 4,5 di WCAG AA, e --bg-page E' --platinum: il caso peggiore e' quello normale, e il prossimo ritocco di un fondo lo fa cadere sotto. ⚠️ Qui stava scritto «5,43 · 5,24 · 4,92» con la motivazione che il candidato #64707F «dava 4,57 su --platinum: sopra la soglia ma senza margine». Erano i numeri del platinum VECCHIO, e rimisurati su quello nuovo (#F1F4F8, DeltaE 1,68) la conclusione si ROVESCIA: #64707F ne fa 4,57 e il colore scelto 4,54 — si e' preferito il margine minore credendo il contrario. La scelta va rifatta, ed e' un task: vedi [PALETTE-NUMERI-NON-RIMISURATI] in tasks/todo.md. Chi tocca un fondo chiaro rimisura QUESTA riga per prima. */ --iron: #5C6972; /* Iron Grey — testo corpo su bianco. 5,65 su bianco · 5,45 su --snow · 5,12 su --platinum (diceva 7,08, che era il valore sul platinum vecchio). */ --jet: #050834; /* Axerta Navy — titoli, bottoni, tab attivi, badge scuri. 19,25 su bianco · 18,59 su --snow · 17,45 su --platinum (diceva 12,71, di nuovo il fondo vecchio: qui la palette nuova ha MIGLIORATO il contrasto, non peggiorato). E' il blu del marchio, non un nero. */ /* Il quasi-nero che e' stato la sidebar dal 07/09 al 22/09/2026 (ΔE 7,4 da `--jet`: un solo scuro). Dal 22/09/2026 la sidebar e' `--navy`, su richiesta di Nicola, e questo token non lo usa piu' nessuno: resta per non perdere il valore, e chi lo riusa gli da' un ruolo in DESIGN_SYSTEM.md. */ --jet-black: #0D1030; --burgundy: #93102D; /* Burgundy — dark red */ --cherry: #C21B3F; /* Intense Cherry — bright red */ --dark-emerald: #1B6B52; /* Dark Emerald — dark green */ --seaweed: #1AAD7E; /* Seaweed — bright green */ --princeton: #FB850F; /* Princeton Orange — dal 07/09/2026 SOLO warning: era anche l'accento UI, e nel marchio Axerta l'arancio non esiste. Il posto di accento lo prende --azure. */ /* Azure — il blu del marchio, preso tale e quale dal gradiente dei titoli di `axerta.it`. Fino al 07/09/2026 questo token portava `#7CB8F2`, cioe' una SCHIARITA di quel blu: a schermo l'accento risultava slavato e il blu vero del marchio non compariva da nessuna parte. Ora il chiaro ha un token suo (`--sky`) e questo e' il colore firmato. NON e' un testo: 3,57:1 su bianco e 3,24:1 su --platinum, sopra il 3 che WCAG chiede a un elemento non testuale e sotto il 4,5 di un testo. Serve come fondo, come tratto e come area di grafico; la variante che si legge e' `--azure-dark`. */ --azure: #4384F7; /* La schiaritura di --azure: il gradino CHIARO delle categorie nei grafici e le velature di superficie. 2,10:1 su bianco — area, mai tratto sottile. */ --sky: #7CB8F2; /* La versione di --azure che si puo' usare come TESTO e come PIENO sotto un testo bianco: i link, l'accento scritto, i bottoni pieni (`--btn-pieno`), lo stato scelto dei configuratori e i conteggi. Stesso rapporto che --princeton-dark ha con --princeton. I contrasti li scrive la tabella palette di DESIGN_SYSTEM.md, che il linter ricalcola: qui accanto erano 6,01 e 5,45, e misuravano 5,95 e 5,39. */ --azure-dark: #3A63A8; /* Il gradino SCURO delle categorie nei grafici. NON e' --jet: il navy del marchio ha luminanza 0,005 e una barra piena di quel colore pesa quanto una card scura — e' la ragione per cui i grafici si leggevano «troppo scuri». Questo ne ha 0,05, cioe' dieci volte tanto, e resta a 10,46:1 su bianco. ΔE 25,1 da --jet e 39,6 da --azure: sopra il pavimento di 20,8, quindi i tre blu dei grafici restano tre. */ --navy: #1F3D7A; /* Ambra scura — la versione di --princeton che si puo' usare come TESTO. Princeton nudo su fondo chiaro da' 2,2:1: sotto il 4,5:1 di WCAG per un testo, quindi su fondo chiaro serve solo come fondo o come tratto di un grafico. Questa da' 6,09:1 sul fondo del badge --warn. Sta fra i colori pieni e non fra le tinte trasparenti perche' e' un colore, non una derivazione in alpha. Scelta ambrata e non ruggine per non avvicinarsi a --cherry: warn e danger convivono nella stessa colonna. */ --princeton-dark: #8A4B08; /* Tinte trasparenti (derivate dai 10 colori) */ --dark-emerald-light: rgba(27, 107, 82, 0.12); --cherry-light: rgba(194, 27, 63, 0.12); --princeton-light: rgba(251, 133, 15, 0.12); --azure-light: rgba(67, 132, 247, 0.10); /* Base */ --white: #ffffff; /* Elevazione — due sole misure, e si riusano. L'elevazione e' spenta globalmente (vedi `box-shadow: none !important`); queste servono ai pannelli che galleggiano su contenuto chiaro, dove il solo bordo da 1px misura 1,21:1 contro il fondo e non dice niente. */ --elevazione-pannello: 0 8px 20px rgba(5, 8, 52, 0.12); --elevazione-tooltip: 0 4px 12px rgba(5, 8, 52, 0.10); /* L'ombra della CARD: 1px, 5% di nero navy. Non e' elevazione, e' il modo in cui una superficie bianca su un fondo chiaro dice di essere davanti senza che il bordo debba gridarlo — ed e' cio' che permette al filo di scendere da 1,468:1 a 1,231:1 senza che le card si sciolgano nella pagina. E' l'UNICA eccezione allo spegnimento globale delle ombre, insieme ai pannelli che galleggiano. */ --elevazione-card: 0 1px 2px rgba(5, 8, 52, 0.05); /* Anello di focus — un colore solo per tutta l'applicazione. Jet da' 13,8:1 sui fondi chiari, contro il 3:1 che WCAG 2.2 chiede a un indicatore di focus. Si dichiara come `outline`, MAI come `box-shadow`: la regola globale piu' sotto spegne ogni ombra e un anello dichiarato cosi' non viene disegnato mai. */ --focus-ring: var(--jet); /* Text */ --text-heading: var(--jet); /* Jet Black — titoli, testo su grigio/sidebar */ --text-body: var(--iron); /* Iron Grey — testo corpo su sfondo bianco */ --text-muted: var(--iron); /* Iron — testo secondario/muted (helpers, label uppercase) */ --text-light: var(--stone); /* Stone — testo terziario, placeholder, icone decorative */ /* Gerarchia di etichetta e valore (22/09/2026, Nicola sul Profilo: «poca differenza tra label e testi», bottone del modulo piccolo). UNA scala per ogni coppia dell'applicazione — `ui-form-label`, `ui-campo-*`, `ui-field-row`, le righe di `ui-metrics--aligned` — letta da qui e da nessun'altra parte: il linter pretende questi token su quelle regole. L'etichetta nomina, il valore si legge: due punti di corpo, un gradino di peso e il passaggio da Iron a jet. L'aiuto sta sotto, al corpo dell'etichetta ma grigio chiaro e a peso normale. I contrasti sono nella tabella di DESIGN_SYSTEM.md § Gerarchia di etichetta e valore. */ --etichetta-testo: 13px; --etichetta-peso: 500; --etichetta-colore: var(--iron); --valore-testo: 15px; --valore-peso: 600; --valore-colore: var(--jet); --aiuto-testo: 13px; --aiuto-colore: var(--text-light); /* Il campo e il bottone del suo modulo sono ALTI UGUALE: il bottone che chiude un modulo si legge come parte del modulo, non come un'etichetta appesa sotto. `.ui-btn-lg` e i bottoni dei piedi di modulo leggono questa. */ --campo-altezza: 40px; --campo-testo: 15px; /* Primary = Axerta Navy, hover = Azure */ --primary-dark: var(--jet); --primary: var(--jet); --primary-mid: var(--jet); --primary-soft: var(--silver); --primary-hover: var(--azure); --primary-light: rgba(5, 8, 52, 0.06); /* Il FONDO dei bottoni pieni (22/09/2026 sera — Nicola: «il blu scuro è molto scuro, rende tutto cupo, non usarlo nei bottoni»). Era `--primary`, cioè il navy del marchio, jet: la cosa più pesante di ogni schermata. Ora è il blu del marchio nella sua variante che regge il testo bianco, e al passaggio il navy dei grafici: più scuro del fondo, lontano dal jet. I testi scuri, la sidebar e le intestazioni restano `--primary`. */ --btn-pieno: var(--azure-dark); --btn-pieno-hover: var(--navy); /* Accent = azure (accento UI, non finanziario) */ /* ⚠️ Valeva `--princeton`, l'arancio: un accento che il marchio Axerta non ha. Dal 07/09/2026 e' il blu chiaro del marchio, e resta valida la regola che l'ha corretto il 20/08/2026 — la variante SCURA per cio' che si legge, la tinta piena solo per cio' che si guarda (sotto il 4,5 di un testo). */ --accent-dark: var(--azure-dark); --accent: var(--azure); --accent-mid: var(--azure); --accent-hover: var(--azure); /* Si chiamava --accent-light e portava gia' Sky, non l'accento Azure: rinominato il 06/10/2026. Un velo --X-light porta la tinta di --X. */ --sky-light: rgba(124, 184, 242, 0.10); /* Borders and surfaces */ /* IL FILO. Era `--alabaster` (#D5D5D5), che contro il bianco misura 1,468:1: su una schermata fatta di card, tabelle, celle e campi diventa un reticolo di righe grigie che si vedono prima del contenuto. 1,231:1 e' abbastanza per dire dove finisce una superficie e non abbastanza per essere guardato. ⚠️ `--alabaster` resta e non e' un doppione: e' un COLORE (campione, gradino chiaro dei grafici, tratteggio della cella futura), questo e' un RUOLO. */ --hairline: #E3E8EF; --border: var(--hairline); --border-hover: var(--alabaster); --border-focus: var(--iron); --bg-page: var(--platinum); /* Platinum — sfondo pagina/body */ /* La card e' BIANCA, la pagina e' --platinum. Erano --snow su --platinum, cioe' 1,05:1 fra le due superfici: la card non si staccava dalla pagina e tutto il lavoro di separazione restava al filo del bordo. Col bianco sono 1,10:1 — poco, ed e' voluto: la separazione la fanno bordo e ombra, il fondo deve solo non contraddirli. */ --bg-card: var(--white); --bg-hover: rgba(5, 8, 52, 0.04); --bg-subtle: var(--platinum); --bg-muted: var(--platinum); --bg-chip-doc: #E6EAF0; /* Table */ --table-bg: var(--white); /* Zebratura e intestazione su --snow e non su --platinum: dentro una card BIANCA il platinum e' il colore della PAGINA, e una riga alternata di quel colore fa sembrare la tabella bucata. Contro il bianco la riga si distingue e non si conta (il contrasto sta nella tabella palette di DESIGN_SYSTEM.md). */ --table-row-alt: var(--snow); --table-header-bg: var(--snow); --table-row-hover: rgba(5, 8, 52, 0.04); --table-font-size: 14px; --table-link-color: var(--jet); --table-link-hover: var(--iron); --table-focus-ring: rgba(5, 8, 52, 0.15); --table-page-active-bg: var(--iron); --table-page-active-text: var(--white); --table-header-text: var(--stone); /* Component accents */ --loader-overlay-color: rgba(5, 8, 52, 0.15); --ai-card-bg-start: rgba(5, 8, 52, 0.04); --ai-card-bg-end: rgba(5, 8, 52, 0.02); --ai-card-border: rgba(5, 8, 52, 0.15); --ai-card-hover-shadow: rgba(5, 8, 52, 0.10); --ai-card-hover-border: rgba(5, 8, 52, 0.25); --ai-card-accent-start: rgba(5, 8, 52, 0.06); --ai-card-accent-end: rgba(5, 8, 52, 0.03); --ai-card-title-accent: var(--jet); --ai-card-chip-bg: rgba(5, 8, 52, 0.08); --ai-card-chip-text: var(--jet); /* Internal navigation */ --internal-menu-bg: var(--platinum); --internal-menu-border: var(--border); --internal-menu-item-text: var(--stone); --internal-menu-item-hover-bg: rgba(5, 8, 52, 0.04); --internal-menu-item-hover-text: var(--jet); --internal-menu-active-bg: var(--jet); --internal-menu-active-text: var(--white); --internal-menu-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); --internal-menu-focus-ring: var(--focus-ring); --internal-menu-focus-ring-on-active: var(--platinum); /* Sidebar — Navy dal 22/09/2026 (Nicola: «sidebar navy #1F3D7A»; era `--jet-black`). Ogni velo bianco qui sotto si compone su questo fondo: chi lo cambia rimisura TUTTE le coppie della barra, perche' il navy e' molto piu' chiaro del jet-black (testo bianco 10,46:1 contro 18,52). */ --sidebar-bg: var(--navy); --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-text: rgba(255, 255, 255, 0.85); /* ⚠️ L'alpha e' 0,64: e' il testo attenuato (etichette di gruppo, terzo livello, contatore di spesa), e il caso peggiore e' il contatore, che sta sul velo `--sidebar-hover-bg`. Sul navy lo 0,52 del jet-black dava 4,07:1 sulla barra e 3,67 sul contatore — sotto il 4,5 di un testo. A 0,64: 5,31 sulla barra, 4,70 sul contatore. ⚠️ La sonda del contrasto qui non guarda: i selettori della sidebar stanno in `FONDI_SCURI`, dichiarati apposta perche' un testo chiaro su fondo scuro sarebbe indistinguibile da un difetto. Il che vuol dire che questi numeri si misurano a mano, ed e' il motivo per cui stanno scritti. */ --sidebar-text-muted: rgba(255, 255, 255, 0.64); --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-tree-line: rgba(255, 255, 255, 0.12); /* Sidebar nav active card */ /* LA SEZIONE aperta: un velo bianco leggero, **1,33:1** contro la barra. Poco, e va bene cosi': una sezione non e' dove si e', e' dentro cosa si sta. ⚠️ Vale anche per il terzo livello, che sta dentro una pagina gia' evidenziata dal suo secondo livello. */ --sidebar-nav-active-bg: rgba(255, 255, 255, 0.10); --sidebar-nav-active-text: #ffffff; /* LA PAGINA su cui si e': lo STESSO velo bianco della sezione, il doppio piu' carico. **1,77:1** contro la barra navy, dove la sezione sta a 1,33. ⚠️ E' tono su tono per scelta, non per svista: la pastiglia piena dell'accento era stata provata il 07/09/2026 (sul jet-black di allora) e scartata — un blocco di colore dentro una barra scura pesa piu' della voce che deve segnalare; e sul navy l'Azure non arriverebbe nemmeno al 3:1 (2,93). Quindi il numero qui NON arriva al 3:1 che WCAG chiede a un elemento non testuale, e a portare il segnale sono **tre** cose insieme: il fondo, il peso 600 e il testo bianco pieno (5,91:1 sul velo, contro lo 0,85 di alpha delle voci a riposo). ⚠️ Sezione e pagina si distinguono per INTENSITA', ed e' la sola cosa che le separa: chi tocca uno dei due veli rimisuri l'altro, o tornano a leggersi come due voci ugualmente attive. */ --sidebar-pagina-bg: rgba(255, 255, 255, 0.20); --sidebar-pagina-text: #ffffff; /* Il FUOCO sulla barra: `--focus-ring` e' jet, e sul navy misura 1,84:1 (sul jet-black 1,04) — un anello che non si vede. Bianco: 10,46 sulla barra, 5,91 sulla pastiglia della pagina. */ --sidebar-focus-ring: var(--white); /* Il FILO dei contatori della barra: `--conteggio` (Mariner) sul navy misura 1,76:1 e sulla pastiglia della pagina 1,01 — il badge si confondeva col fondo. Il numero bianco sul blu resta 5,95; il filo bianco lo stacca (10,46 sulla barra, 5,91 sulla pastiglia). */ --sidebar-conteggio-filo: var(--white); /* Semantic — green/red ONLY for financial meaning */ --income: var(--seaweed); /* #1AAD7E */ --expense: var(--cherry); /* #C21B3F */ --success: var(--seaweed); /* #1AAD7E */ --danger: var(--cherry); /* #C21B3F */ --warning: var(--princeton); /* #FB850F */ --info: var(--silver); /* ⚠️ Le varianti SCURE, non le tinte piene: questi tre token si usano solo come `color` e `border-color` — mai come fondo — e seaweed/princeton su chiaro danno 2,59 e 2,39, cioe' sotto il 4,5 del testo e sotto il 3 che WCAG chiede a un bordo di stato. Cambiarli qui sistema in un colpo i feedback dei form, le icone dentro i campi e i bordi is-valid/is-warning. */ --ui-success: var(--dark-emerald); --ui-danger: var(--cherry); --ui-warning: var(--princeton-dark); /* Lo STATO SCELTO dei configuratori (Campagne, Liste lead, Professionisti): passo corrente, tessere, segmenti, pastiglie, cursori, caselle degli alberi. Tre giri lo stesso giorno, il 22/09/2026, tutti su richiesta di Nicola: Princeton (l'arancio, «No arancioni»), poi Iron («tieni shuttle grey»: le caselle spuntate grigie si leggevano spente), poi il blu dei bottoni pieni («sta meglio questo blu chiaro»). Il token è `--btn-pieno` per riferimento e non per valore: scelta e comando pieno sono lo stesso blu, e se quel blu cambia cambiano insieme. Il pieno regge il testo bianco e il filo regge da sé su ogni fondo chiaro (i contrasti li ricalcola `scelto_senza_contrasto()` del linter, che sta al posto dei numeri qui accanto). Il velo è lo stesso blu al 12%, scritto in rgba perché una `var()` non prende un'alpha: il linter pretende che il suo rgb sia quello di `--scelto`, e che titoli e testo corpo sopra il velo composto sul bianco arrivino a 4,5. I controlli nativi (le caselle degli alberi) prendono il filo come `accent-color`. Il fuoco resta `--focus-ring`, un anello staccato di 2 px: un'altra forma. */ --scelto: var(--btn-pieno); --scelto-filo: var(--btn-pieno); --scelto-testo: var(--white); --scelto-velo: rgba(58, 99, 168, 0.12); /* I CONTEGGI che si leggono come notifica — il numero in una pastiglia piena: quanti criteri sono attivi in un gruppo o in un ramo chiuso, quanti filtri in una tendina, i contatori della sidebar e del menu interno. Stesso blu dello stato scelto (Nicola, 22/09/2026 sera: «anche i numeri nelle notifiche»), token a parte perché dice un'altra cosa: un numero che chiede attenzione, non una scelta. */ --conteggio: var(--btn-pieno); --conteggio-testo: var(--white); /* Accent color for native controls */ accent-color: var(--iron); /* «Unified radius» erano tre token con lo stesso valore scritto tre volte: unificati nel nome, non nel numero. Adesso derivano da --radius-md, cosi' il gradino si cambia in un posto solo. */ --sidebar-active-radius: var(--radius-md); --interactive-radius: var(--radius-md); --badge-radius: var(--radius-md); /* Typography */ /* ⚠️ DUE famiglie, e `--font-display` ha UN SOLO consumatore: `.page-title`, l'h1 della pagina. Nient'altro. Outfit e' il carattere di `axerta.it` (variabile, 100-900) ed e' geometrico: bello a corpo grande, peggiore di Inter appena il testo si fa piccolo, fitto o maiuscoletto. Un primo giro lo aveva messo anche su titoli di widget (11 px uppercase), etichette KPI, voci di menu e bottoni, e li' si legge peggio — il marchio non vale la leggibilita' del testo che si consulta tutto il giorno. Il titolo di pagina invece e' grande, corto e **uno solo per schermata**: superficie giusta per un marchio e abbastanza isolata da non costare niente a nessun altro. `--font-sans` (Inter) e' tutto il resto; `--font-mono` (Roboto Mono) i numeri. */ --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Roboto Mono', monospace; /* Spacing - Premium (more generous) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 20px; /* ← Up from 16px */ --space-5: 28px; /* ← Up from 20px */ --space-6: 36px; /* ← Up from 24px */ --space-8: 48px; /* ← Up from 32px */ /* Il respiro interno di una card. Token suo e non `--space-4`, che vale anche per `.p-4`, i margini e il piede della sidebar: cambiare la scala di spaziatura per stringere una card muove mezza applicazione. Le regole che lo usano portavano lo stesso valore ripetuto, una a mano e le altre dal token sbagliato. Una delle tre era .widget-card.widget-compact, tolta l'08/08/2026 perche' dichiarava fondo e padding IDENTICI a quelli che .widget-card gia' applica: 656 proprieta' calcolate confrontate, 0 differenze. */ --widget-padding: 16px; /* La larghezza MINIMA di una colonna di dato — una coppia etichetta/valore, una riga di recapito. Sotto questa, etichetta e valore non ci stanno più affiancati e la griglia deve togliere una colonna. ⚠️ È un minimo e non più un tetto, dal 21/08/2026: il tetto serviva quando il valore era appeso al bordo destro, perché lì la larghezza della colonna ERA la distanza dall'etichetta (244-367 px misurati). Con l'etichetta su colonna fissa quella distanza non dipende più da quanto è larga la colonna, quindi il tetto costava soltanto — lasciava 274 px di card inutilizzati a destra e i fili delle righe tagliati a metà. Ora le colonne prendono `1fr` e sono `auto-fill` a decidere quante: quattro su una card a piena larghezza, due a 768, una a 500. */ --colonna-dato: 320px; /* La colonna dell'ETICHETTA dentro una riga di dato. Tiene i valori incolonnati fra loro — che è il motivo per cui esiste una colonna fissa invece di `max-content` per riga — ed è dimensionata sull'etichetta più lunga in uso, «Ragione sociale verificata», CON la sua icona: l'asse dei valori è UNO SOLO, righe larghe e righe corte cominciano dalla stessa colonna, e una riga larga con l'etichetta a `max-content` avrebbe spostato il suo valore altrove, dando tre inizi diversi in una card. ⚠️ Era tarata sul solo testo, e il testo non è l'etichetta: a 168 px l'etichetta andava a capo su due righe (alta 39 invece di 20). Misurato il 06/10/2026 a 1440 con `white-space: nowrap`: testo 156, icona 12, gap 6 — cioè 174 — più un margine di 10 per le differenze di resa del carattere fra macchine. */ --etichetta-dato: 184px; /* Radius - Corporate: tight, minimal. ⚠️ Il 07/09/2026 la scala e' stata alzata di un gradino (5/6/8/10/14 → 6/8/10/12/16) per avvicinarsi al `--border-radius: 10px` che `axerta.it` dichiara sui propri blocchi, e **rimessa com'era lo stesso giorno**: a schermo l'insieme risultava troppo tondo. La lezione non e' il numero, e' che il marchio del sito non si trasferisce per proporzione — quella pagina ha blocchi grandi e pochi, questa ha tabelle, badge e comandi fitti, e lo stesso raggio su elementi piccoli e vicini legge come morbidezza invece che come cura. Il colore si porta, la geometria si rimisura. */ --radius-xs: 4px; --radius-sm: 5px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 14px; /* Lo stacco fra un avviso e il contenuto che segue. In una variabile perche' lo dichiarano DUE regole — l'avviso fratello del contenuto e lo slot che ne contiene uno solo — e due letterali divergono alla prima modifica. */ --spazio-avviso: 16px; /* Il respiro verticale di una cella. In una variabile perche' `th` e `td` devono muoversi INSIEME: se divergono, l'intestazione e le righe si disallineano in altezza e la tabella sembra storta senza che nulla lo dica. Alzato da 0,75rem il 25/08/2026 — le righe erano 49 px e la scheda si leggeva compressa. */ --cella-y: 0.9rem; /* Elevations - Corporate: subtle, nearly flat */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04); --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.06); --elevation-3: 0 4px 8px rgba(0, 0, 0, 0.08); --elevation-4: 0 8px 16px rgba(0, 0, 0, 0.10); /* Curve di casa, e sono DUE. `ease` e' un in-out debole: parte lento proprio nell'istante in cui si guarda. Chi entra o esce usa --ease-out, chi si muove restando a schermo --ease-in-out. Qui accanto ce n'erano altre tre — --transition-smooth, --ease-out-expo, --ease-in-out-circ — con UNA occorrenza ciascuna, cioe' la propria dichiarazione: un elenco di curve che nessuno usava e da cui il prossimo avrebbe scelto credendole di casa. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* La durata piu' comune, non una terza curva: prima ripeteva --ease-out alla lettera, quindi cambiare la curva di casa ne lasciava indietro nove usi. */ --transition: 200ms var(--ease-out); /* Tracking per gradino di dimensione. Il testo grande legge troppo largo se non lo si stringe, il minuscolo troppo stretto se non lo si allarga: un solo letter-spacing per tutta la pagina e' sbagliato da qualche parte. In prova nella palestra (?page=template#tipografia): i 35 valori esistenti non sono ancora ricondotti qui. */ --tracking-display: -0.02em; /* >= 24px: titoli, valori KPI */ --tracking-body: -0.01em; /* 13-16px: corpo, celle — e' cio' che `body` applica */ --tracking-label: 0.08em; /* <= 11px maiuscoletto: etichette, badge */ /* ⚠️ Qui stavano `--sidebar-width: 240px` e `--sidebar-collapsed: 72px`, usciti il 14/09/2026: **zero consumatori**, e il primo dichiarava anche un numero falso — la barra misura **260 px** (72 compressa), scritti nelle regole di `.sidebar-container` e nello stile anti-lampeggio di `header.php`. Un token che nessuno legge non e' una costante: e' una didascalia che invecchia da sola, e questa mentiva di 20 px. */ } /* ============================================================================= 2. BASE & RESET ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-body); background: var(--bg-page); letter-spacing: -0.01em; /* ← Minimal: Slightly less tight */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prevent content overflow in widgets and tables */ .widget-card, .overflow-x-auto, .ui-tabs, .ui-tab-panels, .ui-tab-panel { min-width: 0; } /* Text overflow utilities */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cella di tabella con un testo lungo: due righe, poi ellissi. Serve dove una colonna testuale allargherebbe la tabella oltre il suo contenitore — con `table-layout: auto` la colonna cresce fino al contenuto e nessuna larghezza dichiarata sul `td` la ferma. ⚠️ La clamp sta sullo SPAN, non sul `td`: `display: -webkit-box` su una cella le toglie il `display: table-cell` e la tabella si scompone. Il `max-width` sullo span basta a limitare la colonna, perche' la larghezza di colonna la decide il contenuto piu' largo. */ /* ── Selezione a spunta dentro una lista ───────────────────────────────── La colonna della spunta NON e' una colonna del registro: non ha etichetta, non si ordina e non finisce nel CSV. Si dichiara nel markup con `data-colonna-controllo`, e `verifica-elenchi.php` la salta confrontando `` e registro — un'eccezione dichiarata, non dedotta. La larghezza e' fissa perche' una colonna di sole caselle non deve contendere spazio ai dati: 36 px sono la casella (16) piu' il respiro. */ .ui-col-check { width: 36px; padding-right: 0; } .ui-col-check input[type="checkbox"] { display: block; margin: 0; cursor: pointer; accent-color: var(--jet); } /* La barra che compare quando qualcosa e' selezionato. Sta SOPRA la tabella e non nell'intestazione del widget: e' uno stato dell'insieme, non un comando permanente, e sparisce quando la selezione si svuota. */ .ui-selezione-barra { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radius-md); background: var(--bg-muted); border: 1px solid var(--border); margin-bottom: 16px; } .ui-selezione-conta { font-size: 13px; font-weight: 600; color: var(--text-heading); } .ui-selezione-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; min-width: 0; } /* Il filetto che stacca l'uscita dalle azioni. Senza, «annulla» sta in fila con «arricchisci» e si legge come una terza cosa da fare. */ .ui-selezione-divisore { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; } .ui-cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; } /* ============================================================================= 3. TYPOGRAPHY ============================================================================= */ h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: 600; line-height: 1.3; } /* Il tracking e' funzione della DIMENSIONE, non del tag: `--tracking-display` vale dai 24px in su, e in casa ci arrivano solo h1 e h2 (h3-h6 stanno fra 14 e 20). Scritto su tutti e sei stringerebbe proprio i titoli piccoli, dove il difetto e' l'opposto. Outfit e' geometrico e a corpo grande legge largo: `axerta.it` rende il suo h1 cosi'. */ h1, h2 { letter-spacing: var(--tracking-display); } /* ⚠️ Il link era `--princeton` NUDO, cioe' l'arancio pieno: 2,48:1 su bianco, la meta' del 4,5 che WCAG chiede a un testo, ed era vero anche prima del restyling — la regola «la tinta piena non e' un colore da testo» era scritta e questa riga la violava. Ora e' la variante scura dell'accento (6,01:1 su bianco, 5,45 su --platinum). */ a { color: var(--accent-dark); text-decoration: underline; } a:hover { color: var(--accent-dark); text-decoration: none; } code { font-family: var(--font-mono); font-size: 0.9em; color: var(--iron); } /* Sidebar Brand */ .sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); } .sidebar-brand-text { color: var(--sidebar-text); font-weight: 600; font-size: 14px; white-space: nowrap; } /* Sidebar User */ .sidebar-user { padding: var(--space-4); border-top: 1px solid var(--sidebar-border); display: flex; align-items: center; gap: var(--space-3); } .sidebar-user-info { flex: 1; min-width: 0; } /* ============================================================================= 5. CARDS & WIDGETS ============================================================================= */ /* Widget Variants */ .widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); border-left: 3px solid var(--iron); padding: var(--space-5); } /* Widget Card - Corporate Flat */ .widget-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--widget-padding); overflow: visible; box-shadow: var(--elevazione-card); transition: border-color var(--transition); } /* Il RITMO VERTICALE dentro una card. Due `.widget-body` consecutivi sono due blocchi diversi — una banda di metriche, due grafici, una tabella — e fino al 21/08/2026 stavano attaccati: misurate **nove** coppie consecutive in tutta l'applicazione, tutte a `margin-top: 0` e `padding-top: 0`. Sul Rapporto commerciale i grafici toccavano l'intestazione della tabella, e le etichette dell'asse X si leggevano come una riga di quella. 36 px (`--space-6`) perché dev'essere nettamente più del respiro INTERNO di un blocco, che vale 8 (didascalia → grafico): la gerarchia si legge dal rapporto fra le due distanze, non dal valore assoluto. ⚠️ `:not(.hidden)` sul PRIMO dei due: un corpo nascosto non occupa spazio, ma il combinatore `+` lo vede lo stesso, e il blocco dopo prenderebbe 36 px da un fratello che a schermo non c'è. Sulla scheda anagrafica quel fratello esiste (`#vuotoRapporto`), quindi non è un caso teorico. ⚠️ Il paginatore è escluso: non è un blocco, è la coda della sua tabella, e `.ui-paginator` porta già un filo e 12 px di suo. */ .widget-card > .widget-body:not(.hidden) + .widget-body:not(.hidden):not(.ui-paginator-mount):not(.ui-coda-blocco) { margin-top: var(--space-6); } /* ⚠️ La riga d'identità di una scheda (`ui-scheda-testata`) è il SOTTOTITOLO della voce, non un blocco fra i blocchi: a 36 px dai dati verificati si staccava da ciò che introduce, e la card Anagrafica aveva tre passi diversi (20 · 36 · 20). A 20 la scala della card è una sola: 20 sotto l'intestazione, 20 fra identità, fascia e righe. Il selettore ripete quello del ritmo generale con un `:has()` in più, perché deve vincerlo. */ .widget-card > .widget-body:has(> .ui-scheda-testata):not(.hidden) + .widget-body:not(.hidden):not(.ui-paginator-mount):not(.ui-coda-blocco) { margin-top: var(--space-4); } /* Il contenitore in cui `BiUI.paginate` monta la barra. Era `widget-body pt-0` scritto a mano in nove viste: un nome invece di un'utility, così il ritmo fra blocchi sa di doverlo saltare. Non prende nemmeno i 12 px della coda: `.ui-paginator` porta già un filo e 12 px di padding suo. */ .ui-paginator-mount { padding-top: 0; } /* La CODA di un blocco: il comando che agisce su ciò che sta sopra — il modulo per aggiungere una riga alla lista che precede. Non è un blocco a sé, quindi non prende i 36 px del ritmo; ma non è nemmeno attaccato, perché è un'altra cosa dalla lista. ⚠️ Senza, il modulo «Aggiungi figura chiave» stava 36 px sotto la tabella e in mezzo restava una fascia vuota che lo staccava da ciò su cui agisce: a schermo si leggeva come un comando della card, non della lista. `.ui-paginator-mount` è il caso particolare a zero. */ .ui-coda-blocco { margin-top: var(--space-3); padding-top: 0; } .widget-card:hover { border-color: var(--border-hover); } /* Widget Header - Metabolis Style: Flat, no glassmorphism */ .widget-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); /* Va a capo invece di sfondare. Senza, a 500 px l'intestazione di «Clienti a cui manca il servizio accanto» misurava 415 su 394 disponibili e trascinava fuori tutta la card — 21 px che sul telefono diventano una barra di scorrimento orizzontale su un widget. Il wrap non cambia niente finche' ci si sta: scatta solo quando il titolo e i comandi non entrano sulla stessa riga. */ flex-wrap: wrap; row-gap: var(--space-2); /* 20 px (`--space-4`) e non 12: l'intestazione di una card è una maiuscola micro e il primo blocco spesso ne porta un'altra — a 12 px le due si leggevano come una riga sola. Il ritmo interno della card è 8 dentro un blocco · 20 sotto l'intestazione · 36 fra blocchi. */ margin: 0 0 var(--space-4) 0; padding: 0; /* allineato al widget-body (padding 0) — no rientro titolo */ background: transparent; /* ← Metabolis: No background */ /* No blur, no border-bottom */ } /* Il titolo e' l'elemento ELASTICO dell'intestazione, e la sua base e' zero. ⚠️ In un flex che va a capo la riga si spezza sulla dimensione IPOTETICA dei figli — `flex-basis: auto`, cioe' il contenuto — non su quella a cui si restringerebbero: un titolo da 183 px accanto a una «i» da 16 in 172 px disponibili mandava la «i» a capo, e l'intestazione passava da 20,5 a 45 px. In una riga di KPI succedeva a tre card su quattro, e i valori cadevano 24 px piu' in basso di quelli accanto (misurato il 22/09/2026 su `?page=portafoglio&view=segmenti` e `view=ritenzione` a 1280 px). Con la base a zero il titolo non forza mai il capo: prende lo spazio che resta e, se non basta, si tronca con l'ellissi che `.widget-title span` dichiara gia'. `flex-wrap` sull'intestazione resta per il caso vero — un blocco di comandi che da solo non ci sta. */ .widget-header .widget-title { margin-bottom: 0; flex: 1 1 0; } /* Widget Body - Corporate Flat */ .widget-body { background: transparent; border-radius: 0; padding: 0; box-shadow: none; /* Container per `.ui-campi`: le sue due colonne devono rispondere alla larghezza REALE del corpo, non a quella del viewport — la stessa card misura 546 px o 338 px dentro lo split 1/2+1/2 e 828 px sotto la sua rottura a `lg`, e un `@media` guarda solo il viewport. */ container-type: inline-size; } .widget-body canvas, .widget-body .ui-chart-container { overflow: hidden; } /* Text list block (component: text-blocks -> text-list) */ .ui-text-list { font-size: 12px; line-height: 1.4; } /* Widget Title - Corporate Monochrome */ .widget-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--iron); margin-bottom: 10px; line-height: 1; /* Flex item dentro .widget-header: senza questo non si restringe sotto il proprio contenuto e l'ellipsis dichiarata sullo span non scatta mai. */ min-width: 0; } .widget-title i { font-size: 12px; color: var(--iron); flex-shrink: 0; } .widget-title i.bi-info-circle { color: var(--iron); } .widget-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Idem: l'ellipsis su un flex item richiede min-width 0, altrimenti il titolo sfora la card invece di troncarsi. Si vedeva a 1024 sui widget in colonna da 1/3. */ min-width: 0; } /* L'INTESTAZIONE DI SEZIONE di una scheda-documento (la scheda voce): 13 · 700 jet, maiuscoletto e spaziatura di `widget-title`. Il titolo di card globale (11 · 600 Iron) resta com'è sulle 228 testate dell'app, dove il protagonista è il valore del KPI e il titolo è una didascalia. Su una scheda che si LEGGE invece le card sono sezioni di un documento, e a 11 px grigi il titolo pesava meno di ogni valore sotto di lui (15 · 600) e del bottone pieno accanto: misurato il 06/10/2026, la card Anagrafica non aveva un'intestazione che si leggesse come tale. Vince sulla riduzione a 9 px sotto i 640 px (due classi contro una): lì il titolo di sezione serve di più, non di meno. */ .widget-title.ui-titolo-sezione { font-size: 13px; font-weight: 700; color: var(--jet); } .widget-title.ui-titolo-sezione i { font-size: 13px; } /* Il FUOCO sul titolo. I configuratori a passi spostano il fuoco sul titolo del passo mostrato (`tabindex="-1"` + `focus()`, Campagne · Liste lead · Professionisti): senza una regola propria quel titolo disegnava l'anello del BROWSER — `rgb(0, 95, 204) auto 1px`, un azzurro che nella palette non esiste — steso per tutta la larghezza della card, dove si legge come un campo di testo invece che come un'intestazione raggiunta. L'anello e' quello di casa (`--focus-ring`, 2 px staccati di 2) e sta stretto al TESTO: il titolo e' un blocco largo quanto la card, il suo `` e' largo quanto la parola. Col mouse non compare (`:focus-visible`), quindi riguarda solo chi naviga da tastiera — ed e' l'unico segno che gli dice dov'e' arrivato. */ .widget-title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .widget-title:focus-visible:has(> span) { outline: none; } .widget-title:focus-visible > span { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; } /* ============================================================================= KPI WIDGET VARIANTS .kpi-widget - Standard KPI (header+body, left-aligned, 3-4 per row) .kpi-mini - Compact KPI (inline, no header/body, 5+ per row) ============================================================================= */ /* KPI Widget - Standard left-aligned with header+body */ .widget-card.kpi-widget { display: flex; flex-direction: column; } /* KPI Widget with highlight - Corporate subtle */ .widget-card.kpi-widget.highlight { box-shadow: none; border-color: var(--alabaster); } .kpi-widget .widget-body { flex: 1; display: flex; flex-direction: column; } .kpi-widget .kpi-value { font-size: 2.75rem; /* 44px — editorial hero */ font-family: var(--font-mono); font-weight: 500; color: var(--jet); line-height: 1; letter-spacing: -0.03em; } /* IL NUMERO NON PRENDE COLORE, LO PRENDE LA SUA DIDASCALIA. Un KPI e' 44px: colorarlo mette in pagina una macchia rossa o verde grande quanto un titolo, e con quattro KPI affiancati la schermata si legge come un semaforo prima che come dei numeri. Il segno economico pero' non si perde — scende sulla riga sotto, dove «3.663.025 € non riconfermati» e' gia' la frase che lo dice, e dove 13px di colore bastano a qualificarla. ⚠️ Le due classi restano scritte sul VALORE nel markup: e' li' che il server sa il segno, e spostarle vorrebbe dire toccare ogni vista. Qui il valore le neutralizza e il fratello adiacente le raccoglie. Contrasti sul fondo bianco della card: --dark-emerald 5,97:1, --cherry 5,96:1, entrambi sopra il 4,5 richiesto a un testo di 13px. */ /* ⚠️ SENZA `.kpi-widget` davanti, e non e' una svista. Le due regole che stavano qui prima erano `.kpi-widget .kpi-value.text-*` e sul cruscotto vero NON si applicavano: le card dei KPI del Portafoglio non portano `.kpi-widget` (`closest('.kpi-widget')` misurato `false` su tutti e quattro), quindi il colore arrivava dall'utility `text-cherry` del CDN e la regola di casa non ha mai deciso niente. Diceva il vero per caso: il valore CHE colore avesse lo sceglieva Tailwind. Con due sole classi (0,2,0) vince sull'utility (0,1,0) ovunque il markup la scriva, dentro o fuori una `.kpi-widget`. */ .kpi-value.text-dark-emerald, .kpi-value.text-cherry { color: var(--jet); } .kpi-value.text-dark-emerald + .kpi-label { color: var(--dark-emerald); } .kpi-value.text-cherry + .kpi-label { color: var(--cherry); } .kpi-widget .kpi-label { font-size: 13px; color: var(--iron); margin-top: 8px; letter-spacing: 0.01em; font-weight: 400; } /* KPI Mini - Compact inline structure */ .widget-card.kpi-mini { padding: var(--widget-padding); background: var(--white); } .kpi-mini .widget-title { margin-bottom: var(--space-2); } .kpi-mini .kpi-value { font-size: 1.75rem; /* 28px */ font-family: var(--font-mono); font-weight: 500; color: var(--jet); line-height: 1.05; letter-spacing: -0.02em; margin-top: 8px; } /* Stessa regola della card grande, ripetuta qui perche' queste due erano piu' specifiche e vincevano: il numero resta scuro, il segno scende sulla didascalia. ⚠️ E' la KPI-MINI la card che il cruscotto usa davvero — le quattro in cima alla Ritenzione sono queste, non `.kpi-widget`. */ .kpi-mini .kpi-value.text-dark-emerald, .kpi-mini .kpi-value.text-cherry { color: var(--jet); } .kpi-mini .kpi-value.text-dark-emerald + .kpi-label { color: var(--dark-emerald); } .kpi-mini .kpi-value.text-cherry + .kpi-label { color: var(--cherry); } .kpi-mini .kpi-label { font-size: 12px; color: var(--iron); margin-top: 4px; } /* Section Title - Titoli sezione pagina */ .section-title { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: var(--tracking-label) !important; color: var(--iron) !important; padding-bottom: 0 !important; margin-bottom: 16px !important; margin-top: 40px !important; border-bottom: none !important; } /* ============================================================================= 6. TABLES ============================================================================= */ /* Sortable Tables */ .sortable-table th[data-sort] { cursor: pointer; user-select: none; position: relative; padding-right: 20px; } .sortable-table th[data-sort].text-right, .sortable-table th[data-sort].text-center { padding-right: 24px; } /* Preserve sticky positioning when both sticky and sortable */ .sortable-table th[data-sort].sticky { position: sticky; } .sortable-table th[data-sort]:hover { color: var(--text-heading); } .sortable-table thead th[data-sort]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .sortable-table th[data-sort]::after { content: '⇅'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-size: 10px; opacity: 0.3; } .sortable-table th[aria-sort="ascending"]::after { content: '↑'; opacity: 0.8; color: var(--accent-dark); } .sortable-table th[aria-sort="descending"]::after { content: '↓'; opacity: 0.8; color: var(--accent-dark); } /* Sticky table header — intestazione fissa allo scroll. Richiede un wrapper con overflow-auto + max-height; bg opaco per coprire le righe sottostanti. Il secondo selettore batte la specificità di `.sortable-table th[data-sort]` (che imporrebbe position:relative sui th ordinabili). */ .ui-table-sticky-head thead th, .ui-table-sticky-head.sortable-table thead th[data-sort] { position: sticky; top: 0; z-index: 10; background: var(--platinum); } /* Zebra rows - global table alignment */ table tbody tr:nth-child(odd) td:not([class*="bg-"]) { background-color: var(--table-bg); } table tbody tr:nth-child(even) td:not([class*="bg-"]) { background-color: var(--table-row-alt); } table tbody tr:nth-child(odd) td.sticky { background-color: var(--table-bg); } table tbody tr:nth-child(even) td.sticky { background-color: var(--table-row-alt); } /* Table Row - Metabolis Style */ table tbody tr { transition: background-color 0.15s ease; } table td, table th { padding: 10px 12px; /* ← Minimal: Compact vertical padding */ font-size: 12px; color: var(--iron); } /* Table Row Hover */ .sortable-table tbody tr:hover td, table tbody tr:hover td { background-color: var(--table-row-hover) !important; } /* Ensure sticky columns also get the hover effect */ .sortable-table tbody tr:hover td.sticky, .sortable-table tbody tr:hover td[class*="sticky"], table tbody tr:hover td.sticky, table tbody tr:hover td[class*="sticky"] { background-color: var(--table-row-hover) !important; } /* Table Headers - Clean Minimal */ table th, thead th { background: var(--table-header-bg); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; letter-spacing: 0.05em; color: var(--table-header-text); } /* Ensure table utility classes don't shrink headers/cells */ .sortable-table th.text-xs, table th.text-xs, .sortable-table td.text-xs, table td.text-xs { font-size: 12px; } .ui-table-link { color: var(--table-link-color); text-decoration: none; } .ui-table-link:hover { color: var(--table-link-hover); text-decoration: none; } .ui-table-page-active { background: var(--table-page-active-bg); color: var(--table-page-active-text); } /* ============================================================================= 9. CHIPS ============================================================================= */ /* Chips - Interactive pills */ .chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 12px; min-width: 32px; font-size: 11px; font-weight: 500; border-radius: var(--radius-md); background: var(--bg-muted); color: var(--text-body); cursor: pointer; transition: background-color var(--transition); white-space: nowrap; flex-shrink: 0; text-decoration: none; } .chip:hover { background: var(--border); text-decoration: none; } /* La famiglia .badge + .badge-* e' stata tolta il 07/08/2026: 9 varianti piu' 4 .badge-on-dark-*, zero occorrenze nel markup, viva solo perche' due renderer di helpers.js la componevano a runtime — e quei renderer non erano chiamati da nessuno. Chi scrive un badge usa .ui-badge--*. */ .ui-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 2px; /* Trasparente e non assente: le varianti grigie ci scrivono un colore, e senza la dichiarazione qui la loro riga sarebbe 2 px piu' alta delle altre nella stessa colonna. */ border: 1px solid transparent; font-size: 11px; font-weight: 600; line-height: 1; /* Un'etichetta di stato sta su una riga: spezzata in due smette di leggersi come un'etichetta e alza la riga della tabella. .ui-pill ce l'aveva gia', badge e chip no — e sotto i 1024px "In scadenza" andava a capo in una colonna da 115px. Non e' una questione di dimensione: il badge a <=640px rende gia' 23px, esattamente come il chip che li' si rimpicciolisce. */ white-space: nowrap; background: rgba(5, 8, 52, 0.08); color: var(--jet); transition: background var(--transition), color var(--transition); } /* L'over solo dove il badge e' cliccabile. Un badge che cambia colore al passaggio del mouse promette un'azione, e in tabella e' un'etichetta: chi ci clicca sopra non ottiene niente e conclude che la pagina non funziona. `a` e `button` bastano a distinguerli, non serve una classe in piu'. */ a.ui-badge:hover, button.ui-badge:hover, .ui-badge[role="button"]:hover { background: var(--iron); color: #ffffff; } .ui-badge--warn { background: var(--princeton-light); color: var(--princeton-dark); } /* ⚠️ Le due varianti col fondo `--platinum` portano un BORDO, e non e' una rifinitura: `--platinum` e' anche il fondo delle righe pari di ogni tabella, quindi una riga si' e una no il badge spariva — restava il testo, che si legge come una cella di testo normale invece che come una classificazione. Misurato il 21/08/2026 sulla lista Clienti: fondo del badge e fondo della riga identici, contrasto 1,00. Il rimedio non e' cambiare il fondo (sarebbe `--neutral`, e due varianti con lo stesso aspetto non sono due varianti): e' definire il chip col contorno, come per le icone di riga. */ .ui-badge--info { background: var(--platinum); color: var(--jet); border-color: var(--alabaster); } .ui-pill { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; min-width: 24px; font-size: 11px; font-weight: 500; border-radius: var(--radius-md); background: rgba(5, 8, 52, 0.08); color: var(--jet); white-space: nowrap; flex-shrink: 0; } .ui-chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 12px; min-width: 32px; font-size: 11px; font-weight: 500; border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-body); cursor: pointer; white-space: nowrap; /* stessa ragione di .ui-badge */ transition: background-color var(--transition), color var(--transition); text-decoration: none; flex-shrink: 0; } .ui-chip:hover { background: var(--platinum); color: var(--jet); text-decoration: none; } /* Pastiglia che nomina un componente nella palestra: fondo DICHIARATO, perche' composto (velo sul fondo della sezione) il contrasto cambiava con il posto. */ .ui-chip-doc { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--bg-chip-doc); color: var(--text-body); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; } /* Testo per le tecnologie assistive: fuori vista, letto dallo schermo. */ .ui-sr-only { /* Ancorata in alto a sinistra del contenitore: lasciata alla posizione statica, dentro una cella di tabella scorrevole sfugge allo scroller (che non è posizionato) e allarga .main-content, che la taglia. */ position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================= 10. PROGRESS BARS ============================================================================= */ /* ⚠️ Qui stavano `.ui-progress` e `.ui-progress > .ui-progress-bar`: il secondo sistema di barre, ereditato dal BI, con un override che esisteva solo per non farsi spegnere dal primo. Zero consumatori in Spark — nessuna vista rendeva mai `class="ui-progress"` — quindi la convivenza fra i due sistemi era un problema che non si poneva. Usciti il 14/09/2026. Resta il sistema vivo, `.ui-progress-bar` + `.ui-progress-fill`, piu' sotto. */ /* ============================================================================= 11. TABS ============================================================================= */ /* Container */ .ui-tabs { display: flex; flex-direction: column; gap: 0; min-width: 0; } /* Tab buttons row */ .ui-tabs .ui-tablist { display: flex; gap: 2px; border: 1px solid var(--internal-menu-border); border-radius: var(--radius-sm); background: var(--internal-menu-bg); padding: 3px; border-bottom: none; margin-bottom: 0; } .ui-tab { padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--iron); cursor: pointer; transition: color var(--transition), background-color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition); background: rgba(5, 8, 52, 0.05); border: 1px solid transparent; border-radius: var(--radius-sm); margin-bottom: 0; } .ui-tab:hover:not(:disabled) { color: var(--jet); background: rgba(5, 8, 52, 0.08); } .ui-tab.active { color: var(--white); background: var(--jet); border-color: var(--iron); } .ui-tab:disabled { opacity: 0.4; cursor: not-allowed; } /* Panels container */ .ui-tab-panels { min-width: 0; padding-top: var(--space-4); } .ui-tab-panel { display: none; min-width: 0; } /* Il pannello che entra si dissolve, quello che esce no: animare l'uscita vorrebbe dire tenere a schermo per 120 ms un contenuto che l'utente ha gia' sostituito, cioe' far sembrare lento un comando che si preme spesso. 120 ms e' al limite del percettibile, ed e' voluto: si cambia scheda decine di volte al giorno, non due. */ .ui-tab-panel.active { display: block; animation: ui-fade-in 120ms var(--ease-out); } /* Variant: in-widget (inside widget-card) */ .widget-body .ui-tabs .ui-tablist { background: var(--internal-menu-bg); } .widget-body .ui-tabs .ui-tab { padding: 6px 12px; } .widget-body .ui-tabs .ui-tab.active { background: var(--jet); color: var(--white); border-color: var(--iron); } .widget-body .ui-tabs .ui-tab-panels { padding-top: var(--space-3); } /* Internal segmented menu (tabs-like) */ .ui-internal-menu { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--internal-menu-border); border-radius: 16px; background: var(--internal-menu-bg); } .ui-internal-menu-item { flex: 1 1 0; min-width: 0; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 12px; background: transparent; color: var(--internal-menu-item-text); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .ui-internal-menu-item:hover:not(.active) { background: var(--internal-menu-item-hover-bg); color: var(--internal-menu-item-hover-text); } .ui-internal-menu-item.active { background: var(--internal-menu-active-bg); color: var(--internal-menu-active-text); } /* L'anello di focus e' un outline e non una box-shadow: la regola globale in fondo al file (`body *`) spegne ogni box-shadow con !important, quindi l'anello dichiarato come ombra non veniva mai disegnato e il focus da tastiera era invisibile. outline quella regola non lo tocca. L'offset e' NEGATIVO perche' la variante --compact --inline ha gap 2px e 2px di margine interno: un anello esterno da 4px sforerebbe il contenitore e coprirebbe l'item vicino. Dentro l'elemento la geometria non dipende dal gap, quindi vale per tutte e tre le varianti. */ .ui-internal-menu-item:focus-visible { outline: 2px solid var(--internal-menu-focus-ring); outline-offset: -2px; } /* L'item attivo ha il fondo dello stesso colore dell'anello: senza invertire il colore l'anello ci sparisce dentro. */ .ui-internal-menu-item.active:focus-visible { outline-color: var(--internal-menu-focus-ring-on-active); } .ui-internal-menu--compact { padding: 4px; gap: 4px; } .ui-internal-menu--compact .ui-internal-menu-item { height: 36px; border-radius: 10px; font-size: 12px; } .ui-internal-menu--inline .ui-internal-menu-item { flex: 0 0 auto; min-width: auto; padding: 0 12px; } .ui-internal-menu--compact.ui-internal-menu--inline { padding: 1px; gap: 2px; border-radius: 10px; background: var(--bg-card); border-color: var(--border); } .ui-internal-menu--compact.ui-internal-menu--inline .ui-internal-menu-item { height: 32px; border-radius: 8px; padding: 0 10px; font-size: 11px; color: var(--text-body); } .ui-internal-menu--compact.ui-internal-menu--inline .ui-internal-menu-item:hover:not(.active) { background: rgba(5, 8, 52, 0.06); color: var(--primary); } .ui-internal-menu--compact.ui-internal-menu--inline .ui-internal-menu-item.active { background: var(--primary); color: #fff; box-shadow: none; } .ui-internal-menu-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; margin-left: 6px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; background: var(--conteggio); color: var(--conteggio-testo); border: 1px solid rgba(255, 255, 255, 0.15); } .ui-internal-menu--compact.ui-internal-menu--inline .ui-internal-menu-item.active .ui-internal-menu-badge { background: #fff; color: var(--conteggio); border-color: #fff; } /* ============================================================================= 12. CHARTS ============================================================================= */ .ui-chart-container { position: relative; width: 100%; } .ui-chart-container canvas { width: 100% !important; height: 100% !important; } /* Chart height: fixed by default */ .ui-chart-sm { height: 150px; } .ui-chart-md { height: 250px; } .ui-chart-lg { height: 350px; } .ui-chart-xl { height: 450px; } /* Capped-height widget: prevents widgets from growing too tall. - Chart widgets: chart container shrinks to fit via flex. - List widgets (.ui-widget-scrollable): content area scrolls. */ @media (min-width: 1024px) { .ui-widget-capped { max-height: 450px; display: flex; flex-direction: column; } .ui-widget-capped .ui-chart-container { flex: 1 1 0%; height: auto; min-height: 150px; } .ui-widget-scrollable { flex: 1 1 0%; overflow-y: auto; min-height: 0; padding-right: 8px; margin-right: -4px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .ui-widget-scrollable::-webkit-scrollbar { width: 4px; } .ui-widget-scrollable::-webkit-scrollbar-track { background: transparent; } .ui-widget-scrollable::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } } /* ============================================================================= 13. UTILITIES ============================================================================= */ /* Text Colors */ .text-accent { color: var(--accent); } /* ⚠️ Le utility di testo semantico portano la variante SCURA: seaweed nudo su fondo chiaro da' 2,59:1 e cherry regge (5,96). Il verde chiaro resta un colore da fondo e da tratto di grafico, non da testo. */ /* ⚠️ `.text-ui-success`, `.text-ui-warning` e `.text-ui-danger` NON stanno qui: le genera Tailwind dagli alias `ui.*` del config in `views/partials/header.php`, e quel foglio viene iniettato DOPO questo — le copie scritte qui rendevano un colore e a schermo se ne misurava un altro. Il valore si cambia la', in un posto solo. */ /* Font Sizes — ⚠️ questa scala RIDEFINISCE le utility native di Tailwind, che arriva dal CDN e viene iniettato prima di questo foglio: `text-sm` qui vale 12px contro i 14 di Tailwind, `text-xl` 18 contro 20, `text-2xl` 20 contro 24. Chi copia una misura da una guida di Tailwind ne ottiene un'altra, e non ha modo di accorgersene. Le due voci INERTI sono uscite il 24/08/2026 — `.text-base` (14px contro 16) e `.text-3xl`: nessun markup le scriveva, quindi erano una trappola armata e non una convenzione. Le altre restano perche' sono la scala in uso; la loro divergenza e' dichiarata qui e in `DESIGN_SYSTEM.md § Tipografia`. */ .text-2xs { font-size: 10px; } /* labels, badges, tags */ .text-xs { font-size: 11px; } /* small text, metadata */ .text-sm { font-size: 12px; } /* body small, descriptions */ .text-lg { font-size: 16px; } /* headings small */ .text-xl { font-size: 18px; } /* headings */ .text-2xl { font-size: 20px; } /* headings large */ /* Fixed dimensions */ .h-card-sm { height: 52px; } /* Font Weights */ .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* Spacing (for use without Tailwind) */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } /* Responsive utilities */ .overflow-x-auto { overflow-x: auto; min-width: 0; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-light); } /* ============================================================================= 15. UI COMPONENTS (from template.php) ============================================================================= */ /* Metrics */ .ui-metrics { display: grid; gap: 10px; } .ui-metric { display: flex; justify-content: space-between; font-size: 12px; color: var(--iron); padding-bottom: 8px; border-bottom: 1px solid var(--border); } .ui-metric strong { color: var(--text-heading); } .ui-metrics .ui-metric:last-child { border-bottom: none; padding-bottom: 0; } /* Due o tre metriche AFFIANCATE, per quando stanno sopra una tabella o due grafici larghi. È una BANDA DI FATTI, non un elenco: etichetta sopra, valore sotto, i gruppi impacchettati a sinistra. ⚠️ Non è la stessa cosa di prima, ed è una correzione del 21/08/2026. La variante affiancava tre `.ui-metric`, che restavano `space-between` dentro un terzo di riga: a 1440 px l'etichetta e il suo valore finivano a **225 px** l'uno dall'altro (a 2100 px, ~450), e i sei elementi si leggevano come sei colonne invece di tre coppie — la stessa famiglia del difetto che questa variante era nata per chiudere, solo un livello più in basso. Oggi la distanza è la sola interlinea e i bordi sinistri distinti sono **tre**. Perché a pacchetto e non in griglia: distribuire su `1fr` ciascuna lega la distanza fra i gruppi alla larghezza della card, quindi il difetto ritorna da solo appena la finestra cresce. Con `flex` la banda ha la larghezza del suo contenuto e la prossimità dice il raggruppamento — 2 px dentro la coppia contro 48 fra una coppia e l'altra. `flex-wrap` invece della rottura a 1024: i gruppi vanno a capo quando non ci stanno, senza una soglia da indovinare. */ .ui-metrics--riga { display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 16px; align-items: flex-start; } .ui-metrics--riga .ui-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 0; border-bottom: none; min-width: 0; } /* IDENTICA alle didascalie dei grafici che stanno sotto (`text-2xs font-medium uppercase tracking-wider` = 10 px, 0,05em): l'etichetta di una metrica e la didascalia di un grafico dicono la stessa cosa — che dato è questo — quindi hanno lo stesso rango. A 11 px erano *quasi* uguali, che a 40 px di distanza si legge come una disattenzione invece che come una gerarchia. Nella banda l'unica cosa che cambia rango è il valore. */ .ui-metrics--riga .ui-metric > span { font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } /* 20 px: il valore è ciò che si cita a voce, e a 12 px pesava come la sua etichetta. Tracking negativo perché il testo cresce — vedi §Tono e numeri. */ .ui-metrics--riga .ui-metric strong { font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-heading); } /* Text Block */ .ui-text-block { display: grid; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--text-body); } .ui-text-block h3 { font-size: 13px; color: var(--text-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } .ui-text-block--mid { font-weight: 500; } .ui-text-block blockquote { border-left: 3px solid rgba(5, 8, 52, 0.20); padding-left: 10px; color: var(--text-body); font-style: italic; } .ui-text-accent { color: var(--iron); font-weight: 700; } /* Documento lungo (il manuale di `?page=guida`). `ui-text-block` resta la prosa breve dentro una card; questo regge venti sezioni, elenchi e tabelle. La misura di riga sta in `max-width`: oltre ~80 caratteri l'occhio perde la riga successiva, e la card a 2/3 di pagina a 1440 ne darebbe ~100. */ .ui-documento { max-width: 46rem; font-size: 14px; line-height: 1.65; color: var(--text-body); } .ui-documento > * + * { margin-top: 12px; } .ui-documento h3:focus { outline: none; } .ui-documento h3:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .ui-documento h3 { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--text-heading); scroll-margin-top: 24px; } .ui-documento > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .ui-documento h4 { margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--text-heading); scroll-margin-top: 24px; } .ui-documento h3 + *, .ui-documento h4 + * { margin-top: 8px; } .ui-documento strong { color: var(--text-heading); font-weight: 600; } .ui-documento ul, .ui-documento ol { padding-left: 1.25rem; } .ui-documento ul { list-style: disc; } .ui-documento ol { list-style: decimal; } .ui-documento li + li { margin-top: 4px; } .ui-documento li::marker { color: var(--text-light); } .ui-documento a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; } .ui-documento blockquote { border-left: 3px solid var(--accent); background: var(--bg-subtle); padding: 12px 16px; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .ui-documento blockquote > * + * { margin-top: 8px; } /* Nel sorgente `---` separa le sezioni, ma il filo lo porta già il titolo: due fili di fila si leggono come una sezione vuota. */ .ui-documento hr { display: none; } .ui-documento-tabella { overflow-x: auto; } /* Le celle di `ui-table` sono pensate per i dati; qui sono frasi. */ .ui-documento-tabella .ui-table td, .ui-documento-tabella .ui-table th { text-transform: none; white-space: normal; vertical-align: top; font-size: 13px; line-height: 1.5; } /* Indice del documento: una voce per sezione, in colonne che scendono con la larghezza della card (stessa logica di `ui-domande`). */ .ui-documento-indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2px 16px; font-size: 13px; } .ui-documento-indice a { display: block; padding: 6px 10px; border-radius: var(--radius-md); color: var(--text-body); text-decoration: none; transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out); } .ui-documento-indice a:hover { background: var(--bg-subtle); color: var(--text-heading); } /* Form Inputs */ .ui-input { display: block; height: var(--campo-altezza); padding: 0 12px; font-size: var(--campo-testo); color: var(--valore-colore); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.15s ease; } textarea.ui-input { height: auto; min-height: 80px; padding: 8px 12px; line-height: 1.5; resize: vertical; } /* Variante compatta, gemella di `.ui-select-sm`. Serve dove il campo sta NELL'INTESTAZIONE di un widget e non in un form: li' i 38px e i 14px di `.ui-input` pesano piu' del titolo che dovrebbero accompagnare. Resta anche dove il campo sta in una riga di comandi di testata (36 px), non in un modulo. */ .ui-input-sm { height: 32px; padding: 0 10px; font-size: 13px; } /* Il CAMPO DI RICERCA sopra una lista (`ui-input ui-input-sm max-w-xs`, nove viste): la larghezza la detta il SEGNAPOSTO, non il browser. Un `` con `width: auto` vale la sua `size` — 20 caratteri, 170 px, 150 utili — e il segnaposto piu' corto dell'app ne misura 152: a ogni larghezza si leggeva «Cerca per nome o P.IV», con 189 px liberi accanto e 337 a 375 px, perche' la misura non dipende dallo spazio ma dal default del controllo. 15rem = 240 px, 220 utili: ci sta il segnaposto piu' lungo («Cerca per azienda o referente…», 198 px). `max-width: 100%` lo tiene dentro il contenitore stretto, `max-w-xs` nel markup resta il tetto a 320. */ .ui-input[type="search"] { width: 15rem; max-width: 100%; } .ui-input:focus { outline: none; border-color: var(--primary); } .ui-input::placeholder { color: var(--text-light); } .ui-input:disabled { background: var(--bg-subtle); cursor: not-allowed; opacity: 0.7; } /* Select dropdown */ .ui-select { display: block; height: var(--campo-altezza); padding: 0 32px 0 12px; font-size: var(--campo-testo); color: var(--valore-colore); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5a5a' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.15s ease; } .ui-select:focus { outline: none; border-color: var(--primary); } .ui-select:disabled { background-color: var(--bg-subtle); cursor: not-allowed; opacity: 0.7; } /* Date Input Styling */ input[type="date"], input[type="datetime-local"], input[type="time"], .ui-input[type="date"], .ui-input[type="datetime-local"], .ui-input[type="time"] { padding-right: 8px; accent-color: var(--primary); color-scheme: light; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'tnum' on, 'lnum' on; } .ui-input[type="date"]::-webkit-calendar-picker-indicator, .ui-input[type="datetime-local"]::-webkit-calendar-picker-indicator, .ui-input[type="time"]::-webkit-calendar-picker-indicator { width: 18px; height: 18px; padding: 2px; margin-left: 4px; cursor: pointer; border-radius: var(--radius-sm); opacity: 0.6; transition: opacity 0.15s ease, background-color 0.15s ease; } .ui-input[type="date"]::-webkit-calendar-picker-indicator:hover, .ui-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, .ui-input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--primary-light); } /* Date picker popup styling (Chrome/Edge) */ ::-webkit-datetime-edit { padding: 0; font-family: inherit; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; font-family: inherit; } ::-webkit-datetime-edit-text { color: var(--text-light); padding: 0 2px; font-family: inherit; } ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-year-field { color: var(--text-body); font-family: inherit; } ::-webkit-datetime-edit-month-field:focus, ::-webkit-datetime-edit-day-field:focus, ::-webkit-datetime-edit-year-field:focus { background-color: var(--primary-light); color: var(--primary); border-radius: var(--radius-sm); outline: none; } /* ═══════════════════════════════════════════════════════════════════════════ FLATPICKR CUSTOM THEME (Violet) ═══════════════════════════════════════════════════════════════════════════ */ /* Datepicker input styling */ .ui-datepicker, .ui-daterange-picker { padding-left: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23888888'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; cursor: pointer; } .ui-datepicker:focus, .ui-daterange-picker:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%233D458D'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E"); } .ui-datepicker.active, .ui-daterange-picker.active { border-color: var(--primary); } .flatpickr-calendar { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; border-radius: var(--radius-md); border: 1px solid var(--border); background: #fff; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--border); } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { border-top-color: var(--border); } /* Month navigation */ .flatpickr-months { padding: 8px 4px 4px; } .flatpickr-months .flatpickr-month { height: 36px; } .flatpickr-current-month { font-size: 13px; font-weight: 600; color: var(--text-heading); padding-top: 6px; } .flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; color: var(--text-heading); background: transparent; } .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--primary-light); } .flatpickr-current-month input.cur-year { font-weight: 600; color: var(--text-heading); } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { padding: 8px 10px; border-radius: var(--radius-sm); transition: background-color 0.15s ease; } .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--primary-light); } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--primary); } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary-dark); } /* Weekdays header */ .flatpickr-weekdays { background: transparent; padding: 0 8px; } .flatpickr-weekday { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* Days grid */ .flatpickr-days { padding: 4px 8px 8px; } .dayContainer { min-width: 280px; max-width: 280px; } .flatpickr-day { font-size: 13px; font-weight: 500; color: var(--text-body); border-radius: var(--radius-sm); height: 36px; line-height: 36px; max-width: 36px; margin: 1px; border: none; transition: background-color 0.15s ease, color 0.15s ease; } .flatpickr-day:hover { background: var(--primary-light); border-color: transparent; color: var(--primary); } .flatpickr-day.today { border: 1px solid var(--primary); background: transparent; color: var(--primary); font-weight: 600; } .flatpickr-day.today:hover { background: var(--primary-light); color: var(--primary); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: var(--primary); border-color: var(--primary); color: #fff; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { border-color: transparent; } .flatpickr-day.inRange { background: rgba(5, 8, 52, 0.06); color: var(--primary-dark); } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: var(--text-light); } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--text-light); opacity: 0.5; background: transparent; } /* Time picker */ .flatpickr-time { border-top: 1px solid var(--border); padding: 8px; } .flatpickr-time input { font-size: 14px; font-weight: 500; color: var(--text-heading); } .flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--primary-light); } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--text-muted); font-weight: 500; } .flatpickr-time .flatpickr-am-pm:hover { background: var(--primary-light); color: var(--primary); } .numInputWrapper span { border-color: var(--border); } .numInputWrapper span:hover { background: var(--primary-light); } .numInputWrapper span:after { border-color: var(--text-muted) transparent; } .numInputWrapper span:hover:after { border-color: var(--primary) transparent; } /* Buttons - Clean Minimal */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 140ms var(--ease-out); white-space: nowrap; position: relative; } /* Il bottone deve dire di aver sentito il click prima che la risposta arrivi. Al posto del ripple, che cresceva width/height per 600 ms partendo dal centro invece che dal puntatore: layout + paint, e fuori budget di dieci volte. */ .ui-btn:active { transform: scale(0.97); } .ui-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Spento = metà opacità, su ogni variante: un comando che non si può premere deve pesare meno di uno che si può. Sul pieno il risultato sta sotto il 3:1 ed è una scelta: WCAG esenta i componenti inattivi, e il PERCHÉ di un comando spento si scrive accanto (`ui-passi-piede-perche`, `ui-form-hint`). */ .ui-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ui-btn:disabled:active { transform: none; } /* ⚠️ Le tre varianti piene ripetono il bianco anche al PASSAGGIO: su un `` la regola `a:hover` (un tipo e una pseudo-classe) batte `.ui-btn-primary` (una classe sola) e rimetteva il colore dei link — misurato il 25/09/2026 su «Apri in Anagrafica»: `rgb(58,99,168)` su `rgb(31,61,122)`, testo blu su blu. Secondary, outline e ghost il colore del passaggio lo dichiarano già con `:hover:not(:disabled)`, che pesa di più. */ /* Primary: il pieno dei bottoni (`--btn-pieno`), testo bianco; al passaggio `--btn-pieno-hover`. Fino al 22/09/2026 il fondo era jet e il passaggio l'azzurro pieno, che col bianco non arrivava a 4,5. */ .ui-btn-primary { background: var(--btn-pieno); color: var(--white); border-color: var(--btn-pieno); } .ui-btn-primary:hover:not(:disabled) { background: var(--btn-pieno-hover); border-color: var(--btn-pieno-hover); color: var(--white); } /* Accent (blu). ⚠️ Il FONDO e' la variante scura dell'accento, non la tinta piena: col bianco la tinta piena non arriva a 4,5, cioe' con quella *non esiste* un testo leggibile. Dal 22/09/2026 sera coincide con Primary — il pieno dei bottoni e' questo stesso blu — e resta per i consumatori che la nominano. */ .ui-btn-accent { background: var(--btn-pieno); color: var(--white); border-color: var(--btn-pieno); } .ui-btn-accent:hover:not(:disabled) { background: var(--btn-pieno-hover); border-color: var(--btn-pieno-hover); color: var(--white); } /* Secondary: fondo subtle, al passaggio il pieno dei bottoni. */ .ui-btn-secondary { background: var(--bg-subtle); color: var(--text-body); border-color: var(--border); } .ui-btn-secondary:hover:not(:disabled) { background: var(--btn-pieno); border-color: var(--btn-pieno); color: var(--white); } /* Outline - Trasparente, hover solo bordo e testo viola */ .ui-btn-outline { background: transparent; color: var(--text-body); border-color: var(--border); } .ui-btn-outline:hover:not(:disabled) { background: transparent; border-color: var(--primary); color: var(--primary); } .ui-btn-outline.active { background: transparent; border-color: var(--primary); color: var(--primary); } /* Ghost */ .ui-btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .ui-btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text-body); } /* Filo: il comando NON principale che sta DA SOLO — «Modifica» nella testata di una card, «Ripeti la ricerca», «Aggiungi …» in coda a una lista. Filo e testo `--accent-dark` sul bianco: 5,95:1, sopra il 3:1 di un componente non testuale e il 4,5 del testo. È la ricetta di `ui-testata-azzera` resa variante di `.ui-btn`, così compone con `ui-btn-sm` (28 px in una card) e con la base (36 px in testata di pagina). Perché esiste: da solo secondary misura 1,10:1 di fondo e 1,23 di bordo (non si vede), il pieno invece si vede TROPPO — 28 px di blu pieno accanto a un titolo da 11 px erano l'elemento più saliente della card Anagrafica, e modificare non è ciò per cui una scheda si apre. Il pieno resta UNO per blocco, per l'azione che il blocco esiste per fare. */ .ui-btn-filo { background: var(--white); color: var(--accent-dark); border-color: var(--accent-dark); } .ui-btn-filo:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); } .ui-btn-filo:disabled { border-style: dashed; color: var(--text-body); } /* Danger */ .ui-btn-danger { background: var(--cherry); color: #fff; border-color: var(--cherry); } .ui-btn-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; } /* Sizes */ .ui-btn-sm { height: 28px; padding: 0 10px; font-size: 11px; } /* La taglia dei comandi di un CONFIGURATORE A PASSI: «Indietro» e «Avanti» del piede, e il comando che il passo esiste per premere — Conta, Estrai, Cerca, gli export e il salvataggio del segmento. 40 px e il testo di casa (14): un gradino sopra la base, non un ingrandimento. Il 22/09/2026 era 44 a 15 px, e col resto del passo ingrandito Nicola l'ha giudicato «troppo grande»: il comando si distingue perché è l'unico della card, non perché è enorme. ⚠️ NON sale la taglia di base: la riga di testata resta a 36 px, dove `.ui-btn` e `.ui-dropdown-trigger` devono misurare uguale (§Design System n. 12). */ /* ⚠️ Dal 22/09/2026 (sera) è anche la taglia del BOTTONE DI UN MODULO — il comando che chiude un modulo in una card, il piede di una modale, la conferma — e la dichiarano i tre contenitori qui sotto invece di chiederla a ogni bottone: alta quanto il campo (`--campo-altezza`), peso 600. A 28 px e 11 px («Cambia la password» sul Profilo) il comando pesava meno dell'etichetta del campo sopra di lui. */ .ui-btn-lg, .ui-form-azioni .ui-btn, .ui-modal-footer .ui-btn, .ui-confirm-actions .ui-btn { height: var(--campo-altezza); padding: 0 18px; font-size: 14px; font-weight: 600; } /* Icon only */ .ui-btn-icon { width: 36px; padding: 0; background: transparent; color: var(--iron); border-color: var(--border); } .ui-btn-icon:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--primary); color: var(--primary); } .ui-btn-sm.ui-btn-icon { width: 28px; } .ui-btn-xs.ui-btn-icon { width: 24px; } /* ⚠️ Due comandi icona adiacenti si toccano: concatenati nel JS senza nulla in mezzo la distanza misura **0 px** (Chrome 150), e i due quadrati col bordo si leggono come un controllo solo diviso a metà. Il rimedio non è uno spazio nel markup — `lead.js` lo faceva e dava **3 px**, cioè la larghezza accidentale di uno spazio a quel font, che cambia col font. `0.5rem` è lo stesso `gap` che `.ui-btn` usa fra icona e testo: una misura sola per «due cose che appartengono allo stesso comando ma restano distinte». */ .ui-row-actions { display: inline-flex; align-items: center; gap: 0.5rem; } /* ⚠️ `ghost` NON toglie il bordo a un'icona di riga, e fino al 21/08/2026 lo toglieva: l'idea era che undici cornici in colonna disegnassero una griglia in competizione coi dati. Guardato su una tabella vera — la coda delle conferme, righe a zebra — vince l'obiezione opposta, che quel commento scriveva da sé: senza cornice la spunta e la croce si leggono come due glifi appoggiati, non come comandi. Il bordo a riposo è `--border`, lo stesso peso dei filetti di riga, e a distinguerlo basta la forma: un quadrato arrotondato di 28 px non si confonde con un filetto orizzontale largo quanto la tabella. ⚠️ Un bordo più CHIARO dei filetti non è la via di mezzo che sembra: sui fondi a zebra (`--platinum`) misura 1,08:1 contro 1,21 del bordo pieno, cioè sparisce una riga sì e una no — la visibilità a intermittenza si legge come due comandi diversi. Per questo `ghost` e `icon` insieme non dichiarano più niente: valgono le regole di `.ui-btn-icon` qui sopra. */ .ui-btn-lg.ui-btn-icon { width: 44px; } /* Loading */ .ui-btn-loading { pointer-events: none; opacity: 0.8; } /* Button Group */ .ui-btn-group { display: inline-flex; } .ui-btn-group .ui-btn { border-radius: 0; margin-left: -1px; } .ui-btn-group .ui-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; } .ui-btn-group .ui-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .ui-btn-group .ui-btn:hover, .ui-btn-group .ui-btn.active { z-index: 1; } /* Accordion */ .ui-accordion { border: 1px solid var(--internal-menu-border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--internal-menu-bg); } .ui-accordion summary { font-size: 12px; font-weight: 600; color: var(--internal-menu-item-hover-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .ui-accordion summary::after { content: ''; width: 7px; height: 7px; margin-left: 10px; border-right: 1.8px solid var(--internal-menu-item-text); border-bottom: 1.8px solid var(--internal-menu-item-text); transform: rotate(45deg) translateY(-1px); /* Ruota restando dov'e': --ease-in-out, come .nav-chevron e .ui-criteri-freccia. */ transition: transform 0.2s var(--ease-in-out), border-color 0.2s ease; flex-shrink: 0; } .ui-accordion[open] summary::after { transform: rotate(-135deg) translateY(1px); border-color: var(--internal-menu-active-bg); } .ui-accordion summary::-webkit-details-marker { display: none; } /* Lo stacco dal `summary` vale per QUALUNQUE contenuto, non per i soli paragrafi: fino al 27/08/2026 la regola era `.ui-accordion p`, e un accordion con dentro una tabella la attaccava al titolo — 0 px misurati contro gli 8 di un `

`. Non si vedeva perche' il padding della prima cella riempie lo spazio che manca, quindi a schermo somiglia a una scelta. La tipografia resta sui soli paragrafi: una tabella ha la sua. */ .ui-accordion > summary + * { margin-top: 8px; } .ui-accordion p { font-size: 12px; color: var(--text-muted); } /* Accordion variant: in-widget (flat style) */ .widget-body .ui-accordion { border: 1px solid var(--internal-menu-border); background: var(--internal-menu-bg); border-radius: var(--radius-sm); } .widget-body .ui-accordion[open] { background: var(--internal-menu-item-hover-bg); border-color: var(--internal-menu-active-bg); } .widget-body .ui-accordion summary { font-size: 12px; } /* Dropdown */ .ui-dropdown { position: relative; display: inline-block; } .ui-dropdown-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--text-body); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); } .ui-dropdown-trigger:hover { background: var(--bg-subtle); border-color: var(--primary); } .ui-dropdown-trigger--icon { padding: 0; width: 36px; } /* Il pallino che dice «questo comando ha qualcosa di attivo». UNO per tutti i comandi d'intestazione: filtri, calendario, e quelli che verranno. Si chiamava `.ui-calendar-notify-dot`, cioe' del calendario e di nessun altro, e ad accenderlo non c'era NIENTE — `data-calendar-dot` non lo leggeva nessun JS, quindi era markup che sembrava una convenzione. Arancione e non --primary: il jet su un'icona jet non si distingue dal glifo, e il punto e' farsi notare. */ .ui-trigger-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--princeton); } /* Compact variant for widget/toolbar */ .ui-dropdown-trigger--sm { height: 32px; } .ui-dropdown-trigger--icon.ui-dropdown-trigger--sm { width: 32px; font-size: 11px; } .ui-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; /* Il pannello ha un suo margine interno: senza, le voci toccano il bordo e l'evidenziazione dell'hover finisce a filo della cornice. Prima questo padding stava solo su una variante, cioe' il menu nudo non era usabile da solo. */ padding: 4px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); z-index: 50; opacity: 0; visibility: hidden; /* Il menu nasce dal suo trigger, non dal proprio centro: l'origine sta sull'angolo da cui il pannello e' ancorato. */ transform-origin: top left; transform: translateY(-4px) scale(0.97); transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms var(--ease-out); } /* Allineamento a destra: serve a ogni menu ancorato a un trigger che sta sul bordo destro dell'intestazione, altrimenti il pannello esce dallo schermo. Era scritto `style="right:0;left:auto"` a mano voce per voce. */ .ui-dropdown-menu--right { left: auto; right: 0; } /* L'origine segue l'ancoraggio: il menu nasce dall'angolo da cui pende. */ .ui-dropdown-menu--right, .ui-timefilter-menu { transform-origin: top right; } /* ⚠️ Sotto i 640 px l'ancoraggio a destra si ROVESCIA, e non e' cosmesi. `right: 0` vuol dire «il bordo destro del pannello sta su quello del trigger»: a schermo largo il trigger e' a destra e il menu cade dentro la finestra, ma a schermo stretto l'intestazione va a capo (`.page-header-row`, `flex-wrap: wrap`) e lo STESSO trigger finisce a sinistra — il pannello si stende all'indietro e ne esce. Misurato il 22/09/2026 a 375 e 414 px: Anagrafica «Altre azioni» `left = -208` su 280 di larghezza e «Filtri» `-158` su 272, Opportunita' `-103` e `-158`, Portafoglio/Ritenzione `-109` e `-116`, Consumi `-150`. E non si raggiungono in nessun modo: `.main-content` ha `overflow-x: hidden` e l'eccedenza misura 0, quindi il contenuto non esce dallo schermo — viene tagliato. ⚠️ Riancorare a sinistra NON basta, ed e' stato il primo tentativo: il pannello resta appeso al TRIGGER, e un trigger a x=120 con un pannello da 272 esce di 17 px dall'altra parte (misurato su Ritenzione a 375). Finche' l'ancora e' il trigger non esiste una larghezza che vada bene per tutte le sue posizioni. Quindi a questa larghezza il pannello si ancora al BLOCCO DEI COMANDI: `.ui-dropdown` smette di essere il suo contenitore posizionato, il menu si stende da bordo a bordo del blocco e scende sotto tutta l'intestazione. La sua larghezza non dipende piu' da quale dei comandi lo ha aperto — che e' la proprieta' che mancava. ⚠️ `width`/`min-width` vanno azzerati insieme: le varianti li dichiarano (272 su `--filtri`, 180 di base) e vincerebbero su `left`/`right`. La regola sta insieme a `.page-header-row`, piu' in basso in questo file: e' li' che nasce il difetto, e li' l'ordine della cascata la fa vincere sul `justify-content: flex-end` dei comandi. */ .ui-dropdown:hover .ui-dropdown-menu, .ui-dropdown:focus-within .ui-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .ui-dropdown--click:hover .ui-dropdown-menu, .ui-dropdown--click:focus-within .ui-dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.97); } .ui-dropdown.is-open .ui-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* Intestazione di gruppo dentro il menu. Reggeva solo se il markup ci aggiungeva anche `widget-title`: da sola era testo a 14px, indistinguibile da una voce. Ora e' un maiuscoletto come ogni altro titolo del sistema, e il markup non deve ricordarsi niente. */ .ui-dropdown-header { padding: 7px 8px 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } .ui-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; font-size: 13px; line-height: 1.4; white-space: nowrap; color: var(--text-body); background: transparent; border: none; cursor: pointer; transition: background 0.15s var(--ease-out); text-align: left; } /* Larghezza fissa all'icona: senza, ogni glifo ha la sua e le etichette partono da ascisse diverse. Il markup lo faceva con `w-4` a mano, voce per voce — cioe' finche' qualcuno se lo ricordava. */ .ui-dropdown-item > i { flex: none; width: 16px; text-align: center; font-size: 13px; color: var(--text-light); } .ui-dropdown-item:hover > i { color: inherit; } /* Una voce pericolosa e' rossa anche nell'icona: spegnerla la farebbe sembrare disabilitata proprio dove il colore serve ad avvertire. */ .ui-dropdown-item--danger > i { color: inherit; } .ui-dropdown-item:hover { background: var(--bg-subtle); } /* Il click deve dirsi sentito prima che la voce faccia effetto. Non `scale` come sul bottone: una riga a tutta larghezza che si stringe sembra un difetto di disegno, non una pressione. Il fondo scende subito (0 ms) e risale in 140: la risposta e' istantanea, il ritorno no. */ .ui-dropdown-item:active { background: rgba(5, 8, 52, 0.12); transition-duration: 0ms; } /* La voce scelta, in un menu che rappresenta uno stato (filtro attivo, ordinamento corrente). Lo stile esisteva solo dentro .ui-quickfilter-menu, una variante che nessuno usava: tolta quella, una voce marcata .active sarebbe rimasta identica alle altre in ogni dropdown dell'app. */ .ui-dropdown-item.active { background: rgba(5, 8, 52, 0.06); color: var(--primary); font-weight: 600; } .ui-dropdown-item.active > i { color: var(--primary); } .ui-dropdown-item--danger { color: var(--danger); } .ui-dropdown-item--danger:hover { background: var(--cherry-light); } /* La freccetta del trigger. Non aveva NESSUNA regola di base: l'unica che la nominava era dentro il blocco `.ui-dropdown-demo`, quindi fuori dalla palestra era un'icona ferma. Ruota quando il menu e' aperto — e la rotazione e' l'unico segnale che il click ha fatto qualcosa quando il pannello si apre fuori dal campo visivo. */ .ui-dropdown-caret { font-size: 10px; color: var(--text-light); transition: transform 150ms var(--ease-out); } .ui-dropdown.is-open .ui-dropdown-caret { transform: rotate(180deg); } /* Il separatore taglia tutto il pannello, quindi rientra del padding del menu: un filo che si ferma prima del bordo sembra un errore di disegno. */ .ui-dropdown-divider { margin: 4px -4px; border: none; border-top: 1px solid var(--border); } /* Dropdown variant: in-widget */ .widget-body .ui-dropdown-trigger { background: var(--bg-subtle); border-color: transparent; } .widget-body .ui-dropdown-trigger:hover { background: var(--bg-muted); border-color: transparent; } /* AI Components */ .ui-ai-card { border-radius: var(--radius-sm); padding: 18px; background: linear-gradient(135deg, var(--ai-card-bg-start), var(--ai-card-bg-end)); border: 1px dashed var(--ai-card-border); display: grid; gap: 8px; font-size: 12px; color: var(--text-body); transition: transform 140ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .ui-ai-card:hover { transform: translateY(-2px); border-color: var(--ai-card-hover-border); } } .ui-ai-card--accent { background: linear-gradient(135deg, var(--ai-card-accent-start), var(--ai-card-accent-end)); } .ui-ai-header { display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ai-card-title-accent); font-weight: 600; } .ui-ai-chip { background: var(--ai-card-chip-bg); color: var(--ai-card-chip-text); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .ui-ai-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-heading); } .ui-ai-sparkle { color: var(--ai-card-title-accent); } .ui-ai-footer { font-size: 11px; color: var(--text-muted); } .ui-ai-accordion { border-style: dashed; background: rgba(255, 255, 255, 0.85); } .ui-ai-card p, .ui-ai-card li, .ui-ai-card .text-iron { color: var(--text-heading); } .ui-ai-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ui-ai-kpi { background: rgba(255, 255, 255, 0.7); border-radius: var(--radius-md); padding: 8px; text-align: center; font-size: 11px; color: var(--text-muted); } .ui-ai-kpi strong { display: block; font-size: 16px; color: var(--text-heading); } /* Contrast Cards — filled backgrounds */ .ui-contrast-card { border-radius: var(--radius-md); padding: var(--widget-padding); color: #fff; display: grid; gap: 8px; border: none; } .ui-contrast-card--positive { background: var(--dark-emerald); } /* seaweed pieno col bianco sopra: 2,87:1 */ .ui-contrast-card--negative { background: var(--danger); } .ui-contrast-card--neutral { background: var(--jet); } .ui-contrast-card .ui-contrast-header { opacity: 0.85; } .ui-contrast-card .ui-contrast-value { color: #fff; } .ui-contrast-card .ui-contrast-meta { color: rgba(255,255,255,0.8); } .ui-contrast-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-label); opacity: 0.75; } .ui-contrast-value { font-size: 28px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; } .ui-contrast-meta { font-size: 12px; opacity: 0.8; } /* Dark KPI Cards */ .ui-kpi-dark { background: var(--jet); color: var(--platinum); border-radius: var(--radius-md); padding: var(--widget-padding); display: grid; gap: 8px; border: 1px solid var(--iron); box-shadow: none; } .ui-kpi-dark-soft { background: var(--iron); color: var(--platinum); border-radius: var(--radius-md); padding: var(--widget-padding); display: grid; gap: 8px; border: 1px solid var(--iron); box-shadow: none; } .ui-kpi-dark-subtle { background: var(--iron); color: var(--platinum); border-radius: var(--radius-md); padding: var(--widget-padding); display: grid; gap: 8px; border: 1px solid var(--iron); box-shadow: none; } .ui-kpi-dark-soft canvas, .ui-kpi-dark canvas, .ui-kpi-dark-subtle canvas { max-width: 100%; display: block; } .ui-kpi-dark-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: rgba(255, 255, 255, 0.70); } .ui-kpi-dark-soft .ui-kpi-dark-header { color: rgba(255, 255, 255, 0.70); } .ui-kpi-dark-soft .ui-kpi-dark-meta { color: rgba(255, 255, 255, 0.55); } .ui-kpi-dark-value { font-size: 2.25rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-bottom: 1px; } .ui-kpi-dark-meta { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.2; } .ui-kpi-dark-value + .ui-kpi-dark-meta, .ui-kpi-dark-soft .ui-kpi-dark-value + .ui-kpi-dark-meta, .ui-kpi-dark-subtle .ui-kpi-dark-value + .ui-kpi-dark-meta { margin-top: -3px; } .ui-kpi-dark .h-card-sm, .ui-kpi-dark-soft .h-card-sm, .ui-kpi-dark-subtle .h-card-sm { height: 96px; } /* Semantica su superficie scura. seaweed #1AAD7E e cherry #C21B3F sono tarati sul bianco: su --jet #002C57 il rosso scende a ~2,2:1, sotto il 3:1 richiesto per un indicatore non testuale. Queste due tinte schiarite valgono SOLO dentro le card scure; altrove si usano i colori pieni. */ :root { --seaweed-on-dark: #4ADE80; --cherry-on-dark: #FF7A93; } .ui-kpi-dark .ui-dot--verde, .ui-kpi-dark-soft .ui-dot--verde, .ui-kpi-dark-subtle .ui-dot--verde { background: var(--seaweed-on-dark); } .ui-kpi-dark .ui-dot--rosso, .ui-kpi-dark-soft .ui-dot--rosso, .ui-kpi-dark-subtle .ui-dot--rosso { background: var(--cherry-on-dark); } /* L'icona del tooltip eredita text-ui-light (stone), illeggibile su jet. */ .ui-kpi-dark .bi-info-circle, .ui-kpi-dark-soft .bi-info-circle, .ui-kpi-dark-subtle .bi-info-circle { color: rgba(255, 255, 255, 0.55); } /* Un ui-badge dentro un contenitore a fondo pieno. Le varianti .ui-badge--* hanno fondo del colore semantico al 12% e testo dello stesso colore pieno: leggibili su fondo chiaro, illeggibili appena il contenitore porta quel colore. Misurato prima di scrivere questa regola: "Alert" (--danger) dentro .ui-contrast-card--negative dava 1,00:1, cioe' testo cherry su fondo cherry — invisibile — e "OK" (--success) dentro --positive 1,09:1. Entrambi sono il markup che il design system prescrive, e stanno a schermo nella palestra. Qui il fondo torna chiaro e il colore passa al testo, nella sua versione scura: --dark-emerald 5,52:1, --cherry 5,13:1, --iron 6,52:1. --warn usa --princeton-dark, il token ambrato nato proprio perche' in palette nessun arancio arrivava a 4,5:1 come testo. --iron resta il ripiego per le varianti senza una versione scura propria. */ .ui-contrast-card .ui-badge, .ui-kpi-dark .ui-badge, .ui-kpi-dark-soft .ui-badge, .ui-kpi-dark-subtle .ui-badge { background: rgba(255, 255, 255, 0.92); color: var(--iron); } .ui-contrast-card .ui-badge--success, .ui-kpi-dark .ui-badge--success, .ui-kpi-dark-soft .ui-badge--success, .ui-kpi-dark-subtle .ui-badge--success { color: var(--dark-emerald); } .ui-contrast-card .ui-badge--danger, .ui-contrast-card .ui-badge--error, .ui-kpi-dark .ui-badge--danger, .ui-kpi-dark .ui-badge--error, .ui-kpi-dark-soft .ui-badge--danger, .ui-kpi-dark-soft .ui-badge--error, .ui-kpi-dark-subtle .ui-badge--danger, .ui-kpi-dark-subtle .ui-badge--error { color: var(--cherry); } .ui-contrast-card .ui-badge--warn, .ui-kpi-dark .ui-badge--warn, .ui-kpi-dark-soft .ui-badge--warn, .ui-kpi-dark-subtle .ui-badge--warn { color: var(--princeton-dark); } /* Pallino di stato. Era definito DUE VOLTE, a ~600 righe di distanza: una versione quadrata (border-radius 2px, «legend dots») e questa tonda. Vinceva questa perche' veniva dopo, quindi la prima non ha mai disegnato niente — ma chi leggeva il file dall'alto trovava per prima quella morta. Ne resta una. flex-shrink: 0 viene dalla versione tolta: senza, dentro una riga flex il pallino si schiaccia a ellisse quando l'etichetta e' lunga. */ .ui-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } /* Timeline */ .ui-timeline { display: grid; gap: 14px; position: relative; padding-left: 12px; } .ui-timeline::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--border); } .ui-timeline-item { display: flex; gap: 12px; align-items: flex-start; } .ui-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin-top: 4px; } /* Badges extras */ /* Il testo e' --dark-emerald e non --seaweed perche' il fondo e' dark-emerald al 12%: fondo e testo venivano da due verdi diversi, e il piu' chiaro dei due dava 2,40:1. Il token si chiamava --seaweed-light e portava gia' questo valore: rinominato il 06/10/2026, perche' il nome faceva leggere un verde che non c'era. */ .ui-badge--success { background: var(--dark-emerald-light); color: var(--dark-emerald); } /* Burgundy e non cherry: sul proprio velo cherry regge su bianco (4,88) e cade dentro le righe di tabella, dove il fondo e' --platinum (4,46). */ .ui-badge--danger { background: var(--cherry-light); color: var(--burgundy); } .ui-badge--error { background: var(--cherry-light); color: var(--burgundy); } .ui-badge--secondary { background: rgba(5, 8, 52, 0.08); color: var(--jet); } .ui-badge--dark { background: var(--jet); color: #ffffff; } /* Alerts */ .ui-alert { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); font-size: 12px; border: 1px solid transparent; } /* ⚠️ Un avviso SEGUITO da qualcosa gli sta attaccato: misurato **0 px** fra l'avviso «il Registro non copre questa voce» e lo stato vuoto sotto, che li fa leggere come un blocco solo — la frase del vuoto sembra la coda dell'avviso. Un avviso che è l'ultimo figlio non cambia, e non serve. ⚠️ Non si somma a `space-y-*`: in flow normale i margini adiacenti COLLASSANO, e dentro `space-y-4` la distanza resta 16 px, non 28 (misurato in Chrome 150). Il collasso però NON avviene in un contenitore flex o grid: lì i due margini si sommerebbero. Contati il 24/08/2026 su tutto il markup — **zero** contenitori flex/grid che dichiarano anche `space-y`. Chi ne introduce uno con dentro un avviso rimisuri questa distanza. */ .ui-alert:not(:last-child) { margin-bottom: var(--spazio-avviso); } /* ⚠️ Un avviso dentro uno SLOT che il JS riempie sfugge alla regola qui sopra, e in silenzio: dentro il proprio wrapper l'avviso e' `:last-child`, quindi `:not(:last-child)` non lo raggiunge mai — anche quando il wrapper e' seguito da una tabella. Misurato il 25/08/2026 sulla nota della ricerca web: **0 px** fra la nota e l'intestazione dei recapiti, cioe' esattamente il difetto che la regola sopra esiste per impedire, ricomparso perche' il markup ha guadagnato un livello. Lo stacco lo prende il WRAPPER, non l'avviso: e' l'unico dei due che sa di essere seguito da qualcosa. `:not(:empty)` perche' uno slot vuoto non deve lasciare un buco quando non c'e' niente da dire. */ .ui-alert-slot:not(:empty) { /* ⚠️ Sopra E sotto. Questa regola e' nata quando l'avviso stava PRIMA del suo elenco e bastava il margine inferiore; dal 25/08/2026 sta sotto, e col solo `margin-bottom` l'avviso tocca la tabella — misurato **0 px**. Una regola tarata su una posizione non sopravvive allo spostamento, e non lo dice: rende attaccato, che a schermo somiglia a una scelta. */ margin: var(--spazio-avviso) 0; } /* ⚠️ Il testo dell'avviso deve poter STRINGERSI: un figlio flex ha `min-width: auto`, quindi non scende sotto il proprio contenuto e sotto i ~520 px le parole escono dal bordo invece di andare a capo. Non si vede, perche' `.main-content` ha `overflow-x: hidden` e le taglia. L'icona invece non si deve stringere. Best practice 5. */ .ui-alert > * { min-width: 0; } .ui-alert > i { flex-shrink: 0; } /* ⚠️ Il TESTO di queste varianti non e' la tinta piena: sul proprio velo princeton e seaweed stanno a meta' della soglia, e cherry sotto di poco su --platinum. Si scrive la versione scura della stessa tinta, come nei badge; i numeri li ricalcola il controllo 8 del linter, non questo commento. I veli sono i token *-light: un rgba con una terna fuori palette fa uscire 1. */ .ui-alert--warn { background: var(--princeton-light); color: var(--princeton-dark); border-color: rgba(251, 133, 15, 0.30); } .ui-alert--danger { background: var(--cherry-light); color: var(--burgundy); border-color: rgba(194, 27, 63, 0.30); } .ui-alert--success { background: rgba(26, 173, 126, 0.10); color: var(--dark-emerald); border-color: rgba(26, 173, 126, 0.30); } /* ⚠️ Non piu' grigio dal 25/08/2026: neutro non vuol dire invisibile, e questi avvisi dicono da dove vengono i dati che si stanno leggendo — la parte che cambia quanto valgono. Restano il tono piu' quieto dei quattro; a distinguerli dall'ambra e' il significato, non l'intensita'. */ /* ⚠️ L'informazione e' BLU, non viola, dal 07/09/2026. Il viola era entrato il 25/08 perche' i tre semantici avevano gia' un significato e il blu petrolio di allora distava ΔE 11,6 dal testo corpo — sotto il pavimento di 20,8. Col blu del marchio quel vincolo non c'e' piu': `--azure-dark` sta a **36,5** da `--iron`, 85,8 da cherry, 119,9 da princeton, 81,5 da seaweed, e da' 5,95:1 su bianco. Il viola era l'unica tinta calda-fredda estranea alla gamma, e su una schermata di avvisi era la cosa piu' colorata che ci fosse. */ .ui-alert--info { background: rgba(58, 99, 168, 0.08); color: var(--azure-dark); border-color: rgba(58, 99, 168, 0.20); } /* L'avviso che COMPARE a caricamento avvenuto, non quello scritto nel markup: e' un modificatore e non il default apposta, altrimenti ogni avviso gia' in pagina si dissolverebbe all'apertura e la palestra, che ne ha una decina, diventerebbe una cascata che nessuno ha chiesto. Stessa tecnica del modale: `allow-discrete` fa transitare anche `display`, @starting-style da' i valori del primo frame. ⚠️ La dissolvenza NON annulla lo spostamento del contenuto sotto: lo rende leggibile. Chi non puo' permetterselo riserva lo spazio, non anima. */ .ui-alert--reveal { opacity: 1; transform: translateY(0); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), display 200ms allow-discrete; } .ui-alert--reveal.hidden { display: none; opacity: 0; transform: translateY(-4px); } @starting-style { .ui-alert--reveal:not(.hidden) { opacity: 0; transform: translateY(-4px); } } .ui-alert-close { margin-left: auto; background: transparent; border: 0; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.15s ease; } .ui-alert-close:hover { opacity: 1; } /* Qui stavano `.ui-animate` e `@keyframes demoFadeUp`: 600 ms su `ease`, cioe' il doppio del budget su una curva che il sistema non usa, e per di piu' un doppione di `.ui-animate-fade-up`. Zero occorrenze nel markup, come la palestra dichiarava gia'. */ /* ============================================================================= 16. SIDEBAR NAVIGATION (App-specific) ============================================================================= */ .nav-primary-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--sidebar-active-radius); font-size: 14px; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; color: var(--sidebar-text); background: none; border: 1px solid transparent; cursor: pointer; text-align: left; } .nav-primary-item:hover { background: var(--sidebar-hover-bg); color: #ffffff; border-color: transparent; text-decoration: none; } .nav-item-wrapper:hover > .nav-primary-item:not(.active) { background: var(--sidebar-hover-bg); color: #ffffff; border-color: transparent; } .nav-item-wrapper:hover > .nav-primary-item:not(.active) .nav-primary-icon, .nav-item-wrapper:hover > .nav-primary-item:not(.active) .nav-chevron { color: #ffffff; background: transparent; } .nav-primary-item.active { background: var(--sidebar-nav-active-bg); color: var(--sidebar-nav-active-text); font-weight: 600; border-color: transparent; } .nav-primary-item.active:hover { background: var(--sidebar-nav-active-bg); color: var(--sidebar-nav-active-text); } .nav-primary-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 16px; line-height: 1; color: var(--sidebar-text); border-radius: 6px; background: transparent; transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; }.nav-primary-icon::before, .nav-secondary-icon::before, .nav-flyout-icon::before, .nav-chevron::before{ line-height: 1; } .nav-primary-item:hover .nav-primary-icon { color: var(--sidebar-text); background: transparent; } .nav-primary-item.active .nav-primary-icon { color: var(--sidebar-nav-active-text); background: transparent; } .nav-chevron { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sidebar-text); line-height: 1; /* Ruota restando dov'e': --ease-in-out. Portava una cubic-bezier Material scritta a mano, mai dichiarata da nessuna parte. */ transition: transform 0.25s var(--ease-in-out), color 0.2s ease; } .nav-chevron.expanded { transform: rotate(180deg); } .nav-primary-item.active .nav-chevron { color: var(--sidebar-nav-active-text); } .nav-secondary-panel { margin-top: 4px; margin-left: 20px; padding-left: 14px; border-left: 1.5px dashed var(--sidebar-tree-line); overflow: hidden; display: grid; grid-template-rows: 0fr; opacity: 0; /* Si apre restando dov'e': --ease-in-out, su tutte e tre le proprieta' — sono lo stesso gesto, e l'opacita' su `ease` nudo ne faceva due. `0fr -> 1fr` e non `max-height`: il tetto di 1200px su un pannello da ~210 rendeva visibile solo una frazione della corsa, e in chiusura i primi 150 ms restavano fermi a tutta altezza. La riga a frazione sa l'altezza vera; il figlio unico (`.nav-secondary-list`) porta `min-height: 0` per poter scendere sotto il proprio contenuto (e padding e margine a zero da chiuso, sotto). */ transition: grid-template-rows 0.3s var(--ease-in-out), opacity 0.25s var(--ease-in-out), margin-top 0.25s var(--ease-in-out); } .nav-secondary-panel.expanded { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; overflow: visible; } .nav-secondary-list { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 6px 0 8px; margin-bottom: 15px; transition: padding 0.3s var(--ease-in-out), margin-bottom 0.3s var(--ease-in-out); } /* Una riga `0fr` non scende sotto padding e margine del figlio: chiuso lasciava 29 px vuoti sotto ogni voce. Si chiudono insieme alla riga. */ .nav-secondary-panel:not(.expanded) > .nav-secondary-list { padding-block: 0; margin-bottom: 0; } /* ⚠️ Il raggio era `6px` scritto a mano, e coincideva col `--radius-md` di allora: le due voci di menu rendevano lo stesso raggio per combinazione, non per dichiarazione. Alzando la scala il 07/09/2026 avrebbero cominciato a divergere — la primaria a 8, questa ferma a 6 — senza dare nessun errore. */ .nav-secondary-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 14px; font-weight: 500; color: var(--sidebar-text); border-radius: var(--sidebar-active-radius); border: 1px solid transparent; background: transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; text-decoration: none; } .nav-secondary-item:hover { background: var(--sidebar-hover-bg); color: #ffffff; text-decoration: none; } .nav-secondary-item.active { background: var(--sidebar-pagina-bg); color: var(--sidebar-pagina-text); font-weight: 600; text-decoration: none; } /* L'icona segue il testo. Senza, resta sul colore ereditato dalla barra — chiaro su chiaro — e sparisce dentro la pastiglia. */ .nav-secondary-item.active .nav-secondary-icon { color: var(--sidebar-pagina-text); } /* La voce di PRIMO livello che e' essa stessa la pagina (nessuna sezione sotto: «Componenti»). Prende la pastiglia come una voce di secondo livello, perche' dice la stessa cosa — sei qui — e prima prendeva il velo piu' debole della SEZIONE, che dice un'altra cosa: «la pagina sta qui dentro». ⚠️ I due veli si distinguono per INTENSITA', e i numeri sono di oggi (14/09/2026, rimisurati sul reso): pagina **1,83:1** contro la barra, sezione **1,29**. Il testo bianco pieno sul velo della pagina misura 10,12. Qui stavano scritti 5,19 e 1,48 — veri sulla palette di prima del 07/09/2026 e diventati falsi quando la barra ha cambiato fondo, senza che niente lo segnalasse: un numero ricopiato accanto alla sua fonte invecchia da solo. La classe la dichiara il server in `sidebar.php`: il markup sa se ci sono sezioni, il CSS no. */ .nav-primary-item.active.nav-primary-item--pagina, .nav-primary-item.active.nav-primary-item--pagina:hover { background: var(--sidebar-pagina-bg); color: var(--sidebar-pagina-text); } .nav-primary-item.active.nav-primary-item--pagina .nav-primary-icon { color: var(--sidebar-pagina-text); } .nav-secondary-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; font-size: 14px; line-height: 1; color: inherit; flex-shrink: 0; } .nav-secondary-label { display: inline-block; line-height: 1.3; } /* Sidebar Container */ .sidebar-container { position: fixed; top: 0; left: 0; width: min(280px, 85vw); height: 100vh; z-index: 45; transform: translateX(-100%); /* Entra ed esce dal bordo: --ease-out, la stessa curva e la stessa durata del velo (#sidebarOverlay). Erano due curve diverse per due cose che si muovono insieme — il pannello su una Material scritta a mano, il velo sulla curva di casa. */ transition: transform 300ms var(--ease-out); overflow: hidden; box-shadow: none; background: var(--sidebar-bg); border-right: none; color: var(--sidebar-text); } .sidebar-container nav { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } .sidebar-container nav::-webkit-scrollbar { width: 4px; } .sidebar-container nav::-webkit-scrollbar-track { background: transparent; } .sidebar-container nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } .sidebar-container nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } .main-content { padding: 32px 36px; border-left: none; box-shadow: none; } .sidebar-container.is-open { transform: translateX(0); } .sidebar-brand-text { color: var(--sidebar-text); font-weight: 700; } .sidebar-container .sidebar-brand { padding: 0; } .sidebar-container > .px-3, .sidebar-container > nav.px-3 { padding-right: 22px; } .sidebar-container .border-b { border-color: var(--sidebar-border) !important; } .sidebar-container .border-t, .sidebar-container .border-dashed { border-color: var(--sidebar-border) !important; } .sidebar-user-btn { color: var(--sidebar-text); } .sidebar-user-btn:hover { background: var(--sidebar-hover-bg); } .sidebar-container svg { color: var(--sidebar-text); } .sidebar-user-icon { flex-shrink: 0; } .sidebar-user-info > div:first-child { color: var(--sidebar-text); font-weight: 600; } .sidebar-user-info > div:last-child { color: var(--sidebar-text-muted); } .sidebar-user-more { color: var(--sidebar-text-muted); } /* ── Contatore di spesa in sidebar ────────────────────────────────────────── Sta sopra il pannello utente perche' l'offerta promette un contatore SEMPRE VISIBILE e Spark non ha una topbar. Numeri in Roboto Mono come ovunque: due importi incolonnati che cambiano ogni mese devono restare allineati. */ /* ⚠️ Il contatore non appartiene ne' al menu sopra ne' alla zona utente sotto: e' una terza cosa, e lo spazio e' l'unica dichiarazione che lo dice. Con `margin-bottom: 4px` — com'era fino al 21/08/2026 — si appoggiava al filetto del pannello utente e si leggeva come la prima riga di quel blocco, mentre sopra aveva 0 px dal menu: incollato da entrambe le parti, e quindi raggruppato con tutti e due. Le due misure verticali non sono uguali apposta: sopra c'e' un'area che SCORRE, e lo spazio li' esiste solo quando il menu e' corto; sotto c'e' un confine fisso, ed e' quello che va staccato. ⚠️ E il margine DESTRO e' 22, non 12: `.sidebar-container > .px-3` da' `padding-right: 22px` alla nav e al pannello utente, quindi ogni voce di menu, ogni etichetta di gruppo e il bottone utente finiscono a 238 px. Con 12 il contatore finiva a 248 — l'unico elemento della sidebar fuori dalla colonna, e 10 px di sporgenza si leggono come «pesa piu' degli altri» prima ancora che come un disallineamento. Misurato il 21/08/2026. */ .ui-spesa-badge { margin: 12px 22px 16px 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--sidebar-hover-bg); } .ui-spesa-badge-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .ui-spesa-badge-riga + .ui-spesa-badge-riga { margin-top: 2px; } .ui-spesa-badge-etichetta { color: var(--sidebar-text-muted); font-size: 11px; white-space: nowrap; } /* Il residuo a zero non si dice colorando il numero: sulla sidebar scura cherry da' 2,13:1, cioe' il segnale sparisce proprio quando serve. Si dice col chip pieno, dove il bianco su cherry misura 5,96. */ .ui-spesa-badge-valore--esaurito { background: var(--cherry); color: #fff; padding: 0 5px; border-radius: var(--radius-sm); } .ui-spesa-badge-valore { color: var(--sidebar-text); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ui-spesa-badge .v--empty { font-size: 11px; } /* Il riquadro con cui la palestra mostra il contatore sul fondo VERO della sidebar: fuori da quel fondo i tre stati non renderebbero come a schermo, e si copierebbe un componente giudicato sul contesto sbagliato. */ .ui-sidebar-preview { width: 260px; padding: 12px 0; border-radius: 8px; background: var(--sidebar-bg); } .sidebar-close-btn { color: var(--sidebar-text-muted); } .sidebar-close-btn:hover { color: var(--sidebar-text); background: var(--sidebar-hover-bg); } .sidebar-collapse-zone { display: flex; justify-content: center; padding: 10px 0 14px; } /* Mobile */ @media (max-width: 1023px) { body { padding-top: 56px; } .main-content { padding-top: 0; position: relative; z-index: 1; } /* Il flyout serve solo alla sidebar desktop COMPRESSA (hover su .sidebar-container.is-collapsed, dentro il media query ≥1024px più sotto). Il suo `display: none` era dichiarato SOLO là dentro: sotto i 1024px il div non aveva nessun display di base, quindi il browser applicava block — un secondo elenco piatto sotto ogni voce accordion già espansa, sempre visibile, mai voluto su mobile. */ .nav-flyout { display: none; } } /* Desktop sidebar */ @media (min-width: 1024px) { .sidebar-container { position: sticky; top: 0; left: auto; width: 260px; min-width: 260px; max-width: 260px; height: 100vh; flex-shrink: 0; transform: none; z-index: 100; overflow: hidden; border-right: none; margin-right: 0; /* Da 260 a 72 px si passava di scatto. La `transition: transform` del blocco mobile qui sopravvive ma non anima niente: a questa larghezza `transform` vale `none` in tutti e due gli stati, quindi sembrava esserci un'animazione e non c'era. --ease-in-out perche' il pannello non entra e non esce: resta a schermo e cambia misura. E' una transizione di LAYOUT, l'unica del sistema: la larghezza della sidebar e' anche quella del contenuto, e non esiste modo di ottenerla con transform senza staccare la pagina dal suo flusso. Costo misurato in fondo a questo blocco. */ transition: width 200ms var(--ease-in-out), min-width 200ms var(--ease-in-out), max-width 200ms var(--ease-in-out); } body { padding-top: 0; } /* Let body scroll, not main-content - required for sticky sidebar */ .main-content { overflow-y: visible; height: auto; } .sidebar-container.is-collapsed { width: 72px; min-width: 72px; max-width: 72px; z-index: 50; overflow: visible; } .sidebar-container.is-collapsed nav { overflow: visible; } .sidebar-container.is-collapsed .sidebar-brand-text, .sidebar-container.is-collapsed .nav-primary-item > span, .sidebar-container.is-collapsed .nav-chevron, .sidebar-container.is-collapsed .sidebar-user-info, .sidebar-container.is-collapsed .sidebar-user-more, /* A 72 px non ci stanno due colonne: resta il solo importo speso, e l'etichetta sparisce invece di troncarsi — un'etichetta a meta' e' peggio della sua assenza. */ .sidebar-container.is-collapsed .ui-spesa-badge-etichetta, .sidebar-container.is-collapsed .ui-spesa-badge-riga + .ui-spesa-badge-riga { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; } .sidebar-container.is-collapsed .ui-spesa-badge { margin-left: 8px; margin-right: 8px; padding: 6px 4px; } .sidebar-container.is-collapsed .ui-spesa-badge-riga { justify-content: center; } .sidebar-container.is-collapsed .ui-spesa-badge-valore { font-size: 10px; } .sidebar-container.is-collapsed .nav-secondary-panel { display: none !important; } .sidebar-container.is-collapsed .nav-primary-item { justify-content: center; padding: 12px; gap: 0; } .sidebar-container.is-collapsed .nav-primary-item.active, .sidebar-container.is-collapsed .nav-primary-item.active:hover { background: var(--sidebar-nav-active-bg) !important; color: var(--sidebar-nav-active-text) !important; border-color: transparent !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(5, 8, 52, 0.05) !important; } .sidebar-container.is-collapsed .nav-primary-item.active .nav-primary-icon, .sidebar-container.is-collapsed .nav-primary-item.active:hover .nav-primary-icon { color: var(--sidebar-nav-active-text) !important; } .sidebar-container.is-collapsed nav { padding: 8px; } .sidebar-container.is-collapsed .nav-item-wrapper { display: flex; justify-content: center; } .sidebar-container.is-collapsed .sidebar-brand, .sidebar-container.is-collapsed .sidebar-brand > div:first-child { justify-content: center; } .sidebar-container.is-collapsed .sidebar-user-btn { justify-content: center; padding: 12px; gap: 0; } .sidebar-container.is-collapsed .sidebar-collapse-zone { justify-content: center; } .sidebar-container.is-collapsed .px-3 { padding-left: 8px; padding-right: 8px; } .sidebar-container.is-collapsed #userMenuDropdown { left: 100%; right: auto; bottom: 0; top: auto; margin-left: 8px; margin-bottom: 0; width: 200px; } .sidebar-container.is-collapsed .nav-primary-item { position: relative; } .sidebar-container.is-collapsed .nav-primary-item::after { content: attr(data-tooltip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 12px; padding: 10px 12px; background: var(--jet); color: #ffffff; font-size: 14px; font-weight: 700; border-radius: 7px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 9999; border: 1px solid var(--jet); } .sidebar-container.is-collapsed .nav-primary-item::before { display: none; } .sidebar-container.is-collapsed .nav-primary-item:hover::after, .sidebar-container.is-collapsed .nav-primary-item:hover::before { opacity: 1; visibility: visible; } .sidebar-container.is-collapsed .nav-item-wrapper:has(.nav-secondary-panel) .nav-primary-item::after, .sidebar-container.is-collapsed .nav-item-wrapper:has(.nav-secondary-panel) .nav-primary-item::before { display: none; } .nav-flyout { display: none; } .sidebar-container.is-collapsed .nav-item-wrapper { position: relative; } .sidebar-container.is-collapsed .nav-flyout { display: block; position: absolute; left: 100%; top: 0; margin-left: 8px; min-width: 200px; background: var(--white); border: 1px solid var(--alabaster); border-radius: 0 4px 4px 0; padding: 0; opacity: 0; visibility: hidden; /* Pende dal bordo della sidebar: nasce da li', non dal proprio centro. */ transform-origin: left center; transform: translateX(-8px) scale(0.97); transition: opacity 150ms var(--ease-out), visibility 150ms var(--ease-out), transform 150ms var(--ease-out); z-index: 9999; color: var(--jet); } .sidebar-container.is-collapsed .nav-flyout::before { display: none; } .sidebar-container.is-collapsed .nav-item-wrapper:hover .nav-flyout { opacity: 1; visibility: visible; transform: none; } .nav-flyout-header { display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--jet); background: var(--platinum); min-height: 46px; padding: 0 12px; border: 1px solid var(--alabaster); border-radius: 0 4px 0 0; margin-bottom: 8px; } .nav-flyout-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--iron); border-radius: 4px; border: 1px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; text-decoration: none; } .nav-flyout-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; font-size: 14px; line-height: 1; color: inherit; flex-shrink: 0; } /* ⚠️ Hover e attivo erano la STESSA regola, e sono due cose diverse: passandoci sopra col mouse una voce qualunque prendeva l'aspetto della pagina corrente, quindi nel pannello ne risultavano due. Qui il pannello e' CHIARO, quindi l'attivo non e' il velo della barra: e' --alabaster (1,468:1 sul bianco) contro il --platinum dell'hover (1,103), piu' il peso 600 e il testo --jet. */ .nav-flyout-item:hover { background: var(--platinum); color: var(--jet); text-decoration: none; } .nav-flyout-item.active, .nav-flyout-item.active:hover { background: var(--alabaster); color: var(--jet); font-weight: 600; text-decoration: none; } } /* ============================================================================= 16b. SIDEBAR NAVIGATION — NEW STRUCTURE (mobile-shell, brand-shell, tertiary, flyout groups) ============================================================================= */ /* Mobile header */ /* Fondo scuro come la sidebar, e dagli stessi token: sotto i 1024 px il guscio E' la sidebar chiusa, e prendere `--sidebar-bg` invece di ricopiarne il valore vuol dire che un cambio di palette li sposta insieme. Il prefisso `.mobile-shell` e' gia' dichiarato fra i FONDI_SCURI della sonda del design system. */ .mobile-shell-header { background: var(--sidebar-bg); border-bottom: 1px solid var(--sidebar-border); } /* Il riquadro chiaro resta: la favicon Axerta e' una X blu navy su fondo trasparente, e su `--jet` sparirebbe. Qui il riquadro non e' decorazione, e' cio' che rende leggibile il marchio del cliente. */ .mobile-shell-logo { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--white); flex-shrink: 0; } .mobile-shell-logo img { display: block; border-radius: 6px; } /* Stessa scala del brand della sidebar (.sidebar-brand-text, 16px/700): sopra e sotto i 1024 px e' lo stesso marchio, e due misure diverse lo fanno sembrare due intestazioni diverse. Il sopratitolo "Lead Intelligence" e' uscito il 24/08/2026: era la sola parte del guscio mobile che il desktop non aveva. */ .mobile-shell-title { font-size: 16px; font-weight: 700; color: var(--sidebar-text); line-height: 1.2; } .mobile-shell-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sidebar-border); border-radius: 10px; background: transparent; color: var(--sidebar-text); cursor: pointer; } .mobile-shell-toggle:hover { background: var(--sidebar-hover-bg); } /* Brand shell */ .sidebar-brand-shell { position: relative; /* Era `style="padding-left: 24px; padding-right: 24px;"` sul markup, ed e' il motivo per cui la variante collassata piu' sotto doveva usare !important su quattro righe: uno stile inline vince su qualunque classe. Spostato qui, gli !important non servono piu'. */ padding-left: 24px; padding-right: 24px; } .sidebar-brand-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-right: 32px; } .sidebar-top-actions { display: inline-flex; align-items: center; gap: 0; flex-shrink: 0; } /* Il marchio del cliente nella sidebar. Nessun bordo — il filo del guscio mobile era decorazione — ma il fondo chiaro resta: la X di Axerta e' `#002B5F` su trasparente e su `--jet` misura 1,09:1, cioe' sparisce. ⚠️ Sopravvive al collasso della sidebar: li' `.sidebar-brand-text` va a `display: none` e il logo resta l'unica cosa che dice di che prodotto si tratta — prima di questo la barra compressa non aveva nessun marchio. */ .sidebar-brand-logo { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--white); flex-shrink: 0; } .sidebar-brand-logo img { display: block; border-radius: 5px; } .sidebar-brand-copy-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; } .sidebar-collapse-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.45); cursor: pointer; font-size: 16px; line-height: 1; transition: color 0.16s ease; } .sidebar-collapse-toggle:hover { color: #ffffff; } /* Il fuoco da tastiera sulla barra scura. Le voci non ne dichiaravano uno (quelle di terzo livello lo spegnevano con `outline: 0`), e quello di casa e' jet: sul navy non si vede. Solo i comandi che stanno SUL fondo scuro — il flyout e il pannello utente sono chiari e tengono `--focus-ring`. */ .nav-primary-item:focus-visible, .nav-secondary-item:focus-visible, .nav-tertiary-item:focus-visible, .sidebar-collapse-toggle:focus-visible, .sidebar-close-btn:focus-visible, .sidebar-user-btn:focus-visible, .mobile-shell-toggle:focus-visible { outline: 2px solid var(--sidebar-focus-ring); outline-offset: 2px; } /* Nav section labels */ .nav-section-label { padding: 8px 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sidebar-text-muted); } .nav-section-label--secondary { padding-top: 14px; } /* Tertiary (3rd level) items */ .nav-tertiary-group { display: grid; gap: 4px; } .nav-tertiary-list { display: grid; gap: 2px; margin-left: 6px; padding-left: 16px; border-left: 1.5px dashed var(--sidebar-tree-line); padding-top: 2px; padding-bottom: 2px; } .nav-tertiary-item { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 5px 10px; border-radius: 4px; color: var(--sidebar-text-muted); font-size: 13px; border: 0; outline: 0; transition: background 0.15s ease, color 0.15s ease; } .nav-tertiary-item:hover { background: var(--sidebar-hover-bg); color: #ffffff; } .nav-tertiary-item.active { background: var(--sidebar-nav-active-bg); color: var(--sidebar-nav-active-text); font-weight: 600; } .nav-tertiary-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 14px; padding: 0 4px; margin-left: 4px; border-radius: var(--badge-radius); font-size: 9px; font-weight: 700; line-height: 1; background: var(--conteggio); color: var(--conteggio-testo); border: 1px solid var(--sidebar-conteggio-filo); flex-shrink: 0; } /* Flyout groups (collapsed sidebar) */ .nav-flyout-group { display: grid; gap: 4px; } .nav-flyout-sublist { display: grid; gap: 3px; padding: 0 0 8px 26px; } .nav-flyout-subitem { display: block; padding: 6px 10px; border-radius: 4px; /* ⚠️ NON `--silver`: il pannello del flyout ha `background: var(--white)` dichiarato in un ALTRO blocco (`.sidebar-container.is-collapsed .nav-flyout`), quindi il controllo 8 — che guarda le sole coppie dello stesso blocco — non poteva vederlo, e silver su bianco misura 2,34:1. Era l'ultimo uso di silver come TESTO rimasto in casa, contro la regola gia' scritta in DESIGN_SYSTEM.md:81. Stone ne fa 5,01. */ color: var(--text-light); font-size: 13px; border: 0; outline: 0; } .nav-flyout-subitem:hover { background: var(--platinum); color: var(--jet); } /* Stesso fondo della voce di pannello: dentro il flyout la pagina corrente si dichiara con --alabaster, un gradino sopra il --platinum dell'hover. */ .nav-flyout-subitem.active, .nav-flyout-subitem.active:hover { background: var(--alabaster); color: var(--jet); font-weight: 600; box-shadow: none; } /* User panel */ .sidebar-user-panel { border-color: var(--sidebar-border); } .sidebar-user-dropdown { background: var(--white); border: 1px solid var(--alabaster); border-radius: var(--radius-md); } /* Collapsed sidebar — new brand shell */ @media (min-width: 1024px) { .sidebar-container.is-collapsed .sidebar-brand-text, .sidebar-container.is-collapsed .nav-section-label, .sidebar-container.is-collapsed .sidebar-user-info, .sidebar-container.is-collapsed .sidebar-user-more { display: none; } .sidebar-container.is-collapsed .sidebar-brand-copy-wrap { justify-content: center; width: 100%; } /* ⚠️ Nascondere il TESTO non basta a centrare il logo: il suo contenitore resta un flex item, e il `gap: 12px` che lo precede si somma comunque. Misurato a sidebar collassata — `.sidebar-brand-copy-wrap` largo 42px invece di 30 — e centrare 42 sposta il marchio di 6px a sinistra, cioe' meta' del gap. Un elemento di larghezza zero non e' un elemento assente: il gap lo conta lo stesso. */ .sidebar-container.is-collapsed .sidebar-brand-copy { display: none; } .sidebar-container.is-collapsed .sidebar-brand-shell { display: flex; flex-direction: column; align-items: center; padding-top: 16px; padding-bottom: 14px; padding-left: 8px; padding-right: 8px; } .sidebar-container.is-collapsed .sidebar-brand { order: 1; width: 100%; } .sidebar-container.is-collapsed .sidebar-brand-main { flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px; min-height: 0; padding-right: 0; } .sidebar-container.is-collapsed .sidebar-top-actions { width: 100%; justify-content: center; } .sidebar-container.is-collapsed .sidebar-collapse-toggle { position: static; order: 2; transform: none; margin-top: 10px; } } /* ============================================================================= 17. RESPONSIVE ============================================================================= */ @media (max-width: 640px) { /* Widget responsiveness */ .widget-card { min-height: auto; } /* Sotto i 640 px il titolo torna a misurarsi sul CONTENUTO. Sopra, la base a zero serve ad allineare le card di una stessa riga (l'intestazione non va a capo e i valori restano alla stessa quota); qui le card sono in colonna, non c'e' nessuna riga da allineare, e un'intestazione che va a capo conserva il titolo intero invece di troncarlo — misurato sulla palestra a 375 px: 12 titoli troncati con la regola generale, 21 con la base a zero. */ .widget-header .widget-title { flex: 0 1 auto; } /* E i BLOCCHI DI COMANDI dell'intestazione vanno a capo. In fila su una riga sola si stringono a vicenda: nell'intestazione del cruscotto — etichetta, tendina, ricerca e tooltip in 269 px — il campo di ricerca scendeva a 170 px, cioe' sotto il suo segnaposto (148 utili contro 152), e il testo che il campo promette di accettare restava tagliato. */ .widget-header > div { flex-wrap: wrap; } .widget-card canvas { max-height: 180px; } .widget-title { font-size: 9px; gap: 4px; margin-bottom: 8px; } .widget-title i { font-size: 9px; } .ui-metric { min-height: auto; } /* Tabs on mobile */ .ui-tabs .ui-tablist { flex-wrap: wrap; gap: 2px; } .ui-tab { padding: 6px 10px; font-size: 11px; } .widget-body .ui-tabs .ui-tab { padding: 5px 10px; font-size: 10px; } /* Pills and badges */ .ui-pill { padding: 2px 8px; font-size: 9px; min-width: 20px; } .ui-chip { padding: 4px 10px; font-size: 10px; } /* Chart containers */ .ui-chart-container { min-height: 120px; } } /* ============================================================================= 18. ADVANCED COMPONENTS ============================================================================= */ /* ----------------------------------------------------------------------------- 18.1 Variance / Delta Indicators ----------------------------------------------------------------------------- */ .ui-variance { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; } /* ⚠️ `--dark-emerald` e non `--success`: seaweed sul proprio velo da' 2,37:1. `.ui-badge--success` era gia' corretto e questo no — due punti che dicono la stessa cosa con due colori diversi. */ .ui-variance-positive { background: rgba(26, 173, 126, 0.1); color: var(--dark-emerald); } .ui-variance-negative { background: var(--cherry-light); color: var(--burgundy); } .ui-variance i { font-size: 9px; }/* ----------------------------------------------------------------------------- 18.2 Gauge / Speedometer ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- 18.3 Skeleton Loaders ----------------------------------------------------------------------------- */ .ui-skeleton-kpi { height: 80px; border-radius: 6px; } /* ----------------------------------------------------------------------------- 18.4 Date Range Picker ----------------------------------------------------------------------------- */ /* ⚠️ `.ui-date-range` — la scatola bordata che avrebbe dovuto contenere i due campi — e' uscita il 14/09/2026: zero consumatori, e il calendario vero e' un `ui-input ui-daterange-picker` che `initDatepicker()` monta da se'. Le due regole che seguono restano perche' sono VIVE: i preset del menu del periodo. */ .ui-date-range-presets { display: flex; gap: 4px; flex-wrap: wrap; } .ui-date-preset { padding: 4px 10px; font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); } .ui-date-preset:hover { background: var(--primary); color: white; } .ui-date-preset.active { background: var(--primary); color: white; } /* ----------------------------------------------------------------------------- 18.5 Step Wizard / Stepper ----------------------------------------------------------------------------- */ .ui-stepper { display: flex; align-items: flex-start; gap: 0; } .ui-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; } .ui-step:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--alabaster); } .ui-step.completed:not(:last-child)::after { background: var(--primary); } .ui-step-indicator { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--platinum); color: var(--stone); border: 2px solid var(--alabaster); position: relative; z-index: 1; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out); } /* La variante scura, non la tinta piena: il cerchio del passo corrente è un oggetto grafico e WCAG 1.4.11 gli chiede 3:1 sul fondo — princeton pieno ne misurava 2,25. Col fondo scuro il numero gira a bianco. */ .ui-step.active .ui-step-indicator { background: var(--ui-warning); color: var(--white); border-color: var(--ui-warning); } .ui-step.completed .ui-step-indicator { background: var(--primary); color: white; border-color: var(--primary); } .ui-step-label { margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--stone); text-align: center; } .ui-step.active .ui-step-label { color: var(--accent-dark); font-weight: 600; } .ui-step.completed .ui-step-label { color: var(--iron); } /* Stepper verticale */ .ui-stepper-vertical { flex-direction: column; gap: 0; } .ui-stepper-vertical .ui-step { flex-direction: row; align-items: flex-start; padding-left: 0; } .ui-stepper-vertical .ui-step:not(:last-child)::after { top: 28px; left: 13px; right: auto; width: 2px; height: calc(100% - 8px); background: var(--alabaster); } .ui-stepper-vertical .ui-step.completed:not(:last-child)::after { background: var(--primary); } .ui-stepper-vertical .ui-step-content { margin-left: 12px; padding-bottom: 24px; } .ui-stepper-vertical .ui-step-label { margin-top: 0; text-align: left; } /* Lo stepper NAVIGABILE (21/09/2026, Liste lead — il configuratore). Ogni passo è un `