/* =============================================================================
FRECCIAROSSA TRACKER — CONSOLE OPERATIVA
-----------------------------------------------------------------------------
Design system unico e autoritativo. Sostituisce i tre sistemi sovrapposti
(style.css navy/crimson → rail-premium.css avorio/grafite → user-area.css)
che si combattevano a colpi di `!important`.
Principi:
1. DENSITÀ — è una console di monitoraggio, non una landing page. Base 14px,
scala di spazio da 4px, righe compatte. Niente hero decorativi.
2. GERARCHIA PER SUPERFICI — lo sfondo è più scuro della superficie, così le
card esistono davvero invece di essere bianco-su-bianco.
3. COLORE SEMANTICO — il rosso istituzionale segnala (live, critico,
esaurito, azione primaria). Mai decorativo. Tutto il resto è grafite.
4. GEOMETRIA NETTA — raggi 3/4/6px. Il "documento tecnico", non la bolla.
5. CIFRE TABULARI — ogni numero incolonna. Non negoziabile su dati tabellari.
Caricato DOPO legacy.css e fuori da ogni layer: vince sempre, senza
`!important`. Vedi legacy.css per l'architettura della cascata.
========================================================================== */
/* =============================================================================
1. TOKEN — TEMA CHIARO
========================================================================== */
:root {
/* ── Rampa neutra: grafite freddo ──
* Sostituisce l'avorio caldo (#faf8f4) di rail-premium, che su schermo
* leggeva "beige slavato". Un grigio leggermente freddo tiene il rosso
* istituzionale saturo e fa sembrare i dati più nitidi.
* Passi calibrati per contrasto, non per progressione lineare. */
--n-0: #ffffff;
--n-25: #fbfcfd;
--n-50: #f5f7f9;
--n-100: #eceff3;
--n-150: #e2e7ec;
--n-200: #d3dae2;
--n-300: #b3bdc9;
--n-400: #8c98a6;
--n-500: #6b7684;
--n-600: #515b68;
--n-700: #3b444f;
--n-800: #272e37;
--n-900: #181d24;
--n-950: #0e1216;
/* ── Rosso istituzionale Frecciarossa ──
* Unico colore di brand. Usato SOLO per: azione primaria, stato live,
* criticità, esaurito. Se compare per decorazione, è un bug. */
--red-50: #fef2f4;
--red-100: #fde0e5;
--red-200: #fbc3cc;
--red-500: #c8102e;
--red-600: #ad0d27;
--red-700: #8c0a1f;
/* ── Ruoli di superficie ──
* `bg` è volutamente più scuro di `surface`: è ciò che rende visibili i
* pannelli senza bisogno di ombre finte. */
--color-bg: var(--n-100);
--color-bg-subtle: var(--n-150);
--color-surface: var(--n-0);
--color-surface-raised: var(--n-0);
--color-surface-alt: var(--n-50);
--color-surface-sunken: var(--n-100);
--color-surface-hover: var(--n-50);
/* ── Testo ── */
--color-text: var(--n-900);
--color-text-secondary: var(--n-600);
--color-muted: var(--n-500);
/* NON è `var(--n-400)`. Quel passo della rampa serve a bordi e icone, dove
* bastano 3:1, ma su testo dava 2.93:1 su bianco — sotto ogni soglia WCAG.
* `--color-text-faint` veste etichette, orari e note da 11-12px, quindi
* richiede 4.5:1: questo valore dà 5.22 su superficie, 4.86 su alt e 4.53
* sullo sfondo, restando comunque più chiaro del testo secondario (6.89). */
--color-text-faint: #656d7a;
--color-text-inverse: var(--n-0);
/* Testo sopra un riempimento accent. In chiaro il bianco va bene (5.88); in
* scuro l'accent è schiarito e il bianco crollerebbe a 3.42 — vedi override. */
--color-on-accent: #ffffff;
/* ── Bordi: hairline è la struttura portante di questo design ── */
--color-border: var(--n-150);
--color-border-strong: var(--n-200);
--color-border-hard: var(--n-300);
/* ── Brand / accent ──
* `brand` = grafite (struttura, chrome, nav attiva).
* `accent` = rosso (segnale). Tenerli distinti è ciò che impedisce al
* rosso di diventare decorativo. */
--color-brand: var(--n-900);
--color-brand-hover: var(--n-800);
--color-brand-active: var(--n-950);
--color-brand-muted: rgba(24, 29, 36, 0.07);
--color-brand-soft: var(--n-100);
--color-accent: var(--red-500);
--color-accent-hover: var(--red-600);
--color-accent-muted: rgba(200, 16, 46, 0.10);
--color-accent-soft: var(--red-50);
/* ── Semantici ── */
--color-success: #15803d;
--color-success-bg: #e8f6ed;
--color-success-br: #b9e0c9;
--color-danger: var(--red-600);
--color-danger-bg: var(--red-50);
--color-danger-br: var(--red-200);
--color-warning: #a45a08;
--color-warning-bg: #fdf3e3;
--color-warning-br: #f0d5a8;
--color-info: #1d4ed8;
--color-info-bg: #e8eefc;
--color-info-br: #bfd0f5;
--color-oh-gone: #9a3412;
--color-oh-gone-bg: #fdeee3;
/* ── Elevazione: minima. La gerarchia la fanno bordi e superfici. ── */
--shadow-xs: 0 1px 1px rgba(14, 18, 22, 0.04);
--shadow-sm: 0 1px 2px rgba(14, 18, 22, 0.06);
--shadow-md: 0 2px 8px rgba(14, 18, 22, 0.08);
--shadow-lg: 0 8px 28px rgba(14, 18, 22, 0.12);
--shadow-focus: 0 0 0 3px rgba(200, 16, 46, 0.22);
/* ── Spazio: base 4px ── */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* ── Geometria netta ── */
--radius-sm: 3px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-xl: 8px;
--radius-full: 9999px;
/* ── Tipografia ──
* Inter: neo-grottesco ad alta leggibilità in corpi piccoli, con veri
* numeri tabulari. Era già primo in --font-sans di style.css ma non veniva
* MAI caricato: il tirava giù solo Plus Jakarta. Ora è caricato.
* JetBrains Mono per numeri di treno, codici, orari e prezzi. */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
--text-2xs: 0.6875rem; /* 11px — eyebrow, meta */
--text-xs: 0.75rem; /* 12px — label, badge */
--text-sm: 0.8125rem; /* 13px — testo tabellare */
--text-base: 0.875rem; /* 14px — corpo */
--text-md: 0.9375rem; /* 15px */
--text-lg: 1.0625rem; /* 17px — titolo pannello */
--text-xl: 1.25rem; /* 20px — titolo pagina */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px — cifre KPI */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.5;
--leading-relaxed: 1.6;
--weight-normal: 400;
--weight-medium: 500;
--weight-semi: 600;
--weight-bold: 700;
--tracking-wide: 0.06em;
--tracking-wider: 0.1em;
--transition-fast: 0.1s ease;
--transition-normal: 0.16s ease;
/* ── Shell ── */
--rail-w: 244px;
--rail-w-collapsed: 64px;
--topbar-h: 52px;
--mobile-nav-height: 60px;
--content-max: 1320px;
--content-max-status: max(var(--content-max), min(1880px, 96vw));
--content-pad: var(--space-6);
/* Compat: `--header-height` è ancora letto da regole in legacy. Nel nuovo
* shell l'header è la topbar. */
--header-height: var(--topbar-h);
color-scheme: light;
}
/* =============================================================================
2. TOKEN — TEMA SCURO
-----------------------------------------------------------------------------
ATTENZIONE — non riscrivere come `:root:not([data-theme="light"])`.
L'attributo `data-theme` è SEMPRE stampato esplicitamente dallo script inline
in proprio perché ~35 regole in legacy usano quella forma negata come
sinonimo di "scuro": con l'attributo assente il ramo scuro vincerebbe anche a
tema chiaro. Qui usiamo la forma positiva `[data-theme="dark"]`, che è sicura
in entrambe le direzioni, e lasciamo intatto il contratto esistente.
========================================================================== */
:root[data-theme="dark"] {
--n-0: #0e1216;
--n-25: #12171c;
--n-50: #161c22;
--n-100: #1b222a;
--n-150: #222b34;
--n-200: #2c3742;
--n-300: #3d4a58;
--n-400: #5a6878;
--n-500: #7d8b9b;
--n-600: #9aa7b5;
--n-700: #b8c3ce;
--n-800: #d5dce4;
--n-900: #eef2f6;
--n-950: #ffffff;
/* Il rosso va schiarito al buio: #c8102e su fondo scuro perde leggibilità
* e non passa il contrasto sul testo. */
--red-50: #2a1116;
--red-100: #3d151d;
--red-200: #5c1c28;
--red-500: #f2506b;
--red-600: #ff6b82;
--red-700: #ff8a9c;
--color-bg: #0b0e12;
--color-bg-subtle: var(--n-50);
--color-surface: var(--n-25);
--color-surface-raised: var(--n-100);
--color-surface-alt: var(--n-50);
--color-surface-sunken: #090c0f;
--color-surface-hover: var(--n-100);
--color-text: var(--n-900);
--color-text-secondary: var(--n-600);
--color-muted: var(--n-500);
/* Al buio la soglia si sposta in su: `--n-400` qui dà 3.16:1. */
--color-text-faint: var(--n-500);
--color-text-inverse: #0b0e12;
/* Il rosso schiarito del tema scuro è una superficie CHIARA: sopra ci va
* inchiostro, non bianco (5.65:1 contro 3.42:1). */
--color-on-accent: #0b0e12;
--color-border: var(--n-150);
--color-border-strong: var(--n-200);
--color-border-hard: var(--n-300);
--color-brand: var(--n-800);
--color-brand-hover: var(--n-900);
--color-brand-active: var(--n-950);
--color-brand-muted: rgba(238, 242, 246, 0.08);
--color-brand-soft: var(--n-100);
--color-accent: var(--red-500);
--color-accent-hover: var(--red-600);
--color-accent-muted: rgba(242, 80, 107, 0.16);
--color-accent-soft: var(--red-50);
--color-success: #4ade80;
--color-success-bg: #10241a;
--color-success-br: #1d4531;
--color-danger: var(--red-500);
--color-danger-bg: var(--red-50);
--color-danger-br: var(--red-200);
--color-warning: #fbbf24;
--color-warning-bg: #2a1f0b;
--color-warning-br: #4a3813;
--color-info: #60a5fa;
--color-info-bg: #0f1e33;
--color-info-br: #1e3a5f;
--color-oh-gone: #fb923c;
--color-oh-gone-bg: #2a1a0d;
--shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
--shadow-focus: 0 0 0 3px rgba(242, 80, 107, 0.3);
color-scheme: dark;
}
/* =============================================================================
3. RESET & BASE
========================================================================== */
/* Il reset universale vive nel layer `reset` (dichiarato in legacy.css PRIMA di
* `legacy`), non fuori dai layer come il resto di questo foglio. Motivo: una
* dichiarazione non-layered batte qualsiasi dichiarazione dentro un layer, a
* qualunque specificità — quindi `padding: 0` su `*` cancellava ogni padding e
* margin di style.css/user-area.css. Le viste ancora stilate solo da quei fogli
* (Stato treno in testa) restavano con bordi e sfondi ma spaziatura zero.
* Dentro `reset` continua a battere gli stili user-agent e a fare da base per
* tutto ciò che nessuno stila, ma cede il passo agli autori. */
@layer reset {
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
html {
/* Il vecchio `font-size: 125%` era uno zoom browser mascherato: gonfiava
* ogni rem del foglio e azzerava la densità informativa — il difetto più
* visibile del design precedente su un tool operativo. Tornato a 100%; la
* scala tipografica qui sotto è dimensionata di conseguenza. */
font-size: 100%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-text);
background: var(--color-bg);
/* Il vecchio design aveva un alone radiale "atmosferico" sul body. Rimosso:
* una console non ha atmosfera, ha uno sfondo. */
background-image: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv05' 1, 'ss01' 1;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
/* Numeri tabulari ovunque conti l'incolonnamento. Senza questo le cifre
* proporzionali di Inter fanno ballare prezzi e orari di colonna in colonna. */
table, .tabular, input[type="number"], time,
[class*="price"], [class*="prezzo"], [class*="__num"], [class*="-num"],
[class*="count"], [class*="__value"], [class*="metric"], [class*="stat"] {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
/* Niente `color` qui: i titoli ereditano dal contenitore, che è quello che
* serve. Fissarlo a `--color-text` da una regola d'elemento fuori dai layer
* significava batterlo su OGNI h1-h6, comprese quelle dentro superfici scure
* permanenti — la headline della schermata di accesso (`.auth-brand__headline`,
* `color: #fff` in user-area.css) diventava grafite su grafite, cioè invisibile
* a tema chiaro. Dove serve un colore diverso lo mette la classe del blocco. */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--weight-semi);
line-height: var(--leading-tight);
letter-spacing: -0.011em;
}
a {
color: var(--color-accent);
text-decoration: none;
text-underline-offset: 2px;
}
a:hover { text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
::selection {
background: var(--color-accent-muted);
color: var(--color-text);
}
/* Scrollbar discrete, coerenti col tema */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-hard) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: var(--radius-full);
border: 3px solid transparent;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--color-border-hard); }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: 200;
transform: translateY(-200%);
background: var(--color-accent);
color: var(--color-on-accent);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-semi);
transition: transform var(--transition-normal);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* =============================================================================
4. SHELL — SIDEBAR + TOPBAR + CONTENUTO
-----------------------------------------------------------------------------
Struttura:
.console wrapper
└ .rail fixed navigazione primaria, etichette sempre visibili
└ .console__body margin-l topbar sticky + main + footer
La larghezza del rail è UNA variabile (--rail-w). Collassare la sidebar
significa cambiare quella: il body si riadatta da solo, senza regole
duplicate per lo stato compresso.
========================================================================== */
.console {
min-height: 100vh;
}
.console__body {
margin-left: var(--rail-w);
min-height: 100vh;
display: flex;
flex-direction: column;
transition: margin-left var(--transition-normal);
}
body[data-rail="collapsed"] {
--rail-w: var(--rail-w-collapsed);
}
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.rail {
position: fixed;
inset: 0 auto 0 0;
width: var(--rail-w);
z-index: 50;
display: flex;
flex-direction: column;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
transition: width var(--transition-normal);
overflow: hidden;
}
/* Il marchio: blocco grafite pieno, alto quanto la topbar, così il taglio
* orizzontale prosegue senza scalini attraverso tutto lo shell. */
.rail__brand {
display: flex;
align-items: center;
gap: var(--space-3);
height: var(--topbar-h);
padding: 0 var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
overflow: hidden;
}
.rail__mark {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--color-accent);
color: var(--color-on-accent);
}
.rail__mark svg { width: 17px; height: 17px; }
.rail__wordmark { min-width: 0; }
.rail__name {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
letter-spacing: -0.01em;
color: var(--color-text);
white-space: nowrap;
line-height: 1.15;
}
.rail__tagline {
font-size: var(--text-2xs);
color: var(--color-text-faint);
white-space: nowrap;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
line-height: 1.3;
}
/* ── Navigazione ── */
.rail__nav {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-4) var(--space-3);
display: flex;
flex-direction: column;
gap: 1px;
}
.rail__group {
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-text-faint);
padding: var(--space-4) var(--space-3) var(--space-2);
white-space: nowrap;
}
.rail__group:first-child { padding-top: 0; }
/* `.tab-btn` è il contratto con app.js (switchToTab legge .tab-btn[data-tab]
* e vi applica .active). La classe resta, il vestito cambia completamente. */
.rail .tab-btn {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: 0 var(--space-3);
height: 34px;
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-secondary);
font-family: inherit;
font-size: var(--text-base);
font-weight: var(--weight-medium);
text-align: left;
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-fast), color var(--transition-fast);
}
.rail .tab-btn:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.rail .tab-btn__icon {
width: 17px;
height: 17px;
flex-shrink: 0;
stroke-width: 1.7;
color: var(--color-text-faint);
transition: color var(--transition-fast);
}
.rail .tab-btn:hover .tab-btn__icon { color: var(--color-text-secondary); }
.rail .tab-btn__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Stato attivo: superficie piena + barra rossa a sinistra. La barra è
* l'unico uso decorativo-adiacente del rosso, ed è giustificato: marca la
* posizione corrente, che è informazione. */
.rail .tab-btn.active {
background: var(--color-brand-muted);
color: var(--color-text);
font-weight: var(--weight-semi);
}
.rail .tab-btn.active .tab-btn__icon { color: var(--color-accent); }
.rail .tab-btn.active::before {
content: '';
position: absolute;
left: calc(var(--space-3) * -1 + 2px);
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--color-accent);
}
/* Badge conteggio (monitoraggi attivi) */
.rail .tab-badge {
flex-shrink: 0;
min-width: 19px;
height: 19px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-on-accent);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.rail .tab-badge.hidden { display: none; }
/* ── Piede sidebar: utente + collasso ── */
.rail__foot {
flex-shrink: 0;
border-top: 1px solid var(--color-border);
padding: var(--space-2);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.rail__user {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2);
border: 0;
border-radius: var(--radius-md);
background: transparent;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background var(--transition-fast);
overflow: hidden;
}
.rail__user:hover { background: var(--color-surface-hover); }
.rail__avatar {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--color-brand);
color: var(--color-text-inverse);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.02em;
}
.rail__usermeta { min-width: 0; flex: 1; }
.rail__username {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-semi);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.rail__userrole {
display: block;
font-size: var(--text-2xs);
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
white-space: nowrap;
line-height: 1.3;
}
.rail__collapse {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-faint);
font-family: inherit;
font-size: var(--text-xs);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
white-space: nowrap;
overflow: hidden;
}
.rail__collapse:hover { background: var(--color-surface-hover); color: var(--color-text-secondary); }
.rail__collapse svg { width: 16px; height: 16px; flex-shrink: 0; margin: 0 6px; transition: transform var(--transition-normal); }
body[data-rail="collapsed"] .rail__collapse svg { transform: rotate(180deg); }
/* ── Stato compresso: solo icone ─────────────────────────────────────────── */
body[data-rail="collapsed"] .rail__wordmark,
body[data-rail="collapsed"] .rail__usermeta,
body[data-rail="collapsed"] .rail__collapse span,
body[data-rail="collapsed"] .rail .tab-btn__label,
body[data-rail="collapsed"] .rail__group {
display: none;
}
body[data-rail="collapsed"] .rail__brand,
body[data-rail="collapsed"] .rail .tab-btn,
body[data-rail="collapsed"] .rail__user,
body[data-rail="collapsed"] .rail__collapse {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
/* Il badge non ha più spazio accanto all'etichetta: diventa un pallino
* d'angolo sull'icona, così l'informazione "ci sono monitoraggi" sopravvive
* al collasso invece di sparire. */
body[data-rail="collapsed"] .rail .tab-badge {
position: absolute;
top: 2px;
right: 6px;
min-width: 16px;
height: 16px;
font-size: 10px;
padding: 0 3px;
border: 2px solid var(--color-surface);
}
/* Tooltip nativo-like sulle icone quando l'etichetta è nascosta */
body[data-rail="collapsed"] .rail .tab-btn::after {
content: attr(data-title);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
padding: 5px 9px;
border-radius: var(--radius-md);
background: var(--color-brand);
color: var(--color-text-inverse);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast);
z-index: 60;
box-shadow: var(--shadow-md);
}
body[data-rail="collapsed"] .rail .tab-btn:hover::after { opacity: 1; }
body[data-rail="collapsed"] .rail .tab-btn.active::before { left: 0; }
/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
position: sticky;
top: 0;
z-index: 40;
height: var(--topbar-h);
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--space-4);
padding: 0 var(--content-pad);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.topbar__menu {
display: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-secondary);
cursor: pointer;
}
.topbar__menu svg { width: 18px; height: 18px; }
.topbar__heading { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: var(--space-3); }
.topbar__title {
font-size: var(--text-md);
font-weight: var(--weight-semi);
letter-spacing: -0.011em;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar__sub {
font-size: var(--text-xs);
color: var(--color-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 720px) { .topbar__sub { display: none; } }
.topbar__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.topbar__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 30px;
min-width: 30px;
padding: 0 var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-secondary);
font-family: inherit;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.topbar__btn:hover {
background: var(--color-surface-hover);
border-color: var(--color-border-strong);
color: var(--color-text);
}
.topbar__btn svg { width: 15px; height: 15px; }
/* Indicatore "live": pallino rosso pulsante. Uso semantico del rosso. */
.topbar__live {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 30px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-alt);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.topbar__live-dot {
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--color-text-faint);
flex-shrink: 0;
}
.topbar__live.is-live .topbar__live-dot {
background: var(--color-accent);
animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--color-accent-muted); }
50% { opacity: 0.75; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.topbar__live.is-live .topbar__live-dot { animation: none; }
}
/* Sotto i 900px sparisce il TESTO, non l'indicatore: `.topbar__live span`
* prendeva anche `.topbar__live-dot`, che è a sua volta uno , e lasciava
* in topbar un rettangolo bordato completamente vuoto accanto al tema. Qui
* resta il solo pallino, in una pastiglia quadrata della stessa altezza del
* bottone accanto. */
@media (max-width: 900px) {
.topbar__live > span:not(.topbar__live-dot) { display: none; }
.topbar__live { width: 30px; padding: 0; justify-content: center; }
}
/* ── Main ────────────────────────────────────────────────────────────────── */
.app-main {
flex: 1;
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: var(--space-6) var(--content-pad) var(--space-12);
}
/* Vista "Stato treno": pensata per essere proiettata su monitor grandi, quindi
* usa un cap più largo. Comportamento ereditato dal design precedente e
* volutamente conservato — è un requisito d'uso reale, non un residuo. */
body[data-active-tab="status"] .app-main { max-width: var(--content-max-status); }
/* ── Footer ──────────────────────────────────────────────────────────────── */
.app-footer {
margin-top: auto;
border-top: 1px solid var(--color-border);
background: var(--color-surface);
padding: var(--space-6) var(--content-pad);
}
.app-footer > * { max-width: var(--content-max); margin-inline: auto; }
.footer-disclaimer,
.vt-footer-live {
font-size: var(--text-xs);
color: var(--color-text-faint);
text-align: center;
margin-top: var(--space-3);
}
.vt-footer-live { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.vt-footer-live strong { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.vt-footer-live__dot {
width: 6px; height: 6px; border-radius: var(--radius-full);
background: var(--color-success); flex-shrink: 0;
}
/* ── Responsive: sotto 900px la sidebar diventa un drawer ────────────────── */
@media (max-width: 900px) {
:root { --content-pad: var(--space-4); }
.console__body { margin-left: 0; padding-bottom: var(--mobile-nav-height); }
.rail {
transform: translateX(-100%);
box-shadow: none;
transition: transform var(--transition-normal);
width: 268px;
}
/* Il drawer mobile ha un attributo suo (`data-drawer`) separato da
* `data-rail`: sono due stati indipendenti e su un unico attributo si
* escluderebbero a vicenda — chi aveva compresso il rail su desktop non
* riuscirebbe più ad aprire il drawer su mobile. */
body[data-drawer="open"] .rail { transform: translateX(0); box-shadow: var(--shadow-lg); }
/* Dentro il drawer le etichette servono sempre: annulla il collasso
* ereditato dalla sessione desktop. */
body[data-rail="collapsed"] .rail__wordmark,
body[data-rail="collapsed"] .rail__usermeta,
body[data-rail="collapsed"] .rail .tab-btn__label,
body[data-rail="collapsed"] .rail__group { display: revert; }
body[data-rail="collapsed"] .rail__brand,
body[data-rail="collapsed"] .rail .tab-btn,
body[data-rail="collapsed"] .rail__user {
justify-content: flex-start;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
body[data-rail="collapsed"] .rail .tab-btn { padding-left: var(--space-3); padding-right: var(--space-3); }
body[data-rail="collapsed"] .rail .tab-btn::after { content: none; }
body[data-rail="collapsed"] .rail .tab-badge {
position: static; border: 0; min-width: 19px; height: 19px;
font-size: var(--text-2xs); padding: 0 5px;
}
.rail__collapse { display: none; }
.topbar__menu { display: inline-flex; }
.rail-scrim {
position: fixed;
inset: 0;
z-index: 45;
background: rgba(11, 14, 18, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal);
}
body[data-drawer="open"] .rail-scrim { opacity: 1; pointer-events: auto; }
.app-main { padding-top: var(--space-4); padding-bottom: var(--space-8); }
/* Il FAB "segnala un problema" è ancorato a `bottom: 16px` e sotto i 900px
* finiva esattamente sopra la barra di navigazione, che è alta 60px e fissa
* in fondo: copriva l'ultima voce (Account) rendendola illeggibile e non
* toccabile. Va sollevato sopra la barra, safe-area inclusa. */
.bug-fab {
bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-3));
}
}
@media (min-width: 901px) {
.rail-scrim { display: none; }
}
/* =============================================================================
5. INTESTAZIONE DI PAGINA
-----------------------------------------------------------------------------
Sostituisce `.rail-page-hero`, che spendeva ~200px di viewport per un titolo
decorativo e una frase di marketing prima ancora che l'utente vedesse un
comando. Qui il titolo sta su una riga con le azioni di contesto a destra e
il contenuto comincia subito sotto.
========================================================================== */
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
padding-bottom: var(--space-4);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.page-head__main { min-width: 0; flex: 1; }
.page-head__eyebrow {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-accent);
margin-bottom: var(--space-2);
}
.page-head__title {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
line-height: var(--leading-tight);
color: var(--color-text);
}
.page-head__desc {
margin-top: var(--space-1);
font-size: var(--text-base);
color: var(--color-text-secondary);
max-width: 68ch;
}
.page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* =============================================================================
6. PANNELLI
========================================================================== */
.panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: none;
margin-bottom: var(--space-4);
overflow: visible;
}
.panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.panel__title {
font-size: var(--text-sm);
font-weight: var(--weight-semi);
letter-spacing: 0.01em;
color: var(--color-text);
}
.panel__subtitle {
font-size: var(--text-xs);
color: var(--color-text-faint);
font-weight: var(--weight-normal);
}
/* Meta a destra dell'intestazione: conteggi, filtri applicati, timestamp. */
.panel__subtitle--tag {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-variant-numeric: tabular-nums;
}
.panel__body { padding: var(--space-4); }
/* Pannelli che contengono solo una tabella: niente padding, la tabella arriva
* ai bordi e la testata sticky funziona senza scalini. */
.panel--results,
.panel--flush { overflow: hidden; }
.panel--results > .panel__body,
.panel--flush > .panel__body { padding: 0; }
/* =============================================================================
7. BOTTONI
-----------------------------------------------------------------------------
Una sola geometria per tutti i controlli: altezza 34px, raggio 4px. Il design
precedente mescolava pill (--radius-full) e rettangoli a 6px nella stessa
riga — il difetto che faceva leggere l'interfaccia come "assemblata".
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 34px;
padding: 0 var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-base);
font-weight: var(--weight-medium);
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast),
color var(--transition-fast);
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Primaria = rosso istituzionale. Una sola per schermata. */
.btn--primary {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-on-accent);
}
.btn--primary:hover:not(:disabled) {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
.btn--secondary,
.btn--outline {
background: var(--color-surface);
border-color: var(--color-border-strong);
color: var(--color-text);
}
.btn--secondary:hover:not(:disabled),
.btn--outline:hover:not(:disabled) {
background: var(--color-surface-hover);
border-color: var(--color-border-hard);
}
.btn--dark {
background: var(--color-brand);
border-color: var(--color-brand);
color: var(--color-text-inverse);
}
.btn--dark:hover:not(:disabled) { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn--ghost {
background: transparent;
border-color: transparent;
color: var(--color-text-secondary);
}
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.btn--danger {
background: var(--color-surface);
border-color: var(--color-danger-br);
color: var(--color-danger);
}
.btn--danger:hover:not(:disabled) { background: var(--color-danger-bg); }
.btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--lg { height: 38px; padding: 0 var(--space-5); font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn--icon { width: 34px; padding: 0; }
.btn--icon.btn--sm { width: 28px; }
/* Scambio partenza/arrivo: quadrato come tutto il resto, non un cerchio. */
.btn-swap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast);
}
.btn-swap:hover {
background: var(--color-surface-hover);
border-color: var(--color-border-hard);
color: var(--color-accent);
}
.btn-swap__icon { width: 16px; height: 16px; }
.btn-swap__text { display: none; }
/* =============================================================================
8. FORM
========================================================================== */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.form-label,
label {
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-secondary);
}
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input[type="tel"],
select, textarea {
width: 100%;
height: 34px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-webkit-appearance: none;
appearance: none;
}
textarea { height: auto; min-height: 78px; padding: var(--space-3); line-height: var(--leading-normal); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
border-color: var(--color-border-hard);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
}
input:disabled, select:disabled, textarea:disabled {
background: var(--color-surface-sunken);
color: var(--color-text-faint);
cursor: not-allowed;
}
/* Chevron della select disegnato inline: evita il widget nativo, che cambia
* forma e altezza da un browser all'altro e rompeva l'allineamento della riga
* di controlli. */
select {
padding-right: var(--space-8);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-2) center;
background-size: 15px;
cursor: pointer;
}
:root[data-theme="dark"] select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8b9b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }
.form-hint { font-size: var(--text-xs); color: var(--color-text-faint); text-transform: none; letter-spacing: 0; }
.form-error { font-size: var(--text-xs); color: var(--color-danger); text-transform: none; letter-spacing: 0; }
/* Interruttore */
.toggle-switch, .switch {
position: relative;
display: inline-flex;
align-items: center;
width: 36px;
height: 20px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--color-border-hard);
border: 0;
cursor: pointer;
padding: 0;
transition: background var(--transition-normal);
}
.toggle-switch::after, .switch::after {
content: '';
position: absolute;
left: 2px;
width: 16px;
height: 16px;
border-radius: var(--radius-full);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal);
}
.toggle-switch.active, .toggle-switch[aria-checked="true"],
.switch.active, .switch[aria-checked="true"] { background: var(--color-accent); }
.toggle-switch.active::after, .toggle-switch[aria-checked="true"]::after,
.switch.active::after, .switch[aria-checked="true"]::after { transform: translateX(16px); }
/* =============================================================================
9. TABELLE — il cuore di una console dati
-----------------------------------------------------------------------------
Niente zebra: con i bordi hairline lo striping raddoppia il rumore visivo.
La separazione la fa la riga, l'orientamento lo fa l'hover.
========================================================================== */
.table-wrap, .an-table-wrap, .results-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
thead th {
position: sticky;
top: 0;
z-index: 2;
padding: var(--space-2) var(--space-3);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border-strong);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-secondary);
text-align: left;
white-space: nowrap;
}
tbody td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
vertical-align: middle;
}
/* Celle a COLORE-DATO: il testo lo decide il passo di scala, non la pagina.
*
* Le heatmap portano lo sfondo da una scala (blu sequenziale, verde↔rosso
* divergente) e insieme allo sfondo `style.css` dichiara il testo che ci si
* legge sopra: chiaro sui passi scuri, scuro su quelli chiari. Quelle regole
* però stanno nel layer `legacy`, e la `color` generica qui sopra — che è
* fuori da ogni layer — le batte TUTTE, a qualunque specificità: è la regola
* dei cascade layer, non una questione di peso del selettore.
*
* Risultato: lo sfondo restava quello del dato mentre il testo prendeva il
* colore del TEMA, con l'esito rovesciato nei due temi — testo scuro sui passi
* scuri in tema chiaro, testo chiaro sui passi chiari in tema scuro. Misurati
* rapporti di contrasto fra 1,23:1 e 1,99:1, cioè cifre di fatto invisibili.
*
* `revert-layer` dice esattamente la cosa giusta: per queste celle si torna al
* valore del layer sottostante, cioè al colore del passo. Nessuna palette
* duplicata qui e nessun `!important`; su un browser che non lo conoscesse la
* dichiarazione decade e si torna al comportamento di prima, senza rotture.
* Gli estremi NEUTRI delle scale restano governati dal blocco tema più sotto,
* che è a sua volta fuori dai layer e quindi continua a vincere: quelli devono
* seguire la superficie, non il dato.
*
* L'elenco copriva solo le due heatmap di `an-hm-cell`/`an-seg-hm-cell`, ma il
* problema è di TUTTE le celle che portano una codifica semantica sul
:
* · `.an-net-hm__cell` (Carico rete, Pattern temporale rete-wide) — la scala
* dichiara il testo passo per passo e non ne applicava nessuno: al buio
* l'intera rampa stava fra 1,48:1 e 3,35:1, cioè cifre illeggibili proprio
* nelle celle di picco;
* · `.an-seg-delta-*` (Ritardi per tratta) e `.an-net-sev--*` (Corridor
* congestionati, Punti critici) — qui il colore È l'informazione, e
* veniva sostituito dal grigio del testo normale: le tre tabelle avevano
* perso per intero la codifica verde/ambra/rosso, e la cella "worst"
* scriveva grafite su bordeaux (2,04:1). */
tbody td.an-hm-cell,
tbody td.an-seg-hm-cell,
tbody td.an-net-hm__cell,
tbody td.an-seg-delta-good,
tbody td.an-seg-delta-ok,
tbody td.an-seg-delta-mild,
tbody td.an-seg-delta-bad,
tbody td.an-seg-delta-worst,
tbody td.an-net-sev--ok,
tbody td.an-net-sev--mild,
tbody td.an-net-sev--mid,
tbody td.an-net-sev--bad { color: revert-layer; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover td { background: var(--color-surface-hover); }
/* Numeri, orari e prezzi: allineati a destra e in mono, così le colonne si
* leggono a colpo d'occhio. */
td.num, th.num, .cell-num,
td[data-type="number"], td[data-type="price"], td[data-type="time"] {
text-align: right;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-xs);
}
/* Identificativo treno: mono, marcato, è la chiave di lettura di ogni riga. */
.train-num, .train-number, td.train-id {
font-family: var(--font-mono);
font-weight: var(--weight-medium);
font-size: var(--text-xs);
letter-spacing: 0.02em;
color: var(--color-text);
}
/* =============================================================================
10. BADGE, PILL, STATI
========================================================================== */
.badge, .pill, .chip, .tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-alt);
color: var(--color-text-secondary);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
letter-spacing: 0.02em;
line-height: 1.5;
white-space: nowrap;
}
.badge--success, .pill--success, .is-success {
background: var(--color-success-bg); border-color: var(--color-success-br); color: var(--color-success);
}
.badge--danger, .pill--danger, .is-danger, .badge--sold-out {
background: var(--color-danger-bg); border-color: var(--color-danger-br); color: var(--color-danger);
}
.badge--warning, .pill--warning, .is-warning {
background: var(--color-warning-bg); border-color: var(--color-warning-br); color: var(--color-warning);
}
.badge--info, .pill--info, .is-info {
background: var(--color-info-bg); border-color: var(--color-info-br); color: var(--color-info);
}
.badge--neutral, .pill--neutral {
background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-secondary);
}
/* Pallino di stato riutilizzabile */
.dot {
width: 6px; height: 6px; flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--color-text-faint);
}
.dot--live { background: var(--color-accent); }
.dot--ok { background: var(--color-success); }
.dot--warn { background: var(--color-warning); }
.dot--off { background: var(--color-text-faint); }
/* =============================================================================
11. CALLOUT, EMPTY STATE, CARICAMENTO
========================================================================== */
.callout {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border-hard);
border-radius: var(--radius-md);
background: var(--color-surface-alt);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.callout--error, .callout--danger {
background: var(--color-danger-bg); border-color: var(--color-danger-br);
border-left-color: var(--color-danger); color: var(--color-danger);
}
.callout--success { background: var(--color-success-bg); border-color: var(--color-success-br); border-left-color: var(--color-success); color: var(--color-success); }
.callout--warning { background: var(--color-warning-bg); border-color: var(--color-warning-br); border-left-color: var(--color-warning); color: var(--color-warning); }
/* Risultati rimasti a schermo dopo un input rifiutato: restano leggibili — non
* si butta il lavoro dell'utente (bug #153) — ma devono dichiarare di essere
* della ricerca PRECEDENTE, o sembrano la risposta al filtro appena scritto
* (bug #161). L'avviso riusa il callout di avvertimento del design system,
* che ha già i suoi token per entrambi i temi; qui serve solo la collocazione.
* Niente attenuazione della tabella: renderla più pallida peggiorerebbe la
* leggibilità di dati che restano validi, e sono proprio quelli che l'utente
* vuole continuare a consultare. */
.results-stale-note {
margin: 0 0 var(--space-3) 0;
}
.panel--results.results--stale {
border-left: 3px solid var(--color-warning);
}
.callout--info { background: var(--color-info-bg); border-color: var(--color-info-br); border-left-color: var(--color-info); color: var(--color-info); }
.empty-state, .empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-10) var(--space-6);
text-align: center;
color: var(--color-text-faint);
}
.empty-state__icon, .empty__icon {
width: 32px; height: 32px;
color: var(--color-border-hard);
stroke-width: 1.4;
margin-bottom: var(--space-1);
}
.empty-state__title, .empty__title {
font-size: var(--text-base);
font-weight: var(--weight-semi);
color: var(--color-text-secondary);
}
.empty-state__desc, .empty__desc { font-size: var(--text-sm); max-width: 44ch; }
/* Scheletro di caricamento */
.skeleton {
border-radius: var(--radius-sm);
background: linear-gradient(90deg,
var(--color-surface-sunken) 25%,
var(--color-bg-subtle) 37%,
var(--color-surface-sunken) 63%);
background-size: 400% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
/* =============================================================================
12. NAVIGAZIONE MOBILE
========================================================================== */
.rail-mobile-nav {
display: none;
position: fixed;
inset: auto 0 0 0;
z-index: 55;
height: var(--mobile-nav-height);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.rail-mobile-nav__inner {
display: flex;
align-items: stretch;
height: 100%;
}
.rail-mobile-nav__btn-wrap { flex: 1; position: relative; display: flex; }
.rail-mobile-nav__btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
border: 0;
background: transparent;
color: var(--color-text-faint);
font-family: inherit;
font-size: 10px;
font-weight: var(--weight-medium);
cursor: pointer;
padding: 0 2px;
position: relative;
transition: color var(--transition-fast);
}
.rail-mobile-nav__btn svg { width: 19px; height: 19px; }
.rail-mobile-nav__btn.active { color: var(--color-accent); }
.rail-mobile-nav__btn.active::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 22px; height: 2px;
background: var(--color-accent);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.rail-mobile-nav__badge {
position: absolute;
top: 5px;
right: 50%;
margin-right: -18px;
min-width: 15px; height: 15px;
padding: 0 3px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-on-accent);
font-size: 10px;
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
border: 2px solid var(--color-surface);
}
.rail-mobile-nav__badge.hidden { display: none; }
@media (max-width: 900px) {
.rail-mobile-nav { display: block; }
}
/* =============================================================================
13. TOPBAR — icone tema
-----------------------------------------------------------------------------
Mostra l'icona della destinazione, non dello stato corrente: in tema scuro
compare il sole ("vai al chiaro"). È la convenzione che gli utenti leggono
più velocemente su un pulsante singolo.
========================================================================== */
.topbar__icon { width: 15px; height: 15px; }
.topbar__icon--sun { display: none; }
:root[data-theme="dark"] .topbar__icon--sun { display: block; }
:root[data-theme="dark"] .topbar__icon--moon { display: none; }
/* =============================================================================
14. VISTA RICERCA
========================================================================== */
.panel--search .panel__body,
.search-form { padding: var(--space-4); }
/* Una griglia sola: stazioni elastiche, data/treno a larghezza fissa, azione
* in coda. Tutti i campi condividono la stessa altezza e la stessa baseline. */
.search-grid {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) 150px 110px auto;
gap: var(--space-3);
align-items: end;
}
/* Il bottone di scambio si allinea alla riga degli input, non alle etichette. */
.search-grid > .btn-swap { margin-bottom: 0; }
.search-grid__submit { flex-direction: row; gap: var(--space-2); }
.search-grid__submit .btn { flex: 1; }
.label-hint {
font-weight: var(--weight-normal);
color: var(--color-text-faint);
text-transform: none;
letter-spacing: 0;
}
@media (max-width: 1100px) {
.search-grid { grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); }
.search-grid__date, .search-grid__train { grid-column: span 1; }
.search-grid__submit { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.search-grid { grid-template-columns: 1fr; }
.search-grid > .btn-swap { justify-self: center; }
.search-grid__date, .search-grid__train, .search-grid__submit { grid-column: 1 / -1; }
}
.search-errors:empty { display: none; }
.search-errors { display: flex; flex-direction: column; gap: var(--space-1); }
.search-errors:has(> :not(.hidden)) { margin-top: var(--space-3); }
.field-error {
font-size: var(--text-xs);
color: var(--color-danger);
display: flex;
align-items: center;
gap: var(--space-2);
}
.field-error.hidden { display: none; }
/* ── Autocomplete stazioni ── */
.station-group { position: relative; }
.suggestions {
position: absolute;
top: calc(100% + 3px);
left: 0;
right: 0;
z-index: 30;
list-style: none;
max-height: 260px;
overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--space-1);
}
.suggestions:empty { display: none; }
.suggestions li {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--text-base);
color: var(--color-text);
cursor: pointer;
}
.suggestions li:hover,
.suggestions li.active,
.suggestions li[aria-selected="true"] {
background: var(--color-brand-muted);
color: var(--color-text);
}
/* ── Barra di controllo ── */
.panel--controls { margin-bottom: var(--space-4); }
.panel--controls > .ctrlbar { padding: var(--space-2) var(--space-3); }
.ctrlbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.ctrlbar__group {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.ctrlbar__sep {
width: 1px;
height: 20px;
background: var(--color-border);
flex-shrink: 0;
}
@media (max-width: 720px) { .ctrlbar__sep { display: none; } }
.status-bar {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
min-width: 0;
}
.status-bar__indicator {
width: 7px;
height: 7px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--color-text-faint);
}
.status-bar__indicator.active,
.status-bar__indicator.is-live { background: var(--color-accent); animation: pulse-live 2s ease-in-out infinite; }
.status-bar__indicator.error { background: var(--color-danger); }
.status-bar__indicator.ok { background: var(--color-success); }
@media (prefers-reduced-motion: reduce) { .status-bar__indicator { animation: none; } }
.status-bar__text { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.status-text { font-weight: var(--weight-medium); color: var(--color-text); }
/* setStatus(msg, true) marca l'errore con questa classe. Era dichiarata solo in
* style.css: `.status-text` qui sopra sta fuori dai layer e vinceva sul
* modificatore, quindi "Errore: …" restava del colore del testo normale — il
* pallino diventava rosso ma la frase no. */
.status-text--error { color: var(--color-danger); }
.status-meta { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
/* Etichetta + controllo sulla stessa riga (altezza uniforme con i bottoni) */
.field-inline {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.field-inline__label {
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-faint);
white-space: nowrap;
}
.input-select {
width: auto;
height: 28px;
font-size: var(--text-xs);
padding-right: var(--space-7);
background-position: right var(--space-1) center;
background-size: 14px;
}
.input-select--narrow { min-width: 78px; }
/* Toggle con etichetta: usa un checkbox reale nascosto, così tastiera e
* screen reader funzionano senza ARIA aggiuntivo. */
.toggle-field {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
text-transform: none;
letter-spacing: 0;
}
.toggle-field__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-field__ui {
position: relative;
display: inline-block;
width: 32px;
height: 18px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--color-border-hard);
transition: background var(--transition-normal);
}
.toggle-field__ui::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: var(--radius-full);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal);
}
.toggle-field__input:checked + .toggle-field__ui { background: var(--color-accent); }
.toggle-field__input:checked + .toggle-field__ui::after { transform: translateX(14px); }
.toggle-field__input:focus-visible + .toggle-field__ui { box-shadow: var(--shadow-focus); }
.toggle-field__label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
text-transform: none;
letter-spacing: 0;
}
/* =============================================================================
15. TABELLA RISULTATI
========================================================================== */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#results-table { min-width: 720px; }
.train-name {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: 0.02em;
color: var(--color-text);
}
/* Orari, durata e prezzo in mono: incolonnano e si confrontano a colpo
* d'occhio, che è l'operazione che l'utente fa su questa tabella. */
#results-table td[data-label="Partenza"],
#results-table td[data-label="Arrivo"],
#results-table td[data-label="Durata"],
#results-table td[data-label="Prezzo min."] {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#results-table td[data-label="Prezzo min."] { font-weight: var(--weight-medium); }
.seats-count {
display: inline-block;
min-width: 22px;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
.seats-count.seats-zero { color: var(--color-danger); }
.seats-na { color: var(--color-text-faint); font-family: var(--font-mono); font-size: var(--text-xs); }
.badge.available {
background: var(--color-success-bg);
border-color: var(--color-success-br);
color: var(--color-success);
}
.badge.sold-out {
background: var(--color-danger-bg);
border-color: var(--color-danger-br);
color: var(--color-danger);
}
.btn-monitor {
height: 26px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-secondary);
font-family: inherit;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
white-space: nowrap;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast);
}
.btn-monitor:hover { background: var(--color-surface-hover); border-color: var(--color-border-hard); color: var(--color-text); }
.btn-monitor.active {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-on-accent);
}
.btn-monitor.active:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
/* ── Riga di dettaglio espansa ── */
.detail-row > td { padding: 0; background: var(--color-surface-alt); }
.detail-inner { padding: var(--space-4); border-top: 1px solid var(--color-border); }
.offers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: var(--space-3);
}
.offer-card {
padding: var(--space-3);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border-hard);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.offer-card.available { border-left-color: var(--color-success); }
.offer-card.sold-out { border-left-color: var(--color-danger); opacity: 0.72; }
.offer-name {
display: block;
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-faint);
margin-bottom: var(--space-1);
}
.offer-price {
display: block;
font-family: var(--font-mono);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
color: var(--color-text);
line-height: 1.15;
}
.offer-seats, .offer-coach {
display: block;
font-size: var(--text-xs);
color: var(--color-text-secondary);
margin-top: var(--space-1);
font-variant-numeric: tabular-nums;
}
.offer-status { display: inline-block; margin-top: var(--space-2); }
.load-more { display: flex; justify-content: center; padding: var(--space-4); }
.load-more .btn.hidden { display: none; }
/* "Carica altri treni" è `.btn--ghost`, cioè senza bordo né fondo: da solo in
* fondo alla tabella, senza nulla accanto che lo qualifichi come controllo,
* si leggeva come una didascalia centrata invece che come il pulsante che
* carica la pagina successiva. Il bordo lo riporta alla stessa grammatica
* degli altri comandi della vista; altrove il ghost resta com'è, perché lì
* sta in fila con bottoni veri. */
.load-more .btn--ghost {
border-color: var(--color-border-strong);
color: var(--color-text);
}
.load-more .btn--ghost:hover:not(:disabled) {
background: var(--color-surface-hover);
border-color: var(--color-border-hard);
}
.empty-state__hint { font-size: var(--text-sm); color: var(--color-text-faint); max-width: 44ch; }
/* Su schermo stretto la tabella diventa un elenco di schede: le intestazioni
* di colonna riappaiono come etichette da `data-label`, che il template in
* app.js già emette su ogni cella. */
@media (max-width: 720px) {
#results-table { min-width: 0; }
#results-table thead { display: none; }
#results-table tbody tr { display: block; border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
#results-table tbody tr.detail-row { padding: 0; }
#results-table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
border: 0;
padding: var(--space-1) var(--space-4);
}
#results-table tbody td::before {
content: attr(data-label);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-faint);
}
#results-table tbody tr.detail-row td::before { content: none; }
#results-table tbody tr.detail-row td { display: block; padding: 0; }
}
/* =============================================================================
16. VISTA MONITORAGGI
-----------------------------------------------------------------------------
Questa vista era stilata INTERAMENTE da rail-premium.css (~60 classi `mon-*`
non presenti in style.css). Ritirando quel foglio andava riscritta da zero,
ed è l'occasione per riportarla alla logica della console: KPI a righe
incolonnate, schede compatte, cronologia come registro eventi.
========================================================================== */
.mon-page { display: flex; flex-direction: column; gap: var(--space-4); }
.mon-page__banner,
.ua-sync-banner {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-warning-br);
border-left: 3px solid var(--color-warning);
border-radius: var(--radius-md);
background: var(--color-warning-bg);
color: var(--color-warning);
font-size: var(--text-sm);
}
.ua-sync-banner.hidden { display: none; }
.ua-sync-banner svg { flex-shrink: 0; }
/* ── Intestazione della vista ── */
.mon-page__hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.mon-page__eyebrow {
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-accent);
margin-bottom: var(--space-1);
}
.mon-page__title { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.mon-page__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); max-width: 62ch; }
.mon-page__hero-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* ── KPI ──
* Quattro celle in una riga sola con separatori verticali: si leggono come una
* strip di strumenti, non come quattro card che galleggiano. */
.mon-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
}
.mon-kpis.hidden { display: none; }
.mon-kpi {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3) var(--space-4);
border-left: 1px solid var(--color-border);
position: relative;
}
.mon-kpi:first-child { border-left: 0; }
.mon-kpi__value {
font-family: var(--font-mono);
font-size: var(--text-2xl);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
line-height: 1.1;
color: var(--color-text);
}
.mon-kpi__label {
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-faint);
}
/* Il colore marca la cifra, non il fondo: quattro riquadri colorati
* competerebbero fra loro e col resto della pagina. */
.mon-kpi--available .mon-kpi__value { color: var(--color-success); }
.mon-kpi--soldout .mon-kpi__value { color: var(--color-danger); }
.mon-kpi--waiting .mon-kpi__value { color: var(--color-text-faint); }
@media (max-width: 720px) {
.mon-kpis { grid-template-columns: repeat(2, 1fr); }
.mon-kpi:nth-child(3) { border-left: 0; }
.mon-kpi:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}
/* ── Layout a due colonne ── */
.mon-page__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--space-4);
align-items: start;
}
@media (max-width: 1080px) { .mon-page__layout { grid-template-columns: minmax(0, 1fr); } }
.mon-page__main,
.mon-page__side {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.mon-page__side.hidden { display: none; }
/* ── Barra strumenti + filtri ── */
.mon-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border);
}
.mon-toolbar__title { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.mon-filter {
display: inline-flex;
padding: 2px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
gap: 2px;
}
.mon-filter__chip {
padding: 3px var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-secondary);
font-family: inherit;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-fast), color var(--transition-fast);
}
.mon-filter__chip:hover { background: var(--color-surface-hover); color: var(--color-text); }
.mon-filter__chip.active,
.mon-filter__chip[aria-selected="true"] {
background: var(--color-brand);
color: var(--color-text-inverse);
}
/* ── Schede monitoraggio ── */
.mon-card-list { list-style: none; }
.mon-card-list.hidden { display: none; }
.mon-card {
display: flex;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
transition: background var(--transition-fast);
}
.mon-card:last-child { border-bottom: 0; }
.mon-card:hover { background: var(--color-surface-hover); }
.mon-card.hidden-by-filter { display: none; }
/* Barra di stato verticale: dice a colpo d'occhio com'è messo il treno,
* senza colorare l'intera scheda. */
.mon-card__accent {
width: 3px;
flex-shrink: 0;
background: var(--color-border-hard);
}
.mon-card.is-available .mon-card__accent { background: var(--color-success); }
.mon-card.is-soldout .mon-card__accent { background: var(--color-danger); }
.mon-card.is-waiting .mon-card__accent { background: var(--color-border-hard); }
.mon-card__body { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); }
.mon-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.mon-card__identity { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.mon-card__train {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: 0.02em;
color: var(--color-text);
}
.mon-card__when { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.mon-card__status {
flex-shrink: 0;
padding: 2px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-alt);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
letter-spacing: 0.02em;
white-space: nowrap;
}
.mon-card__status--available { background: var(--color-success-bg); border-color: var(--color-success-br); color: var(--color-success); }
.mon-card__status--soldout { background: var(--color-danger-bg); border-color: var(--color-danger-br); color: var(--color-danger); }
.mon-card__status--waiting { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-faint); }
/* Percorso: le due stazioni con una linea in mezzo. */
.mon-card__route {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-3);
min-width: 0;
}
.mon-card__station { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-card__station--to { color: var(--color-text); font-weight: var(--weight-medium); }
.mon-card__track { flex: 1; min-width: 20px; display: flex; align-items: center; }
.mon-card__track-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--color-border-hard), var(--color-border));
position: relative;
}
.mon-card__track-line::after {
content: '';
position: absolute;
right: -1px; top: 50%;
transform: translateY(-50%);
border-left: 4px solid var(--color-border-hard);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
/* Offerte: una riga per classe di servizio, incolonnate. */
.mon-offers {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-3);
}
.mon-offer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
font-size: var(--text-xs);
}
.mon-offer:last-child { border-bottom: 0; }
.mon-offer__name { font-weight: var(--weight-semi); color: var(--color-text); white-space: nowrap; }
.mon-offer__seats { color: var(--color-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-offer__status { font-weight: var(--weight-medium); white-space: nowrap; }
.mon-offer--ok .mon-offer__status { color: var(--color-success); }
.mon-offer--no .mon-offer__status { color: var(--color-danger); }
.mon-offer__price {
font-family: var(--font-mono);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
color: var(--color-text);
text-align: right;
white-space: nowrap;
}
.mon-offer--no .mon-offer__price { color: var(--color-text-faint); text-decoration: line-through; }
.mon-offers-empty {
padding: var(--space-3);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
font-size: var(--text-xs);
color: var(--color-text-faint);
text-align: center;
margin-bottom: var(--space-3);
}
.mon-card__foot { display: flex; justify-content: flex-end; }
.mon-card__remove {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 26px;
padding: 0 var(--space-3);
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-faint);
font-family: inherit;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.mon-card__remove:hover {
background: var(--color-danger-bg);
border-color: var(--color-danger-br);
color: var(--color-danger);
}
/* ── Stati vuoti e scheletri ── */
.mon-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-10) var(--space-6);
text-align: center;
}
.mon-empty.hidden { display: none; }
.mon-empty--compact { padding: var(--space-6) var(--space-4); }
.mon-empty__icon { color: var(--color-border-hard); }
.mon-empty__icon svg { width: 34px; height: 34px; }
.mon-empty__title { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--color-text-secondary); }
.mon-empty__text { font-size: var(--text-sm); color: var(--color-text-faint); max-width: 46ch; }
.mon-empty__text strong { color: var(--color-text-secondary); font-weight: var(--weight-semi); }
.mon-empty .ua-btn, .mon-empty .btn { margin-top: var(--space-2); }
.mon-skeleton-list { display: flex; flex-direction: column; }
.mon-skeleton-list.hidden { display: none; }
.mon-skeleton-card {
height: 108px;
border-bottom: 1px solid var(--color-border);
background: linear-gradient(90deg,
var(--color-surface) 25%, var(--color-surface-alt) 37%, var(--color-surface) 63%);
background-size: 400% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) { .mon-skeleton-card { animation: none; } }
/* ── Cronologia (registro eventi) ── */
.mon-side__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border);
}
.mon-side__title { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.mon-side__sub { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.mon-timeline, .ua-timeline { list-style: none; max-height: 560px; overflow-y: auto; }
.mon-timeline-item, .ua-timeline-item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
position: relative;
}
.mon-timeline-item:last-child, .ua-timeline-item:last-child { border-bottom: 0; }
.mon-timeline-item__dot, .ua-timeline-item__dot {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: var(--radius-full);
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
color: var(--color-text-faint);
flex-shrink: 0;
}
.mon-timeline-item__dot svg, .ua-timeline-item__dot svg { width: 11px; height: 11px; }
.mon-timeline-item--available .mon-timeline-item__dot,
.ua-timeline-item--available .ua-timeline-item__dot {
background: var(--color-success-bg); border-color: var(--color-success-br); color: var(--color-success);
}
.mon-timeline-item--sold-out .mon-timeline-item__dot,
.mon-timeline-item--soldout .mon-timeline-item__dot,
.ua-timeline-item--sold-out .ua-timeline-item__dot,
.ua-timeline-item--soldout .ua-timeline-item__dot {
background: var(--color-danger-bg); border-color: var(--color-danger-br); color: var(--color-danger);
}
.mon-timeline-item--info .mon-timeline-item__dot,
.ua-timeline-item--info .ua-timeline-item__dot {
background: var(--color-info-bg); border-color: var(--color-info-br); color: var(--color-info);
}
.mon-timeline-item__body, .ua-timeline-item__body { min-width: 0; }
.mon-timeline-item__time, .ua-timeline-item__time {
display: block;
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-faint);
margin-bottom: 2px;
}
.mon-timeline-item__msg, .ua-timeline-item__msg {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-snug);
}
.mon-timeline-item__msg--available { color: var(--color-success); }
.mon-timeline-item__msg--sold-out,
.mon-timeline-item__msg--soldout { color: var(--color-danger); }
/* =============================================================================
17. RESIDUI DI rail-premium.css
-----------------------------------------------------------------------------
Classi che il foglio ritirato stilava in esclusiva e che sono ancora nel
markup. Senza queste regole resterebbero senza stile. Le classi orfane ma
NON più usate (ua-panel, ua-monitor-grid, ua-offers-table, an-card,
an-controls-row, an-dir-card) sono state volutamente lasciate cadere.
========================================================================== */
/* `ua-monitor-card` / `ua-dash--monitor` convivono sugli stessi elementi di
* `.mon-card` / `.mon-page`: nessuna regola propria, ereditano dalla §16. */
/* ── Tabella generica delle viste dati (Mappa treni, RFI) ── */
.results-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.results-table th {
position: sticky; top: 0; z-index: 2;
padding: var(--space-2) var(--space-3);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border-strong);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-secondary);
text-align: left;
white-space: nowrap;
}
.results-table td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
font-variant-numeric: tabular-nums;
}
.results-table tbody tr:hover td { background: var(--color-surface-hover); }
.results-table tbody tr:last-child td { border-bottom: 0; }
/* ── Vista Stato treno: righe delle fermate ── */
.ts-stop-row td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
font-variant-numeric: tabular-nums;
}
.ts-stop-row:hover td { background: var(--color-surface-hover); }
/* La fermata corrente è l'informazione più cercata di tutta la vista:
* marcata con la barra rossa a sinistra, non con un fondo colorato che
* competerebbe con i ritardi già evidenziati nelle celle. */
.ts-stop-row--current td {
background: var(--color-accent-soft);
font-weight: var(--weight-medium);
}
.ts-stop-row--current td:first-child {
box-shadow: inset 3px 0 0 var(--color-accent);
}
.ts-stop-row--suppressed td {
color: var(--color-text-faint);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.ts-stop-row--suppressed td:first-child { text-decoration: none; }
/* ── Analisi: contenitori dei grafici renderizzati da app.js ── */
.an-heatmap-wrap,
.an-net-load-wrap,
.an-fare-burn-wrap,
.an-sample-quality-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: var(--space-4);
}
.an-heatmap-wrap:empty,
.an-net-load-wrap:empty,
.an-fare-burn-wrap:empty,
.an-sample-quality-wrap:empty { display: none; }
.panel--an-controls .panel__body { padding: var(--space-4); }
/* Parole colorate dentro la frase di legenda: portano significato, quindi
* vanno marcate come termini e non come testo normale colorato. */
.an-legend--ok, .an-legend--warn, .an-legend--danger, .an-legend--muted {
font-weight: var(--weight-semi);
white-space: nowrap;
}
.an-legend--ok { color: var(--color-success); }
/* Era `#b8860b` a tema chiaro (3,03:1 su superficie chiara, sotto soglia per un
* 12px) e il token solo a tema scuro. Ora il token in entrambi: è lo stesso
* ambra che `.an-net-sev--mild` usa per la stessa fascia, e la barra gialla a
* cui la legenda si riferisce resta #facc15, quindi l'aggancio visivo regge. */
.an-legend--warn { color: var(--color-warning); }
.an-legend--danger { color: var(--color-oh-gone); }
.an-legend--muted { color: var(--color-danger); }
.an-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-border);
font-size: var(--text-xs);
color: var(--color-text-secondary);
}
.an-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.an-legend-swatch {
width: 10px; height: 10px;
border-radius: var(--radius-sm);
flex-shrink: 0;
border: 1px solid rgba(0, 0, 0, 0.12);
}
/* ── Admin: gestione utenti ── */
.admin-user__avatar {
display: grid;
place-items: center;
width: 30px; height: 30px;
flex-shrink: 0;
border-radius: var(--radius-md);
background: var(--color-brand);
color: var(--color-text-inverse);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
}
.admin-user__id {
font-family: var(--font-mono);
font-size: var(--text-2xs);
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
.admin-user__stat {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.admin-user__controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.admin-user__select { width: auto; height: 28px; font-size: var(--text-xs); }
.admin-user__msg { font-size: var(--text-xs); margin-top: var(--space-2); }
.admin-user__msg--err { color: var(--color-danger); }
/* ── Admin: segnalazioni ── */
.admin-bugs-empty,
.admin-bugs-loading {
padding: var(--space-8) var(--space-4);
text-align: center;
font-size: var(--text-sm);
color: var(--color-text-faint);
}
.admin-bugs-more { display: flex; justify-content: center; padding: var(--space-4); }
.admin-system-updated {
font-family: var(--font-mono);
font-size: var(--text-2xs);
color: var(--color-text-faint);
font-variant-numeric: tabular-nums;
}
/* ── Bug reporter: miniatura dello screenshot ── */
.bug-card__shot {
display: block;
max-width: 100%;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-sunken);
}
.bug-card__shot-ph {
display: grid;
place-items: center;
min-height: 96px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface-alt);
color: var(--color-text-faint);
font-size: var(--text-xs);
}
/* =============================================================================
18. RIALLINEAMENTO DEI TOKEN `--ua-*` (Account + schermata di accesso)
-----------------------------------------------------------------------------
user-area.css definisce ~290 variabili `--ua-*`. La maggior parte è già un
alias di `--color-*`, quindi segue da sola la nuova palette. Restano fuori
i valori scritti a mano: i raggi (4/6/10/12px, più morbidi della geometria
netta della console) e l'accent, fissato su #c8102e anche in tema scuro, dove
quel rosso non ha contrasto sufficiente.
Ridefinirli qui riallinea l'intera area account e la schermata di accesso
senza toccare le loro ~1300 righe di regole.
========================================================================== */
:root {
--ua-radius-sm: var(--radius-sm);
--ua-radius: var(--radius-md);
--ua-radius-lg: var(--radius-lg);
--ua-radius-xl: var(--radius-xl);
--ua-accent: var(--color-accent);
--ua-accent-hover: var(--color-accent-hover);
--ua-accent-text: var(--color-accent);
--ua-accent-soft: var(--color-accent-muted);
--ua-danger-solid: var(--color-danger);
--ua-transition: var(--transition-normal);
/* Pannello scuro del login: agganciato alla rampa neutra invece che a un
* grigio caldo indipendente, così non stona col resto della console. */
--ua-ink: var(--n-900);
--ua-ink-2: var(--n-800);
--ua-ink-line: rgba(255, 255, 255, 0.10);
--ua-ink-text: rgba(255, 255, 255, 0.94);
--ua-ink-text-2: rgba(255, 255, 255, 0.66);
--ua-ink-text-3: rgba(255, 255, 255, 0.46);
}
/* In tema scuro il pannello del login non può essere "ancora più scuro" del
* fondo: si perderebbe il contrasto tra le due metà della schermata. Lo
* portiamo un gradino SOPRA lo sfondo. */
:root[data-theme="dark"] {
--ua-ink: var(--n-100);
--ua-ink-2: var(--n-150);
--ua-on-brand: var(--color-text-inverse);
}
/* I due campi del login hanno un'icona in `position: absolute` a sinistra
* (`.auth-field__icon`, left 0.85rem, 16px di lato): user-area.css lascia
* spazio con `padding-left: 2.5rem`, ma la regola generica sui tipi di input
* di questo foglio (§8) sta fuori dai layer e rimetteva il padding a
* `var(--space-3)` = 12px. Risultato: il testo partiva SOTTO l'icona e
* "Il tuo username" si sovrapponeva alla sagoma della persona. Va ridichiarato
* qui perché è qui che vince. */
.auth-field__wrap input {
padding-left: var(--space-10);
}
/* =============================================================================
19. CONSOLE ACCOUNT — allineamento strutturale
========================================================================== */
.ua-console__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding-bottom: var(--space-4);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
/* Sotto-navigazione dell'area account: stessa grammatica del rail primario
* (voce attiva con superficie piena), un gradino più leggera per non
* competere con quella. */
.ua-rail__item.active,
.ua-rail__item[aria-selected="true"] {
background: var(--color-brand-muted);
color: var(--color-text);
font-weight: var(--weight-semi);
}
.ua-group {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
margin-bottom: var(--space-4);
overflow: hidden;
}
.ua-group__head {
padding: var(--space-3) var(--space-4);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border);
}
.ua-group__title { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.ua-group__sub { font-size: var(--text-xs); color: var(--color-text-faint); }
.ua-group--danger { border-color: var(--color-danger-br); }
.ua-group--danger .ua-group__head { background: var(--color-danger-bg); border-bottom-color: var(--color-danger-br); }
.ua-group--danger .ua-group__title { color: var(--color-danger); }
/* Bottoni dell'area account: stessa altezza e geometria di `.btn`, così una
* schermata che mescola i due set resta allineata. */
.ua-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 34px;
padding: 0 var(--space-4);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-base);
font-weight: var(--weight-medium);
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ua-btn:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-hard); }
.ua-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ua-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
/* `--brand` e `--accent` sono lo stesso bottone con due nomi storici: il primo
* lo usano monitoraggi e admin, il secondo la schermata di accesso. Qui c'era
* solo `--brand`, e `.ua-btn` (fuori dai layer) vinceva sul `.ua-btn--accent`
* di user-area.css: i due "Accedi"/"Crea account" del login — le uniche azioni
* primarie di quella schermata — uscivano bianchi come un bottone qualsiasi. */
.ua-btn--brand,
.ua-btn--accent {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-on-accent);
}
.ua-btn--brand:hover:not(:disabled),
.ua-btn--accent:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.ua-btn--ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.ua-btn--ghost:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.ua-btn--danger { border-color: var(--color-danger-br); color: var(--color-danger); background: var(--color-surface); }
.ua-btn--danger:hover:not(:disabled) { background: var(--color-danger-bg); }
.ua-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-xs); }
/* Avvisi */
.ua-alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-border-hard);
border-radius: var(--radius-md);
background: var(--color-surface-alt);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.ua-alert.hidden { display: none; }
.ua-alert--error { background: var(--color-danger-bg); border-color: var(--color-danger-br); border-left-color: var(--color-danger); color: var(--color-danger); }
/* `--ok` è il nome che usa app.js per l'esito positivo del salvataggio del Chat
* ID (`--success` è quello del design system). Senza l'alias vinceva `.ua-alert`
* qui sopra e la conferma "Chat ID salvato" usciva grigia, identica allo stato
* neutro, mentre l'errore era rosso: le due risposte non si distinguevano. */
.ua-alert--success,
.ua-alert--ok { background: var(--color-success-bg); border-color: var(--color-success-br); border-left-color: var(--color-success); color: var(--color-success); }
.ua-alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-br); border-left-color: var(--color-warning); color: var(--color-warning); }
/* =============================================================================
20. CONTENITORI RESIDUI E PIÈ DI PAGINA
========================================================================== */
/* Contenitori di layout senza stile proprio: servono solo perché i figli
* possano troncare invece di sfondare la riga. */
.mon-page__hero-main,
.ua-console__head-text,
.ua-rail__text,
.ua-channel__text { min-width: 0; }
.admin-system-info { padding: var(--space-4); }
/* ── Archivio locale nel footer ──
* Era un pannello a tutta larghezza in fondo a ogni vista. Resta, ma come
* scheda contenuta e leggibile: è telemetria, non contenuto primario. */
.ui-stats-panel {
max-width: 720px;
margin: 0 auto;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-alt);
}
.ui-stats-title {
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-text-faint);
margin-bottom: var(--space-3);
}
.ui-stats-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-1) var(--space-4);
font-size: var(--text-xs);
}
.ui-stats-grid dt { color: var(--color-text-faint); }
.ui-stats-grid dd {
text-align: right;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--color-text-secondary);
}
.ui-stats-line, .ui-stats-hint {
font-size: var(--text-xs);
color: var(--color-text-faint);
margin-top: var(--space-3);
}
.ui-stats-error.hidden { display: none; }
/* =============================================================================
21. UTILITY
========================================================================== */
.hidden { display: none !important; }
.ts-muted { color: var(--color-text-faint); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* =============================================================================
22. STAMPA
========================================================================== */
@media print {
.rail, .topbar, .rail-mobile-nav, .rail-scrim, .app-footer { display: none !important; }
.console__body { margin-left: 0; }
.app-main { max-width: none; padding: 0; }
.panel { border-color: #ccc; break-inside: avoid; }
body { background: #fff; }
}
/* =============================================================================
23. NEUTRALIZZAZIONE DEI RESIDUI LEGACY
-----------------------------------------------------------------------------
I cascade layer decidono chi vince PER SINGOLA PROPRIETÀ, non per regola.
Una proprietà che `legacy` dichiara e che il design nuovo non dichiara filtra
comunque fino all'elemento. Stessa cosa per gli pseudo-elementi: se legacy
definisce un `::before` con `content`, quel contenuto compare a meno di non
annullarlo esplicitamente.
Questa sezione chiude quei buchi. Ogni regola qui risponde a un difetto
osservato, non è difensiva a caso.
========================================================================== */
/* ── Sidebar: le etichette sparivano ─────────────────────────────────────
`style.css` nasconde `.tab-btn__label` in modo "visually hidden" fra 721 e
1500px, perché la vecchia tab-bar orizzontale non ci stava. Nel rail
verticale lo spazio c'è, e la nav si riduceva a icone anonime — proprio il
difetto che la sidebar doveva eliminare. */
.rail .tab-btn__label {
position: static;
width: auto;
height: auto;
margin: 0;
padding: 0;
clip: auto;
clip-path: none;
border: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Legacy centra le voci (`justify-content: center`) e le impila in colonna
sotto i 720px: entrambe le cose sbagliate per una voce di menu verticale. */
.rail .tab-btn {
justify-content: flex-start;
flex-direction: row;
min-width: 0;
line-height: 1;
}
/* La sottolineatura animata della vecchia tab-bar. Qui la posizione corrente
la marca la barra rossa a sinistra: due indicatori insieme si contraddicono. */
.rail .tab-btn::after { content: none; }
/* Legacy ingrandisce l'icona a 20px e stacca il badge in `position: absolute`
nella stessa media query delle etichette nascoste. */
.rail .tab-btn__icon { width: 17px; height: 17px; }
.rail .tab-badge { position: static; top: auto; right: auto; }
/* Nello stato compresso il badge torna a essere un pallino d'angolo: qui
serve davvero, e la regola sta dopo quella di reset per vincere. */
body[data-rail="collapsed"] .rail .tab-badge { position: absolute; top: 2px; right: 6px; }
/* ── Doppia lente nel bottone "Cerca" ────────────────────────────────────
`#search-btn::before` inietta una lente mascherata via CSS. Il markup nuovo
ha già la sua SVG inline, quindi ne comparivano due. Tengo la SVG (segue
`currentColor` e la geometria del design system) e annullo l'iniezione. */
#search-btn::before { content: none; }
/* `min-height: 48px` su #search-btn rendeva il bottone più alto degli input
della stessa riga, sfondando l'allineamento della griglia di ricerca.
`min-height` batte `height`, quindi va azzerato esplicitamente. */
.btn, #search-btn, .ua-btn {
min-height: 0;
position: relative;
}
#search-btn {
font-size: var(--text-base);
font-weight: var(--weight-medium);
gap: var(--space-2);
background: var(--color-accent);
}
#search-btn:hover:not(:disabled) { background: var(--color-accent-hover); }
/* ── Barretta decorativa davanti ai titoli di pannello ───────────────────
Un blocchetto 4px in gradiente prima di ogni `.panel__title`. Nel design
nuovo la gerarchia la fa la fascia di intestazione, e il rosso è riservato
ai segnali: un marker colorato su ogni titolo lo svaluta. */
.panel__title::before,
#tab-analytics .panel__title::before,
#tab-analytics #an-controls .panel__title::before { content: none; }
/* ── Bottone inverti ─────────────────────────────────────────────────────
Legacy gli assegna misure e direzione della vecchia riga stazioni. */
.btn-swap {
min-height: 0;
min-width: 0;
padding: 0;
gap: 0;
align-self: end;
flex-direction: row;
border-style: solid;
}
.btn-swap__text { display: none; }
/* ── Controlli inline della barra ────────────────────────────────────── */
.field-inline { flex-direction: row; width: auto; }
.input-select { min-width: 0; }
.suggestions { overflow-y: auto; font-style: normal; border-bottom: 1px solid var(--color-border-strong); }
.toggle-field { user-select: none; }
.status-bar { flex: 0 1 auto; }
.empty-state { max-width: none; }
/* ── Archivio locale: griglia illeggibile ───────────────────────────────
Con `minmax(0,1fr) auto` il valore lungo (le righe totali sono una frase
di 120 caratteri) si prendeva tutta la colonna e schiacciava l'etichetta a
due lettere, che poi andava a capo lettera per lettera per via del
`word-break` di legacy. Le voci diventano righe impilate: etichetta sopra,
valore sotto a piena larghezza, separate da una hairline. */
.ui-stats-panel { max-width: 640px; }
.ui-stats-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
max-width: none;
padding: 0;
background: none;
border: 0;
}
.ui-stats-grid dt {
padding: var(--space-3) 0 0;
background: none;
border: 0;
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-text-faint);
word-break: normal;
}
.ui-stats-grid dd {
padding: 2px 0 var(--space-3);
margin: 0;
background: none;
border: 0;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
text-align: left;
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: var(--leading-snug);
color: var(--color-text-secondary);
overflow-wrap: anywhere;
word-break: normal;
}
.ui-stats-grid dd:last-child { border-bottom: 0; }
.ui-stats-title { text-align: left; }
.ui-stats-line, .ui-stats-hint { text-align: left; }
/* ── Piè di pagina ───────────────────────────────────────────────────── */
.app-footer { text-align: left; letter-spacing: 0; }
.footer-disclaimer, .vt-footer-live { text-align: center; }
/* ── Pallini origine/destinazione ────────────────────────────────────────
Nel markup vecchio erano agganciati a `.form-row--stations .form-group`,
contenitori che la ristrutturazione ha eliminato: le etichette PARTENZA e
ARRIVO erano rimaste senza. È l'unico punto dove verde e rosso codificano
un ruolo (da dove parti / dove arrivi), quindi vale la pena riportarli. */
/* Agganciati all'attributo `for`, non alla posizione: `:last-of-type` conta
per tipo di elemento, e l'ultimo
della griglia è il blocco del
bottone, non la stazione di arrivo — la pallina sarebbe rimasta verde su
entrambe. Il `for` è stabile anche se l'ordine dei campi cambia. */
label[for="origin-input"],
label[for="destination-input"] {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
label[for="origin-input"]::before,
label[for="destination-input"]::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
label[for="origin-input"]::before { background: var(--color-success); }
label[for="destination-input"]::before { background: var(--color-accent); }
/* ── Voce account attiva nel rail ────────────────────────────────────────
L'area Account non ha un `.tab-btn`: ci si arriva dal blocco utente in
fondo alla sidebar. Senza questa regola, aprendola, nessuna voce di
navigazione risultava selezionata e la sidebar sembrava "fuori sync". */
body[data-active-tab="account"] .rail__user {
background: var(--color-brand-muted);
}
body[data-active-tab="account"] .rail__username { color: var(--color-text); }
/* ── Indicatore live: allineamento verticale del testo ── */
.topbar__live { line-height: 1; }
/* ── Token dark superstiti ───────────────────────────────────────────────
`style.css` definisce, nel suo blocco tema scuro, alcune variabili che il
design system nuovo non ridefinisce. La più dannosa è `--shadow-brand`:
un alone BLU (rgba(108,155,210,.4)) ereditato dalla vecchia palette navy,
che legacy applica all'hover di #search-btn. In una console grafite+rosso
è un colore che non esiste da nessun'altra parte.
Le varianti `-soft` sono translucide e reggerebbero anche così, ma le
riportiamo sui colori giusti per non lasciare due sorgenti di verità. */
:root {
--shadow-brand: var(--shadow-md);
--color-success-soft: rgba(21, 128, 61, 0.08);
--color-danger-soft: rgba(173, 13, 39, 0.08);
--color-warning-soft: rgba(164, 90, 8, 0.08);
--color-info-soft: rgba(29, 78, 216, 0.08);
}
:root[data-theme="dark"] {
--shadow-brand: var(--shadow-md);
--color-success-soft: rgba(74, 222, 128, 0.10);
--color-danger-soft: rgba(242, 80, 107, 0.10);
--color-warning-soft: rgba(251, 191, 36, 0.10);
--color-info-soft: rgba(96, 165, 250, 0.10);
}
/* Il micro-sollevamento all'hover: in una riga di controlli allineati fa
ballare l'unico bottone rosso rispetto agli input accanto. */
#search-btn:hover:not(:disabled),
#search-btn:active:not(:disabled) {
transform: none;
box-shadow: none;
}
/* =============================================================================
24. SECONDO GIRO DI CORREZIONI
========================================================================== */
/* ── Bottoni in maiuscolo dentro le tabelle ──────────────────────────────
Legacy applica `text-transform: uppercase` a `.btn-monitor`: nella riga dei
risultati compariva "MONITORA" mentre ogni altro bottone della pagina
("Cerca", "Aggiorna", "Attiva notifiche") è in caso frase. Il maiuscolo
resta dove codifica uno STATO (i badge), non dove è un'azione. */
.btn-monitor { text-transform: none; letter-spacing: 0; }
/* I badge invece lo tengono, ma dichiarato qui invece di ereditato: è una
scelta del design system, non un residuo. */
.badge, .pill, .chip, .tag { text-transform: uppercase; }
/* ── Colonne numeriche allineate a destra ────────────────────────────────
Prezzo e posti sono quantità: incolonnati a destra si confrontano lungo la
verticale ("74" e "167" allineati a sinistra si leggevano come stringhe). */
#results-table th:nth-child(5), #results-table td[data-label="Prezzo min."],
#results-table th:nth-child(6), #results-table td[data-label="Posti"] {
text-align: right;
}
#results-table th:nth-child(7), #results-table td[data-label="Stato"],
#results-table th:nth-child(8), #results-table td[data-label="Azioni"] {
text-align: left;
}
/* ── Barra di stato su due righe ─────────────────────────────────────────
"Auto-refresh attivo" e il timestamp andavano a capo, portando la barra dei
controlli a ~68px: il doppio del necessario per una riga di strumenti.
Lo stato ha priorità di spazio, il timestamp tronca se serve. */
.status-bar { flex: 1 1 auto; min-width: 0; }
/* `0 1` e non `0 0`: gli strumenti conservano la loro dimensione naturale
finché c'è spazio — è lo stato ad assorbire il gioco, come da nota qui
sopra — ma restano COMPRIMIBILI. Con shrink 0 il gruppo era un blocco
rigido largo quanto il suo max-content (~600px): quando la colonna dei
contenuti scendeva sotto quella misura non si stringeva né mandava a capo
i propri controlli, sfondava e basta, trascinandosi dietro la larghezza
dell'intero documento (bug #150). Succedeva su mobile, ma anche attorno ai
900px, dove è il rail desktop a lasciare al contenuto meno di 600px: il
vincolo vero è la larghezza della colonna, non quella del viewport, quindi
non si può affidare a un solo breakpoint. `min-width: 0` toglie di mezzo la
min-width automatica (`auto` = contenuto), altrimenti lo shrink è nullo. */
.ctrlbar__group { flex: 0 1 auto; min-width: 0; }
.status-bar__text { flex-wrap: nowrap; overflow: hidden; }
.status-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-text { white-space: nowrap; }
@media (max-width: 900px) {
.status-bar { flex: 1 1 100%; }
.status-bar__text { flex-wrap: wrap; }
/* Qui la barra di stato prende già una riga intera, quindi il gruppo
strumenti è solo sulla sua: deve poterla riempire E restringersi.
Con la regola desktop (`flex: 0 0 auto`) la base è il max-content dei
cinque controlli — ~600px — e shrink 0 la rende incomprimibile: il
`flex-wrap: wrap` del gruppo non scattava MAI, perché niente lo
stringeva sotto quella misura. A 390px il gruppo restava largo 606px e
trascinava con sé l'intero documento, portando fuori viewport metà dei
controlli e dei risultati (bug #150). Il `min-width: 0` serve perché la
min-width automatica di un flex item è `auto`, cioè il suo contenuto:
senza, il flex-basis 100% verrebbe di nuovo scavalcato dal max-content. */
.ctrlbar__group { flex: 1 1 100%; min-width: 0; }
}
/* ── Indicatore di sezione attiva nel rail ───────────────────────────────
La barra rossa era larga 3px e cadeva a 2px dal bordo del rail: praticamente
invisibile. Diventa un blocco pieno a filo del bordo, alto quanto la voce. */
.rail .tab-btn.active::before {
left: calc(var(--space-3) * -1);
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 100%;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* =============================================================================
25. CONFRONTO CON ARCHIVIO (blocco `oh-*`)
-----------------------------------------------------------------------------
Era il punto più illeggibile della vista risultati: un muro di testo giusti-
ficato dentro la riga di dettaglio, con un marker BLU davanti al titolo
(unico blu di tutta l'interfaccia) e voci di elenco lunghe una riga intera.
Resta denso per natura — è testo generato — ma acquista struttura.
========================================================================== */
.offer-history-block {
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: none;
}
.offer-history-block .oh-title {
font-family: var(--font-sans);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-text-faint);
margin-bottom: var(--space-3);
gap: 0;
}
/* Il marker blu: non appartiene alla palette e duplicava la funzione del
titolo, che ora è già un'etichetta di sezione. */
.offer-history-block .oh-title::before { content: none; }
.offer-history-block .oh-lead {
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
color: var(--color-text-secondary);
max-width: 100ch;
}
.offer-history-block .oh-lead strong {
font-weight: var(--weight-semi);
color: var(--color-text);
}
.offer-history-block .oh-compare {
display: block;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-warning-br);
border-left: 3px solid var(--color-warning);
border-radius: var(--radius-md);
background: var(--color-warning-bg);
color: var(--color-warning);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
}
.offer-history-block .oh-compare strong {
font-family: var(--font-mono);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
}
/* Il ⚠ stava incollato alla prima parola. */
.offer-history-block .oh-compare::before { margin-right: var(--space-2); font-size: 1em; }
/* Voci: tag di stato + testo, separate da hairline come le righe di tabella. */
.offer-history-block .oh-item {
display: flex;
align-items: baseline;
gap: var(--space-2);
flex-wrap: wrap;
padding: var(--space-2) 0;
font-size: var(--text-xs);
line-height: var(--leading-snug);
color: var(--color-text-secondary);
}
.offer-history-block .oh-item strong {
font-weight: var(--weight-semi);
color: var(--color-text);
}
.offer-history-block .oh-item.oh-gone { color: var(--color-text-secondary); }
.offer-history-block .oh-tag {
flex-shrink: 0;
margin-right: 0;
padding: 1px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 10px;
font-weight: var(--weight-semi);
letter-spacing: var(--tracking-wide);
line-height: 1.6;
}
.offer-history-block .oh-item.oh-still .oh-tag {
background: var(--color-success-bg);
border-color: var(--color-success-br);
color: var(--color-success);
}
.offer-history-block .oh-item.oh-gone .oh-tag {
background: var(--color-oh-gone-bg);
border-color: var(--color-warning-br);
color: var(--color-oh-gone);
}
.offer-history-block .oh-more__toggle {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
}
.offer-history-block .oh-more__toggle:hover { color: var(--color-accent); }
/* ── Riga di dettaglio: superficie incassata ─────────────────────────────
Il dettaglio espanso è contenuto DENTRO una riga: va letto come un livello
sotto, non come un'altra scheda alla pari della tabella. */
.detail-row > td { background: var(--color-surface-sunken); }
.detail-inner { padding: var(--space-4); }
/* =============================================================================
26. SOLLEVAMENTI ALL'HOVER
-----------------------------------------------------------------------------
Legacy anima diversi elementi con `translateY(-1px/-2px)` in hover, eredità
del linguaggio "card che galleggia". In una console piatta il feedback di
hover è il cambio di superficie: il micro-salto fa ballare gli elementi
rispetto a quelli allineati accanto ed è l'unico movimento della pagina.
`.bug-fab` è escluso di proposito: è un pulsante flottante, lì il
sollevamento appartiene al componente.
========================================================================== */
.btn--primary:hover:not(:disabled),
.train-status-form__submit .btn:hover,
.ts-info-block:hover,
.an-route-card:hover,
#tab-analytics .an-route-card:hover,
.offer-card:hover {
transform: none;
}
/* Sostituito da un feedback coerente col resto: la superficie si alza, non
l'elemento. */
.offer-card:hover,
.ts-info-block:hover,
.an-route-card:hover { background: var(--color-surface-hover); }
/* =============================================================================
27. RIFINITURE VISTA RISULTATI
========================================================================== */
/* Le schede offerta hanno titoli di lunghezza molto diversa ("BUSINESS — BASE"
contro "BUSINESS AREA SILENZIO — BASE"): senza altezza comune la griglia
diventa a denti di sega. */
.offers-grid { align-items: stretch; }
.offer-card { display: flex; flex-direction: column; }
.offer-name { min-height: 2.2em; }
/* Ombra sulla topbar quando la pagina è scrollata: senza, il contenuto che le
passa sotto sembra tagliato a metà invece che coperto. */
.topbar { box-shadow: 0 1px 0 var(--color-border); }
/* =============================================================================
28. VARIABILI FANTASMA
-----------------------------------------------------------------------------
`style.css` usa 4 custom property che NON sono mai state definite in nessun
foglio (il token giusto si chiama diversamente: `--color-muted`, non
`--color-text-muted`). Ogni uso cadeva quindi sul valore di fallback
scritto a mano, che non segue il tema:
--color-text-muted 14 usi → #64748b fisso: grigio scuro anche su fondo
scuro, nei chip sciopero e nei meta.
--color-surface-2 1 uso → rgba(255,255,255,.05): invisibile in tema
chiaro, il badge "ritardo stale" restava
senza sfondo.
--color-success-muted 1 uso → #e6f7ee fisso: verde chiaro su testo verde
chiaro in tema scuro, illeggibile.
--color-link 1 uso → #60a5fa: l'unico blu rimasto in interfaccia.
Definirli come alias qui li ripara tutti e 17 in una volta, in entrambi i
temi, senza toccare le call site.
========================================================================== */
:root {
--color-text-muted: var(--color-muted);
--color-surface-2: var(--color-surface-alt);
--color-success-muted: var(--color-success-bg);
--color-link: var(--color-accent);
}
/* =============================================================================
29. CONSOLE ADMIN
========================================================================== */
.admin-sidebar {
padding: 0;
box-shadow: none;
border-radius: var(--radius-lg);
overflow: hidden;
}
.admin-sidebar__head {
margin-bottom: 0;
padding: var(--space-3) var(--space-4);
background: var(--color-surface-alt);
border-bottom: 1px solid var(--color-border);
}
.admin-sidebar__title {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semi);
letter-spacing: 0.01em;
margin-bottom: 2px;
}
.admin-sidebar__sub {
font-size: var(--text-xs);
color: var(--color-text-faint);
line-height: var(--leading-snug);
}
.admin-sidebar__nav {
margin-top: 0;
padding: var(--space-2);
border-top: 0;
gap: 1px;
}
/* Stessa grammatica del rail principale, un gradino più leggera. */
.admin-nav-item {
height: 32px;
padding: 0 var(--space-3);
gap: var(--space-3);
font-size: var(--text-base);
border-radius: var(--radius-md);
}
.admin-nav-item svg { width: 16px; height: 16px; opacity: 1; color: var(--color-text-faint); }
.admin-nav-item.active {
background: var(--color-brand-muted);
color: var(--color-text);
font-weight: var(--weight-semi);
}
.admin-nav-item.active svg { color: var(--color-accent); }
/* Il contatore non si comprime più.
Legacy gli dava `flex: 0 999 auto` con `overflow: hidden`, per far cedere il
badge invece della label quando lo spazio manca. Ma un NUMERO tagliato non
è un troncamento: è un dato sbagliato letto come giusto ("10" che diventa
"0"). Cede la label, che ha già la sua ellissi ed è ancora riconoscibile. */
.admin-nav-item__count {
flex: 0 0 auto;
overflow: visible;
text-overflow: clip;
min-width: 18px;
padding: 1px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-alt);
color: var(--color-text-secondary);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
text-align: center;
}
.admin-nav-item.active .admin-nav-item__count {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-on-accent);
}
/* ── Sezioni ── */
.admin-section {
padding: var(--space-4);
box-shadow: none;
}
.admin-section__head {
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
}
.admin-section__title {
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-semi);
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.admin-section__sub {
font-size: var(--text-xs);
color: var(--color-text-secondary);
line-height: var(--leading-normal);
max-width: 80ch;
}
/* ── Chip sciopero: stessa geometria dei badge del design system ── */
.strike-chip, .strike-src, .admin-strike-group__badge {
padding: 1px var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--text-2xs);
font-weight: var(--weight-semi);
letter-spacing: 0.02em;
line-height: 1.6;
}
.strike-chip--sev-low, .strike-chip--past { color: var(--color-text-faint); }
.strike-chip--scheduled { color: var(--color-text-secondary); }
.admin-strike-card__title {
font-size: var(--text-md);
font-weight: var(--weight-semi);
letter-spacing: -0.01em;
}
.admin-strike-card__meta { color: var(--color-text-faint); }
.admin-strike-card__window-val,
.admin-strike-card__list-vals {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.admin-strike-card__desc {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-text-secondary);
}
/* Elimina è distruttivo ma è un ghost identico a "Notifica": senza segnale
le due azioni si equivalgono a colpo d'occhio. Il rosso compare all'hover,
quando l'intenzione è già espressa. */
[data-strike-delete]:hover:not(:disabled) {
background: var(--color-danger-bg);
color: var(--color-danger);
}
/* =============================================================================
30. TEMA SCURO — SUPERFICI CHIARE FISSE
-----------------------------------------------------------------------------
In `style.css` restano ~10 sfondi near-white scritti a mano SENZA controparte
in tema scuro: al buio diventano rettangoli bianchi in mezzo alla pagina.
Sono quasi tutti in Analisi (tracce delle barre, hover di tabella, celle
vuote della heatmap) e in Admin.
Le scale-dati vere (heatmap sequenziale `an-hm-cell[data-i=1..9]`, scala
divergente `an-seg-hm-d*`, badge categorici `an-af-*`/`an-vl-*`/`an-ad-*`)
restano intatte: sono codifiche semantiche, non superfici d'interfaccia.
Qui si toccano solo gli estremi NEUTRI di quelle scale, che devono seguire
la superficie e non il dato.
========================================================================== */
:root[data-theme="dark"] {
/* Traccia delle barre e celle neutre */
--an-neutral-surface: var(--color-surface-sunken);
}
:root[data-theme="dark"] .an-dl-bar-track,
:root[data-theme="dark"] .an-seg-hm-empty,
:root[data-theme="dark"] .an-hm-cell[data-i="0"],
:root[data-theme="dark"] #tab-analytics .an-hm-cell[data-i="0"],
:root[data-theme="dark"] .an-seg-hm-d0,
:root[data-theme="dark"] #tab-analytics .an-seg-hm-d0 {
background: var(--color-surface-sunken);
color: var(--color-text-secondary);
}
:root[data-theme="dark"] .an-seg-table tr:hover td {
background: var(--color-surface-hover);
}
:root[data-theme="dark"] .an-hm-legend__bar,
:root[data-theme="dark"] #tab-analytics .an-hm-legend__bar {
background: linear-gradient(90deg, var(--color-surface-sunken) 0%, #6366f1 55%, #991b1b 100%);
}
:root[data-theme="dark"] .admin-strike-card,
:root[data-theme="dark"] .admin-strike-form select,
:root[data-theme="dark"] .strike-badge--freight {
background: var(--color-surface);
color: var(--color-text);
}
/* =============================================================================
31. GEOMETRIA E SCALA — ULTIME INCOERENZE
========================================================================== */
/* Chip e badge a 10px di raggio: quasi pillole, contro i 3px di tutti gli
altri badge del sistema. */
.vt-board-chip, .vt-board-delay, .an-badge { border-radius: var(--radius-sm); }
/* I pannelli modali erano a 12px e 10px contro i 6px dei pannelli: su una
sovrapposizione la differenza si nota subito. */
.bug-modal__panel, .admin-modal__panel { border-radius: var(--radius-xl); }
.bug-toast { border-radius: var(--radius-lg); }
/* Titoli di riquadro fuori scala: 18.4px e 16.8px dove il sistema usa 13px
per i titoli di pannello e 15px per quelli di sezione. */
.ua-pane__title { font-size: var(--text-md); font-weight: var(--weight-semi); letter-spacing: -0.01em; }
.vt-extras-card__title { font-size: var(--text-sm); font-weight: var(--weight-semi); }