[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/integrazioniext.html

@@ -3,11 +3,17 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<title>NIS2 Agile — Integrazioni Esterne</title>
-<!-- Bootstrap Italia v2.18.1 self-hostato (regola: MAI CDN), PRIMA di style.css cosi' il design system esistente resta autorevole -->
-<link rel="stylesheet" href="/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
-<link rel="stylesheet" href="css/style.css?v=20260618">
+<title>Integrazioni Esterne · NIS2 Agile</title>
+<!-- UI V3: Inter self-host + design system v3.css (NO Google Fonts / NO unpkg / NO Bootstrap Italia). -->
+<link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
+<link rel="stylesheet" href="/css/v3.css?v=20260627">
 <style>
+/* ── V3 compat bridge: token usati dalla page-CSS qui sotto (palette CHIARA V3) ── */
+:root{
+    --primary:#1F5FA8;
+    --text-primary:var(--ink); --text-secondary:var(--muted);
+    --bg-card:#fff; --border:var(--line);
+}
 /* ── Page-specific overrides ── */
 .integ-hero {
     background: linear-gradient(135deg, rgba(6,182,212,.08) 0%, rgba(99,102,241,.06) 100%);
@@ -55,7 +61,7 @@
 
 .api-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-bottom: 1.5rem; }
 .api-table th {
-    background: rgba(255,255,255,.04);
+    background: #F5F8FC;
     color: var(--text-secondary);
     font-weight: 600; text-align: left;
     padding: .6rem .75rem;
@@ -63,10 +69,14 @@
 }
 .api-table td {
     padding: .55rem .75rem;
-    border-bottom: 1px solid rgba(255,255,255,.04);
+    border-bottom: 1px solid var(--line);
     vertical-align: top;
 }
-.api-table tr:hover td { background: rgba(255,255,255,.02); }
+.api-table tr:hover td { background: #F8FAFD; }
+/* Badge stato (ex style.css) usati nei tab Inviti/Licenze */
+.badge-status{display:inline-block;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:6px;background:#EEF2F7;color:#5b6b80}
+.badge-status.s-pending{background:#FBF1E2;color:#9A6418}
+.badge-status.s-used{background:#E6F4EC;color:#1E7A4E}
 .api-table code {
     background: rgba(6,182,212,.1);
     color: var(--primary);
@@ -123,7 +133,7 @@
     counter-increment: steps;
     display: flex; align-items: flex-start; gap: .75rem;
     padding: .65rem 0;
-    border-bottom: 1px solid rgba(255,255,255,.04);
+    border-bottom: 1px solid var(--line);
     font-size: .85rem;
     color: var(--text-secondary);
     line-height: 1.5;
@@ -169,7 +179,7 @@
 .event-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
 .event-row {
     display: flex; align-items: center; gap: .75rem;
-    background: rgba(255,255,255,.03);
+    background: #F8FAFD;
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: .6rem .9rem;
@@ -221,12 +231,19 @@
 </head>
 <body>
 
-<div id="sidebar-placeholder"></div>
+<!-- Chrome V3 (appbar + mega-menu) iniettata da topnav-v3.js in questo host -->
+<div id="topnav"></div>
 
-<main class="main-content">
-<div class="page-header">
-    <h1>Integrazioni Esterne</h1>
-    <p>API, webhook e connettori per sistemi GRC di terze parti</p>
+<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><span>Integrazioni Esterne</span>
+</nav>
+<div class="page-head">
+    <div>
+        <h1>Integrazioni Esterne</h1>
+        <p class="sub">API, webhook e connettori per sistemi GRC di terze parti</p>
+    </div>
 </div>
 
 <!-- Hero -->
@@ -912,20 +929,32 @@ curl -H <span class="str">"X-API-Key: nis2_TUA_CHIAVE"</span> \
 
 </main>
 
-<script src="js/common.js?v=20260624g"></script>
-<script src="js/i18n.js?v=20260631"></script>
+<!-- Scripts V3: api.js → common.js (helper+FAB reali) → Lucide self-host →
+     topnav-v3.js (chrome, ridefinisce loadSidebar) → i18n → help -->
+<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>
-function showTab(id) {
-    document.querySelectorAll('.tab-btn').forEach((b, i) => {
-        const ids = ['api', 'invites', 'lg231', 'webhook', 'quickstart'];
-        b.classList.toggle('active', ids[i] === id);
-    });
-    document.querySelectorAll('.tab-pane').forEach(p => {
-        p.classList.toggle('active', p.id === 'tab-' + id);
-    });
-    // scroll to tabs
-    document.querySelector('.tab-nav').scrollIntoView({ behavior: 'smooth', block: 'start' });
-}
+    if (!checkAuth()) throw new Error('Not authenticated');
+    loadSidebar();                 // = loadTopnavV3()
+    if (typeof I18n !== 'undefined') I18n.init();
+    if (typeof HelpSystem !== 'undefined') HelpSystem.init();
+    if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
+
+    function showTab(id) {
+        document.querySelectorAll('.tab-btn').forEach((b, i) => {
+            const ids = ['api', 'invites', 'lg231', 'webhook', 'quickstart'];
+            b.classList.toggle('active', ids[i] === id);
+        });
+        document.querySelectorAll('.tab-pane').forEach(p => {
+            p.classList.toggle('active', p.id === 'tab-' + id);
+        });
+        // scroll to tabs
+        document.querySelector('.tab-nav').scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
 </script>
 </body>
 </html>