fix(audit-wave-9): adopt StatusPill for berth + user status badges

- Extend StatusPill with berth (available/under_offer/sold) and user
  (enabled/disabled) variants so every "this thing is in state X" pill
  shares one primitive and palette.
- Swap berth-card, berth-detail-header, berth-columns from ad-hoc
  bg-green-100 / bg-yellow-100 / bg-red-100 Tailwind tuples to
  <StatusPill status="...">.
- Swap UserList Active/Disabled <Badge> and user-card Inactive pill to
  StatusPill; Super-Admin chip kept as a domain-specific accent (violet).

Closes ui/ux M1+M2.

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

src/components/berths/berth-detail-header.tsx

@@ -26,6 +26,7 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
 import { PermissionGate } from '@/components/shared/permission-gate';
+import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
 import { BerthForm } from './berth-form';
 import { mooringLetterDot } from './mooring-letter-tone';
 import { cn } from '@/lib/utils';
@@ -86,18 +87,18 @@ interface BerthDetailHeaderProps {
   berth: BerthDetailData;
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  available: 'bg-green-100 text-green-800 border-green-300',
-  under_offer: 'bg-yellow-100 text-yellow-800 border-yellow-300',
-  sold: 'bg-red-100 text-red-800 border-red-300',
-};
-
 const STATUS_LABELS: Record<string, string> = {
   available: 'Available',
   under_offer: 'Under Offer',
   sold: 'Sold',
 };
 
+const BERTH_STATUS_PILL: Record<string, StatusPillStatus> = {
+  available: 'available',
+  under_offer: 'under_offer',
+  sold: 'sold',
+};
+
 interface InterestOption {
   id: string;
   clientName: string;
@@ -276,11 +277,12 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
             >
               {berth.mooringNumber}
             </div>
-            <span
-              className={`inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium ${STATUS_COLORS[berth.status] ?? 'bg-muted text-muted-foreground border-muted'}`}
+            <StatusPill
+              status={BERTH_STATUS_PILL[berth.status] ?? 'pending'}
+              className="px-3 py-1 text-sm"
             >
               {STATUS_LABELS[berth.status] ?? berth.status}
-            </span>
+            </StatusPill>
           </div>
 
           <div className="flex flex-wrap items-center gap-2 sm:shrink-0">