/** * NH · Mobile Responsive Overrides * ═══════════════════════════════════════════════════════════════════════════ * Override CSS per tablet (≤1024px) e mobile (≤640px) applicati a tutte le * pagine principali NH: * - HUB Center, XDR, ICC, Vulnerabilities, SecOps Admin * - Incident Workspace, Automation Rules, Playbook Editor * * Include questo file in PER ULTIMO: * * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ TABLET breakpoint (≤1024px) ═══ */ @media (max-width: 1024px) { /* Layout 3-pane → 1-pane stacked */ body { overflow: auto !important; height: auto !important; } .layout { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 100vh; } /* Header: riduci padding */ .header { padding: 0 10px !important; gap: 8px !important; flex-wrap: wrap; height: auto !important; min-height: 52px; } .header .logo { font-size: 12px !important; } .header .domain-chip, .header .chip { font-size: 10px !important; padding: 3px 7px !important; } .header .search-bar { width: 200px !important; font-size: 11px !important; } .header-right { gap: 6px !important; } /* Sidebar: mostra collassabile in alto, non laterale */ .nav, .sidebar, .sidebar-l, .sidebar-r { width: 100% !important; max-height: 40vh; border-right: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--border); } /* Main content */ .main, .tab-content { padding: 10px !important; } /* KPI row: passa a 2 colonne */ .kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; } .kpi { padding: 8px !important; } .kpi-value { font-size: 16px !important; } .kpi-label { font-size: 9px !important; } /* Tables: scroll horizontal */ table { font-size: 11px !important; } th, td { padding: 5px 6px !important; white-space: nowrap; } .card { padding: 10px !important; } .card-title { font-size: 11px !important; } /* Tabs: scroll horizontal */ .tabs { overflow-x: auto; white-space: nowrap; padding: 0 6px !important; } .tab { padding: 8px 12px !important; font-size: 11px !important; } /* Modals: full screen su mobile */ .modal, .modal-bg .modal { max-width: 100% !important; max-height: 95vh !important; padding: 14px !important; border-radius: 8px !important; } /* HUB cards: 2 colonne */ .services, .cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .card { min-height: auto !important; } /* Chat panel: riduci */ .chat-log { max-height: 200px !important; } } /* ═══ MOBILE breakpoint (≤640px) ═══ */ @media (max-width: 640px) { /* Header ancora più compatto */ .header { flex-wrap: wrap; padding: 6px 8px !important; } .header .search-bar { display: none !important; } .header-center { display: none !important; } .incident-title { font-size: 11px !important; } /* KPI: 1 colonna */ .kpi-row { grid-template-columns: 1fr 1fr !important; } /* HUB cards: 1 colonna */ .services, .cards-grid { grid-template-columns: 1fr !important; } /* Forms: full width stacked */ .form-row { margin-bottom: 8px !important; } .form-row label { font-size: 9px !important; } /* Hide avatar labels */ #user-name, .user-name { display: none !important; } /* Footer condensed */ .footer { flex-wrap: wrap; font-size: 9px !important; padding: 4px 8px !important; min-height: auto !important; } /* Bulk toolbar in vuln tabella */ .bulk-toolbar button { font-size: 10px !important; padding: 4px 6px !important; } /* Compliance scorecard: KPI 1 colonna */ .kpi-row > .kpi { min-width: 0 !important; } /* PIR modal: remove indent */ details { padding: 8px !important; } details summary { font-size: 12px !important; } /* Incident Workspace: stack chat sotto */ .sidebar-r { order: 10; } } /* ═══ LANDSCAPE PHONE (max-width 896, orientation landscape) ═══ */ @media (max-width: 896px) and (orientation: landscape) { .kpi-row { grid-template-columns: repeat(4, 1fr) !important; } .services, .cards-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ═══ TOUCH TARGETS (A11Y WCAG) ═══ */ @media (pointer: coarse) { button, .btn, input[type=checkbox], .nav-item, .tab { min-height: 36px !important; /* WCAG 2.5.5 target size 24x24, pref 44x44 */ } input[type=text], input[type=number], input[type=date], select, textarea { min-height: 40px !important; font-size: 14px !important; /* prevent iOS Safari zoom */ } } /* ═══ PRINT ═══ */ @media print { .nav, .sidebar, .sidebar-l, .sidebar-r, .tabs, .toolbar, .header-right, .footer, button, .btn, .pin { display: none !important; } body { background: #fff !important; color: #000 !important; } .card, .kpi { border: 1px solid #ccc !important; background: #fff !important; } }