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

@@ -3,12 +3,22 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <title>Stakeholder - NIS2 Agile</title>
-    <!-- Bootstrap Italia v2.18.1 self-hostato (regola: MAI CDN). Caricato PRIMA di style.css. -->
-    <link rel="stylesheet" href="/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
-    <link rel="stylesheet" href="/css/style.css?v=20260618">
+    <title>Stakeholder · NIS2 Agile</title>
+    <!-- UI V3: Inter self-host + design system v3.css (NO Google Fonts / NO unpkg CDN / NO Bootstrap Italia). -->
+    <link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
+    <link rel="stylesheet" href="/css/v3.css?v=20260627">
     <style>
-        .stk-intro { background:#eff6ff; border-left:4px solid var(--primary,#2563eb); padding:14px 18px; border-radius:8px; margin-bottom:12px; font-size:.92rem; line-height:1.6; }
+        /* ── Mappa variabili legacy (style.css rimosso) → token V3 + widget base ── */
+        :root {
+            --primary:#1F5FA8; --gray-50:#F7FAFD; --gray-100:#EEF2F7; --gray-200:#E3E9F0;
+            --gray-400:#94A3B8; --gray-500:#64748B;
+        }
+        .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:8px 13px; font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; text-decoration:none; }
+        .btn:hover { background:#F5F8FC; border-color:#c7d4e4; }
+        .btn-outline { background:#fff; color:var(--ink); border-color:var(--line); }
+        .btn-outline:hover { background:#F5F8FC; border-color:#c7d4e4; }
+        .btn-sm { padding:5px 10px; font-size:11.5px; }
+        .stk-intro { background:#EAF1FA; border-left:4px solid var(--primary,#2563eb); padding:14px 18px; border-radius:8px; margin-bottom:12px; font-size:.92rem; line-height:1.6; }
         .stk-note { font-size:.82rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px 12px; margin:0 0 16px; }
         .stk-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
         .stk-toolbar .grow { flex:1 1 auto; }
@@ -84,18 +94,26 @@
   <!-- PWA:end -->
 </head>
 <body>
-    <div class="app-layout">
-        <aside class="sidebar" id="sidebar"></aside>
-        <main class="main-content">
-            <header class="content-header">
-                <h2 data-i18n="stk.title">Stakeholder</h2>
-                <div class="content-header-actions">
-                    <button class="btn btn-outline btn-sm" onclick="stkTypeOpen()">+ Aggiungi tipo</button>
-                    <button class="btn btn-primary btn-sm" onclick="stkOpen()">+ Aggiungi stakeholder</button>
-                </div>
-            </header>
+    <!-- Chrome V3 (appbar + mega-menu) iniettata da topnav-v3.js -->
+    <div id="topnav"></div>
 
-            <div class="content-body">
+    <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 data-i18n="stk.title">Stakeholder</span>
+        </nav>
+        <div class="page-head">
+            <div>
+                <h1 data-i18n="stk.title">Stakeholder</h1>
+                <p class="sub">Registro stakeholder e matrice di Mendelow (GV.SC-02 · art. 24 D.Lgs. 138/2024)</p>
+            </div>
+            <div class="content-header-actions" style="display:flex;gap:8px;flex-wrap:wrap;">
+                <button class="btn-ghost" onclick="stkTypeOpen()"><i data-lucide="plus" class="ic"></i>Aggiungi tipo</button>
+                <button class="btn-primary" onclick="stkOpen()"><i data-lucide="plus" class="ic"></i>Aggiungi stakeholder</button>
+            </div>
+        </div>
+
+            <div class="stack">
                 <div class="stk-intro">
                     <strong>Mappatura e gestione degli stakeholder.</strong>
                     Registra gli stakeholder interni ed esterni scegliendo il tipo dall'elenco (puoi aggiungerne di nuovi),
@@ -129,8 +147,7 @@
 
                 <div id="stk-groups" aria-live="polite"></div>
             </div>
-        </main>
-    </div>
+    </main>
 
     <!-- Modale stakeholder (crea/modifica) -->
     <div class="sm-overlay" id="stk-modal" role="dialog" aria-modal="true" aria-labelledby="stk-modal-title">
@@ -191,10 +208,12 @@
         </div>
     </div>
 
+    <!-- Scripts V3: api.js → common.js (helper+FAB reali) → Lucide self-host →
+         topnav-v3.js (chrome, ridefinisce loadSidebar) → i18n → help → init pagina -->
     <script src="/js/api.js?v=20260625d"></script>
-    <script src="/js/common.js?v=20260624g"></script>
-    <script src="/vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
-    <script src="/js/common-bi.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>
@@ -223,8 +242,9 @@
     document.addEventListener('DOMContentLoaded', async function () {
         if (typeof checkAuth === 'function' && !checkAuth()) return;
         if (window.I18n && I18n.init) I18n.init('it');
-        if (typeof loadSidebar === 'function') loadSidebar();
+        if (typeof loadSidebar === 'function') loadSidebar();   // = loadTopnavV3()
         if (window.HelpSystem && HelpSystem.init) HelpSystem.init();
+        if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
 
         document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { stkClose(); stkTypeClose(); } });
         ['stk-modal','stk-type-modal'].forEach(function (mid) {