/* ── Design tokens ────────────────────────────────────────────────────────────
SPOSTATI in assets/sg/tokens.css il 2026-08-20 — valori invariati.
Gli @import stanno qui, e non in ognuna delle 14 pagine, perche' shell.css
e' l'unico file che TUTTE le pagine caricano: le 5 del core e le 9 app, e
queste ultime vivono in un altro repo. Finche' e' cosi', questa e' la porta
d'ingresso della libreria e si aggiorna in un punto solo.
Costo: due richieste in fila in piu' al primo caricamento (poi in cache
un'ora sui server dei clienti). Per toglierlo: due nelle 14 pagine e
si cancellano queste due righe. */
@import url('/assets/sg/tokens.css');
@import url('/assets/sg/components.css');
/* ── Reset base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* ── Utility ───────────────────────────────────────────────────────────────── */
.is-hidden { display: none !important; }
/* ── Wrapper app ───────────────────────────────────────────────────────────── */
.shell-app {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
/* ── Il guscio della pagina ────────────────────────────────────────────────
ARRIVATO QUI da assets/css/captain.css il 2026-08-20 (spec § 6). Non erano
regole della Console: sono di tutte e 14 le pagine. `topbar.html` non sta
nell'HTML di nessuna pagina — lo inietta a runtime `portal-topbar.js`, che
e' su 13 pagine su 14 — quindi a leggere solo gli HTML queste classi
sembrano morte. Non lo sono: sono le piu' vive del portale.
Gli alias `--c-*` sono stati sciolti nei token veri, che valgono ESATTAMENTE
lo stesso: `--c-bg` e' `var(--color-bg-canvas)`, `--c-primary` e'
`var(--color-brand-primary)` — e `theme.js` li imposta tutti e due insieme
col colore del cliente. Cosi' il guscio non dipende piu' da captain.css.
Il nome `.captain-body` resta: e' scritto nel di 12 pagine, 9 delle
quali in un altro repo. Si puo' solo aggiungere, mai rinominare. */
body.captain-body {
margin: 0;
background: var(--color-bg-canvas);
color: var(--color-text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
font-size: var(--type-sm, 14px);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.topbar-console {
position: sticky;
top: 0;
z-index: 1020;
height: var(--shell-topbar-h, 56px);
background: var(--color-brand-primary);
color: var(--color-text-inverse);
display: flex;
align-items: center;
gap: 1rem;
padding: 0 1rem;
box-shadow: var(--shadow);
}
.topbar-console h1 {
margin: 0;
font-size: var(--type-xl, 20px);
font-weight: 600;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-right {
display: flex;
align-items: center;
gap: .75rem;
font-size: .9rem;
min-width: 0;
}
.topbar-right .admin-name {
color: rgba(255,255,255,.95);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 18ch;
}
/* Su telefono la topbar si stringe: via il marchio e il nome utente, o la
pagina va in overflow orizzontale. */
@media (max-width: 600px) {
.topbar-console { gap: .5rem; padding: 0 .65rem; }
.topbar-console .sg-wordmark,
.topbar-console .sg-topbar-sep,
.topbar-right .admin-name { display: none; }
}
.theme-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.18);
border: none;
color: var(--color-text-inverse);
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.theme-btn:hover { background: rgba(255,255,255,.3); }
/* Il corpo sotto la topbar. */
.captain-content {
padding: 1.5rem 1rem;
}
/* ── Topbar ────────────────────────────────────────────────────────────────
La barra vera e' `.topbar-console`, dichiarata in captain.css: e' quella che
scrive il componente condiviso /assets/components/topbar.html, montato a
runtime da portal-topbar.js su tutte le pagine.
Qui c'erano `.shell-topbar` e `.shell-topbar-title`, con un commento che
diceva di essere quel componente. Non era vero da quando la topbar e'
diventata condivisa (2026-05-24): il file che aggiungeva la classe,
`portal-header.js`, non esiste piu'. Nessun HTML, JS o CSS le nominava —
ne' nel core, ne' in apps/, ne' nei checkout di bartoli, ciambella e
conchiara. Tolte il 2026-08-21 (scheda CORE-LIBRERIA-DEBITO, voce 7).
`--shell-topbar-h` NON e' morto e resta: lo usano captain.css e l'app VC. */
/* ── Hamburger ─────────────────────────────────────────────────────────────── */
.shell-menu-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--shell-text);
font-size: 1.25rem;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, transform .15s var(--ease-out);
}
.shell-menu-btn:hover { background: var(--shell-hover-bg); }
.shell-menu-btn:active { transform: scale(0.97); }
/* ── Backdrop ──────────────────────────────────────────────────────────────── */
.menu-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(0,0,0,.4);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.menu-drawer-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
/* ── Sidebar drawer ────────────────────────────────────────────────────────── */
.shell-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1050;
width: var(--shell-sidebar-w);
background: var(--shell-primary-dark);
color: var(--shell-text);
display: flex;
flex-direction: column;
transform: translateX(-100%);
/* Curva "drawer" iOS: decelera dolce a fine corsa (più premium del .22s ease). */
transition: transform .27s var(--ease-drawer);
overflow-y: auto;
/* Mai scroll orizzontale: contenuti lunghi (es. email supporto) vanno a capo,
non allargano la sidebar. (overflow-y:auto da solo promuove overflow-x a
auto → comparirebbe la scrollbar orizzontale.) */
overflow-x: hidden;
}
.shell-sidebar.is-open { transform: translateX(0); }
/* ── Header sidebar ────────────────────────────────────────────────────────── */
.shell-sidebar-header {
display: flex;
align-items: center;
gap: 10px;
padding: 18px var(--space-6);
border-bottom: 1px solid rgba(255,255,255,.1);
flex-shrink: 0;
}
/* ── Nav ───────────────────────────────────────────────────────────────────── */
.shell-sidebar-nav {
flex: 1;
padding: .5rem 0;
}
.shell-nav-item {
display: flex;
align-items: center;
gap: .6rem;
padding: 11px var(--space-6);
color: var(--shell-text-muted);
cursor: pointer;
transition: background .15s, color .15s;
user-select: none;
}
.shell-nav-item:hover {
background: var(--shell-hover-bg);
color: var(--shell-text);
}
.shell-nav-item.is-active {
background: var(--shell-active-bg);
color: var(--color-accent);
font-weight: 600;
}
.shell-nav-empty {
color: rgba(255,255,255,.5);
font-size: .85rem;
cursor: default;
}
.shell-nav-item:focus-visible,
.shell-menu-btn:focus-visible {
outline: 2px solid rgba(255,255,255,.8);
outline-offset: 2px;
}
.shell-nav-icon { font-size: 1rem; flex-shrink: 0; }
/* Il testo della voce può restringersi e andare a capo: senza min-width:0 un
flex-child non scende sotto la larghezza del suo contenuto, e un token lungo
senza spazi (l'email di supporto) sforerebbe la sidebar. */
.shell-nav-item > span:not(.shell-nav-icon) {
min-width: 0;
overflow-wrap: anywhere;
}
/* ── Footer sidebar ────────────────────────────────────────────────────────── */
.shell-sidebar-footer {
border-top: 1px solid rgba(255,255,255,.1);
flex-shrink: 0;
}
.shell-nav-logout { color: rgba(255,180,180,.8); }
.shell-nav-logout:hover { color: #fff; background: rgba(220,53,69,.3); }
/* ── Brand SmartGate (riusabile su sidebar e topbar scure) ─────────────────── */
.sg-star {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.sg-wordmark {
font-size: var(--type-xl);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1;
}
.sg-w-smart { color: #fff; }
.sg-w-gate { color: var(--sg-cyan); } /* brand-locked: non cambia col tema */
.sg-brand-inline {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: inherit;
}
.sg-brand-inline:hover .sg-w-smart { color: rgba(255,255,255,.85); }
.sg-topbar-sep {
color: rgba(255,255,255,.4);
margin: 0 4px;
user-select: none;
}
/* ── Shepherd.js theme integration ────────────────────────────────────────── */
/* Override del CSS base di Shepherd per matchare il sistema temi del portale.
Vedi assets/vendor/shepherd/shepherd.css per la base. */
.shepherd-element {
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
border-radius: 8px;
}
.shepherd-header {
background: transparent;
color: var(--fg);
border-bottom: 1px solid var(--border);
padding: 0.75rem 0.875rem;
}
.shepherd-title { color: var(--fg); font-weight: 600; }
.shepherd-text { color: var(--fg); padding: 0.75rem 0.875rem; }
.shepherd-footer { padding: 0.5rem 0.875rem 0.75rem; gap: 0.5rem; }
.shepherd-button {
background: var(--c-primary, #0d6efd);
color: #fff;
border: 0;
border-radius: 6px;
padding: 0.4rem 0.85rem;
cursor: pointer;
font-size: 0.875rem;
}
.shepherd-button:hover,
.shepherd-button:not(:disabled):hover { background: var(--c-primary-dark, #0a58ca); }
.shepherd-button.shepherd-button-secondary {
background: var(--surface-2);
color: var(--fg);
border: 1px solid var(--border);
}
.shepherd-button.shepherd-button-secondary:hover,
.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
background: var(--border);
color: var(--fg);
}
.shepherd-cancel-icon { color: var(--muted); }
.shepherd-cancel-icon:hover { color: var(--fg); }
.shepherd-arrow:before { background: var(--surface); border: 1px solid var(--border); }
.shepherd-modal-overlay-container { fill: rgba(0,0,0,0.5); }
/* Tema dark: rinforza il contrasto sul backdrop */
html[data-theme="dark"] .shepherd-modal-overlay-container { fill: rgba(0,0,0,0.65); }
html[data-theme="dark"] .shepherd-element { background: var(--surface-2); }
html[data-theme="dark"] .shepherd-arrow:before { background: var(--surface-2); }
/* ── Global footer (su tutte e 14 le pagine) ─────────────────────────────
FUSO il 2026-08-20. `.global-footer` era dichiarato due volte con la stessa
specificita', qui e in captain.css: siccome captain.css e' caricato dopo,
a schermo vinceva la sua. Qui sotto ci sono i valori CHE SI VEDEVANO —
`margin-top:auto`, il padding piu' alto in basso e il .78rem venivano da
captain.css; il fondo pagina veniva da qui. Bordo e colore del testo erano
gia' identici nelle due copie (`--c-border` E' `--color-border-default`).
Zero pixel di differenza: e' una fusione, non una scelta nuova. */
.global-footer {
border-top: 1px solid var(--color-border-default);
margin-top: auto;
padding: .9rem 1rem 1.2rem;
font-size: .78rem;
color: var(--color-text-secondary);
display: flex;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
background: var(--color-bg-canvas);
}
.footer-version-btn {
background: none;
border: 0;
padding: 0;
color: var(--color-text-secondary);
cursor: pointer;
font: inherit;
}
.footer-version-btn:hover { text-decoration: underline; }
.footer-link {
color: var(--color-accent-hover);
text-decoration: none;
}
.footer-link:hover { text-decoration: underline; }
/* Arrivata da captain.css il 2026-08-20. Il selettore tiene la `a` davanti
APPOSTA: pesa piu' della riga qui sopra, e per questo il colore che si vede
nel footer e' sempre stato il blu del marchio, non l'azzurro d'accento.
Toglierla farebbe cambiare colore a tutti i link del footer. */
a.footer-link {
color: var(--color-brand-primary);
text-decoration: none;
}
a.footer-link:hover { text-decoration: underline; }
/* -- About modal -- */
.about-modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
display: flex; align-items: center; justify-content: center;
z-index: 9000;
}
.about-modal {
background: var(--color-bg-surface);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0,0,0,.25);
max-width: 420px;
width: min(420px, 92vw);
padding: 0;
color: var(--color-text-primary);
}
.about-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: .9rem 1.1rem;
border-bottom: 1px solid var(--color-border-default);
}
.about-modal-head h2 { margin: 0; font-size: var(--type-md); }
.about-modal-close {
background: none; border: 0; font-size: 1.4rem; cursor: pointer;
color: var(--color-text-secondary);
}
.about-modal-body {
margin: 0; padding: 1rem 1.1rem;
display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem;
font-size: var(--type-sm);
}
.about-modal-body dt { font-weight: 600; color: var(--color-text-secondary); }
.about-modal-body dd { margin: 0; }
.about-modal-body code { font-family: ui-monospace, SFMono-Regular, monospace; }
.about-modal-foot {
padding: .8rem 1.1rem;
border-top: 1px solid var(--color-border-default);
text-align: right;
}
[data-theme="dark"] .about-modal {
background: var(--color-bg-surface);
}
/* -- Toasts -- */
.sg-toast-container {
position: fixed; right: 1rem; bottom: 1rem;
display: flex; flex-direction: column; gap: .5rem;
z-index: 9500;
}
.sg-toast {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: 8px;
padding: .65rem .85rem;
font-size: var(--type-sm);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
min-width: 220px;
}
.sg-toast-success {
background: var(--color-success-soft);
border-color: var(--color-success-border);
color: var(--color-success-text);
}
.sg-toast-error {
background: var(--color-danger-soft);
border-color: var(--color-danger-border);
color: var(--color-danger-text);
}
.sg-toast-info {
background: var(--color-info-soft);
border-color: var(--color-info-border);
color: var(--color-info-text);
}
/* ── PWA install invite (banner bottom, Variant A) ──────────────────────────── */
/* Banner fisso in basso, floating con margini, arrotondato. Adatta al dark theme
automaticamente tramite i token semantici. z-index 1200: sopra topbar (1030)
e sidebar (1050), sotto modali (9000) e toast (9500). */
.pwa-invite {
position: fixed;
bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
width: min(520px, calc(100vw - var(--space-8)));
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
z-index: 1200;
/* Visibile anche senza la classe --in (nessun JS = banner comunque leggibile). */
opacity: 1;
}
/* Entrata animata: slide-up + fade. Attiva solo quando il browser ammette
il motion; il banner resta comunque visibile nella stato "pre-entrata"
perché default opacity:1 è dichiarato sopra e l'offset si applica
solo all'interno di questa media-query. */
@media (prefers-reduced-motion: no-preference) {
.pwa-invite {
opacity: 0;
transform: translateX(-50%) translateY(12px);
transition:
opacity 220ms var(--ease-out),
transform 220ms var(--ease-out);
}
.pwa-invite.pwa-invite--in {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* Icona stella brand — eredita currentColor dai bottoni; forza il brand primary sul wrapper. */
.pwa-invite__icon {
color: var(--color-brand-primary);
flex-shrink: 0;
display: flex;
align-items: center;
line-height: 0;
}
/* Testo descrittivo: cresce per occupare lo spazio disponibile. */
.pwa-invite__text {
flex: 1;
min-width: 0;
font-size: 0.875rem;
line-height: 1.4;
color: var(--color-text-primary);
}
/* Bottone CTA "Installa": filled brand, tap target comodo (≥36px). */
.pwa-invite__cta {
flex-shrink: 0;
min-height: 36px;
padding: 0 var(--space-4);
background: var(--color-brand-primary);
color: var(--color-text-inverse);
border: none;
border-radius: var(--radius-md);
font-size: var(--type-sm);
font-weight: 600;
cursor: pointer;
transition: background 0.15s var(--ease-out), transform 0.1s var(--ease-out);
white-space: nowrap;
}
.pwa-invite__cta:hover { background: var(--color-brand-hover); }
.pwa-invite__cta:active { transform: scale(0.97); }
/* Via d'uscita dal banner: porta al profilo, dove l'installazione resta sempre
disponibile anche dopo aver chiuso questo avviso. Senza, la × era definitiva. */
.pwa-invite__how {
flex-shrink: 0;
min-height: 36px;
display: inline-flex;
align-items: center;
padding: 0 var(--space-2);
font-size: var(--type-sm);
font-weight: 600;
color: var(--color-brand-primary);
text-decoration: none;
white-space: nowrap;
}
.pwa-invite__how:hover { text-decoration: underline; }
.pwa-invite__how:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
.pwa-invite--ios .pwa-invite__how { align-self: flex-start; padding-left: 0; }
/* Bottone chiudi: discreto, solo colore secondario. */
.pwa-invite__close {
flex-shrink: 0;
min-width: 36px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-sm);
font-size: 1.2rem;
line-height: 1;
color: var(--color-text-secondary);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.pwa-invite__close:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
/* Focus visibile su entrambi i bottoni — anello brand, offset 2px. */
.pwa-invite__cta:focus-visible,
.pwa-invite__close:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
/* ── PWA iOS variant: passi numerati (colonna) ──────────────────────────────── */
/* Sostituisce il layout a riga del banner Android con un layout a colonna:
header con stella + titolo, poi lista ordinata di passi. Mantiene stessi
token di superficie, bordo, ombra, z-index e safe-area del banner base. */
.pwa-invite--ios {
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
position: fixed; /* ribadito per override specificity sul selettore più breve */
padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
}
/* Header: stella brand + titolo su una riga. */
.pwa-invite--ios .pwa-invite__hdr {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-primary);
padding-right: 28px; /* spazio per il bottone × posizionato in assoluto */
}
/* La stella nel header eredita il brand primary dal wrapper .pwa-invite__icon. */
.pwa-invite--ios .pwa-invite__icon {
color: var(--color-brand-primary);
flex-shrink: 0;
display: flex;
align-items: center;
line-height: 0;
}
/* Lista passi: reset del padding/marker nativo dell'. */
.pwa-invite--ios .pwa-invite__steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.84rem;
color: var(--color-text-primary);
}
/* Singolo passo: numero cerchiato + testo a capo se stretto. */
.pwa-invite--ios .pwa-invite__step {
display: flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
}
/* Numero cerchiato: sfondo brand primary, testo bianco, dimensione fissa. */
.pwa-invite--ios .pwa-invite__n {
flex-shrink: 0;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-brand-primary);
color: #fff;
border-radius: 50%;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
}
/* Icona share inline: brand primary, allineata alla baseline del testo. */
.pwa-invite__share {
display: inline-block;
vertical-align: -2px;
color: var(--color-brand-primary);
flex-shrink: 0;
}
/* Bottone chiudi sulla variante iOS: posizionato in assoluto top-right. */
.pwa-invite--ios .pwa-invite__close {
position: absolute;
top: 6px;
right: 8px;
min-width: 36px;
min-height: 36px;
}
/* ── Spinner inline per bottoni in stato busy ───────────────────────────────── */
.btn-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
vertical-align: -2px;
margin-right: .35rem;
animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }