/** * base.css * * Stili base C-UAS — reset, layout app, componenti glassmorphism core, * tipografia, form, bottoni, sidebar, pagina login, pagine errore. * * @module Design System * @version 1.0.0 * @since 2026-06-18 * @depends variables.css * * Changelog: * 1.3.4 2026-08-09 Fix mobile modal: .modal padding-top var(--cui-banner-h) + align-items * flex-start — header sticky .mission-modal__header era nascosto dietro il * CUI banner (z-index 10000 > modal 1000); .modal__content height usa 100dvh. * pwa-badge z-index 10001 (primo piano assoluto); top: var(--cui-banner-h) * su desktop (dinamico), mobile override mantiene +6px gap. * 1.3.3 2026-08-08 Fix mobile: html overflow-x: clip (non hidden) — evita spostamento layout * viewport su Chrome/Android che tagliava pwa-badge a destra; main-content * overflow-x: clip per non bloccare nested overflow-x: auto (tabelle dashboard); * body.has-modal-open pwa-badge hidden spostato a ≤1024px (copre tablet) * 1.3.2 2026-08-08 Mobile: CUI banner più compatto (font/padding ridotti, 2 righe meno alte); * pwa-badge nascosto quando modale aperta (body.has-modal-open) * 1.3.1 2026-08-08 Stili passkey login card (passkey-username-display) spostati da inline a qui * 1.3.0 2026-08-07 overflow-x: hidden su html/.app-layout/.main-content; hamburger/pwa-badge/ * padding-top usano var(--cui-banner-h) (da syncBannerHeight in app.js) * 1.2.0 2026-08-06 Fix mobile: hamburger e PWA badge sotto CUI banner (top: 37/44px) * 1.1.0 2026-06-23 NIST 800-171: CUI banner, idle warning * 1.0.0 2026-06-18 Prima versione — layout, glass components, login */ /* ========================================================================== RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; /* overflow-x: clip (non hidden) perché "hidden" su sposta il layout viewport su Chrome/Android, facendo posizionare i position:fixed (pwa-badge) parzialmente fuori schermo. "clip" previene lo scroll orizzontale senza creare un containing block separato per gli elementi fixed. */ overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary); background: var(--bg-primary); background-image: var(--bg-gradient); background-attachment: fixed; min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subtle grid texture overlay — command center feel */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 20% 30%, var(--accent-glow) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.04) 0%, transparent 50%); opacity: 0.6; } body > * { position: relative; z-index: 1; } a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-primary-hover); } a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); } ul, ol { list-style: none; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } /* ========================================================================== GLASS COMPONENTS ========================================================================== */ .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base); } .glass-card:hover { border-color: var(--glass-border-focus); box-shadow: var(--glass-shadow), 0 0 0 1px var(--accent-glow); } .glass-input { display: block; width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: var(--radius-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .glass-input:focus { outline: none; border-color: var(--accent-primary); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px var(--accent-glow); } .glass-input::placeholder { color: var(--text-muted); } /* Select e option — forza sfondo/testo coerenti con il tema */ select.glass-input { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } select.glass-input option { background: var(--bg-primary); color: var(--text-primary); padding: 8px 12px; } /* ========================================================================== TOOLBAR — Filtri condivisi per tutte le pagine con lista dati ========================================================================== */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); flex-wrap: wrap; } .toolbar__filters { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; flex: 1; } .toolbar__select { width: auto; min-width: 140px; max-width: 200px; padding: 8px 12px; font-size: var(--text-sm); flex: 0 1 auto; } .toolbar__search { min-width: 180px; flex: 1 1 180px; padding: 8px 12px; font-size: var(--text-sm); } /* ========================================================================== DATA TABLE — Tabella dati condivisa ========================================================================== */ .table-container { padding: 0; overflow-x: auto; border-radius: var(--radius-lg); } .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table thead { position: sticky; top: 0; z-index: 2; } .data-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); background: var(--glass-bg-strong); border-bottom: 1px solid var(--glass-border); white-space: nowrap; } .data-table td { padding: 10px 16px; border-bottom: 1px solid var(--glass-bg-subtle); vertical-align: middle; } .data-table tbody tr { transition: background var(--transition-fast); } .data-table tbody tr:hover { background: var(--glass-bg); } .data-table code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); } .table-empty { text-align: center; padding: var(--spacing-2xl) !important; color: var(--text-muted); } .text-muted { color: var(--text-muted); } /* ========================================================================== STATUS BADGES — Badge stato condivisi ========================================================================== */ .status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .status--ok { background: rgba(34, 197, 94, 0.15); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.3); } .status--warn { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.3); } .status--maint { background: rgba(59, 130, 246, 0.15); color: var(--color-info); border: 1px solid rgba(59, 130, 246, 0.3); } .status--error { background: rgba(239, 68, 68, 0.15); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.3); } /* ========================================================================== BADGES — Categoria, missione ========================================================================== */ .badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: var(--text-xs); font-weight: 700; font-family: var(--font-mono); } .badge--cat { background: var(--accent-glow); color: var(--accent-primary); border: 1px solid rgba(45, 212, 191, 0.2); } .badge--mission { background: rgba(239, 68, 68, 0.15); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.3); font-weight: 600; animation: pulse-mission 2s ease-in-out infinite; } @keyframes pulse-mission { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Badge varianti semantiche */ .badge--success { background: rgba(34, 197, 94, 0.15); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.25); } .badge--info { background: rgba(59, 130, 246, 0.15); color: var(--color-info); border: 1px solid rgba(59, 130, 246, 0.25); } .badge--warning { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.25); } .badge--neutral { background: var(--glass-bg-subtle); color: var(--text-muted); border: 1px solid var(--glass-border); } /* ========================================================================== ICON BUTTONS ========================================================================== */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass-bg); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); font-size: var(--text-sm); } .btn-icon:hover { background: var(--glass-bg-strong); color: var(--text-primary); border-color: var(--glass-border-focus); } .btn-icon:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .btn-primary { background: var(--accent-primary); color: var(--text-on-accent); box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-primary:hover { background: var(--accent-primary-hover); box-shadow: 0 0 30px var(--accent-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.2); transform: translateY(-1px); } .btn-secondary { background: var(--glass-bg); color: var(--text-primary); border-color: var(--glass-border); backdrop-filter: blur(8px); } .btn-secondary:hover { background: var(--glass-bg-strong); border-color: var(--glass-border-focus); } .btn-danger { background: var(--color-error); color: white; } .btn-danger:hover { filter: brightness(1.15); } .btn-block { width: 100%; } .btn-sm { padding: 6px 14px; font-size: var(--text-xs, 0.75rem); } .btn-warning { background: var(--color-warning); color: #1a1200; } .btn-warning:hover { filter: brightness(1.12); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ========================================================================== FORMS ========================================================================== */ .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; margin-bottom: var(--spacing-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); } .form-error { padding: var(--spacing-md); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); color: var(--color-error); font-size: var(--text-sm); } /* ========================================================================== APP LAYOUT ========================================================================== */ .app-layout { display: flex; min-height: 100vh; max-width: 100%; overflow-x: hidden; /* clip children that overflow viewport width */ } /* ── Sidebar ── */ /* Sidebar always dark — operational consistency across themes */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; display: flex; flex-direction: column; padding: var(--spacing-lg); z-index: 100; overflow-y: auto; background: var(--sidebar-bg); backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); border-right: 1px solid var(--sidebar-border); border-radius: 0; border-top: none; border-bottom: none; border-left: none; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); } .sidebar__header { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--sidebar-border); } .sidebar__logo { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--sidebar-accent); letter-spacing: 0.08em; text-shadow: 0 0 20px var(--sidebar-accent-glow); } .sidebar__version { font-size: var(--text-xs); color: var(--sidebar-text-muted); font-family: var(--font-mono); margin-top: 2px; } .sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: 2px; } .sidebar__link { display: flex; align-items: center; gap: var(--spacing-md); padding: 11px 14px; border-radius: var(--radius-md); color: var(--sidebar-text-muted); font-size: var(--text-sm); font-weight: 500; transition: all var(--transition-fast); border: 1px solid transparent; } .sidebar__link:hover { color: var(--sidebar-text); background: rgba(255, 255, 255, 0.08); } .sidebar__link--active { color: var(--sidebar-accent); background: var(--sidebar-accent-glow); border-color: rgba(45, 212, 191, 0.28); box-shadow: 0 0 20px var(--sidebar-accent-glow), inset 0 0 14px rgba(45, 212, 191, 0.06); font-weight: 700; } .sidebar__link--active:hover { color: var(--sidebar-accent-hover); background: var(--sidebar-accent-glow-strong); } .sidebar__link--logout { color: rgba(239, 68, 68, 0.7); } .sidebar__link--logout:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .sidebar__icon { font-size: var(--text-lg); width: 24px; text-align: center; opacity: 0.55; transition: opacity var(--transition-fast); } .sidebar__link:hover .sidebar__icon { opacity: 0.85; } .sidebar__link--active .sidebar__icon { opacity: 1; filter: drop-shadow(0 0 6px var(--sidebar-accent-glow)); } /* Section divider + label for grouped nav (e.g. Amministrazione) */ .sidebar__divider { height: 1px; background: var(--sidebar-border); margin: var(--spacing-md) 0 var(--spacing-sm); } .sidebar__section-label { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sidebar-text-muted); padding: 0 14px var(--spacing-xs); } .sidebar__footer { margin-top: auto; padding-top: var(--spacing-lg); border-top: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: var(--spacing-sm); } /* Overrides light theme: corregge valori rgba(255,255,255,...) hardcoded non scalabili */ [data-theme="light"] .sidebar { box-shadow: 4px 0 24px rgba(0, 20, 60, 0.10); } [data-theme="light"] .sidebar__link:hover { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .sidebar__link--active { border-color: rgba(13, 148, 136, 0.28); box-shadow: 0 0 20px var(--sidebar-accent-glow), inset 0 0 14px rgba(13, 148, 136, 0.06); } /* ── Main content ── */ .main-content { flex: 1; margin-left: var(--sidebar-width); padding: var(--spacing-xl) var(--spacing-2xl); min-height: 100vh; } .main-content__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--glass-border); } /* COMPONENTE: Header right — theme toggle + user-context Raggruppa icona tema e contesto identità sul lato destro dell'header. */ .header-right { display: flex; align-items: flex-start; gap: var(--spacing-sm); flex-shrink: 0; } .main-content__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; } /* --- User context bar (top-right, every page) --- */ .user-context { text-align: right; flex-shrink: 0; line-height: 1.4; } .user-context__clock { display: block; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .user-context__identity { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; font-family: var(--font-body); font-size: var(--text-base); color: var(--text-secondary); } .user-context__name { font-weight: 600; color: var(--text-primary); opacity: 0.85; } .user-context__role { text-transform: capitalize; } .user-context__unit { color: var(--accent-primary); font-weight: 600; } .user-context__separator { opacity: 0.35; } /* ========================================================================== LOGIN PAGE ========================================================================== */ .login-page { display: flex; flex-direction: column; min-height: 100vh; background: #0a0e17; background-image: radial-gradient(ellipse at 25% 40%, rgba(45, 212, 191, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(59, 130, 246, 0.05) 0%, transparent 55%), linear-gradient(145deg, #0a0e17 0%, #101829 40%, #0d1520 100%); } /* Override body::before ambient glow on login — login has its own */ .login-page::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(800px circle at 50% 45%, rgba(45, 212, 191, 0.04), transparent 60%); } .login-page > .cui-banner { flex-shrink: 0; position: relative; z-index: 2; } .login-page > .theme-toggle { z-index: 3; } .login-page .login-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); position: relative; z-index: 1; width: 100%; } .login-container { width: 100%; } .login-card { width: 100%; max-width: 400px; padding: var(--spacing-2xl) var(--spacing-xl); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .login-card__title { text-align: center; color: var(--accent-primary); margin-bottom: var(--spacing-xs); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: 0.08em; text-shadow: 0 0 30px var(--accent-glow); } .login-card__subtitle { text-align: center; color: rgba(255, 255, 255, 0.35); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--spacing-2xl); } /* Login always dark — override light theme on form elements */ .login-card .form-label { color: rgba(255, 255, 255, 0.50); } .login-card .glass-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.92); } .login-card .glass-input:focus { background: rgba(255, 255, 255, 0.08); border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.20); } .login-card .glass-input::placeholder { color: rgba(255, 255, 255, 0.20); } .login-card .btn-primary { margin-top: var(--spacing-sm); padding: 14px 24px; font-size: var(--text-base); letter-spacing: 0.04em; } .login-card .form-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #ef4444; margin-bottom: var(--spacing-md); } /* ========================================================================== ERROR PAGES ========================================================================== */ .error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--spacing-lg); } .error-container { max-width: 480px; padding: var(--spacing-2xl); text-align: center; } .error-container h1 { font-size: 4rem; color: var(--accent-primary); margin-bottom: var(--spacing-md); } .error-container p { color: var(--text-secondary); margin-bottom: var(--spacing-xl); } /* ========================================================================== DASHBOARD ========================================================================== */ .dashboard__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-lg); } .dashboard__card { padding: var(--spacing-xl); } .dashboard__card h3 { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; margin-bottom: var(--spacing-sm); } .dashboard__stat { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--accent-primary); } /* ========================================================================== MODAL — Componente globale (usato da systems, personnel, users) ========================================================================== */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal__content { position: relative; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; padding: 0; animation: fadeInUp 250ms ease both; } .modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg) var(--spacing-xl); border-bottom: 1px solid var(--glass-border); } .modal__header h3 { font-size: var(--text-lg); margin: 0; } .modal__close { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: color var(--transition-fast); } .modal__close:hover { color: var(--text-primary); } .modal__close:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .modal__body { padding: var(--spacing-xl); } .modal__footer { display: flex; justify-content: flex-end; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--glass-border); margin-top: var(--spacing-lg); } /* ========================================================================== ANIMATIONS ========================================================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 500ms cubic-bezier(0.22, 1, 0.36, 1) both; } @media (prefers-reduced-motion: reduce) { .animate-in { animation: none; opacity: 1; } } /* ========================================================================== ANIMATION DELAY UTILITIES Sostituiscono style="animation-delay: Nms" — F-001 CSP fix ========================================================================== */ .ad-80 { animation-delay: 80ms; } .ad-100 { animation-delay: 100ms; } .ad-120 { animation-delay: 120ms; } .ad-125 { animation-delay: 125ms; } .ad-150 { animation-delay: 150ms; } .ad-160 { animation-delay: 160ms; } .ad-200 { animation-delay: 200ms; } .ad-250 { animation-delay: 250ms; } .ad-300 { animation-delay: 300ms; } .ad-350 { animation-delay: 350ms; } .ad-400 { animation-delay: 400ms; } /* ========================================================================== VISIBILITY .is-hidden: visibilità iniziale — JS può sempre sovrascrivere via element.style.display (inline style vince sulla classe CSS) ========================================================================== */ .is-hidden { display: none; } /* ========================================================================== PASSWORD POLICY COMPONENT — NIST IA-L2-5 (F-001 CSP fix) ========================================================================== */ .password-policy { margin-bottom: 1.25rem; } .password-policy.glass-card { margin-bottom: 1.5rem; padding: 1rem; } .password-policy__title { font-weight: 600; margin-bottom: 0.5rem; } .password-policy__list { font-size: 0.85rem; padding-left: 1.2rem; margin: 0; line-height: 1.8; } .password-policy__text { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 0.5rem; } /* ========================================================================== LOGIN PAGE LAYOUT (F-001 CSP fix) ========================================================================== */ .login-card__footer { text-align: center; margin-top: 1.25rem; } .login-card__footer .login-footer__link { font-size: 0.875rem; } /* Separatore "oppure" tra bottone login e bottone crossauth */ .login-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); } /* -------------------------------------------------------------------------- PASSKEY LOGIN — username display pill nella card passkey -------------------------------------------------------------------------- */ .passkey-username-display { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); } .passkey-username-display__name { font-weight: 600; color: var(--text-primary); font-family: var(--font-body); word-break: break-all; } /* ========================================================================== CUI BANNER INLINE — variante locale (es. modali), non sticky (F-001 CSP fix) ========================================================================== */ .cui-banner--inline { position: static; width: auto; border-radius: var(--radius-sm); font-size: 0.75rem; padding: 0.5rem 0.75rem; margin-bottom: 1.25rem; } /* ========================================================================== UTILITY LAYOUT CLASSES (F-001 CSP fix) ========================================================================== */ .u-mt-075 { margin-top: 0.75rem; } .u-mt-1 { margin-top: 1rem; } .u-mt-125 { margin-top: 1.25rem; } .u-mb-1 { margin-bottom: 1rem; } .u-mb-125 { margin-bottom: 1.25rem; } .u-mb-15 { margin-bottom: 1.5rem; } .u-flex-end { display: flex; justify-content: flex-end; } .u-flex-end-gap { display: flex; gap: 0.75rem; justify-content: flex-end; } .u-fw-600 { font-weight: 600; } .u-tc-muted { color: var(--text-muted); } .u-tc-secondary { color: var(--text-secondary); } .u-tc-primary { color: var(--text-primary); } .u-tc-error { color: var(--color-error); } .u-fs-075 { font-size: 0.75rem; } .u-fs-078 { font-size: 0.78rem; } .u-fs-08 { font-size: 0.8rem; } .u-fs-082 { font-size: 0.82rem; } .u-fs-085 { font-size: 0.85rem; } .u-max-520 { max-width: 520px; } /* ========================================================================== HAMBURGER MENU ========================================================================== */ .hamburger { display: none; position: fixed; top: 12px; left: 12px; z-index: 200; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; } .hamburger__line { display: block; width: 100%; height: 2px; background: var(--text-primary); border-radius: 1px; transition: all var(--transition-fast); } .hamburger--active .hamburger__line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger--active .hamburger__line:nth-child(2) { opacity: 0; } .hamburger--active .hamburger__line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Overlay behind sidebar on mobile */ .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } .sidebar-overlay--visible { display: block; } /* ========================================================================== THEME TOGGLE ========================================================================== */ .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; align-items: center; gap: var(--spacing-sm); padding: 8px 12px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; transition: all var(--transition-fast); } .theme-toggle:hover { background: var(--glass-bg-strong); border-color: var(--glass-border-focus); color: var(--text-primary); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* Variante sidebar: inline, always dark chrome */ .theme-toggle--sidebar { position: static; width: 100%; justify-content: flex-start; margin-bottom: var(--spacing-sm); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); color: var(--sidebar-text-muted); } .theme-toggle--sidebar:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); } /* Variante header: icona inline nel main-content__header, non fixed */ .theme-toggle--header { position: static; padding: 7px 9px; backdrop-filter: none; -webkit-backdrop-filter: none; flex-shrink: 0; align-self: flex-start; } .theme-toggle--header .theme-toggle__label { display: none; } /* Icona: luna (scuro) / sole (chiaro) via CSS */ .theme-toggle__icon::before { content: '☀'; font-size: 1.1em; } [data-theme="light"] .theme-toggle__icon::before { content: '☾'; } /* ========================================================================== PUSH NOTIFICATIONS TOGGLE ========================================================================== */ /* COMPONENTE: Pulsante toggle notifiche push USO: sidebar — attiva/disattiva push per il device corrente DIPENDENZE: variables.css → --glass-border, --accent-primary, --text-secondary */ .push-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); color: var(--sidebar-text-muted, rgba(255, 255, 255, 0.45)); cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.8rem; font-family: inherit; text-align: left; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); margin-bottom: var(--spacing-sm); } .push-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); } .push-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* Stato attivo: notifiche abilitate */ .push-toggle[data-subscribed="1"] { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(62, 207, 207, 0.06); } .push-toggle[data-subscribed="1"]:hover { background: rgba(62, 207, 207, 0.12); } /* Tema chiaro — push toggle nel body (non in sidebar) */ [data-theme="light"] .push-toggle { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); } [data-theme="light"] .push-toggle:hover { background: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.8); } [data-theme="light"] .push-toggle[data-subscribed="1"] { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(62, 207, 207, 0.06); } /* Push toggle nella sidebar: usa sidebar-accent (bright teal) per leggibilità su sfondo sempre scuro, indipendentemente dal tema UI */ .sidebar .push-toggle[data-subscribed="1"] { border-color: var(--sidebar-accent); color: var(--sidebar-accent); background: var(--sidebar-accent-glow); } .sidebar .push-toggle[data-subscribed="1"]:hover { background: var(--sidebar-accent-glow-strong); } .sidebar .push-toggle:focus-visible { outline-color: var(--sidebar-accent); } /* ========================================================================== UTILITIES ========================================================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ========================================================================== RESPONSIVE — Tablet (max 1024px) ========================================================================== */ @media (max-width: 1024px) { .hamburger { display: flex; /* --cui-banner-h aggiornato da syncBannerHeight() in app.js: gestisce banner su 1 o 2 righe senza valori hardcoded. Fallback: 25px (definito in variables.css). */ top: calc(var(--cui-banner-h) + 6px); } .sidebar { transform: translateX(-100%); transition: transform var(--transition-base); z-index: 150; } .sidebar--open { transform: translateX(0); } .main-content { margin-left: 0; max-width: 100%; /* overflow-x: clip (non hidden): "hidden" crea un nuovo scroll container che azzera overflow-x: auto sui wrapper tabella interni (es. dashboard table-wrap). "clip" taglia visivamente senza creare lo scroll container. */ overflow-x: clip; padding: var(--spacing-lg); /* clearance = banner + 6px gap sopra hamburger + 44px altezza + 8px gap sotto */ padding-top: calc(var(--spacing-lg) + var(--cui-banner-h) + 58px); } /* Badge connettività e coda offline: traslati appena sotto il CUI banner */ .pwa-badge { top: calc(var(--cui-banner-h) + 6px); } .offline-queue-badge { top: calc(var(--cui-banner-h) + 52px); } .main-content__title { font-size: var(--text-xl); } .theme-toggle--sidebar { /* Rimosso dalla sidebar su mobile — toggle ora in main-content__header */ display: none; } /* pwa-badge nascosto quando la modale missione è aperta su tutti i dispositivi ≤1024px (il modal è fullscreen su mobile E tablet). La regola era prima solo in ≤640px, lasciando il badge visibile nell'header sticky su tablet e telefoni landscape. */ body.has-modal-open .pwa-badge, body.has-modal-open .offline-queue-badge { display: none; } } /* ========================================================================== RESPONSIVE — Mobile (max 640px) ========================================================================== */ @media (max-width: 640px) { /* CUI banner: font e padding ridotti per contenere le 2 righe di testo in meno altezza. syncBannerHeight() in app.js misura e aggiorna --cui-banner-h automaticamente. */ .cui-banner { font-size: 0.5rem; letter-spacing: 0.06em; line-height: 1.35; padding: 1px 6px; } .main-content { padding: var(--spacing-md); padding-top: calc(var(--spacing-md) + var(--cui-banner-h) + 58px); } .main-content__header { flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .header-right { width: 100%; align-items: center; } .user-context { text-align: left; flex: 1; display: flex; align-items: baseline; gap: var(--spacing-sm); flex-wrap: wrap; } .user-context__clock { font-size: var(--text-sm); } .user-context__identity { font-size: var(--text-xs); margin-top: 0; } .main-content__title { font-size: var(--text-lg); } .sidebar { width: 100%; max-width: 300px; } .login-card { padding: var(--spacing-xl) var(--spacing-lg); } .btn { padding: 12px 16px; min-height: 44px; } .toolbar { flex-direction: column; align-items: stretch; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); } .toolbar__filters { flex-direction: column; } .toolbar__select, .toolbar__search { min-width: 100%; max-width: 100%; flex: 1 1 100%; } .data-table { font-size: var(--text-xs); } .data-table th, .data-table td { padding: 8px 6px; } .glass-input { padding: 12px 14px; min-height: 44px; font-size: 16px; } .modal { padding: 0; /* Offset per il CUI banner (z-index: 10000 > modal z-index: 1000): il banner copre i primi ~50px del viewport, quindi il modal deve partire sotto il banner altrimenti l'header sticky della modale (titolo, Annulla, Salva) risulta invisibile dietro il banner. */ padding-top: var(--cui-banner-h, 50px); align-items: flex-start; } .modal__content { max-width: 100%; /* 100dvh = dynamic viewport height: si aggiorna quando la barra URL del browser appare/scompare. Fallback 100vh per browser datati. */ height: calc(100vh - var(--cui-banner-h, 50px)); height: calc(100dvh - var(--cui-banner-h, 50px)); max-height: calc(100dvh - var(--cui-banner-h, 50px)); border-radius: 0; } /* Remove background glow effects on mobile — performance */ body::before { display: none; } } /* ========================================================================== CUI CLASSIFICATION BANNER — NIST SP 800-171 Rev. 3 MP-L2-1 Banner classificazione dati, presente su ogni pagina. Non rimovibile, non nascondibile. ========================================================================== */ .cui-banner { position: sticky; top: 0; z-index: 10000; width: 100%; padding: 3px 16px; background: linear-gradient(90deg, #d97706, #f59e0b, #d97706); color: #1a1100; text-align: center; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.8; user-select: none; pointer-events: none; } .cui-banner--bottom { position: fixed; top: auto; bottom: 0; font-size: 0.6rem; padding: 2px 16px; opacity: 0.7; background: linear-gradient(90deg, #92640b, #d97706, #92640b); color: rgba(255, 255, 255, 0.85); pointer-events: auto; } .cui-banner__info-link { pointer-events: auto; } .cui-banner__link { color: rgba(255, 255, 255, 0.95); text-decoration: none; font-weight: 600; } .cui-banner__link:hover { text-decoration: underline; } /* Footer pagina login */ .login-footer { text-align: center; padding: var(--spacing-md) 0; color: var(--text-muted); font-size: 0.82rem; position: relative; z-index: 2; } .login-footer__link { color: var(--accent-primary); text-decoration: none; transition: opacity var(--transition-fast); } .login-footer__link:hover { opacity: 0.8; text-decoration: underline; } @media print { .cui-banner { position: static; background: #000; color: #fff; padding: 8px; font-size: 10pt; border: 2px solid #000; } .cui-banner--bottom { position: fixed; bottom: 0; } } /* ========================================================================== IDLE WARNING — NIST SP 800-171 Rev. 3 AC-L2-7 Avviso timeout sessione imminente. ========================================================================== */ .idle-warning { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11000; padding: 24px 40px; background: rgba(239, 68, 68, 0.95); color: #fff; border-radius: var(--radius-lg, 22px); font-size: 1rem; font-weight: 600; text-align: center; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(239, 68, 68, 0.6); animation: idlePulse 2s ease-in-out infinite; } @keyframes idlePulse { 0%, 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(239, 68, 68, 0.6); } 50% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px 4px rgba(239, 68, 68, 0.4); } } /* ========================================================================== PWA — Badge connettività, banner install/update, hint iOS Gestiti da pwa.js — visibilità controllata via JS. ========================================================================== */ /* Badge connettività (top-right, fixed). z-index: 10001 > CUI banner (10000): garantisce che il badge non venga mai clippato da alcun overlay. top usa var(--cui-banner-h) così il badge sta SEMPRE subito sotto il banner, indipendentemente dall'altezza del testo. Su mobile (≤1024px) il blocco responsive sovrascrive solo top con +6px gap. */ .pwa-badge { position: fixed; top: var(--cui-banner-h, 30px); right: 8px; z-index: 10001; padding: 2px 10px; border-radius: var(--radius-sm, 8px); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; transition: background var(--transition-fast, 150ms), color var(--transition-fast, 150ms); } .pwa-badge--online { background: rgba(34, 197, 94, 0.18); color: var(--color-success, #22c55e); border: 1px solid rgba(34, 197, 94, 0.3); } .pwa-badge--offline { background: rgba(239, 68, 68, 0.18); color: var(--color-error, #ef4444); border: 1px solid rgba(239, 68, 68, 0.3); animation: offlinePulse 3s ease-in-out infinite; } @keyframes offlinePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Badge coda operazioni offline — top: 56px per stare sotto pwa-badge (~20px alto + gap) */ /* Inizialmente nascosto — offline_queue.js mostra via element.style.display (F-001 CSP fix) */ .offline-queue-badge { display: none; position: fixed; top: 56px; right: 8px; z-index: 9900; padding: 2px 10px; border-radius: var(--radius-sm, 8px); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; background: rgba(245, 158, 11, 0.18); color: var(--color-warning, #f59e0b); border: 1px solid rgba(245, 158, 11, 0.35); cursor: default; pointer-events: none; } /* Banner install / update (bottom, slide-up) — inizialmente nascosto, pwa.js mostra via element.style.display (F-001) */ .pwa-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9800; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: rgba(13, 17, 23, 0.96); backdrop-filter: blur(16px); border-top: 1px solid var(--glass-border, rgba(255,255,255,0.12)); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); font-size: 0.9rem; color: var(--text-primary, rgba(255,255,255,0.92)); animation: slideUpBanner 300ms var(--transition-base, ease) both; } .pwa-banner--update { border-top-color: var(--accent-primary, #3ecfcf); background: rgba(13, 17, 23, 0.98); } @keyframes slideUpBanner { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .pwa-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .pwa-banner-btn { padding: 6px 16px; font-size: 0.85rem; } .pwa-banner-dismiss { background: none; border: none; color: var(--text-secondary, rgba(255,255,255,0.55)); cursor: pointer; font-size: 1rem; padding: 4px 8px; border-radius: var(--radius-sm, 8px); transition: color var(--transition-fast, 150ms); line-height: 1; } .pwa-banner-dismiss:hover { color: var(--text-primary, rgba(255,255,255,0.92)); } /* Hint installazione iOS — inizialmente nascosto, pwa.js mostra via element.style.display (F-001) */ .pwa-ios-hint { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9800; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: rgba(13, 17, 23, 0.96); backdrop-filter: blur(16px); border-top: 1px solid var(--glass-border, rgba(255,255,255,0.12)); font-size: 0.88rem; color: var(--text-primary, rgba(255,255,255,0.92)); animation: slideUpBanner 300ms var(--transition-base, ease) both; } /* Tema chiaro — adattamenti PWA */ [data-theme="light"] .pwa-banner, [data-theme="light"] .pwa-ios-hint { background: rgba(240, 244, 248, 0.96); border-top-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.85); } [data-theme="light"] .pwa-banner-dismiss { color: rgba(0, 0, 0, 0.45); } [data-theme="light"] .pwa-banner-dismiss:hover { color: rgba(0, 0, 0, 0.85); } [data-theme="light"] .pwa-badge--online { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); } [data-theme="light"] .pwa-badge--offline { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); }