style(detail): apply gradient header strip to client/interest/yacht/company/berth/residential/invoice details

Adds shared <DetailHeaderStrip> wrapper (rounded-xl + gradient-brand-soft + shadow-xs)
and applies it to every legacy domain detail header. Residential client/interest and
invoice detail get an inline gradient strip with eyebrow ('Residential Client',
'Residential Interest', 'Invoice'). Residential bodies normalized to lg:grid-cols-[2fr_1fr]
per spec.

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

src/components/invoices/invoice-detail.tsx

@@ -85,15 +85,18 @@ export function InvoiceDetail({ invoiceId }: InvoiceDetailProps) {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <div className="flex items-center gap-3">
-            <h2 className="text-xl font-semibold font-mono">{invoice.invoiceNumber}</h2>
+      <div className="rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs flex items-center justify-between gap-4 flex-wrap">
+        <div className="min-w-0">
+          <div className="text-xs font-semibold uppercase tracking-wide text-brand">Invoice</div>
+          <div className="mt-1 flex items-center gap-3 flex-wrap">
+            <h1 className="truncate text-2xl font-bold tracking-tight text-foreground font-mono">
+              {invoice.invoiceNumber}
+            </h1>
             <Badge variant="outline" className={`capitalize text-sm border ${statusColor}`}>
               {invoice.status}
             </Badge>
           </div>
-          <p className="text-sm text-muted-foreground mt-0.5">{invoice.clientName}</p>
+          <p className="text-sm text-muted-foreground mt-1">{invoice.clientName}</p>
         </div>
         <div className="flex items-center gap-2">
           {invoice.status === 'draft' && (