/* OpenCloud — Design tokens (Step 21, Phase 3) --------------------------------------------------------------------------- Token base + override per segmento. Si applica via data attribute sul o : . I valori "entrambi" (Superadmin, Autorita di vigilanza, utenti con $_SESSION['segmento']='entrambi') usano la palette Quadrista come default cross-segmento. 2026-04-30: forziamo la scrollbar verticale SEMPRE presente per evitare che le pagine corte (es. wizardAddQuadroV2) abbiano la card spostata di ~17px a destra rispetto alle pagine lunghe (dashboard). Garantisce allineamento orizzontale identico in tutte le pagine del menu utente. */ html { overflow-y: scroll; } /* I token derivano dalle varianti scelte nello style-guide: - quad-b "Industrial Steel" (preview/style-guide.html?v=quad-b) - mand-b "Diplomatic Silver" (preview/style-guide.html?v=mand-b) Tokens NON sostituiscono Bootstrap. Le componenti del design system (oc-design-system.css) li referenziano via var(--oc-*); per legacy si puo override le var Bootstrap con --bs-* dove serve (vedi sezione bridge). */ /* ===================================================================== 1. Token comuni (radius, shadow, scala tipografica, spacing) ===================================================================== */ :root { /* Radius */ --oc-radius-sm: 6px; --oc-radius: 10px; --oc-radius-lg: 14px; --oc-radius-pill: 999px; /* Shadow */ --oc-shadow-xs: 0 1px 2px rgba(0,0,0,.04); --oc-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04); --oc-shadow-lg: 0 10px 30px rgba(0,0,0,.08); --oc-shadow-focus: 0 0 0 3px var(--oc-primary-soft); /* Spacing scale (4px grid) */ --oc-space-1: 4px; --oc-space-2: 8px; --oc-space-3: 12px; --oc-space-4: 16px; --oc-space-5: 24px; --oc-space-6: 32px; --oc-space-7: 48px; --oc-space-8: 64px; /* Tipografia */ --oc-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --oc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --oc-fs-12: 12px; --oc-fs-13: 13px; --oc-fs-14: 14px; --oc-fs-15: 15px; --oc-fs-16: 16px; --oc-fs-18: 18px; --oc-fs-22: 22px; --oc-fs-28: 28px; --oc-fs-36: 36px; --oc-lh-tight: 1.2; --oc-lh-default: 1.5; --oc-lh-relaxed: 1.7; /* Animazioni */ --oc-transition-fast: .12s ease-out; --oc-transition-default: .15s ease-out; --oc-transition-slow: .25s ease-out; /* Z-index scale */ --oc-z-dropdown: 1000; --oc-z-sticky: 1020; --oc-z-fixed: 1030; --oc-z-modal-backdrop: 1040; --oc-z-modal: 1050; --oc-z-popover: 1060; --oc-z-tooltip: 1070; --oc-z-tip-panel: 1110; /* slide-out tips + aiuto in linea: sono modali (backdrop), devono stare SOPRA i banner sticky (max 1100, inline in specificFunctions.php) e la confirm modal (1100), altrimenti il banner copre l'header e la X di chiusura. Era 1080. */ /* 2026-05-21: --oc-hover alias derivato. Definito una sola volta come "stessa tinta usata su row:hover / btn pressed / pagebar:link:hover". var() risolve al momento dell'uso, quindi eredita --oc-bg-tint corrente (light/dark + segmento) senza ridichiarare in ogni blocco. Prima --oc-hover non esisteva: cascate da fallback hardcoded (#f8f9fa) facevano apparire bianchi i row:hover di vediClienti/vediUtenti in dark mode, incoerenti con vediQuadri/vediDocumenti/platformAdmin. */ --oc-hover: var(--oc-bg-tint); } /* ===================================================================== 2. Default cross-segment (entrambi -> Quadrista B "Industrial Steel") Applica anche se non c'e data-segment, cosi i componenti hanno sempre un fallback consistente. ===================================================================== */ :root, [data-segment="entrambi"], [data-segment="quadrista"] { /* === Palette === */ --oc-primary: #1B3B5F; --oc-primary-dark: #0F2540; --oc-primary-soft: #DCE3EC; --oc-accent: #F4B400; --oc-accent-soft: #FFF6D4; --oc-accent-dark: #C68F00; --oc-bg: #ECEFF4; --oc-bg-tint: #E0E5ED; --oc-surface: #FFFFFF; --oc-surface-alt: #F7F8FA; --oc-text: #1A1F2E; --oc-text-muted: #4A5568; --oc-text-on-primary: #FFFFFF; --oc-text-on-accent: #1A1F2E; --oc-border: #C4CCD7; --oc-border-soft: #E1E5EC; --oc-divider: #ECEFF4; /* Stato semantico */ --oc-success: #15803D; --oc-success-soft: #DCFCE7; --oc-warning: #D97706; --oc-warning-soft: #FEF3C7; --oc-danger: #B91C1C; --oc-danger-soft: #FEE2E2; --oc-info: #1B3B5F; --oc-info-soft: #DCE3EC; /* Mood metadata (debug/showcase) */ --oc-mood-name: "Industrial Steel"; --oc-mood-tag: "Officina solida \\B7 acciaio industriale"; --oc-segment-label: "Quadrista"; } /* ===================================================================== 3. Mandatario B "Diplomatic Silver" ===================================================================== */ [data-segment="mandatario"] { --oc-primary: #003399; --oc-primary-dark: #002277; --oc-primary-soft: #E6EBF5; --oc-accent: #6B7B95; --oc-accent-soft: #E8ECF1; --oc-accent-dark: #4A5A75; --oc-bg: #F4F6FA; --oc-bg-tint: #E5EAF2; --oc-surface: #FFFFFF; --oc-surface-alt: #F7F9FC; --oc-text: #1A1A2E; --oc-text-muted: #525B71; --oc-text-on-primary: #FFFFFF; --oc-text-on-accent: #FFFFFF; --oc-border: #C9D1DE; --oc-border-soft: #E5E9F0; --oc-divider: #F0F2F7; --oc-success: #0F7A3F; --oc-success-soft: #DCFCE7; --oc-warning: #C8800A; --oc-warning-soft: #FEF3C7; --oc-danger: #B22C2C; --oc-danger-soft: #FEE2E2; --oc-info: #003399; --oc-info-soft: #E6EBF5; --oc-mood-name: "Diplomatic Silver"; --oc-mood-tag: "Europeo moderno \\B7 blu UE + argento"; --oc-segment-label: "Mandatario"; } /* ===================================================================== 3b. Neutro "Warm Slate" Usato sulla login page pubblica prima che l'utente venga riconosciuto (per email lookup) o quando il segmento e ignoto/superadmin/autorita. ===================================================================== */ [data-segment="neutro"] { --oc-primary: #475569; --oc-primary-dark: #1E293B; --oc-primary-soft: #E2E8F0; --oc-accent: #D4A574; --oc-accent-soft: #F5E6D3; --oc-accent-dark: #B08555; --oc-bg: #F8FAFC; --oc-bg-tint: #F1F5F9; --oc-surface: #FFFFFF; --oc-surface-alt: #F8FAFC; --oc-text: #0F172A; --oc-text-muted: #64748B; --oc-text-on-primary: #FFFFFF; --oc-text-on-accent: #1F1A12; --oc-border: #E2E8F0; --oc-border-soft: #F1F5F9; --oc-divider: #F1F5F9; --oc-success: #15803D; --oc-success-soft: #DCFCE7; --oc-warning: #B45309; --oc-warning-soft: #FEF3C7; --oc-danger: #B91C1C; --oc-danger-soft: #FEE2E2; --oc-info: #475569; --oc-info-soft: #E2E8F0; --oc-mood-name: "Warm Slate"; --oc-mood-tag: "Neutro caldo \\B7 slate + sand"; --oc-segment-label: "OpenCloud"; } /* ===================================================================== 4. Bridge Bootstrap 5 — opt-in via classe oc-bs-bridge sul Sostituisce le primary/secondary di Bootstrap con i token mood. Non attivato di default per non rompere le pagine legacy: si abilita selettivamente in Step 22 quando il wrapper viene riscritto. ===================================================================== */ .oc-bs-bridge { --bs-primary: var(--oc-primary); --bs-primary-rgb: 27, 59, 95; /* fallback statico per quad-b */ --bs-link-color: var(--oc-primary); --bs-link-hover-color: var(--oc-primary-dark); --bs-body-bg: var(--oc-bg); --bs-body-color: var(--oc-text); --bs-border-color: var(--oc-border); } .oc-bs-bridge[data-segment="mandatario"] { --bs-primary-rgb: 0, 51, 153; } /* ===================================================================== 5. Scope helper: forzare un mood su una sottosezione

...

per scope locale, utile per anteprime o admin che gestiscono entrambi i segmenti. ===================================================================== */ .oc-mood-quadrista { /* alias di [data-segment="quadrista"] */ --oc-primary: #1B3B5F; --oc-primary-dark: #0F2540; --oc-primary-soft: #DCE3EC; --oc-accent: #F4B400; --oc-accent-soft: #FFF6D4; --oc-accent-dark: #C68F00; } .oc-mood-mandatario { --oc-primary: #003399; --oc-primary-dark: #002277; --oc-primary-soft: #E6EBF5; --oc-accent: #6B7B95; --oc-accent-soft: #E8ECF1; --oc-accent-dark: #4A5A75; } /* ===================================================================== 6. Reduced motion: rispetta prefers-reduced-motion ===================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --oc-transition-fast: 0s; --oc-transition-default: 0s; --oc-transition-slow: 0s; } } /* ===================================================================== 7. DARK MODE — palette dark per [data-bs-theme="dark"] (2026-05-21) --------------------------------------------------------------------- Strategia: ridichiariamo tutti i token di colore (bg/surface/text/border/ stato semantico) per il tema dark, e i token primary/accent vengono schiariti per restare leggibili su sfondo scuro. Mantengono la stessa semantica del light: i componenti che usano var(--oc-text), var(--oc-bg) ecc. ereditano automaticamente, senza richiedere [data-bs-theme] sui selettori. I segmenti mandatario/neutro applicano override solo su primary/accent/ info e relativi soft, perche' la palette neutra (bg/text/border) e' la stessa per tutti e tre i mood in dark. ===================================================================== */ [data-bs-theme="dark"], [data-bs-theme="dark"][data-segment="entrambi"], [data-bs-theme="dark"][data-segment="quadrista"] { /* === Background hierarchy === */ --oc-bg: #0E1218; --oc-bg-tint: #161B26; --oc-surface: #1E2533; --oc-surface-alt: #252D3D; /* === Testi === */ --oc-text: #E8EAED; --oc-text-muted: #9BA4B5; --oc-text-on-primary: #0E1218; /* testo SCURO sul primary chiaro in dark */ --oc-text-on-accent: #1A1F2E; /* === Bordi === */ --oc-border: #2C3548; --oc-border-soft: #232A3A; --oc-divider: #1A2030; /* === Primary (Industrial Steel) — chiaro abbastanza da essere leggibile come TEXT su sfondo scuro (4.8:1 vs --oc-bg-tint). I bottoni primary compensano usando testo SCURO (--oc-text-on-primary qui ridefinito). === */ --oc-primary: #5C8AC4; --oc-primary-dark: #7BA5DC; --oc-primary-soft: #1A2840; /* === Accent (giallo) — saturazione invariata, soft scuro === */ --oc-accent: #F4B400; --oc-accent-soft: #2E2412; --oc-accent-dark: #FFC233; /* === Stato semantico — toni piu' chiari per contrasto su scuro === */ --oc-success: #34D399; --oc-success-soft: #0F2E1F; --oc-warning: #FBBF24; --oc-warning-soft: #2E2412; --oc-danger: #F87171; --oc-danger-soft: #2E1A1C; --oc-info: #5B8AC7; --oc-info-soft: #1A2840; /* === Shadow — piu' marcate su sfondo scuro === */ --oc-shadow-xs: 0 1px 2px rgba(0,0,0,.30); --oc-shadow: 0 1px 3px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.30); --oc-shadow-lg: 0 10px 30px rgba(0,0,0,.50); } /* Mandatario dark — override solo primary/accent/info + soft. Primary chiaro per leggibilita' come TEXT; testo scuro sui bottoni. */ [data-bs-theme="dark"][data-segment="mandatario"] { --oc-primary: #7B8FE5; --oc-primary-dark: #98ACEE; --oc-primary-soft: #1B2245; --oc-accent: #B4BFD0; --oc-accent-soft: #1F2435; --oc-accent-dark: #D3DCEA; --oc-info: #7B8FE5; --oc-info-soft: #1B2245; } /* Neutro dark — warm slate scurito. Primary chiaro: testo sul bottone primary deve essere scuro per WCAG AA. */ [data-bs-theme="dark"][data-segment="neutro"] { --oc-primary: #94A3B8; --oc-primary-dark: #B5C0D0; --oc-primary-soft: #1F2530; --oc-text-on-primary: #0E1218; --oc-accent: #E0B380; --oc-accent-soft: #2E2418; --oc-accent-dark: #F3CC9F; --oc-info: #94A3B8; --oc-info-soft: #1F2530; } /* Bridge Bootstrap in dark: aggiorna anche --bs-primary-rgb per i ramoni di Bootstrap che usano rgb diretto (es. button focus shadow). */ .oc-bs-bridge[data-bs-theme="dark"] { --bs-primary-rgb: 92, 138, 196; /* var(--oc-primary) #5C8AC4 */ } .oc-bs-bridge[data-bs-theme="dark"][data-segment="mandatario"] { --bs-primary-rgb: 123, 143, 229; /* #7B8FE5 */ } .oc-bs-bridge[data-bs-theme="dark"][data-segment="neutro"] { --bs-primary-rgb: 148, 163, 184; /* #94A3B8 */ }