fix(ui): Needs Attention updates on tenant switch, VPN colors tokenized

- Dashboard fleet query now uses selected tenant ID for super_admin
  instead of always fetching all tenants. Needs Attention, metrics
  strip, and all widgets update when switching tenants.
- VPN tab: replace hardcoded purple/blue/green hex with token colors
- Add Certificates and VPN back to sidebar low-frequency section

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

frontend/src/components/fleet/FleetDashboard.tsx

@@ -175,9 +175,9 @@ export function FleetDashboard() {
     isFetching: fleetFetching,
     dataUpdatedAt,
   } = useQuery({
-    queryKey: ['fleet-summary', isSuperAdmin ? 'all' : tenantId],
+    queryKey: ['fleet-summary', isSuperAdmin && !selectedTenantId ? 'all' : tenantId],
     queryFn: () =>
-      isSuperAdmin
+      isSuperAdmin && !selectedTenantId
         ? metricsApi.fleetSummaryAll()
         : metricsApi.fleetSummary(tenantId),
     // Disable polling when SSE is connected (events update cache directly)

frontend/src/components/network/VpnTab.tsx

@@ -26,17 +26,17 @@ const VPN_TYPE_CONFIG = {
   wireguard: {
     icon: Shield,
     label: 'WireGuard',
-    color: '#a855f7', // purple
+    color: 'hsl(var(--accent))',
   },
   ipsec: {
     icon: Lock,
     label: 'IPsec',
-    color: '#3b82f6', // blue
+    color: 'hsl(var(--info))',
   },
   l2tp: {
     icon: Globe,
     label: 'L2TP',
-    color: '#22c55e', // green
+    color: 'hsl(var(--success))',
   },
 } as const