feat(ui): add list-item-interactive class, update table row hover

- Add .list-item-interactive CSS class: 2px left border on hover/focus,
  bg-elevated on active press, 50ms transitions
- FleetTable: update hover to bg-elevated/30 with 50ms transition
- Class available for div-based list rows (alerts, events, nav items)

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

frontend/src/components/fleet/FleetTable.tsx

@@ -92,7 +92,7 @@ function SortHeader({ column, label, currentSort, currentDir, onSort, className
 function DeviceCard({ device, tenantId }: { device: DeviceResponse; tenantId: string }) {
   return (
     <div
-      className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/50 transition-colors min-h-[44px]"
+      className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/30 transition-[background-color] duration-[50ms] min-h-[44px]"
       data-testid={`device-card-${device.hostname}`}
     >
       <div className="flex items-start justify-between gap-2">
@@ -402,7 +402,7 @@ export function FleetTable({
                             data-index={virtualRow.index}
                             ref={virtualizer.measureElement}
                             className={cn(
-                              'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                              'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                               selectedIndex === virtualRow.index && 'bg-elevated/50',
                             )}
                             style={{
@@ -460,7 +460,7 @@ export function FleetTable({
                       key={device.id}
                       data-testid={`device-row-${device.hostname}`}
                       className={cn(
-                        'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                        'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                         selectedIndex === idx && 'bg-elevated/50',
                       )}
                     >

frontend/src/index.css

@@ -207,3 +207,19 @@
     font-variant-numeric: tabular-nums;
   }
 }
+
+/* ── Interaction classes ── */
+@layer components {
+  .list-item-interactive {
+    border-left: 2px solid transparent;
+    transition: border-color 50ms linear, background-color 50ms linear;
+  }
+  .list-item-interactive:hover,
+  .list-item-interactive:focus-visible {
+    border-left-color: hsl(var(--accent));
+    outline: none;
+  }
+  .list-item-interactive:active {
+    background-color: hsl(var(--elevated));
+  }
+}