/* * Console — design system "night ops" (Cockpit360). * Usa SOLO i token iniettati da @saas/config (var(--...)). Per cambiare * l'aspetto, modifica packages/config/src/theme.ts. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; letter-spacing: 0.005em; min-height: 100vh; /* PAROLE CHE NON SI SPEZZANO. Nel foglio non c'era una sola protezione globale: una stringa lunga e senza spazi — uno slug, un'email di lavoro, una URL incollata, un nome composto — conta per intero nel `min-content` del suo contenitore e lo allarga OLTRE la finestra. Misurato: 99 caratteri attaccati portano un blocco a 348px dentro un viewport da 305, e a quel punto è la PAGINA a sfondare, non il testo. `anywhere` (non `break-word`) perché solo `anywhere` azzera anche il contributo al min-content, che è ciò che fa cedere flex e grid. Non tocca il testo normale: spezza solo quando l'alternativa è uscire dal contenitore. */ overflow-wrap: anywhere; } /* I contenitori che scorrono di proposito (tabelle larghe, codice) non devono spezzare le parole: lì la barra di scorrimento è il comportamento voluto. */ .adm-tablewrap, .rt-table-wrap, pre { overflow-wrap: normal; } /* ---------- Coppie tipografiche (@saas/config → FONT_PAIRS) ---------- I font sono SELF-HOSTED da next/font (app/layout.tsx), che pubblica una var per font sull'. Qui le componiamo nelle COPPIE che il brand può scegliere: il bundle salva solo la CHIAVE e `buildBrandStyle` emette --font-sans: var(--font-pair--body, ) --font-display: var(--font-pair--display, var(--font-sans)) Il motore resta zero-dipendenze: conosce la CONVENZIONE, non il catalogo. Una chiave senza alias qui → il var() cade sullo stack di sistema (degrada, non rompe). */ :root { --font-pair-poppins-display: var(--font-poppins); --font-pair-poppins-body: var(--font-poppins); --font-pair-inter-display: var(--font-inter); --font-pair-inter-body: var(--font-inter); --font-pair-editorial-display: var(--font-playfair); --font-pair-editorial-body: var(--font-source-sans); --font-pair-tech-display: var(--font-space-grotesk); --font-pair-tech-body: var(--font-inter); --font-pair-elegant-display: var(--font-dm-serif); --font-pair-elegant-body: var(--font-dm-sans); } /* ---------- PARITÀ DI TOKEN fra la chrome di piattaforma e `.saas-ui` ---------- `@saas/config/theme` veste la console (`:root`); il design system "Refined Enterprise" veste i SaaS generati (`.saas-ui`). Il secondo dichiara una scala di elevazioni, tint e "ink" semantici che il primo non aveva mai avuto — e i componenti CONDIVISI fra i due mondi (modale di conferma, toast, palette ⌘K, editor email a blocchi) la usano. Fuori da `.saas-ui` quei var() cadevano nel vuoto: niente ombra, niente raggio, niente anello di focus. Non è un dettaglio estetico, è la modale della console che si vedeva IN LINEA nella pagina invece che sopra uno scrim. Qui si colma il buco, derivando TUTTO dai token che `:root` già pubblica (--accent, --text, --good/--warn/--crit): un solo contratto di token, due vestiti. Nessuna di queste è ridichiarata da `themeCss()`, quindi non c'è conflitto di cascata; dentro `.saas-ui` vincono comunque i valori del design system, che le ridefinisce su di sé. */ :root { --accent-tint: color-mix(in srgb, var(--accent) 9%, transparent); --accent-tint-2: color-mix(in srgb, var(--accent) 15%, transparent); --focus-ring: color-mix(in srgb, var(--accent) 30%, transparent); --info: #2563eb; --good-tint: color-mix(in srgb, var(--good) 12%, transparent); --warn-tint: color-mix(in srgb, var(--warn) 14%, transparent); --crit-tint: color-mix(in srgb, var(--crit) 12%, transparent); --info-tint: color-mix(in srgb, var(--info) 12%, transparent); /* INK = il testo scritto SOPRA il tint corrispondente: mescolato col testo per restare AA. */ --good-ink: color-mix(in srgb, var(--good) 68%, var(--text)); --warn-ink: color-mix(in srgb, var(--warn) 70%, var(--text)); --crit-ink: color-mix(in srgb, var(--crit) 70%, var(--text)); --info-ink: color-mix(in srgb, var(--info) 68%, var(--text)); /* SCALA DEI RAGGI della chrome. Erano 13 valori letterali diversi (2,3,4,5,6,7,8,9,10,11, 12,14,16) contro i 4 token che il tema pubblicava: due bottoni vicini potevano avere 10px e 9px, due badge 5px e 6px — differenze che non si sanno spiegare ma si vedono. Cinque gradini, ognuno con un mestiere: 2xs targhette minime, suggerimenti tastiera, micro-badge xs bottoncini quadrati (22-32px) sm campi e controlli piccoli - pannelli e card (`--radius`, dal tema) lg modali e card grandi pill pillole e cerchi */ --radius-2xs: 5px; --radius-xs: 7px; --radius-lg: 16px; --pill: 999px; /* ALTEZZA DEI CONTROLLI — un solo numero per campo e bottone. Prima non esisteva: `.input` veniva 42px (padding 10 + testo 13) e `.btn` 34px (padding 9 + testo 12,5). Messi uno accanto all'altro — ed è la disposizione più comune del prodotto, «campo + Salva» — erano disallineati di 8px, con il bottone che galleggiava a mezz'aria. La misura giusta non è né l'una né l'altra: è UNA. */ --ctrl-h: 38px; --ctrl-h-sm: 32px; /* STATO DISABILITATO — un solo valore. Ne convivevano tre (.5 sui bottoni, .55 sui pulsanti icona della chat, .6 sull'interruttore delle notifiche) e due cursori diversi (`default` e `not-allowed`) per la stessa identica condizione. `not-allowed` è il segnale giusto: dice «non si può», mentre `default` sembra solo un'area morta della pagina. */ --disabled-opacity: .5; /* Elevazioni: il bordo fa il lavoro, l'ombra è di supporto (stessa filosofia di .saas-ui). */ --shadow-1: 0 1px 2px rgba(18,24,38,.05); --shadow-2: 0 1px 2px rgba(18,24,38,.05), 0 6px 16px -8px rgba(18,24,38,.12); --shadow-3: 0 2px 4px rgba(18,24,38,.06), 0 18px 44px -14px rgba(18,24,38,.22); } :root[data-theme="dark"] { --accent-tint: color-mix(in srgb, var(--accent) 22%, transparent); --accent-tint-2: color-mix(in srgb, var(--accent) 30%, transparent); --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent); --info: #5a9bff; /* Sui fondi scuri l'ink si schiarisce verso il bianco, o sparisce nel tint. */ --good-ink: color-mix(in srgb, var(--good) 45%, #fff); --warn-ink: color-mix(in srgb, var(--warn) 50%, #fff); --crit-ink: color-mix(in srgb, var(--crit) 55%, #fff); --info-ink: color-mix(in srgb, var(--info) 45%, #fff); --shadow-1: 0 1px 2px rgba(0,0,0,.40); --shadow-2: 0 1px 2px rgba(0,0,0,.40), 0 8px 24px -8px rgba(0,0,0,.55); --shadow-3: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px -16px rgba(0,0,0,.7); } /* Tracking UNICO dei titoli (richiesta Luigi) — il valore vive in @saas/config/theme (`--tracking-title`), non ricopiato qui: un token, un posto solo da toccare. Perché funzioni davvero sono stati rimossi i letter-spacing ad hoc sugli heading (-0.01/-0.02/-0.03, sia in CSS sia inline): erano più specifici e avrebbero reso questa regola inerte. Restano SOLO i tracking POSITIVI voluti sulle micro-label maiuscole (.eyebrow, .site-price-name, th…), che li richiedono. `--font-display` = font dei TITOLI della coppia scelta; senza coppia eredita il body — ed è così che la PIATTAFORMA resta su Poppins: non pubblica `--font-display`. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display, var(--font-sans)); letter-spacing: var(--tracking-title); } a { color: inherit; text-decoration: none; } /* ---------- Link DENTRO IL TESTO ---------- `a { color: inherit }` è giusto per i link-contenitore (voci di menu, card, tab: si vestono da soli). Ma nella PROSA lasciava «Password dimenticata?» e «Registrati» identici alla frase che li circonda: nessun colore, nessuna sottolineatura, nessun modo di sapere che si clicca. Qui si veste solo il link testuale — dentro un paragrafo, un sottotitolo, una nota, un avviso — escludendo tutto ciò che è già un componente con un aspetto suo. La sottolineatura è tenue a riposo e piena al passaggio: si vede che è un link senza rumore. */ :is(p, .sub, .adm-note, .banner, .field-hint, .rt-empty, li) > a:not(.btn):not([class]), :is(p, .sub, .adm-note, .banner, .field-hint, .rt-empty, li) > a.faint { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 32%, transparent); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } :is(p, .sub, .adm-note, .banner, .field-hint, .rt-empty, li) > a:not(.btn):not([class]):hover, :is(p, .sub, .adm-note, .banner, .field-hint, .rt-empty, li) > a.faint:hover { color: var(--accent); text-decoration-color: currentColor; } button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; } /* I campi NON ereditano il font dal documento: senza questo un userebbe il font del browser (Arial) invece di Poppins. `button` ce l'aveva già; mancavano gli altri — ed è per questo che `.input` si portava dietro un font-family esplicito (era mono). Con l'ereditarietà, `.input` non deve più dichiararne uno: prende Poppins dal body, e `.input.mono` (slug, chiavi, importi) resta monospaziato grazie alla sola `.mono`. */ input, select, textarea { font: inherit; } ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); } .app { position: relative; min-height: 100vh; overflow-x: hidden; } /* Atmosfera ambientale: due glow + griglia a puntini */ .bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 500px at 12% -8%, var(--glow-a), transparent 60%), radial-gradient(800px 600px at 108% 120%, var(--glow-b), transparent 55%), radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: auto, auto, 22px 22px; } /* ---------- Toggle tema chiaro/scuro (chrome di piattaforma) ---------- Il tema CHIARO è il default (:root in @saas/config/theme.ts); lo scuro è opt-in. QUALE icona mostrare è deciso dalla CSS su :root[data-theme="dark"], NON dallo stato React: così al primo paint è già corretta (coerente con lo script anti-FOUC del layout) e non c'è mismatch di idratazione. Vedi components/theme-toggle.tsx. */ .theme-toggle { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; color: var(--muted); border: 1px solid var(--line-2); background: transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--text); background: var(--panel-2); } /* --focus-ring esiste solo dentro .saas-ui → fallback per la chrome admin/dashboard. */ .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring, color-mix(in srgb, var(--accent) 35%, transparent)); } .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: block; } /* ---------- Tipografia / utility ---------- */ /* ---------- Monospazio: SOLO dove serve davvero ---------- Regola (richiesta Luigi: "Poppins per i titoli e per i testi"): il monospazio non è un'estetica, è uno STRUMENTO. Resta dove il carattere a larghezza fissa fa un lavoro: incolonnare cifre (tabelle, saldi, orari) e rendere leggibile ciò che si copia a mano (slug, URL, chiavi, id). Tutto ciò che si legge come LINGUA — titoli, titoletti, etichette, testi, campi — è Poppins. Prima il mono era addosso ai titoletti (.eyebrow, .rail-label, th, .field-label…): la console parlava in due caratteri e i "titoletti" sembravano di un'altra app. */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .faint { color: var(--faint); } .gradient-text { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; /* --accent-ink, non --accent: nel workspace --accent è quello del BRAND del SaaS e può essere chiarissimo (smeraldo → 2.26 su fondo chiaro). L'ink resta di brand ma leggibile con qualunque colore scelga il rivenditore. */ color: var(--accent-ink, var(--accent)); } .row { display: flex; align-items: center; gap: 10px; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .spacer { flex: 1; } .stack { display: grid; gap: 6px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } } /* ---------- Layout cockpit ---------- */ .cockpit { position: relative; z-index: 1; display: grid; /* `minmax(0, 1fr)` e non `1fr`: una traccia `1fr` ha come MINIMO implicito il `min-content` del suo contenuto, quindi una tabella larga (`.adm-table` ha `min-width: 640px`) allargava la colonna OLTRE la finestra. Su telefono il risultato non era una barra di scorrimento ma un TAGLIO: `.app` ha `overflow-x: hidden`, quindi gli ultimi ~110px di ogni pagina della console — valori dei KPI, ultime colonne, campanella e avatar — sparivano e basta. Con `minmax(0, …)` la traccia può scendere sotto il min-content e sono i contenitori interni (`.adm-tablewrap`, già `overflow-x: auto`) a farsi carico del proprio scorrimento. */ grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; } /* STESSA TRAPPOLA DI `.saas-shell`, e adesso riguarda anche questa cornice: da quando il workspace di un SaaS usa `.cockpit`, l'accent del BRAND arriva come custom property inline su questo elemento. Le custom property sostituiscono i `var()` NEL PUNTO IN CUI SONO DICHIARATE: `--accent-ink` di `:root` resterebbe legato all'accent di PIATTAFORMA, e ogni testo che lo usa (bolle dell'assistenza, pulsanti accesi, «Aa» dei selettori) tornerebbe azzurro dentro un SaaS smeraldo. Ridichiarandolo qui si ricalcola sull'accent che questo elemento porta davvero. Per /admin e /dashboard il valore è identico a quello di `:root` — lì `--accent` è già quello di piattaforma — quindi non cambia niente. */ .cockpit { --accent-ink: color-mix(in srgb, var(--accent) 58%, var(--text)); } :root[data-theme="dark"] .cockpit { --accent-ink: color-mix(in srgb, var(--accent) 60%, #fff); } /* ---------- Topbar ---------- */ .topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 82%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 6; } /* Il marchio può STRINGERSI, sempre — non solo sotto i 560px. Nella console il testo è «BuildYourSaaS» e la cosa non si nota; nel workspace è il NOME DEL SAAS, che lo scrive il cliente e può essere lungo quanto vuole. Con `flex: none` una ragione sociale kilometrica spingeva fuori dalla topbar la campanella e l'avatar. */ .brand { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; } .brand > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Il marchio: il quadratino accanto al nome. Dentro ci va l'INIZIALE — della piattaforma («B») o del SaaS di cui stai guardando il pannello. Prima c'era una squadretta decorativa (`::after`, due lati di bordo bianco) che non voleva dire niente e, quel che è peggio, era IDENTICA ovunque: il marchio di BuildYourSaaS e quello del SaaS del cliente erano lo stesso quadratino. Con l'iniziale il marchio dice di chi è. Il colore della lettera è `--on-accent`, non «bianco»: nel tema scuro l'accent della console è un azzurro CHIARO (#4EA3FF) e il bianco ci starebbe a 2.62 — illeggibile. Nel chiaro è l'opposto. Il token segue il tema (e nei SaaS l'accent del BRAND, dove `--on-accent` è calcolato per-brand da `onAccentColor`: con uno smeraldo diventa scuro da solo). Il fallback #fff serve solo a non lasciare la lettera senza colore se un contesto non pubblica il token. */ .mark { width: 26px; height: 26px; border-radius: var(--radius-xs); flex: none; background: linear-gradient(150deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0 1px var(--line-2), 0 6px 16px -6px var(--accent-glow); display: grid; place-items: center; color: var(--on-accent, #fff); font-size: 13px; font-weight: 800; line-height: 1; /* una lettera sola non ha spaziatura: il tracking dei titoli qui la sposterebbe dal centro */ letter-spacing: 0; text-transform: uppercase; user-select: none; } .brand b { font-size: 15px; letter-spacing: var(--tracking-title); font-weight: 700; } .brand .accent { color: var(--accent); } /* `.sysline` (il contenitore di PROVIDER/AMBIENTE nella topbar della console) è stata tolta insieme a quegli indicatori, e con lei il suo separatore e la media query che ne nascondeva le voci in eccesso: senza il markup che le portava erano regole morte. `.stat-inline` RESTA: la usa ancora il workspace del SaaS (saas/[slug]/page.tsx). */ .stat-inline { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); white-space: nowrap; } .stat-inline b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; } /* TOPBAR SU SCHERMO STRETTO. `.brand` e `.top-right` erano entrambi `flex: none`: nessuno dei due cedeva un pixel, così a 371px la riga arrivava a 462px e campanella e avatar finivano fuori dallo schermo — irraggiungibili, perché `.app` taglia l'overflow orizzontale. Ora il marchio può stringersi e troncare, il cambio-ruolo perde l'etichetta (resta il simbolo, col `title`), e il gruppo di destra si compatta. */ @media (max-width: 560px) { .topbar { gap: 10px; padding: 0 12px; } .brand { overflow: hidden; } .top-right { gap: 8px; } .role-switch .role-switch-label { display: none; } .role-switch { padding: 0 9px; } /* L'etichetta di contesto («Bozza») è la prima a cedere: il nome del SaaS conta di più. */ .saas-brand-env { display: none; } } .clock { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .clock { display: none; } } /* `.live` (la pill verde «OPERATIVA») è stata rimossa dalla topbar: era una spia sempre accesa che non guardava niente. Con lei se ne va il suo unico stile. */ .avatar { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.02em; background: linear-gradient(150deg, var(--accent), var(--accent-2)); } /* ---------- Rail (nav sinistra) ---------- */ .rail { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 18px; background: color-mix(in srgb, var(--bg-2) 55%, transparent); } /* IL RAIL SU SCHERMO STRETTO NON SPARISCE: si corica. Sotto gli 860px la regola di prima era `display: none`, e la console SuperAdmin ci conviveva perché è uno strumento da scrivania. Da quando la stessa cornice la indossano anche la console del costruttore e il workspace di un SaaS — che PRIMA avevano un menu orizzontale — nascondere il rail vorrebbe dire togliere del tutto la navigazione a chi apre dal telefono. Diventa quindi una striscia orizzontale scorrevole sotto la topbar: le stesse voci, le stesse icone, appoggiate come il menu che c'era prima. Le etichette dei gruppi e il piede (chi sei + esci) restano fuori: in una riga sola sarebbero rumore, e l'uscita è comunque nel menu account. `grid-template-rows` va RIDICHIARATO: con una colonna sola il rail cade in riga 2 e il palco in una riga implicita — senza questa riga il rail si prenderebbe l'`1fr` e il contenuto l'`auto`. */ @media (max-width: 860px) { .cockpit { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); } .rail { flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; position: sticky; top: 56px; z-index: 5; background: color-mix(in srgb, var(--bg-2) 92%, var(--bg)); backdrop-filter: blur(10px); } /* I gruppi non impilano più: le loro voci diventano figli diretti della striscia. `:not(.rail-foot)` perché anche il piede è un div figlio — e `display: contents` lo riporterebbe in vita nonostante il `display: none` qui sotto (specificità più alta). */ .rail > div:not(.rail-foot) { display: contents; } .rail-label { display: none; } .rail .nav { flex-direction: row; margin-top: 0; gap: 4px; } .rail .nav-item { white-space: nowrap; padding: 7px 11px; } /* La barretta d'accento sta a sinistra della voce e vive nel padding del rail: in riga finirebbe sopra la voce precedente. Attiva = fondo + bordo, che bastano. */ .rail .nav-item.active::before { display: none; } .rail-foot { display: none; } } .rail-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0 8px; } .nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 9px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 500; position: relative; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .nav-item:hover { background: var(--panel); color: var(--text); } .nav-item.active { color: var(--text); background: var(--panel); border-color: var(--line-2); box-shadow: var(--panel-hi); } .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px 1px var(--accent-glow); } .nav-item.active .n-ic { color: var(--accent); } .nav-item.disabled { opacity: 0.55; cursor: default; } .nav-item .n-ic { width: 15px; height: 15px; display: grid; place-items: center; flex: none; } /* Contatore accanto a una voce di menu (es. ticket da lavorare). Il testo NON è mai un colore fisso: `--on-warn` gira col tema (bianco sul marrone del chiaro, scuro sull'ambra dello scuro) — vedi @saas/config/theme. */ .nav-badge { margin-left: auto; font-size: 11px; font-weight: 700; line-height: 1.6; background: var(--warn); color: var(--on-warn); border-radius: var(--radius-sm); padding: 1px 6px; } .nav-soon { margin-left: auto; font-size: 10px; padding: 2px 6px; border-radius: var(--pill); background: var(--panel-2); color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; } .rail-foot { margin-top: auto; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; align-items: center; gap: 10px; } .rail-foot .avatar { width: 32px; height: 32px; } .rail-foot .who { min-width: 0; } .rail-foot .who b { font-size: 12px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-foot .who span { font-size: 11px; color: var(--faint); } /* ---------- Stage ---------- La MISURA del contenuto la decide questo contenitore, e vale per tutte e tre le console (/admin, /dashboard, workspace di un SaaS) da quando condividono la cornice. Il numero non è nuovo: 1300px era già la larghezza di `.saas-stage`, cioè quella che la dashboard del costruttore aveva e la console SuperAdmin no — su un monitor da 27" le righe delle tabelle di /admin arrivavano a 1680px e l'occhio perdeva la riga tornando a capo. Le tabelle larghe non ci perdono niente: scorrono nel loro `.adm-tablewrap`. */ .stage { padding: 24px 26px 44px; overflow: auto; min-width: 0; width: 100%; max-width: 1300px; margin: 0 auto; } @media (max-width: 560px) { .stage { padding: 18px 14px 32px; } } .greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .greet h1 { margin: 0; font-size: 22px; font-weight: 700; } .greet .sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); max-width: 66ch; } /* ---------- Bottoni ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; /* L'altezza la fa `min-height`; il padding verticale resta piccolo ma NON zero, così un bottone con etichetta lunga che va a capo non finisce col testo appiccicato al bordo. */ min-height: var(--ctrl-h); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--line-2); color: var(--text); background: var(--panel); white-space: nowrap; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; transform: none; } /* Il testo di un bottone pieno NON può essere `#fff` cablato: lo sfondo è il gradiente di `--accent`, e l'accent CAMBIA. Nel workspace è quello del BRAND del rivenditore — con lo smeraldo di Acme CRM (#10b981) il bianco stava a 2.54, misurato. E nel tema SCURO della piattaforma l'accent è un azzurro chiaro (#4EA3FF): bianco = 2.62. `--on-accent` la risposta giusta ce l'aveva già (per lo smeraldo pubblica #15181f): era il CSS a ignorarla. Un token, 61 bottoni primari, tre contesti — uno solo da tenere allineato. */ .btn.primary { color: var(--on-accent, #fff); border-color: transparent; background: linear-gradient(150deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 20px -8px var(--accent-glow); } .btn.primary:hover { filter: brightness(1.06); color: var(--on-accent, #fff); } /* Testo SECONDARIO dentro un bottone PIENO. `--faint`/`--muted` sono grigi tarati per stare su superfici CHIARE: dentro un bottone accent diventano illeggibili — il « · base» accanto al ruolo predefinito misurava 1,51:1, cioè invisibile. Sopra un fondo pieno l'unico colore sicuro è quello del bottone stesso, appena smorzato: funziona con QUALSIASI accent del rivenditore e in entrambi i temi, senza dover conoscere il colore in anticipo. */ .btn.primary :is(.faint, .muted, .sub) { color: inherit; opacity: .72; } .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn.ghost:hover { background: var(--panel-2); color: var(--text); border-color: transparent; } .btn.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: transparent; } .btn.danger:hover { background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: var(--crit); color: var(--crit); } .btn.icon { padding: 0; width: var(--ctrl-h); height: var(--ctrl-h); } /* `.sm` era una bugia tipografica: cambiava padding e corpo in modo compensato e il bottone restava alto 34px esatti come quello normale. Ora è un gradino vero, agganciato al token. */ .btn.sm { min-height: var(--ctrl-h-sm); padding: 4px 11px; font-size: 12px; border-radius: var(--radius-xs); } .btn.icon.sm { width: var(--ctrl-h-sm); height: var(--ctrl-h-sm); padding: 0; } /* ── A11y: focus da tastiera (WS8.3) ────────────────────────────────────────── Anello di focus coerente e ad alto contrasto sui controlli della chrome di piattaforma. I pulsanti e i link di navigazione non azzeravano l'outline ma nemmeno avevano un anello brandizzato: da tastiera si vedeva solo l'outline di default del browser (incoerente e a volte poco visibile sui pulsanti pieni). Solo :focus-visible → nessun anello al click del mouse, sempre visibile con Tab. */ .btn:focus-visible, .nav-item:focus-visible, .saas-tab:focus-visible, .site-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* BASE per TUTTO il resto. La regola qui sopra nomina quattro classi, e ciò che non ci rientra restava senza anello: i pulsantini di riga (`.rec-del`/`.rec-edit`, che sono `