[FEAT] UI V3 — flotta: chrome top-nav + design system su 32 pagine app

Migrazione UI dal V2 (Bootstrap Italia, sidebar) al V3 (top-nav mega-menu
navy/oro, Inter+Lucide self-host) fedele ai mockup docs/mockup Ui/.
- 32 pagine app convertite (incl. admin/*): head Inter+v3.css, chrome
  topnav-v3, contenuti in card V3, dati REALI preservati (id/data-* intatti),
  i18n/help/FAB reali invariati, nessun CDN esterno.
- v3.css: aggiunti widget condivisi (modal/toast/form/btn-variant/spinner/
  progress/tag/badge) + utility (.btn base, .text-muted, .sr-only) + alias
  variabili V2->token V3, così modali/form/toast di common.js funzionano
  ovunque senza style.css.
- maintenance.html: finestra estesa a ~12:15.
- docs/UI_V3_FLEET_BRIEF.md: ricetta operativa della flotta.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

public/admin/organizations.html

@@ -3,103 +3,47 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <title>Gestione Organizzazioni - NIS2 Agile</title>
-    <!-- Bootstrap Italia v2.18.1 self-hostato (regola: MAI CDN). Caricato PRIMA di style.css
-         cosi' style.css (design system esistente) resta autorevole per i widget renderizzati
-         via JS (tabella org/paginazione/badge) -> parita' funzionale assoluta. BI veste la chrome.
-         Path relativi ../ perche' la pagina vive sotto public/admin/. -->
-    <link rel="stylesheet" href="../vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
-    <link rel="stylesheet" href="../css/style.css?v=20260618">
+    <title>Gestione Organizzazioni · NIS2 Agile</title>
+    <!-- UI V3: Inter self-host + design system v3.css. Pagina in /admin/: asset con path ASSOLUTI. -->
+    <link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
+    <link rel="stylesheet" href="/css/v3.css?v=20260627">
     <style>
-        .entity-type-badge {
-            display: inline-flex;
-            padding: 3px 10px;
-            border-radius: 100px;
-            font-size: 0.7rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.03em;
-        }
-        .entity-type-badge.essential { background: var(--danger-bg); color: var(--danger); }
-        .entity-type-badge.important { background: var(--warning-bg); color: #a16207; }
-        .entity-type-badge.not_applicable { background: var(--gray-100); color: var(--gray-600); }
-        .plan-badge {
-            display: inline-flex;
-            padding: 3px 10px;
-            border-radius: 100px;
-            font-size: 0.7rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.03em;
-        }
-        .plan-badge.free { background: var(--gray-100); color: var(--gray-600); }
-        .plan-badge.professional { background: var(--primary-bg); color: var(--primary); }
-        .plan-badge.enterprise { background: #f3e8ff; color: #7c3aed; }
-        .status-dot {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 0.8125rem;
-        }
-        .status-dot::before {
-            content: '';
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-        .status-dot.active::before { background: var(--secondary); }
-        .status-dot.inactive::before { background: var(--gray-400); }
-        .pagination {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 16px 24px;
-            border-top: 1px solid var(--gray-100);
-            background: var(--gray-50);
-        }
-        .pagination-info {
-            font-size: 0.8125rem;
-            color: var(--gray-500);
-        }
-        .pagination-controls {
-            display: flex;
-            gap: 8px;
-        }
-        .score-inline {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 0.8125rem;
-            font-weight: 600;
-        }
-        .score-inline .score-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-        }
-        .admin-breadcrumb {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 0.8125rem;
-            color: var(--gray-500);
-            margin-bottom: 20px;
-        }
-        .admin-breadcrumb a {
-            color: var(--primary);
-            text-decoration: none;
-            font-weight: 500;
-        }
-        .admin-breadcrumb a:hover {
-            text-decoration: underline;
-        }
-        .admin-breadcrumb .icon {
-            width: 14px;
-            height: 14px;
-            color: var(--gray-400);
-            fill: currentColor;
-        }
+        /* ── Tabella admin (v3.css non include stili tabella; markup sobrio, no CDN) ── */
+        .table-container { width:100%; overflow-x:auto; }
+        table { width:100%; border-collapse:collapse; font-size:13px; }
+        thead th { text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#7a8aa0; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
+        tbody td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
+        tbody tr:last-child td { border-bottom:0; }
+        tbody tr:hover { background:#F7FAFD; }
+        td strong { font-weight:700; }
+        .text-muted { color:var(--muted); }
+
+        .entity-type-badge, .plan-badge { display:inline-flex; padding:2px 7px; border-radius:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
+        .entity-type-badge.essential { background:#FBE9E9; color:#B23636; }
+        .entity-type-badge.important { background:#FBF1E2; color:#9A6418; }
+        .entity-type-badge.not_applicable { background:#EEF2F7; color:#5b6b80; }
+        .plan-badge.free { background:#EEF2F7; color:#5b6b80; }
+        .plan-badge.professional { background:#E7F0FB; color:#1F5FA8; }
+        .plan-badge.enterprise { background:#F0E9FB; color:#7C4DD6; }
+
+        .status-dot { display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; }
+        .status-dot::before { content:''; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+        .status-dot.active::before { background:var(--c-green); }
+        .status-dot.inactive::before { background:#94A3B8; }
+
+        .score-inline { display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; font-weight:600; }
+        .score-inline .score-dot { width:8px; height:8px; border-radius:50%; }
+
+        .pagination { display:flex; align-items:center; justify-content:space-between; padding:14px 14px 2px; border-top:1px solid var(--line); margin-top:6px; }
+        .pagination-info { font-size:.8125rem; color:var(--muted); }
+        .pagination-controls { display:flex; gap:8px; }
+        .btn-ghost[disabled] { opacity:.5; cursor:not-allowed; }
+        .btn-sm { padding:6px 11px; font-size:11.5px; }
+
+        .empty-state { text-align:center; padding:60px 24px; color:var(--muted); }
+        .empty-state .ic { width:48px; height:48px; color:var(--line); margin:0 auto 16px; display:block; }
+        .empty-state h4 { font-size:1rem; font-weight:700; color:var(--ink); margin:0 0 8px; }
+        .empty-state p { margin:0; }
     </style>
   <!-- PWA:start -->
   <link rel="manifest" href="/manifest.webmanifest">
@@ -116,55 +60,44 @@
   <!-- PWA:end -->
 </head>
 <body>
-    <div class="app-layout">
-        <aside class="sidebar" id="sidebar"></aside>
+    <!-- Chrome V3 (appbar + mega-menu) iniettata da topnav-v3.js in questo host -->
+    <div id="topnav"></div>
 
-        <main class="main-content">
-            <header class="content-header">
-                <h1 class="h2">Gestione Organizzazioni</h1>
-                <div class="content-header-actions">
-                    <span class="badge badge-danger">Super Admin</span>
-                </div>
-            </header>
-
-            <div class="content-body">
-                <!-- Breadcrumb -->
-                <nav class="admin-breadcrumb" aria-label="Percorso di navigazione">
-                    <a href="../admin/index.html">Amministrazione</a>
-                    <svg class="icon icon-sm" aria-hidden="true"><use href="../vendor/bootstrap-italia/dist/svg/sprites.svg#it-chevron-right"></use></svg>
-                    <span aria-current="page">Organizzazioni</span>
-                </nav>
-
-                <!-- Table -->
-                <div class="card">
-                    <div class="card-body" style="padding:0;">
-                        <div id="orgs-container">
-                            <div class="spinner" style="margin:60px auto;" role="status" aria-label="Caricamento in corso"></div>
-                        </div>
-                    </div>
-                </div>
+    <main class="wrap">
+        <nav class="crumb" aria-label="breadcrumb">
+            <i data-lucide="home" class="ic"></i><a href="/dashboard.html">Home</a>
+            <i data-lucide="chevron-right" class="ic"></i><a href="/admin/index.html">Amministrazione</a>
+            <i data-lucide="chevron-right" class="ic"></i><span>Organizzazioni</span>
+        </nav>
+        <div class="page-head">
+            <div>
+                <h1>Gestione Organizzazioni</h1>
+                <p class="sub">Tutte le organizzazioni registrate sulla piattaforma</p>
             </div>
-        </main>
-    </div>
+            <span class="badge-t red">Super Admin</span>
+        </div>
 
-    <script src="../js/api.js?v=20260625d"></script>
-    <script src="../js/common.js?v=20260624g"></script>
-    <!-- Bootstrap Italia bundle (componenti) + override sidebar BI (common-bi.js).
-         common-bi.js va DOPO common.js: ridefinisce solo loadSidebar() con markup BI,
-         riusando tutti gli helper di common.js (zero backend). -->
-    <script src="../vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
-    <script>
-        if (window.bootstrap && bootstrap.loadFonts) {
-            bootstrap.loadFonts('../vendor/bootstrap-italia/dist/fonts');
-        }
-    </script>
-    <script src="../js/common-bi.js?v=20260625d"></script>
-    <script src="../js/i18n.js?v=20260620"></script>
+        <section class="card card-pad">
+            <div id="orgs-container">
+                <div class="v3-loading"><span class="v3-spin"></span>Caricamento…</div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Scripts V3: api.js → common.js (helper+FAB reali) → Lucide → topnav-v3.js (chrome) → i18n → init pagina -->
+    <script src="/js/api.js?v=20260625d"></script>
+    <script src="/js/common.js?v=20260627v3"></script>
+    <script src="/vendor/lucide/lucide.min.js"></script>
+    <script src="/js/topnav-v3.js?v=20260627"></script>
+    <script src="/js/i18n.js?v=20260631"></script>
+    <script src="/js/help.js?v=20260625d"></script>
     <script>
         // ── Auth check ───────────────────────────────────────────
         if (!checkAuth()) throw new Error('Not authenticated');
         loadSidebar();
-        I18n.init();
+        if (typeof I18n !== 'undefined') I18n.init();
+        if (typeof HelpSystem !== 'undefined') HelpSystem.init();
+        if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
 
         let currentPage = 1;
 
@@ -205,7 +138,7 @@
         // ── Caricamento ──────────────────────────────────────────
         async function loadOrganizations(page) {
             const container = document.getElementById('orgs-container');
-            container.innerHTML = '<div class="spinner" style="margin:60px auto;" role="status" aria-label="Caricamento in corso"></div>';
+            container.innerHTML = '<div class="v3-loading"><span class="v3-spin"></span>Caricamento…</div>';
             currentPage = page;
 
             try {
@@ -231,10 +164,11 @@
             if (!orgs || orgs.length === 0) {
                 container.innerHTML = `
                     <div class="empty-state">
-                        <svg class="icon" aria-hidden="true" style="width:48px;height:48px;fill:var(--gray-300);"><use href="../vendor/bootstrap-italia/dist/svg/sprites.svg#it-pa"></use></svg>
+                        <i data-lucide="building-2" class="ic"></i>
                         <h4>Nessuna organizzazione trovata</h4>
                         <p>Le organizzazioni registrate appariranno qui.</p>
                     </div>`;
+                if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
                 return;
             }
 
@@ -304,10 +238,10 @@
                             Visualizzati ${start}-${end} di ${total} organizzazioni
                         </div>
                         <div class="pagination-controls">
-                            <button class="btn btn-secondary btn-sm" onclick="loadOrganizations(${page - 1})" ${page <= 1 ? 'disabled' : ''}>
+                            <button class="btn-ghost btn-sm" onclick="loadOrganizations(${page - 1})" ${page <= 1 ? 'disabled' : ''}>
                                 &laquo; Precedente
                             </button>
-                            <button class="btn btn-secondary btn-sm" onclick="loadOrganizations(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>
+                            <button class="btn-ghost btn-sm" onclick="loadOrganizations(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>
                                 Successivo &raquo;
                             </button>
                         </div>