fix(dashboard): eliminate @apply CSS, fix status column, fix click propagation

Playwright testing revealed 3 critical bugs:

1. Tailwind CDN @apply with custom brand-* colors produces empty CSS
   rules, breaking ALL design components (kpi-card, data-table, badges,
   filter-btn, section-card, nav-item). Fix: replace all @apply
   directives with equivalent raw CSS values.

2. Traffic API and IP detail API reference non-existent 'status' column
   in http_logs table → HTTP 500 on /traffic and /ip/{ip}. Fix: remove
   status from SELECT, sort whitelist, filters, and templates.

3. Nested <a> links (fmtJA4, fmtASN, fmtCountry, fmtBotName) inside
   clickable <tr onclick> capture clicks, preventing row navigation to
   /ip/ detail. Fix: add event.stopPropagation() to all formatter links.

Verified with Playwright: 10 pages × 0 JS errors, all tooltips hidden
by default, sidebar toggle works, keyboard shortcuts (Alt+1-9, Alt+B),
classification form saves to DB, campaign detail panel opens on click.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

services/dashboard/backend/templates/base.html

@@ -23,7 +23,7 @@
             }
         }
     </script>
-    <style type="text/tailwindcss">
+    <style>
         body { font-family: 'Inter', system-ui, sans-serif; }
         /* ── Threat badges ── */
         .threat-critical { color: #ef4444; font-weight: 700; }
@@ -32,33 +32,35 @@
         .threat-low      { color: #22c55e; }
         .threat-normal   { color: #6b7280; }
         /* ── KPI cards ── */
-        .kpi-card { @apply bg-gray-900/80 rounded-xl p-4 border border-gray-800 backdrop-blur; }
+        .kpi-card { background: rgba(17,24,39,0.8); border-radius: 0.75rem; padding: 1rem; border: 1px solid #1f2937; backdrop-filter: blur(8px); }
         /* ── Data table ── */
-        .data-table { @apply w-full text-sm text-left; }
-        .data-table th { @apply px-3 py-2.5 bg-gray-900 text-gray-400 font-medium border-b border-gray-800 sticky top-0 text-xs uppercase tracking-wider; }
-        .data-table td { @apply px-3 py-2 border-b border-gray-800/50 text-gray-300; }
-        .data-table tbody tr:hover { @apply bg-gray-800/40; }
-        .data-table tbody tr { @apply cursor-pointer transition-colors; }
+        .data-table { width: 100%; font-size: 0.875rem; text-align: left; }
+        .data-table th { padding: 0.625rem 0.75rem; background: #111827; color: #9ca3af; font-weight: 500; border-bottom: 1px solid #1f2937; position: sticky; top: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
+        .data-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(31,41,55,0.5); color: #d1d5db; }
+        .data-table tbody tr:hover { background: rgba(31,41,55,0.4); }
+        .data-table tbody tr { cursor: pointer; transition: background-color 0.15s, color 0.15s; }
         /* ── Badges ── */
-        .badge { @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium; }
-        .badge-critical { @apply bg-red-500/20 text-red-400; }
-        .badge-high     { @apply bg-orange-500/20 text-orange-400; }
-        .badge-medium   { @apply bg-yellow-500/20 text-yellow-400; }
-        .badge-low      { @apply bg-green-500/20 text-green-400; }
-        .badge-normal   { @apply bg-gray-500/20 text-gray-400; }
-        .badge-known    { @apply bg-blue-500/20 text-blue-400; }
+        .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
+        .badge-critical { background: rgba(239,68,68,0.2); color: #f87171; }
+        .badge-high     { background: rgba(249,115,22,0.2); color: #fb923c; }
+        .badge-medium   { background: rgba(234,179,8,0.2); color: #facc15; }
+        .badge-low      { background: rgba(34,197,94,0.2); color: #4ade80; }
+        .badge-normal   { background: rgba(107,114,128,0.2); color: #9ca3af; }
+        .badge-known    { background: rgba(59,130,246,0.2); color: #60a5fa; }
         /* ── Filter buttons ── */
-        .filter-btn { @apply px-3 py-1.5 text-xs rounded-lg border border-gray-700 text-gray-400 hover:border-brand-500 hover:text-brand-500 transition-colors cursor-pointer; }
-        .filter-btn.active { @apply border-brand-500 bg-brand-500/20 text-brand-500; }
+        .filter-btn { padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: 0.5rem; border: 1px solid #374151; color: #9ca3af; transition: border-color 0.15s, color 0.15s; cursor: pointer; background: transparent; }
+        .filter-btn:hover { border-color: #6366f1; color: #6366f1; }
+        .filter-btn.active { border-color: #6366f1; background: rgba(99,102,241,0.2); color: #6366f1; }
         /* ── Section card ── */
-        .section-card { @apply bg-gray-900/80 rounded-xl border border-gray-800 backdrop-blur; }
-        .section-header { @apply flex items-center justify-between px-5 py-3 border-b border-gray-800; }
-        .section-title { @apply text-sm font-semibold text-gray-200 flex items-center gap-2; }
-        .section-body { @apply p-5; }
+        .section-card { background: rgba(17,24,39,0.8); border-radius: 0.75rem; border: 1px solid #1f2937; backdrop-filter: blur(8px); }
+        .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid #1f2937; }
+        .section-title { font-size: 0.875rem; font-weight: 600; color: #e5e7eb; display: flex; align-items: center; gap: 0.5rem; }
+        .section-body { padding: 1.25rem; }
         /* ── Sidebar ── */
-        .nav-item { @apply flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800/60 transition-colors text-sm cursor-pointer; }
-        .nav-item.active { @apply bg-brand-600/20 text-brand-400 border-l-2 border-brand-500; }
-        .nav-group-title { @apply text-[10px] uppercase tracking-widest text-gray-600 px-3 pt-4 pb-1; }
+        .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: #9ca3af; transition: color 0.15s, background 0.15s; font-size: 0.875rem; cursor: pointer; text-decoration: none; }
+        .nav-item:hover { color: white; background: rgba(31,41,55,0.6); }
+        .nav-item.active { background: rgba(79,70,229,0.2); color: #818cf8; border-left: 2px solid #6366f1; }
+        .nav-group-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #4b5563; padding: 1rem 0.75rem 0.25rem; }
     </style>
     <style>
         /* ── Raw CSS (no @apply) for reliable rendering ── */
@@ -280,24 +282,24 @@
         }
         function fmtASN(org) {
             if (!org) return '';
-            return `<a href="/network?asn_org=${encodeURIComponent(org)}" class="text-blue-400 hover:underline cursor-pointer">${escapeHtml(org)}</a>`;
+            return `<a href="/network?asn_org=${encodeURIComponent(org)}" onclick="event.stopPropagation()" class="text-blue-400 hover:underline cursor-pointer">${escapeHtml(org)}</a>`;
         }
         function fmtCountry(cc) {
             if (!cc) return '';
             const flags = {'FR':'🇫🇷','DE':'🇩🇪','NL':'🇳🇱','GB':'🇬🇧','ES':'🇪🇸','US':'🇺🇸','RU':'🇷🇺','IT':'🇮🇹','JP':'🇯🇵','CN':'🇨🇳','KR':'🇰🇷','BR':'🇧🇷','AU':'🇦🇺','CA':'🇨🇦','IN':'🇮🇳','SG':'🇸🇬','SE':'🇸🇪','FI':'🇫🇮','IE':'🇮🇪','CH':'🇨🇭'};
-            return `<a href="/detections?country_code=${encodeURIComponent(cc)}" class="hover:underline cursor-pointer">${flags[cc]||'🏳️'} ${escapeHtml(cc)}</a>`;
+            return `<a href="/detections?country_code=${encodeURIComponent(cc)}" onclick="event.stopPropagation()" class="hover:underline cursor-pointer">${flags[cc]||'🏳️'} ${escapeHtml(cc)}</a>`;
         }
         function fmtJA4(ja4) {
             if (!ja4) return '';
-            return `<a href="/detections?ja4=${encodeURIComponent(ja4)}" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]" title="${escapeHtml(ja4)}">${escapeHtml(ja4.substring(0,22))}…</a>`;
+            return `<a href="/detections?ja4=${encodeURIComponent(ja4)}" onclick="event.stopPropagation()" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]" title="${escapeHtml(ja4)}">${escapeHtml(ja4.substring(0,22))}…</a>`;
         }
         function fmtJA4Full(ja4) {
             if (!ja4) return '';
-            return `<a href="/detections?ja4=${encodeURIComponent(ja4)}" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]">${escapeHtml(ja4)}</a>`;
+            return `<a href="/detections?ja4=${encodeURIComponent(ja4)}" onclick="event.stopPropagation()" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]">${escapeHtml(ja4)}</a>`;
         }
         function fmtBotName(name) {
             if (!name) return '';
-            return `<a href="/detections?bot_name=${encodeURIComponent(name)}" class="text-cyan-400 hover:underline cursor-pointer">${escapeHtml(name)}</a>`;
+            return `<a href="/detections?bot_name=${encodeURIComponent(name)}" onclick="event.stopPropagation()" class="text-cyan-400 hover:underline cursor-pointer">${escapeHtml(name)}</a>`;
         }
         function fmtThreatLink(level) {
             if (!level) return '';

services/dashboard/backend/templates/ip_detail.html

@@ -91,7 +91,7 @@
         </span></div>
         <div class="overflow-x-auto" style="max-height:35vh; overflow-y:auto">
             <table class="data-table"><thead><tr>
-                <th>Time</th><th>Method</th><th>Status</th><th>Host</th><th>Path</th><th>HTTP</th><th>User-Agent</th><th>JA4</th>
+                <th>Time</th><th>Method</th><th>Host</th><th>Path</th><th>HTTP</th><th>User-Agent</th><th>JA4</th>
             </tr></thead><tbody id="http-body"></tbody></table>
         </div>
     </div>
@@ -231,13 +231,12 @@ async function loadIP() {
         document.getElementById('http-body').innerHTML = (d.http_logs||[]).map(row => `<tr>
             <td class="text-[11px] whitespace-nowrap text-gray-400">${row.time||''}</td>
             <td><span class="font-mono text-xs ${row.method==='POST'?'text-orange-400':'text-gray-300'}">${escapeHtml(row.method||'')}</span></td>
-            <td class="${sc(row.status||0)} font-mono text-[11px]">${row.status||''}</td>
             <td class="text-xs max-w-[100px] truncate">${escapeHtml(row.host||'')}</td>
             <td class="text-xs max-w-[200px] truncate font-mono" title="${escapeHtml(row.path||'')}">${escapeHtml(row.path||'')}</td>
             <td class="font-mono text-[11px] text-gray-400">${escapeHtml(row.http_version||'')}</td>
             <td class="text-xs max-w-[180px] truncate text-gray-400">${escapeHtml(row.header_user_agent||'')}</td>
             <td class="font-mono text-[11px]">${escapeHtml(row.ja4||'')}</td>
-        </tr>`).join('') || '<tr><td colspan="8" class="text-center text-gray-500 py-4">Aucun log</td></tr>';
+        </tr>`).join('') || '<tr><td colspan="7" class="text-center text-gray-500 py-4">Aucun log</td></tr>';
 
         // Cascade
         const cascadeRows = cascade.data || [];

services/dashboard/backend/templates/traffic.html

@@ -51,14 +51,13 @@
             <option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option><option>HEAD</option><option>OPTIONS</option>
         </select>
         <input type="text" id="host-filter" placeholder="Filtrer host..." class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-48 focus:border-brand-500 focus:outline-none">
-        <input type="number" id="status-filter" placeholder="Status" class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-28 focus:border-brand-500 focus:outline-none">
         <input type="text" id="search-filter" placeholder="Rechercher IP, path, UA…" class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-64 focus:border-brand-500 focus:outline-none">
     </div>
     <div class="section-card overflow-hidden">
         <div class="overflow-x-auto max-h-[70vh] overflow-y-auto">
             <table class="data-table"><thead><tr>
                 <th class="cursor-pointer" data-sort="time">Time ↕</th>
-                <th>IP</th><th>Method</th><th>Status</th><th>Host</th><th>Path</th>
+                <th>IP</th><th>Method</th><th>Host</th><th>Path</th>
                 <th>HTTP</th><th>User-Agent</th><th>JA4</th><th>Pays</th>
             </tr></thead><tbody id="traffic-body"></tbody></table>
         </div>
@@ -82,9 +81,8 @@ async function loadTraffic() {
     const params = new URLSearchParams({page:tPage,per_page:100,sort:tSort,order:tOrder});
     const m=document.getElementById('method-filter').value;
     const h=document.getElementById('host-filter').value;
-    const s=document.getElementById('status-filter').value;
     const q=document.getElementById('search-filter').value;
-    if(m) params.set('method',m); if(h) params.set('host',h); if(s) params.set('status',s); if(q) params.set('search',q);
+    if(m) params.set('method',m); if(h) params.set('host',h); if(q) params.set('search',q);
     try {
         const r = await fetch('/api/traffic?'+params); const d = await r.json();
         const tbody = document.getElementById('traffic-body');
@@ -92,7 +90,6 @@ async function loadTraffic() {
             <td class="text-xs whitespace-nowrap">${row.time||''}</td>
             <td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
             <td class="${mc(row.method)} font-mono text-xs">${row.method||''}</td>
-            <td class="${sc(row.status||0)} font-mono text-xs">${row.status||''}</td>
             <td class="text-xs max-w-[150px] truncate">${escapeHtml(row.host||'')}</td>
             <td class="text-xs max-w-[250px] truncate font-mono" title="${escapeHtml(row.path||'')}">${escapeHtml(row.path||'')}</td>
             <td class="font-mono text-xs">${escapeHtml(row.http_version||'')}</td>
@@ -118,7 +115,7 @@ document.querySelectorAll('[data-sort]').forEach(th => th.onclick = () => {
 
 // Filters with debounce
 let filterTimer;
-['method-filter','host-filter','status-filter','search-filter'].forEach(id=>{
+['method-filter','host-filter','search-filter'].forEach(id=>{
     let el=document.getElementById(id);
     el.addEventListener(el.tagName==='SELECT'?'change':'input',()=>{
         clearTimeout(filterTimer);