diff --git a/src/app/(app)/quotes/[id]/page.tsx b/src/app/(app)/quotes/[id]/page.tsx
index b5c552c..4c921d3 100644
--- a/src/app/(app)/quotes/[id]/page.tsx
+++ b/src/app/(app)/quotes/[id]/page.tsx
@@ -1578,601 +1578,606 @@ export default function QuoteDetailPage({ params }: { params: Promise<{ id: stri
         </Card>
       )}
 
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Customer</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="font-medium">{quote.expand?.customer?.customer || "—"}</p>
-            {quote.expand?.customer?.expand?.company && (
-              <p className="text-sm text-muted-foreground">{quote.expand.customer.expand.company.company}</p>
-            )}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Company</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="font-medium">{quote.expand?.company?.company || "—"}</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Letterhead</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="font-medium">{quote.company_letterhead || "CNL"}</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Date</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm">{formatDate(quote.created)}</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1">
-              <User className="h-3 w-3" />
-              Claimed by
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            {quote.claimed_by ? (
-              <div className="flex items-center gap-2 min-w-0">
-                <Avatar size="sm">
-                  <AvatarFallback>{(claimerName || quote.claimed_by).slice(0, 2).toUpperCase()}</AvatarFallback>
-                </Avatar>
-                <p className="font-medium truncate" title={claimerName || quote.claimed_by}>
-                  {claimerName || (quote.claimed_by.length > 12 ? `${quote.claimed_by.slice(0, 12)}…` : quote.claimed_by)}
-                </p>
-              </div>
-            ) : (
-              <p className="text-sm text-muted-foreground">Unclaimed</p>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-
-      {quote.description && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm flex items-center gap-2"><FileText className="h-4 w-4" />Description</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="whitespace-pre-wrap text-sm">{quote.description}</p>
-          </CardContent>
-        </Card>
-      )}
-
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between gap-3">
-          <CardTitle className="text-sm flex items-center gap-2"><FileText className="h-4 w-4" />Items ({items.length})</CardTitle>
-          <div className="flex items-center gap-3">
-            {subtotal > 0 && (
-              <div className="text-right text-sm">
-                <span className="text-muted-foreground">Subtotal: </span>
-                <span className="font-medium">{formatCurrency(subtotal)}</span>
-                <span className="text-muted-foreground ml-2">VAT: </span>
-                <span className="font-medium">{formatCurrency(vat)}</span>
-              </div>
-            )}
-            {items.length > 0 && (
-              <Button
-                size="sm"
-                onClick={() => setRewriteOpen(true)}
-                data-testid="open-rewrite-modal"
-                className="bg-amber-400 hover:bg-amber-500 text-amber-950 border-amber-500 shadow-sm font-semibold"
-              >
-                <Sparkles className="mr-1 h-3.5 w-3.5" />
-                Rewrite with AI
-              </Button>
-            )}
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* "Compare with original request" toggle — when on, the
-              original email card renders inline above the items so an
-              approver can verify each quoted line against what was
-              actually asked for without scrolling. The email card is
-              moved out of its old spot below the items to keep the
-              page from showing the same content twice. */}
-          {(quote.email_body || attachments.length > 0) && (
-            <div className="flex items-center justify-between gap-2 pb-3 border-b">
-              <p className="text-xs text-muted-foreground">
-                Toggle the original email request above the items for line-by-line comparison.
-              </p>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setCompareOpen((v) => !v)}
-                aria-expanded={compareOpen}
-                aria-controls="quote-compare-email"
-              >
-                <Mail className="mr-1.5 h-3.5 w-3.5" />
-                {compareOpen ? "Hide" : "Compare with"} original request
-              </Button>
-            </div>
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* LEFT COLUMN — primary content (Description / Items / Notes).
+            The Items card lives here because it's the page's hero; the
+            admin panels on the right are quieter so the eye lands on
+            the data first. */}
+        <div className="space-y-6 lg:col-span-2">
+          {quote.description && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm flex items-center gap-2"><FileText className="h-4 w-4" />Description</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="whitespace-pre-wrap text-sm">{quote.description}</p>
+              </CardContent>
+            </Card>
           )}
-          {compareOpen && (
-            <div id="quote-compare-email">
-              <QuoteEmailCard quote={quote} attachments={attachments} />
-            </div>
-          )}
-          {items.length === 0 ? (
-            <div className="py-8 text-center text-muted-foreground">
-              <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No items yet</p>
-            </div>
-          ) : (
-            <>
-              <div className="hidden md:block rounded-md border">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Description</TableHead>
-                      <TableHead className="text-center w-[60px]">Qty</TableHead>
-                      <TableHead>Supplier</TableHead>
-                      <TableHead className="text-right">Cost</TableHead>
-                      <TableHead className="text-right">Selling</TableHead>
-                      <TableHead className="text-right w-[90px]">
-                        <span className="inline-flex items-center gap-1">
-                          <Percent className="h-3 w-3" />
-                          Markup
-                        </span>
-                      </TableHead>
-                      <TableHead className="text-center w-[80px]">Processed</TableHead>
-                      <TableHead className="text-right w-[110px]"></TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
+
+          <Card className="border-l-4 border-l-primary overflow-hidden">
+            <CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between bg-primary/5">
+              <CardTitle className="text-base font-semibold flex items-center gap-2">
+                <FileText className="h-4 w-4" />
+                Items ({items.length})
+              </CardTitle>
+              <div className="flex items-center gap-3 flex-wrap">
+                {subtotal > 0 && (
+                  <div className="text-right text-sm">
+                    <span className="text-muted-foreground">Subtotal: </span>
+                    <span className="font-medium">{formatCurrency(subtotal)}</span>
+                    <span className="text-muted-foreground ml-2">VAT: </span>
+                    <span className="font-medium">{formatCurrency(vat)}</span>
+                  </div>
+                )}
+                {items.length > 0 && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setRewriteOpen(true)}
+                    data-testid="open-rewrite-modal"
+                  >
+                    <Sparkles className="mr-1.5 h-3.5 w-3.5" />
+                    Rewrite with AI
+                  </Button>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4 pt-4">
+              {/* "Compare with original request" toggle — when on, the
+                  original email card renders inline above the items so an
+                  approver can verify each quoted line against what was
+                  actually asked for without scrolling. The email card is
+                  moved out of its old spot below the items to keep the
+                  page from showing the same content twice. */}
+              {(quote.email_body || attachments.length > 0) && (
+                <div className="flex items-center justify-between gap-2 pb-3 border-b">
+                  <p className="text-xs text-muted-foreground">
+                    Toggle the original email request above the items for line-by-line comparison.
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setCompareOpen((v) => !v)}
+                    aria-expanded={compareOpen}
+                    aria-controls="quote-compare-email"
+                  >
+                    <Mail className="mr-1.5 h-3.5 w-3.5" />
+                    {compareOpen ? "Hide" : "Compare with"} original request
+                  </Button>
+                </div>
+              )}
+              {compareOpen && (
+                <div id="quote-compare-email">
+                  <QuoteEmailCard quote={quote} attachments={attachments} />
+                </div>
+              )}
+              {items.length === 0 ? (
+                <div className="py-8 text-center text-muted-foreground">
+                  <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                  <p className="text-sm">No items yet</p>
+                </div>
+              ) : (
+                <>
+                  <div className="hidden md:block rounded-md border">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Description</TableHead>
+                          <TableHead className="text-center w-[60px]">Qty</TableHead>
+                          <TableHead>Supplier</TableHead>
+                          <TableHead className="text-right">Cost</TableHead>
+                          <TableHead className="text-right">Selling</TableHead>
+                          <TableHead className="text-right w-[90px]">
+                            <span className="inline-flex items-center gap-1">
+                              <Percent className="h-3 w-3" />
+                              Markup
+                            </span>
+                          </TableHead>
+                          <TableHead className="text-center w-[80px]">Processed</TableHead>
+                          <TableHead className="text-right w-[110px]"></TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {items.map((item) => {
+                          const pct = itemMarkupPercent(item);
+                          return (
+                            <TableRow key={item.id}>
+                              <TableCell className="text-sm whitespace-pre-wrap break-words align-top max-w-[420px]">{item.description}</TableCell>
+                              <TableCell className="text-center text-sm align-top">{item.quantity}</TableCell>
+                              <TableCell className="text-sm align-top">{item.expand?.supplier?.suppliername || "—"}</TableCell>
+                              <TableCell className="text-right text-sm tabular-nums align-top">{item.cost_price ? formatCurrency(item.cost_price) : "—"}</TableCell>
+                              <TableCell className="text-right text-sm tabular-nums align-top">{item.selling_price ? formatCurrency(item.selling_price) : "—"}</TableCell>
+                              <TableCell className={`text-right text-sm tabular-nums align-top ${markupBadgeClasses(pct)}`} title={pct !== null ? (pct < 20 ? "Below 20% target margin" : "At or above target margin") : "Cost or selling price missing"}>
+                                {formatMarkupPercent(pct)}
+                              </TableCell>
+                              <TableCell className="text-center align-top">
+                                <Badge variant={item.is_processed ? "default" : "secondary"} className="text-xs">
+                                  {item.is_processed ? "Yes" : "No"}
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="text-right align-top">
+                                <Button
+                                  size="xs"
+                                  variant="outline"
+                                  onClick={() => setPriceUpdateItem(item)}
+                                  disabled={priceUpdateSaving}
+                                  title="Update cost and selling price for this item"
+                                >
+                                  <Pencil className="mr-1 h-3 w-3" />
+                                  Update price
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          );
+                        })}
+                      </TableBody>
+                    </Table>
+                  </div>
+                  <div className="md:hidden space-y-3">
                     {items.map((item) => {
                       const pct = itemMarkupPercent(item);
                       return (
-                        <TableRow key={item.id}>
-                          <TableCell className="text-sm whitespace-pre-wrap break-words align-top max-w-[420px]">{item.description}</TableCell>
-                          <TableCell className="text-center text-sm align-top">{item.quantity}</TableCell>
-                          <TableCell className="text-sm align-top">{item.expand?.supplier?.suppliername || "—"}</TableCell>
-                          <TableCell className="text-right text-sm tabular-nums align-top">{item.cost_price ? formatCurrency(item.cost_price) : "—"}</TableCell>
-                          <TableCell className="text-right text-sm tabular-nums align-top">{item.selling_price ? formatCurrency(item.selling_price) : "—"}</TableCell>
-                          <TableCell className={`text-right text-sm tabular-nums align-top ${markupBadgeClasses(pct)}`} title={pct !== null ? (pct < 20 ? "Below 20% target margin" : "At or above target margin") : "Cost or selling price missing"}>
-                            {formatMarkupPercent(pct)}
-                          </TableCell>
-                          <TableCell className="text-center align-top">
-                            <Badge variant={item.is_processed ? "default" : "secondary"} className="text-xs">
+                        <Card key={item.id} className="p-4">
+                          <div className="flex items-start justify-between gap-2">
+                            <p className="text-sm font-medium flex-1 whitespace-pre-wrap break-words">{item.description}</p>
+                            <Badge variant={item.is_processed ? "default" : "secondary"} className="text-xs shrink-0">
                               {item.is_processed ? "Yes" : "No"}
                             </Badge>
-                          </TableCell>
-                          <TableCell className="text-right align-top">
+                          </div>
+                          <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm">
+                            <div className="flex justify-between">
+                              <span className="text-muted-foreground">Qty:</span>
+                              <span className="font-medium">{item.quantity}</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span className="text-muted-foreground">Supplier:</span>
+                              <span className="font-medium truncate ml-2">{item.expand?.supplier?.suppliername || "—"}</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span className="text-muted-foreground">Cost:</span>
+                              <span className="font-medium tabular-nums">{item.cost_price ? formatCurrency(item.cost_price) : "—"}</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span className="text-muted-foreground">Selling:</span>
+                              <span className="font-medium tabular-nums">{item.selling_price ? formatCurrency(item.selling_price) : "—"}</span>
+                            </div>
+                            <div className="flex justify-between col-span-2">
+                              <span className="text-muted-foreground">Markup:</span>
+                              <span className={`font-semibold tabular-nums ${markupBadgeClasses(pct)}`}>{formatMarkupPercent(pct)}</span>
+                            </div>
+                          </div>
+                          <div className="mt-3 flex justify-end">
                             <Button
                               size="xs"
                               variant="outline"
                               onClick={() => setPriceUpdateItem(item)}
                               disabled={priceUpdateSaving}
-                              title="Update cost and selling price for this item"
                             >
                               <Pencil className="mr-1 h-3 w-3" />
                               Update price
                             </Button>
-                          </TableCell>
-                        </TableRow>
+                          </div>
+                        </Card>
                       );
                     })}
-                  </TableBody>
-                </Table>
-              </div>
-              <div className="md:hidden space-y-3">
-                {items.map((item) => {
-                  const pct = itemMarkupPercent(item);
-                  return (
-                    <Card key={item.id} className="p-4">
-                      <div className="flex items-start justify-between gap-2">
-                        <p className="text-sm font-medium flex-1 whitespace-pre-wrap break-words">{item.description}</p>
-                        <Badge variant={item.is_processed ? "default" : "secondary"} className="text-xs shrink-0">
-                          {item.is_processed ? "Yes" : "No"}
-                        </Badge>
-                      </div>
-                      <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm">
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">Qty:</span>
-                          <span className="font-medium">{item.quantity}</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">Supplier:</span>
-                          <span className="font-medium truncate ml-2">{item.expand?.supplier?.suppliername || "—"}</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">Cost:</span>
-                          <span className="font-medium tabular-nums">{item.cost_price ? formatCurrency(item.cost_price) : "—"}</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">Selling:</span>
-                          <span className="font-medium tabular-nums">{item.selling_price ? formatCurrency(item.selling_price) : "—"}</span>
-                        </div>
-                        <div className="flex justify-between col-span-2">
-                          <span className="text-muted-foreground">Markup:</span>
-                          <span className={`font-semibold tabular-nums ${markupBadgeClasses(pct)}`}>{formatMarkupPercent(pct)}</span>
-                        </div>
-                      </div>
-                      <div className="mt-3 flex justify-end">
-                        <Button
-                          size="xs"
-                          variant="outline"
-                          onClick={() => setPriceUpdateItem(item)}
-                          disabled={priceUpdateSaving}
-                        >
-                          <Pencil className="mr-1 h-3 w-3" />
-                          Update price
-                        </Button>
-                      </div>
-                    </Card>
-                  );
-                })}
-              </div>
-            </>
-          )}
-        </CardContent>
-      </Card>
-
-      <OutboundAttachmentsCard
-        attachments={outboundAttachments}
-        uploading={outboundUploading}
-        deletingId={outboundDeleting}
-        onUpload={handleOutboundUpload}
-        onDelete={handleOutboundDelete}
-        onPreview={(att) => {
-          // Outbound file preview reuses the email-card's dialog via
-          // a tiny inline state — opening the same attachment preview
-          // pattern the office already trusts. Implementation lives
-          // alongside the card to keep the modal scope local.
-          setOutboundPreviewAtt(att);
-        }}
-      />
-
-      {/* Linked orders — every order that has been hard-linked to
-          this quote, OR that has us as a `potential_quote` suggestion
-          awaiting accept. Single surface for the operator to see
-          which orders reference this quote (e.g. supplier emails
-          get the items they need to fulfill). Fetched once at page
-          load and re-fetched alongside the quote on relevant
-          actions. */}
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle className="text-lg flex items-center gap-2">
-            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
-            Linked Orders
-          </CardTitle>
-          <CardDescription>
-            Every order that points at this quote — already-linked, or
-            suggested and waiting for accept on the order detail page.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {linkedOrders.length === 0 && (
-            <p className="text-sm text-muted-foreground">
-              No orders linked to this quote yet. They show up here
-              automatically when an order&rsquo;s matcher picks this quote,
-              or when one is created from this quote via the menu.
-            </p>
-          )}
-          <ul className="space-y-2">
-            {linkedOrders.map((o) => (
-              <li key={o.id}>
-                <LinkedOrderRow
-                  id={o.id}
-                  orderNumber={o.order_number}
-                  created={o.created}
-                  linkType={o.linkType}
-                  confidence={o.confidence}
-                />
-              </li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-
-      {quote.notes && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm">Notes</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="whitespace-pre-wrap text-sm">{quote.notes}</p>
-          </CardContent>
-        </Card>
-      )}
-
-      <Card>
-        <button
-          type="button"
-          onClick={() => setSettingsOpen((s) => !s)}
-          className="w-full text-left px-6 py-4 flex items-center justify-between gap-3 cursor-pointer hover:bg-accent/30 transition-colors rounded-xl"
-          aria-expanded={settingsOpen}
-          aria-controls="quote-settings-body"
-        >
-          <span className="text-sm font-medium flex items-center gap-2">
-            <Calendar className="h-4 w-4" />
-            Quote Settings
-            {!settingsOpen && (quote.follow_up_due || quote.validity_days != null) && (
-              <span className="text-xs font-normal text-muted-foreground inline-flex items-center gap-1">
-                {quote.follow_up_due && (
-                  <>
-                    <Calendar className="h-3 w-3" />
-                    Follow up {formatDate(quote.follow_up_due)}
-                  </>
-                )}
-                {quote.follow_up_due && quote.validity_days != null && <span> · </span>}
-                {quote.validity_days != null && (
-                  <span>{quote.validity_days}d validity</span>
-                )}
-              </span>
-            )}
-          </span>
-          {settingsOpen ? (
-            <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
-          ) : (
-            <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
-          )}
-        </button>
-        {settingsOpen && (
-          <CardContent id="quote-settings-body" className="space-y-4">
-            {quote.is_template ? (
-              // Templates don't have a specific date or validity — those
-              // only matter when a quote actually goes to a customer.
-              // Only the follow-up reminder is meaningful.
-              <p className="text-sm text-muted-foreground">
-                Templates don&apos;t carry a quote date or validity — those
-                are set on the real quote generated from this template.
-                Use the follow-up date below to remind yourself to issue
-                this template on a particular day.
-              </p>
-            ) : null}
-            <div className="grid gap-4 sm:grid-cols-3">
-              {!quote.is_template && (
-                <>
-                  <div className="space-y-1.5">
-                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                      Quote date
-                    </label>
-                    <Input
-                      type="date"
-                      value={quoteDate}
-                      onChange={(e) => setQuoteDate(e.target.value)}
-                      className="h-9 text-sm"
-                    />
-                    <p className="text-xs text-muted-foreground">
-                      Date printed on the PDF. Defaults to today.
-                    </p>
-                  </div>
-                  <div className="space-y-1.5">
-                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                      Valid for (days)
-                    </label>
-                    <Input
-                      type="number"
-                      min={1}
-                      step={1}
-                      placeholder="30"
-                      value={validityDays}
-                      onChange={(e) => setValidityDays(e.target.value)}
-                      className="h-9 text-sm"
-                    />
-                    <p className="text-xs text-muted-foreground">
-                      Empty = 30 day default. Set 60 for 2 months, etc.
-                    </p>
                   </div>
                 </>
               )}
-              <div className="space-y-1.5">
-                <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                  Follow up by
-                </label>
-                <Input
-                  type="date"
-                  value={followUpDue}
-                  onChange={(e) => setFollowUpDue(e.target.value)}
-                  className="h-9 text-sm"
-                />
-                <p className="text-xs text-muted-foreground">
-                  Dashboard flags this quote when overdue.
-                </p>
-              </div>
-            </div>
-            <div className="flex justify-end pt-1">
-              <Button
-                size="sm"
-                onClick={handleSaveSettings}
-                disabled={savingSettings}
-              >
-                {savingSettings ? (
-                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
-                ) : null}
-                Save settings
-              </Button>
-            </div>
-          </CardContent>
-        )}
-      </Card>
+            </CardContent>
+          </Card>
 
-      <Card>
-        <button
-          type="button"
-          onClick={() => setHistoryOpen((s) => !s)}
-          className="w-full text-left px-6 py-4 flex items-center justify-between gap-3 cursor-pointer hover:bg-accent/30 transition-colors rounded-xl"
-          aria-expanded={historyOpen}
-          aria-controls="quote-history-body"
-        >
-          <span className="text-sm font-medium flex items-center gap-2">
-            <History className="h-4 w-4" />
-            History
-            <span className="text-xs font-normal text-muted-foreground">
-              basic — full audit needs a migration
-            </span>
-          </span>
-          {historyOpen ? (
-            <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
-          ) : (
-            <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+          {quote.notes && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm">Notes</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="whitespace-pre-wrap text-sm">{quote.notes}</p>
+              </CardContent>
+            </Card>
           )}
-        </button>
-        {historyOpen && (
-          <CardContent id="quote-history-body" className="space-y-3 pt-0">
-            <p className="text-xs text-muted-foreground">
-              Derived from the existing quote + email fields. Full audit trail
-              (with actor + per-field diffs) requires a new PB collection and
-              write hooks — tracked as a follow-up migration.
-            </p>
-            <ul className="space-y-2 text-sm">
-              <HistoryRow
-                icon={<FileText className="h-3.5 w-3.5" />}
-                label="Quote created"
-                timestamp={quote.created}
-              />
-              <HistoryRow
-                icon={<RefreshCw className="h-3.5 w-3.5" />}
-                label="Last updated"
-                timestamp={quote.updated}
-                muted={quote.updated === quote.created}
-              />
-              <HistoryRow
-                icon={<User className="h-3.5 w-3.5" />}
-                label={`Status: ${statusLabels[quote.status] || quote.status}`}
-                timestamp={quote.updated}
-              />
-              {quote.claimed_by && (
-                <HistoryRow
-                  icon={<User className="h-3.5 w-3.5" />}
-                  label={`Claimed by ${claimerName || quote.claimed_by}`}
-                  timestamp={null}
-                  muted
-                />
-              )}
-              {quote.email_received_at && (
-                <HistoryRow
-                  icon={<Mail className="h-3.5 w-3.5" />}
-                  label="Original email received"
-                  timestamp={quote.email_received_at}
-                />
-              )}
-              {quote.email_delivered && (
-                <HistoryRow
-                  icon={<Mail className="h-3.5 w-3.5" />}
-                  label="Quote email delivered"
-                  timestamp={quote.email_delivered_at}
-                />
-              )}
-              {quote.email_opened && (
-                <HistoryRow
-                  icon={<MailOpen className="h-3.5 w-3.5" />}
-                  label="Quote email opened"
-                  timestamp={quote.email_opened_at}
-                />
-              )}
-              {quote.last_reply_at && (
-                <HistoryRow
-                  icon={<Mail className="h-3.5 w-3.5" />}
-                  label="Customer replied"
-                  timestamp={quote.last_reply_at}
-                />
-              )}
-              {quote.pdf_generated_at && (
-                <HistoryRow
-                  icon={<FileDown className="h-3.5 w-3.5" />}
-                  label="PDF generated"
-                  timestamp={quote.pdf_generated_at}
-                />
-              )}
-              {quote.email_failed_at && (
-                <HistoryRow
-                  icon={<XCircle className="h-3.5 w-3.5" />}
-                  label={
-                    quote.email_error
-                      ? `Email send failed — ${quote.email_error}`
-                      : "Email send failed"
-                  }
-                  timestamp={quote.email_failed_at}
-                  destructive
-                />
-              )}
-              {quote.status === "sending" && quote.sending_started_at && (
-                <HistoryRow
-                  icon={<Loader2 className="h-3.5 w-3.5 animate-spin" />}
-                  label="Email send in progress"
-                  timestamp={quote.sending_started_at}
-                />
-              )}
-              {quote.approved_by && (
-                <HistoryRow
-                  icon={<CheckCircle className="h-3.5 w-3.5" />}
-                  label={`Approved by ${claimerName || quote.approved_by}`}
-                  timestamp={quote.updated}
-                />
-              )}
-              {quote.follow_up_due && (
-                <HistoryRow
-                  icon={<Clock className="h-3.5 w-3.5" />}
-                  label={`Follow-up due ${formatDate(quote.follow_up_due)}`}
-                  timestamp={null}
-                  muted
-                />
-              )}
-            </ul>
-          </CardContent>
-        )}
-      </Card>
+        </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm flex items-center gap-2"><Mail className="h-4 w-4" />Email Status</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div>
-              <p className="text-xs text-muted-foreground">Delivered</p>
-              <div className="flex items-center gap-1.5 mt-1">
-                {quote.email_delivered ? (
-                  <Mail className="h-4 w-4 text-primary" />
-                ) : (
-                  <Mail className="h-4 w-4 text-muted-foreground" />
+        {/* RIGHT COLUMN — meta + admin panels. The eye should land on the
+            Items card first; the panels on the right are reference / config
+            and sit quietly. Mobile stacks them below the items. */}
+        <div className="space-y-6">
+          {/* Compact meta card — Customer / Company / Dates / Letterhead /
+              Claimed by, packed into a single card with a header icon
+              rather than five separate micro-cards. */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm flex items-center gap-2">
+                <Building2 className="h-4 w-4 text-muted-foreground" />
+                Customer
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm">
+              <div>
+                <p className="font-medium">{quote.expand?.customer?.customer || "—"}</p>
+                {quote.expand?.customer?.expand?.company && (
+                  <p className="text-xs text-muted-foreground">{quote.expand.customer.expand.company.company}</p>
                 )}
-                <span className="text-sm">{quote.email_delivered ? "Yes" : "No"}</span>
               </div>
-            </div>
-            <div>
-              <p className="text-xs text-muted-foreground">Opened</p>
-              <div className="flex items-center gap-1.5 mt-1">
-                {quote.email_opened ? (
-                  <MailOpen className="h-4 w-4 text-primary" />
-                ) : (
-                  <MailOpen className="h-4 w-4 text-muted-foreground" />
+              <div className="grid grid-cols-2 gap-x-4 gap-y-2">
+                <div>
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Company</p>
+                  <p className="font-medium">{quote.expand?.company?.company || "—"}</p>
+                </div>
+                <div>
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Letterhead</p>
+                  <p className="font-medium">{quote.company_letterhead || "CNL"}</p>
+                </div>
+                <div>
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Created</p>
+                  <p className="font-medium">{formatDate(quote.created)}</p>
+                </div>
+                {quote.quote_date && (
+                  <div>
+                    <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Quote date</p>
+                    <p className="font-medium">{formatDate(quote.quote_date)}</p>
+                  </div>
                 )}
-                <span className="text-sm">{quote.email_opened ? "Yes" : "No"}</span>
               </div>
-            </div>
-            <div>
-              <p className="text-xs text-muted-foreground">Sender</p>
-              <p className="text-sm mt-1">{quote.email_sender || "—"}</p>
-            </div>
-            <div>
-              <p className="text-xs text-muted-foreground">Subject</p>
-              <p className="text-sm mt-1 truncate">{quote.email_subject || "—"}</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+              <div className="pt-2 border-t">
+                <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">Claimed by</p>
+                {quote.claimed_by ? (
+                  <div className="flex items-center gap-2 min-w-0">
+                    <Avatar size="sm">
+                      <AvatarFallback>{(claimerName || quote.claimed_by).slice(0, 2).toUpperCase()}</AvatarFallback>
+                    </Avatar>
+                    <p className="font-medium truncate" title={claimerName || quote.claimed_by}>
+                      {claimerName || (quote.claimed_by.length > 12 ? `${quote.claimed_by.slice(0, 12)}…` : quote.claimed_by)}
+                    </p>
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground">Unclaimed</p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
 
-      <Card>
-        <CardContent className="pt-6">
-          <Button variant="outline" size="sm" disabled className="text-muted-foreground">
-            <FileDown className="mr-2 h-4 w-4" />
-            Generate PDF (coming soon)
-          </Button>
-        </CardContent>
-      </Card>
+          <OutboundAttachmentsCard
+            attachments={outboundAttachments}
+            uploading={outboundUploading}
+            deletingId={outboundDeleting}
+            onUpload={handleOutboundUpload}
+            onDelete={handleOutboundDelete}
+            onPreview={(att) => {
+              // Outbound file preview reuses the email-card's dialog via
+              // a tiny inline state — opening the same attachment preview
+              // pattern the office already trusts. Implementation lives
+              // alongside the card to keep the modal scope local.
+              setOutboundPreviewAtt(att);
+            }}
+          />
+
+          {/* Linked orders — every order that has been hard-linked to
+              this quote, OR that has us as a `potential_quote` suggestion
+              awaiting accept. Single surface for the operator to see
+              which orders reference this quote (e.g. supplier emails
+              get the items they need to fulfill). Fetched once at page
+              load and re-fetched alongside the quote on relevant
+              actions. */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm flex items-center gap-2">
+                <ShoppingCart className="h-4 w-4 text-muted-foreground" />
+                Linked Orders
+              </CardTitle>
+              <CardDescription>
+                Already-linked, or suggested and waiting for accept on the order detail page.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {linkedOrders.length === 0 && (
+                <p className="text-xs text-muted-foreground">
+                  No orders linked yet. They show up automatically when an order's matcher picks this quote, or when one is created from this quote via the menu.
+                </p>
+              )}
+              <ul className="space-y-2">
+                {linkedOrders.map((o) => (
+                  <li key={o.id}>
+                    <LinkedOrderRow
+                      id={o.id}
+                      orderNumber={o.order_number}
+                      created={o.created}
+                      linkType={o.linkType}
+                      confidence={o.confidence}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+
+          {/* Settings / History / Email Status sit at the bottom of the
+              right column. They're reference / config surfaces so they
+              stay below the working content (items + outbound + linked). */}
+          <Card>
+            <button
+              type="button"
+              onClick={() => setSettingsOpen((s) => !s)}
+              className="w-full text-left px-6 py-4 flex items-center justify-between gap-3 cursor-pointer hover:bg-accent/30 transition-colors rounded-xl"
+              aria-expanded={settingsOpen}
+              aria-controls="quote-settings-body"
+            >
+              <span className="text-sm font-medium flex items-center gap-2">
+                <Calendar className="h-4 w-4" />
+                Quote Settings
+                {!settingsOpen && (quote.follow_up_due || quote.validity_days != null) && (
+                  <span className="text-xs font-normal text-muted-foreground inline-flex items-center gap-1">
+                    {quote.follow_up_due && (
+                      <>
+                        <Calendar className="h-3 w-3" />
+                        Follow up {formatDate(quote.follow_up_due)}
+                      </>
+                    )}
+                    {quote.follow_up_due && quote.validity_days != null && <span> · </span>}
+                    {quote.validity_days != null && (
+                      <span>{quote.validity_days}d validity</span>
+                    )}
+                  </span>
+                )}
+              </span>
+              {settingsOpen ? (
+                <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+              ) : (
+                <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+              )}
+            </button>
+            {settingsOpen && (
+              <CardContent id="quote-settings-body" className="space-y-4 pt-0">
+                {quote.is_template ? (
+                  // Templates don't have a specific date or validity — those
+                  // only matter when a quote actually goes to a customer.
+                  // Only the follow-up reminder is meaningful.
+                  <p className="text-sm text-muted-foreground">
+                    Templates don&apos;t carry a quote date or validity — those
+                    are set on the real quote generated from this template.
+                    Use the follow-up date below to remind yourself to issue
+                    this template on a particular day.
+                  </p>
+                ) : null}
+                <div className="grid gap-4 sm:grid-cols-3">
+                  {!quote.is_template && (
+                    <>
+                      <div className="space-y-1.5">
+                        <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                          Quote date
+                        </label>
+                        <Input
+                          type="date"
+                          value={quoteDate}
+                          onChange={(e) => setQuoteDate(e.target.value)}
+                          className="h-9 text-sm"
+                        />
+                        <p className="text-xs text-muted-foreground">
+                          Date printed on the PDF. Defaults to today.
+                        </p>
+                      </div>
+                      <div className="space-y-1.5">
+                        <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                          Valid for (days)
+                        </label>
+                        <Input
+                          type="number"
+                          min={1}
+                          step={1}
+                          placeholder="30"
+                          value={validityDays}
+                          onChange={(e) => setValidityDays(e.target.value)}
+                          className="h-9 text-sm"
+                        />
+                        <p className="text-xs text-muted-foreground">
+                          Empty = 30 day default. Set 60 for 2 months, etc.
+                        </p>
+                      </div>
+                    </>
+                  )}
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      Follow up by
+                    </label>
+                    <Input
+                      type="date"
+                      value={followUpDue}
+                      onChange={(e) => setFollowUpDue(e.target.value)}
+                      className="h-9 text-sm"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      Dashboard flags this quote when overdue.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex justify-end pt-1">
+                  <Button
+                    size="sm"
+                    onClick={handleSaveSettings}
+                    disabled={savingSettings}
+                  >
+                    {savingSettings ? (
+                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                    ) : null}
+                    Save settings
+                  </Button>
+                </div>
+              </CardContent>
+            )}
+          </Card>
+
+          <Card>
+            <button
+              type="button"
+              onClick={() => setHistoryOpen((s) => !s)}
+              className="w-full text-left px-6 py-4 flex items-center justify-between gap-3 cursor-pointer hover:bg-accent/30 transition-colors rounded-xl"
+              aria-expanded={historyOpen}
+              aria-controls="quote-history-body"
+            >
+              <span className="text-sm font-medium flex items-center gap-2">
+                <History className="h-4 w-4" />
+                History
+                <span className="text-xs font-normal text-muted-foreground">
+                  basic — full audit needs a migration
+                </span>
+              </span>
+              {historyOpen ? (
+                <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+              ) : (
+                <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+              )}
+            </button>
+            {historyOpen && (
+              <CardContent id="quote-history-body" className="space-y-3 pt-0">
+                <p className="text-xs text-muted-foreground">
+                  Derived from the existing quote + email fields. Full audit trail
+                  (with actor + per-field diffs) requires a new PB collection and
+                  write hooks — tracked as a follow-up migration.
+                </p>
+                <ul className="space-y-2 text-sm">
+                  <HistoryRow
+                    icon={<FileText className="h-3.5 w-3.5" />}
+                    label="Quote created"
+                    timestamp={quote.created}
+                  />
+                  <HistoryRow
+                    icon={<RefreshCw className="h-3.5 w-3.5" />}
+                    label="Last updated"
+                    timestamp={quote.updated}
+                    muted={quote.updated === quote.created}
+                  />
+                  <HistoryRow
+                    icon={<User className="h-3.5 w-3.5" />}
+                    label={`Status: ${statusLabels[quote.status] || quote.status}`}
+                    timestamp={quote.updated}
+                  />
+                  {quote.claimed_by && (
+                    <HistoryRow
+                      icon={<User className="h-3.5 w-3.5" />}
+                      label={`Claimed by ${claimerName || quote.claimed_by}`}
+                      timestamp={null}
+                      muted
+                    />
+                  )}
+                  {quote.email_received_at && (
+                    <HistoryRow
+                      icon={<Mail className="h-3.5 w-3.5" />}
+                      label="Original email received"
+                      timestamp={quote.email_received_at}
+                    />
+                  )}
+                  {quote.email_delivered && (
+                    <HistoryRow
+                      icon={<Mail className="h-3.5 w-3.5" />}
+                      label="Quote email delivered"
+                      timestamp={quote.email_delivered_at}
+                    />
+                  )}
+                  {quote.email_opened && (
+                    <HistoryRow
+                      icon={<MailOpen className="h-3.5 w-3.5" />}
+                      label="Quote email opened"
+                      timestamp={quote.email_opened_at}
+                    />
+                  )}
+                  {quote.last_reply_at && (
+                    <HistoryRow
+                      icon={<Mail className="h-3.5 w-3.5" />}
+                      label="Customer replied"
+                      timestamp={quote.last_reply_at}
+                    />
+                  )}
+                  {quote.pdf_generated_at && (
+                    <HistoryRow
+                      icon={<FileDown className="h-3.5 w-3.5" />}
+                      label="PDF generated"
+                      timestamp={quote.pdf_generated_at}
+                    />
+                  )}
+                  {quote.email_failed_at && (
+                    <HistoryRow
+                      icon={<XCircle className="h-3.5 w-3.5" />}
+                      label={
+                        quote.email_error
+                          ? `Email send failed — ${quote.email_error}`
+                          : "Email send failed"
+                      }
+                      timestamp={quote.email_failed_at}
+                      destructive
+                    />
+                  )}
+                  {quote.status === "sending" && quote.sending_started_at && (
+                    <HistoryRow
+                      icon={<Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                      label="Email send in progress"
+                      timestamp={quote.sending_started_at}
+                    />
+                  )}
+                  {quote.approved_by && (
+                    <HistoryRow
+                      icon={<CheckCircle className="h-3.5 w-3.5" />}
+                      label={`Approved by ${claimerName || quote.approved_by}`}
+                      timestamp={quote.updated}
+                    />
+                  )}
+                  {quote.follow_up_due && (
+                    <HistoryRow
+                      icon={<Clock className="h-3.5 w-3.5" />}
+                      label={`Follow-up due ${formatDate(quote.follow_up_due)}`}
+                      timestamp={null}
+                      muted
+                    />
+                  )}
+                </ul>
+              </CardContent>
+            )}
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm flex items-center gap-2">
+                <Mail className="h-4 w-4 text-muted-foreground" />
+                Email Status
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+                <div>
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Delivered</p>
+                  <div className="flex items-center gap-1.5 mt-0.5">
+                    {quote.email_delivered ? (
+                      <Mail className="h-4 w-4 text-primary" />
+                    ) : (
+                      <Mail className="h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{quote.email_delivered ? "Yes" : "No"}</span>
+                  </div>
+                </div>
+                <div>
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Opened</p>
+                  <div className="flex items-center gap-1.5 mt-0.5">
+                    {quote.email_opened ? (
+                      <MailOpen className="h-4 w-4 text-primary" />
+                    ) : (
+                      <MailOpen className="h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{quote.email_opened ? "Yes" : "No"}</span>
+                  </div>
+                </div>
+                <div className="col-span-2">
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Sender</p>
+                  <p className="truncate">{quote.email_sender || "—"}</p>
+                </div>
+                <div className="col-span-2">
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Subject</p>
+                  <p className="truncate">{quote.email_subject || "—"}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
 
       <DeleteDialog
         open={deleteOpen}