feat(mobile): mobile card view for clients + interests lists

Adds optional cardRender prop to <DataTable> that switches the layout
to a vertical card list below lg: while keeping the same TanStack
table instance powering both views (pagination, sort, selection).

New shared shell:
  - <ListCard>          rounded card with optional left status accent bar,
                        whole-card link to detail page, top-right actions
                        slot, and tactile hover/active states.
  - <ListCardAvatar>    40px brand-tinted circle (initials or domain icon).
  - <ListCardMeta>      inline icon + muted text segment.
  - deriveInitials()    shared helper that ignores numeric tokens (so
                        "Recovery Test 1777" -> "RT", not "R1").

Clients and interests pages now render mobile cards via cardRender
using this shell; desktop view (lg+) is unchanged. Interests cards
encode pipeline stage as a left-edge accent strip whose saturation
deepens with pipeline progression (open -> completed). Berths display
with an Anchor icon; null-berth interests fall back to a Compass +
"General interest" italic label. Hot leads get a discreet "Hot" pill.

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

src/components/shared/data-table.tsx

@@ -6,6 +6,7 @@ import {
   getCoreRowModel,
   useReactTable,
   type ColumnDef,
+  type Row,
   type RowSelectionState,
 } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ArrowUpDown, Loader2 } from 'lucide-react';
@@ -50,6 +51,13 @@ interface DataTableProps<TData> {
   isLoading?: boolean;
   getRowId?: (row: TData) => string;
   onRowClick?: (row: TData) => void;
+  /**
+   * Mobile card renderer. When provided, the table is hidden below `lg:`
+   * and replaced with a vertical list of cards built from this callback.
+   * The same TanStack `table` instance powers both views, so pagination,
+   * sort, and selection stay in sync across the breakpoint.
+   */
+  cardRender?: (row: Row<TData>) => React.ReactNode;
 }
 
 export function DataTable<TData>({
@@ -66,6 +74,7 @@ export function DataTable<TData>({
   isLoading,
   getRowId,
   onRowClick,
+  cardRender,
 }: DataTableProps<TData>) {
   const [internalSelection, setInternalSelection] = useState<RowSelectionState>({});
   const rowSelectionState = externalSelection ?? internalSelection;
@@ -142,9 +151,11 @@ export function DataTable<TData>({
     );
   }
 
+  const rows = table.getRowModel().rows;
+
   return (
     <div className="space-y-2">
-      <div className="rounded-md border overflow-x-auto">
+      <div className={cn('rounded-md border overflow-x-auto', cardRender && 'hidden lg:block')}>
         <Table>
           <TableHeader className="sticky top-0 z-10 bg-muted/50">
             {table.getHeaderGroups().map((headerGroup) => (
@@ -219,6 +230,23 @@ export function DataTable<TData>({
         </Table>
       </div>
 
+      {/* Mobile card list */}
+      {cardRender && (
+        <ul className="lg:hidden flex flex-col gap-2">
+          {isLoading ? (
+            <li className="rounded-md border bg-card p-6 text-center">
+              <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
+            </li>
+          ) : rows.length === 0 ? (
+            <li className="rounded-md border bg-card p-6 text-center text-sm text-muted-foreground">
+              {emptyState ?? 'No results.'}
+            </li>
+          ) : (
+            rows.map((row) => <li key={row.id}>{cardRender(row)}</li>)
+          )}
+        </ul>
+      )}
+
       {/* Pagination */}
       {pagination && pagination.totalPages > 1 && (
         <div className="flex items-center justify-between px-2">