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

@@ -3,15 +3,36 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <title>Knowledge Base - 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 (lista doc, search) -> parita' funzionale assoluta. BI veste la chrome. -->
-    <link rel="stylesheet" href="/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
-    <link rel="stylesheet" href="/css/style.css?v=20260618">
+    <title>Knowledge Base · 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 + componenti (card/form/btn/badge) ex style.css ── */
+        :root{
+            --primary:#1F5FA8; --gray-100:#f1f5f9; --gray-300:#cbd5e1; --gray-500:#64748b;
+            --gray-600:#475569; --gray-700:#334155;
+        }
+        .card-pad .card-header{padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
+        .card-pad .card-header h3{margin:0;font-size:15px;font-weight:700}
+        .card-pad .card-body{padding:0}
+        .text-muted{color:var(--muted)} .text-danger{color:var(--c-red)}
+        .form-group{margin-bottom:0} .form-group + .form-group{margin-top:12px}
+        .form-control{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
+            font:inherit;font-size:13px;color:var(--ink);background:#fff}
+        .form-control:focus{outline:none;border-color:#9FBEDD;box-shadow:0 0 0 3px rgba(31,95,168,.12)}
+        label{font-size:12.5px;font-weight:600;color:var(--ink);display:block;margin-bottom:4px}
+        .btn{display:inline-flex;align-items:center;gap:7px;border-radius:8px;padding:8px 13px;
+            font:inherit;font-weight:600;font-size:12.5px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
+        .btn:hover{background:#F5F8FC}
+        .btn-primary{background:var(--c-blue);color:#fff;border-color:var(--c-blue)} .btn-primary:hover{background:#1A5494}
+        .btn-secondary{background:#fff;color:var(--ink)}
+        .btn-danger{background:var(--c-red);color:#fff;border-color:var(--c-red)} .btn-danger:hover{filter:brightness(.95)}
+        .btn-sm{padding:5px 10px;font-size:11.5px}
+        .btn .icon{width:15px;height:15px}
+
         .kb-scope-radios { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; }
-        .kb-scope-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
+        .kb-scope-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-bottom:0; }
         .kb-share-block { margin-top: 12px; }
         .kb-doc-list { margin-top: 24px; }
         .kb-doc-row { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); display: flex; justify-content: space-between; align-items: center; }
@@ -19,8 +40,6 @@
         .kb-scope-badge.SYSTEM { background: #DBEAFE; color: #1E40AF; }
         .kb-scope-badge.FIRM   { background: #FEF3C7; color: #92400E; }
         .kb-scope-badge.ORG    { background: #DCFCE7; color: #166534; }
-        /* Allinea l'icona sprite BI dentro i bottoni del design system esistente */
-        .btn .icon { fill: currentColor; vertical-align: middle; }
     </style>
   <!-- PWA:start -->
   <link rel="manifest" href="/manifest.webmanifest">
@@ -37,19 +56,23 @@
   <!-- 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">Knowledge Base</h1>
-                <div class="content-header-actions">
-                    <button class="btn btn-primary" id="btn-kb-upload">
-                        <svg class="icon icon-sm" aria-hidden="true"><use href="/vendor/bootstrap-italia/dist/svg/sprites.svg#it-upload"></use></svg>
-                        Carica documento
-                    </button>
-                </div>
-            </header>
+    <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>Knowledge Base</span>
+        </nav>
+        <div class="page-head">
+            <div>
+                <h1>Knowledge Base</h1>
+                <p class="sub">Documenti che l'AI usa per rispondere con citazioni precise</p>
+            </div>
+            <button class="btn-primary" id="btn-kb-upload">
+                <i data-lucide="upload" class="ic"></i>Carica documento
+            </button>
+        </div>
 
             <div class="content-body">
                 <p class="text-muted" style="margin-top:0;">
@@ -60,7 +83,7 @@
                 </p>
 
                 <!-- Form upload (hidden by default) -->
-                <div class="card" id="kb-form-card" style="display:none;margin-top:16px;">
+                <div class="card card-pad" id="kb-form-card" style="display:none;margin-top:16px;">
                     <div class="card-body">
                         <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                             <div class="form-group">
@@ -120,7 +143,7 @@
                 </div>
 
                 <!-- Lista documenti -->
-                <div class="card kb-doc-list">
+                <div class="card card-pad kb-doc-list">
                     <div class="card-header">
                         <h3>Documenti caricati visibili</h3>
                     </div>
@@ -132,47 +155,42 @@
                 </div>
 
                 <!-- Search preview -->
-                <div class="card" style="margin-top:24px;">
+                <div class="card card-pad" style="margin-top:24px;">
                     <div class="card-header"><h3>Test search semantica</h3></div>
                     <div class="card-body">
-                        <div style="display:flex;gap:8px;">
-                            <label for="kb-search-query" class="sr-only visually-hidden">Query di ricerca semantica</label>
-                            <input type="text" id="kb-search-query" class="form-control" placeholder="Es: come gestire un incidente NIS2?" aria-label="Query di ricerca semantica">
+                        <div style="display:flex;gap:8px;align-items:flex-end;">
+                            <div style="flex:1;">
+                                <label for="kb-search-query">Query di ricerca semantica</label>
+                                <input type="text" id="kb-search-query" class="form-control" placeholder="Es: come gestire un incidente NIS2?" aria-label="Query di ricerca semantica">
+                            </div>
                             <button class="btn btn-secondary" id="btn-kb-search">
-                                <svg class="icon icon-sm" aria-hidden="true"><use href="/vendor/bootstrap-italia/dist/svg/sprites.svg#it-search"></use></svg>
-                                Cerca
+                                <i data-lucide="search" class="icon"></i>Cerca
                             </button>
                         </div>
                         <div id="kb-search-results" style="margin-top:12px;"></div>
                     </div>
                 </div>
             </div>
-        </main>
-    </div>
+    </main>
 
-    <!-- Stessa logica JS della pagina live (parita' funzionale assoluta, zero backend). -->
-    <script src="/js/common.js?v=20260624g"></script>
+    <!-- Scripts V3: api.js → common.js (helper+FAB reali) → Lucide self-host →
+         topnav-v3.js (chrome, ridefinisce loadSidebar) → i18n → help → kb.js -->
     <script src="/js/api.js?v=20260625d"></script>
-    <!-- Bootstrap Italia bundle (componenti) + override sidebar BI (common-bi.js).
-         common-bi.js va DOPO common.js: ridefinisce solo loadSidebar() con markup BI. -->
-    <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/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 src="/js/kb.js"></script>
     <script>
-        // Gate auth + chrome come le altre pagine -bi.
+        // Gate auth + chrome come le altre pagine V3.
         if (typeof checkAuth === 'function' && !checkAuth()) {
             // checkAuth reindirizza a login se non autenticato
         } else {
-            if (typeof loadSidebar === 'function') loadSidebar();
+            if (typeof loadSidebar === 'function') loadSidebar();   // = loadTopnavV3()
             if (typeof I18n !== 'undefined' && I18n.init) I18n.init();
             if (typeof HelpSystem !== 'undefined' && HelpSystem.init) HelpSystem.init();
+            if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
         }
     </script>
 </body>