diff --git a/DECISIONS.md b/DECISIONS.md
index 3653ddb5..fb5911d6 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -993,6 +993,7 @@ One line per decision: `[YYYY-MM-DD] <decision>: <why>`. Appended by agents and
 [2026-08-14] The onboarding branch question ("Var fanns bokföringen innan?") became its own journey step at the existing KLART station (done -> source, same station grammar as momsyn/moms under MOMSEN) instead of a sixth rail station: a 6-point rail crowds the 680px band's 150px label slots, "BOKFÖRINGEN INNAN" would sit next to the existing "BOKFÖRINGEN" station, and mode='add' (which never sees the branch question) would need an asymmetric rail. The done screen ends in a revealed Fortsätt that dispatches DONE_CONTINUE (mode='first' only, reducer-guarded).
 [2026-08-14] Migration /preview fetches ALL allowed fiscal years (dropped latestOnly): the connect step's "Hittade X konton och Y verifikationer" renders from /preview's sieStats, not /sie-data's generateImportPreview, so fixing only /sie-data would have left the founder-reported "0 verifikationer" (actual: 4153) on screen. Costs one SIE export per extra year at connect time, the same work /sie-data repeats right after; honest counts won over latency.
 [2026-08-14] /sie-data validation stays newest-file-only (not per-file, not on the merged parse): preserves exactly which datasets are accepted today, and validateSIEFile assumes single-file invariants (balance yearIndexes relative to ONE current year) that mergeParsedSIEFiles deliberately does not preserve. Older files' problems still surface per-file at import time.
+[2026-08-15] Register detail de-box (customers/suppliers/articles): added new def_* label keys next to the old colon-suffixed and inline-format keys instead of renaming or deleting them: message files are only ever edited line-wise (duplicate-key hazard forbids JSON round-trips), so dead keys are cheaper than a risky rewrite. Also converted the customer invoice list's per-row status Badge to muted text with a chip only for Förfallen, per the locked "chips mark exceptions" convention: paid on every row was the same-chip-on-every-row bug the convention names.
 [2026-08-15] Employee form save-scope fix: moved the self-saving sections (Förmåner, Ingående saldon) OUTSIDE the page <form> under a "Sparas separat" kicker with a one-line scope hint, kept them as Cards (locked section pattern; the task-suggested hairline no-box region would deviate from every sibling section) and rejected the tab/sub-page shape (page has no tab structure, would be more invasive). This also fixes a real double-fire: shadcn Button has no default type, so the panels' save/add/delete buttons inside the form implicitly submitted the whole employee PATCH on every click; opening-balances now has its own <form> whose save enables only when dirty.
 [2026-08-14] SKV manual-verifikat deep link payload moved from URL params to single-use sessionStorage (supersedes same-day URL-params decision): compliance swarm flagged financial data in query strings landing in history/access logs/Referer (GDPR Art.5(1)(f), ISO A.8.12); URL now carries only the opaque row id.
 [2026-08-14] SKV prefill sessionStorage XSS window accepted as residual risk (ISO A.8.12 low, swarm PR #1621): script execution already implies full ledger read via authenticated APIs; a server-issued staging token adds a roundtrip, not protection. Documented in manual-verifikat-prefill.ts header.
diff --git a/app/(dashboard)/articles/[id]/page.tsx b/app/(dashboard)/articles/[id]/page.tsx
index 15cef32e..c7d45eac 100644
--- a/app/(dashboard)/articles/[id]/page.tsx
+++ b/app/(dashboard)/articles/[id]/page.tsx
@@ -4,9 +4,9 @@ import { useState, useEffect, useCallback, useRef, use } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { useLocale, useTranslations } from 'next-intl'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { DetailSection, DefRow } from '@/components/ui/detail-section'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { useToast } from '@/components/ui/use-toast'
 import ArticleForm from '@/components/articles/ArticleForm'
@@ -17,17 +17,7 @@ import {
 } from '@/lib/hooks/use-submit-with-account-activation'
 import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
 import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog'
-import {
-  Archive,
-  ArchiveRestore,
-  ArrowLeft,
-  Package,
-  Wrench,
-  Edit2,
-  Trash2,
-  Loader2,
-  Lock,
-} from 'lucide-react'
+import { ArrowLeft, Loader2, Lock } from 'lucide-react'
 import { useCanWrite } from '@/lib/hooks/use-can-write'
 import { formatCurrency } from '@/lib/utils'
 import type { Article, ArticleType, CreateArticleInput } from '@/types'
@@ -37,11 +27,6 @@ const ARTICLE_TYPE_KEY: Record<ArticleType, string> = {
   tjanst: 'type_tjanst',
 }
 
-const articleTypeIcons: Record<ArticleType, React.ElementType> = {
-  vara: Package,
-  tjanst: Wrench,
-}
-
 export default function ArticleDetailPage({
   params,
 }: {
@@ -221,178 +206,130 @@ export default function ArticleDetailPage({
 
   if (!article) return null
 
-  const Icon = articleTypeIcons[article.type]
-
   return (
-    <div className="space-y-8">
-      {/* Header */}
-      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row">
-        <div>
-          <Link
-            href="/articles"
-            className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-2"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            {t('back')}
-          </Link>
-          <div className="flex items-center gap-3">
-            <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
-              <Icon className="h-6 w-6 text-primary" />
-            </div>
-            <div>
-              <h1 className="font-display text-2xl leading-8 tracking-tight">{article.name}</h1>
-              <div className="flex items-center gap-2 mt-1">
-                {article.active ? (
-                  <span className="text-sm text-muted-foreground">{t('status_active')}</span>
-                ) : (
-                  <Badge variant="outline" className="font-normal">
-                    {t('status_inactive')}
-                  </Badge>
-                )}
-                <span className="text-sm text-muted-foreground tabular-nums">
-                  {t(ARTICLE_TYPE_KEY[article.type])}
-                  {article.article_number ? ` · #${article.article_number}` : ''}
-                </span>
-              </div>
-            </div>
+    <div className="max-w-2xl space-y-8 stagger-enter">
+      {/* Header: serif name over a quiet type/status kicker, quiet actions right */}
+      <div>
+        <Link
+          href="/articles"
+          className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-6"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          {t('back')}
+        </Link>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0">
+            <h1 className="font-display text-2xl leading-8 tracking-tight">{article.name}</h1>
+            <p className="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+              <span className="tabular-nums">
+                {t(ARTICLE_TYPE_KEY[article.type])}
+                {article.article_number ? ` · #${article.article_number}` : ''}
+                {article.active ? ` · ${t('status_active')}` : ''}
+              </span>
+              {!article.active && (
+                <Badge variant="outline" className="font-normal">
+                  {t('status_inactive')}
+                </Badge>
+              )}
+            </p>
+          </div>
+
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsEditOpen(true)}
+              className="min-h-10 text-muted-foreground hover:text-foreground"
+              disabled={!canWrite}
+              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
+            >
+              {!canWrite && <Lock className="h-4 w-4 mr-1" />}
+              {t('edit')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleToggleActive}
+              className="min-h-10 text-muted-foreground hover:text-foreground"
+              disabled={isTogglingActive || !canWrite}
+              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
+            >
+              {isTogglingActive ? (
+                <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+              ) : !canWrite ? (
+                <Lock className="h-4 w-4 mr-1" />
+              ) : null}
+              {article.active ? t('deactivate') : t('activate')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDelete}
+              className="min-h-10 text-muted-foreground hover:text-destructive"
+              disabled={isDeleting || !canWrite}
+              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
+            >
+              {isDeleting ? (
+                <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+              ) : !canWrite ? (
+                <Lock className="h-4 w-4 mr-1" />
+              ) : null}
+              {t('delete')}
+            </Button>
           </div>
         </div>
-
-        <div className="flex flex-wrap items-center justify-end gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setIsEditOpen(true)}
-            disabled={!canWrite}
-            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
-          >
-            {canWrite ? <Edit2 className="h-4 w-4 mr-1" /> : <Lock className="h-4 w-4 mr-1" />}
-            {t('edit')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleToggleActive}
-            className="min-h-10"
-            disabled={isTogglingActive || !canWrite}
-            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
-          >
-            {isTogglingActive ? (
-              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
-            ) : !canWrite ? (
-              <Lock className="h-4 w-4 mr-1" />
-            ) : article.active ? (
-              <Archive className="h-4 w-4 mr-1" />
-            ) : (
-              <ArchiveRestore className="h-4 w-4 mr-1" />
-            )}
-            {article.active ? t('deactivate') : t('activate')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleDelete}
-            className="min-h-10 text-destructive hover:text-destructive"
-            disabled={isDeleting || !canWrite}
-            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
-          >
-            {isDeleting ? (
-              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
-            ) : canWrite ? (
-              <Trash2 className="h-4 w-4 mr-1" />
-            ) : (
-              <Lock className="h-4 w-4 mr-1" />
-            )}
-            {t('delete')}
-          </Button>
-        </div>
       </div>
 
-      {/* Info cards */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {/* Pricing */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_pricing')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <div className="text-sm flex items-center justify-between">
-              <span className="text-muted-foreground">{t('label_price')}</span>
-              <span className="tabular-nums">{formatCurrency(article.price_excl_vat, article.currency)}</span>
-            </div>
-            <div className="text-sm flex items-center justify-between">
-              <span className="text-muted-foreground">{t('label_vat')}</span>
-              <span className="tabular-nums">{article.vat_rate} %</span>
-            </div>
-            <div className="text-sm flex items-center justify-between">
-              <span className="text-muted-foreground">{t('label_unit')}</span>
-              <span>{article.unit}</span>
-            </div>
-            {article.cost_price != null && (
-              <div className="text-sm flex items-center justify-between">
-                <span className="text-muted-foreground">{t('label_cost_price')}</span>
-                <span className="tabular-nums">{formatCurrency(article.cost_price, article.currency)}</span>
-              </div>
-            )}
-          </CardContent>
-        </Card>
+      <DetailSection kicker={t('section_pricing')}>
+        <DefRow label={t('label_price')}>
+          <span className="tabular-nums">
+            {formatCurrency(article.price_excl_vat, article.currency)}
+          </span>
+        </DefRow>
+        <DefRow label={t('label_vat')}>
+          <span className="tabular-nums">{article.vat_rate} %</span>
+        </DefRow>
+        <DefRow label={t('label_unit')}>{article.unit}</DefRow>
+        {article.cost_price != null && (
+          <DefRow label={t('label_cost_price')}>
+            <span className="tabular-nums">
+              {formatCurrency(article.cost_price, article.currency)}
+            </span>
+          </DefRow>
+        )}
+      </DetailSection>
 
-        {/* Accounting */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_accounting')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <div className="text-sm flex items-center justify-between">
-              <span className="text-muted-foreground">{t('label_revenue_account')}</span>
-              <span className="tabular-nums">
-                {article.revenue_account || t('revenue_account_auto')}
-              </span>
-            </div>
-            {article.type === 'tjanst' && article.housework_type && (
-              <div className="text-sm flex items-center justify-between">
-                <span className="text-muted-foreground">{t('label_housework')}</span>
-                <span>{article.housework_type}</span>
-              </div>
-            )}
-          </CardContent>
-        </Card>
+      <DetailSection kicker={t('section_accounting')}>
+        <DefRow label={t('label_revenue_account')}>
+          {article.revenue_account ? (
+            <span className="tabular-nums">{article.revenue_account}</span>
+          ) : (
+            <span className="text-muted-foreground">{t('revenue_account_auto')}</span>
+          )}
+        </DefRow>
+        {article.type === 'tjanst' && article.housework_type && (
+          <DefRow label={t('label_housework')}>{article.housework_type}</DefRow>
+        )}
+      </DetailSection>
 
-        {/* Details */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_details')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {article.name_en && (
-              <div className="text-sm flex items-center justify-between">
-                <span className="text-muted-foreground">{t('label_name_en')}</span>
-                <span className="truncate ml-2">{article.name_en}</span>
-              </div>
-            )}
-            {article.ean && (
-              <div className="text-sm flex items-center justify-between">
-                <span className="text-muted-foreground">{t('label_ean')}</span>
-                <span className="tabular-nums">{article.ean}</span>
-              </div>
-            )}
-            {!article.name_en && !article.ean && (
-              <p className="text-sm text-muted-foreground">{t('no_details')}</p>
-            )}
-          </CardContent>
-        </Card>
-      </div>
+      {/* Optional facts (English name, EAN) are omitted row-wise; when none
+          exist the whole section goes, so the document never pads itself
+          with placeholders for facts nobody entered. */}
+      {(article.name_en || article.ean) && (
+        <DetailSection kicker={t('section_details')}>
+          {article.name_en && <DefRow label={t('label_name_en')}>{article.name_en}</DefRow>}
+          {article.ean && (
+            <DefRow label={t('label_ean')}>
+              <span className="tabular-nums">{article.ean}</span>
+            </DefRow>
+          )}
+        </DetailSection>
+      )}
 
-      {/* Notes */}
       {article.notes && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_notes')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground whitespace-pre-wrap">{article.notes}</p>
-          </CardContent>
-        </Card>
+        <DetailSection kicker={t('section_notes')}>
+          <p className="text-sm text-muted-foreground whitespace-pre-wrap">{article.notes}</p>
+        </DetailSection>
       )}
 
       <DestructiveConfirmDialog {...confirmDialogProps} />
diff --git a/app/(dashboard)/customers/[id]/page.tsx b/app/(dashboard)/customers/[id]/page.tsx
index 1d3a7c2d..bd92d6a0 100644
--- a/app/(dashboard)/customers/[id]/page.tsx
+++ b/app/(dashboard)/customers/[id]/page.tsx
@@ -5,9 +5,9 @@ import { useRouter } from 'next/navigation'
 import { use } from 'react'
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { DetailSection, DefRow, DefEmpty } from '@/components/ui/detail-section'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { useToast } from '@/components/ui/use-toast'
 import {
@@ -17,22 +17,7 @@ import {
 import { AttnLine } from '@/components/ui/attn-line'
 import CustomerForm from '@/components/customers/CustomerForm'
 import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog'
-import {
-  ArrowLeft,
-  Building,
-  Globe,
-  User,
-  Mail,
-  Phone,
-  MapPin,
-  Edit2,
-  Trash2,
-  Loader2,
-  ReceiptText,
-  Lock,
-  Eye,
-  EyeOff,
-} from 'lucide-react'
+import { ArrowLeft, Loader2, Lock, Eye, EyeOff } from 'lucide-react'
 import { useLocale } from 'next-intl'
 import { useCanWrite } from '@/lib/hooks/use-can-write'
 import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
@@ -47,13 +32,6 @@ const CUSTOMER_TYPE_KEY: Record<CustomerType, string> = {
   non_eu_business: 'type_non_eu_business',
 }
 
-const customerTypeIcons: Record<CustomerType, React.ElementType> = {
-  individual: User,
-  swedish_business: Building,
-  eu_business: Globe,
-  non_eu_business: Globe,
-}
-
 interface RelatedInvoice {
   id: string
   invoice_number: string | null
@@ -232,244 +210,200 @@ export default function CustomerDetailPage({
 
   if (!customer) return null
 
-  const Icon = customerTypeIcons[customer.customer_type]
-
   return (
-    <div className="space-y-8">
-      {/* Header */}
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <Link
-            href="/customers"
-            className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-2"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            {t('back')}
-          </Link>
-          <div className="flex items-center gap-3">
-            <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
-              <Icon className="h-6 w-6 text-primary" />
-            </div>
-            <div>
-              <h1 className="font-display text-2xl leading-8 tracking-tight">{customer.name}</h1>
-              <p className="text-sm text-muted-foreground">{t(CUSTOMER_TYPE_KEY[customer.customer_type])}</p>
-            </div>
+    <div className="max-w-2xl space-y-8 stagger-enter">
+      {/* Header: serif name over a quiet type kicker, quiet actions right */}
+      <div>
+        <Link
+          href="/customers"
+          className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-6"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          {t('back')}
+        </Link>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0">
+            <h1 className="font-display text-2xl leading-8 tracking-tight">{customer.name}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {t(CUSTOMER_TYPE_KEY[customer.customer_type])}
+            </p>
+          </div>
+
+          <div className="flex shrink-0 items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsEditOpen(true)}
+              className="min-h-10 text-muted-foreground hover:text-foreground"
+              disabled={!canWrite}
+              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
+            >
+              {!canWrite && <Lock className="h-4 w-4 mr-1" />}
+              {t('edit')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDelete}
+              className="min-h-10 text-muted-foreground hover:text-destructive"
+              disabled={!canWrite}
+              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
+            >
+              {!canWrite && <Lock className="h-4 w-4 mr-1" />}
+              {t('delete')}
+            </Button>
           </div>
         </div>
-
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setIsEditOpen(true)}
-            disabled={!canWrite}
-            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
-          >
-            {canWrite ? <Edit2 className="h-4 w-4 mr-1" /> : <Lock className="h-4 w-4 mr-1" />}
-            {t('edit')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleDelete}
-            className="text-destructive hover:text-destructive"
-            disabled={!canWrite}
-            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
-          >
-            {canWrite ? <Trash2 className="h-4 w-4 mr-1" /> : <Lock className="h-4 w-4 mr-1" />}
-            {t('delete')}
-          </Button>
-        </div>
       </div>
 
-      {/* Info cards */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {/* Contact */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_contact')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {customer.email && (
-              <div className="flex items-center gap-2 text-sm">
-                <Mail className="h-4 w-4 text-muted-foreground" />
-                <a href={`mailto:${customer.email}`} className="hover:underline">
-                  {customer.email}
-                </a>
-              </div>
-            )}
-            {customer.phone && (
-              <div className="flex items-center gap-2 text-sm">
-                <Phone className="h-4 w-4 text-muted-foreground" />
-                {customer.phone}
-              </div>
-            )}
-            {(customer.address_line1 || customer.city) && (
-              <div className="flex items-start gap-2 text-sm">
-                <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
-                <div>
-                  {customer.address_line1 && <p>{customer.address_line1}</p>}
-                  {customer.address_line2 && <p>{customer.address_line2}</p>}
-                  {(customer.postal_code || customer.city) && (
-                    <p>{[customer.postal_code, customer.city].filter(Boolean).join(' ')}</p>
-                  )}
-                  {customer.country && <p>{customer.country}</p>}
-                </div>
-              </div>
-            )}
-            {!customer.email && !customer.phone && !customer.address_line1 && !customer.city && (
-              <p className="text-sm text-muted-foreground">{t('no_contact_info')}</p>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Customer details */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_business')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {customer.customer_number && (
-              <div className="text-sm">
-                <span className="text-muted-foreground">{t('label_customer_number')} </span>
-                {customer.customer_number}
-              </div>
-            )}
-            {customer.customer_type !== 'individual' && customer.org_number && (
-              <div className="text-sm">
-                <span className="text-muted-foreground">{t('label_org_number')} </span>
-                {customer.org_number}
-              </div>
-            )}
-            {customer.customer_type === 'individual' && (customer.personal_number || customer.org_number) && (
-              <div className="text-sm">
-                <span className="text-muted-foreground">{t('label_personal_number')} </span>
-                <span className="tabular-nums">
-                  {revealedPersonalNumber ??
-                    maskCustomerPersonalNumber(customer.personal_number || customer.org_number)}
-                </span>
-                {/* Viewers keep the mask: the endpoint refuses them anyway. */}
-                {canWrite && customer.personal_number && !isUnreadablePersonalNumber && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="ml-1 h-10 w-10 align-middle"
-                    onClick={togglePersonalNumber}
-                    disabled={isRevealing}
-                    aria-label={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
-                    title={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
-                  >
-                    {isRevealing ? (
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                    ) : revealedPersonalNumber ? (
-                      <EyeOff className="h-4 w-4" />
-                    ) : (
-                      <Eye className="h-4 w-4" />
-                    )}
-                  </Button>
-                )}
-                {isUnreadablePersonalNumber && (
-                  <AttnLine
-                    className="mt-1"
-                    action={{ label: t('personal_number_unreadable_action'), onClick: () => setIsEditOpen(true) }}
-                  >
-                    {t('personal_number_unreadable')}
-                  </AttnLine>
-                )}
-              </div>
-            )}
-            {customer.vat_number && (
-              <div className="text-sm flex items-center gap-2">
-                <span className="text-muted-foreground">{t('label_vat')} </span>
-                {customer.vat_number}
-                {customer.vat_number_validated && (
-                  <Badge variant="success" className="text-xs">{t('verified')}</Badge>
-                )}
-              </div>
-            )}
-            <div className="text-sm">
-              <span className="text-muted-foreground">{t('label_payment_terms')} </span>
-              {t('payment_terms_value', { days: customer.default_payment_terms || 30 })}
-            </div>
-            {!customer.customer_number && !customer.org_number && !customer.personal_number && !customer.vat_number && (
-              <p className="text-sm text-muted-foreground">{t('no_business_info')}</p>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Summary */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_summary')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <div className="flex items-center gap-2 text-sm">
-              <ReceiptText className="h-4 w-4 text-muted-foreground" />
-              <span>{t('invoice_count', { count: customer.invoices?.length || 0 })}</span>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Notes */}
-      {customer.notes && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('section_notes')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground whitespace-pre-wrap">{customer.notes}</p>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Related invoices */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base flex items-center gap-2">
-            <ReceiptText className="h-4 w-4" />
-            {t('section_invoices')}
-            {customer.invoices?.length > 0 && (
-              <span className="text-sm text-muted-foreground tabular-nums">({customer.invoices.length})</span>
-            )}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {customer.invoices?.length > 0 ? (
-            <div className="space-y-2">
-              {customer.invoices.map((invoice) => (
-                <Link
-                  key={invoice.id}
-                  href={`/invoices/${invoice.id}`}
-                  className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors"
-                >
-                  <div>
-                    <p className={cn('font-medium', !invoice.invoice_number && 'italic text-muted-foreground')}>{invoiceNumberDisplay(invoice.invoice_number)}</p>
-                    <p className="text-sm text-muted-foreground tabular-nums">{formatDate(invoice.invoice_date)}</p>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <span className="text-sm tabular-nums">
-                      {formatCurrency(invoice.total, invoice.currency)}
-                    </span>
-                    <Badge variant={invoice.payment_status === 'paid' ? 'success' : 'secondary'}>
-                      {invoice.payment_status === 'paid'
-                        ? t('invoice_status_paid')
-                        : invoice.payment_status === 'overdue'
-                          ? t('invoice_status_overdue')
-                          : t('invoice_status_unpaid')}
-                    </Badge>
-                  </div>
-                </Link>
-              ))}
+      <DetailSection kicker={t('section_contact')}>
+        <DefRow label={t('def_email')}>
+          {customer.email ? (
+            <a href={`mailto:${customer.email}`} className="hover:underline">
+              {customer.email}
+            </a>
+          ) : (
+            <DefEmpty />
+          )}
+        </DefRow>
+        <DefRow label={t('def_phone')}>{customer.phone || <DefEmpty />}</DefRow>
+        <DefRow label={t('def_address')}>
+          {customer.address_line1 || customer.city ? (
+            <div>
+              {customer.address_line1 && <p>{customer.address_line1}</p>}
+              {customer.address_line2 && <p>{customer.address_line2}</p>}
+              {(customer.postal_code || customer.city) && (
+                <p>{[customer.postal_code, customer.city].filter(Boolean).join(' ')}</p>
+              )}
+              {customer.country && <p>{customer.country}</p>}
             </div>
           ) : (
-            <p className="text-sm text-muted-foreground text-center py-4">
-              {t('no_invoices')}
-            </p>
+            <DefEmpty />
           )}
-        </CardContent>
-      </Card>
+        </DefRow>
+      </DetailSection>
+
+      <DetailSection kicker={t('section_business')}>
+        <DefRow label={t('def_customer_number')}>
+          {customer.customer_number || <DefEmpty />}
+        </DefRow>
+        {customer.customer_type !== 'individual' && (
+          <DefRow label={t('def_org_number')}>
+            {customer.org_number ? (
+              <span className="tabular-nums">{customer.org_number}</span>
+            ) : (
+              <DefEmpty />
+            )}
+          </DefRow>
+        )}
+        {customer.customer_type === 'individual' && (customer.personal_number || customer.org_number) && (
+          <DefRow label={t('def_personal_number')}>
+            <span className="tabular-nums">
+              {revealedPersonalNumber ??
+                maskCustomerPersonalNumber(customer.personal_number || customer.org_number)}
+            </span>
+            {/* Viewers keep the mask: the endpoint refuses them anyway. */}
+            {canWrite && customer.personal_number && !isUnreadablePersonalNumber && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="ml-1 h-10 w-10 -my-2 align-middle"
+                onClick={togglePersonalNumber}
+                disabled={isRevealing}
+                aria-label={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
+                title={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
+              >
+                {isRevealing ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : revealedPersonalNumber ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+            {isUnreadablePersonalNumber && (
+              <AttnLine
+                className="mt-1"
+                action={{ label: t('personal_number_unreadable_action'), onClick: () => setIsEditOpen(true) }}
+              >
+                {t('personal_number_unreadable')}
+              </AttnLine>
+            )}
+          </DefRow>
+        )}
+        {customer.vat_number && (
+          <DefRow label={t('def_vat')}>
+            <span className="inline-flex flex-wrap items-center gap-2">
+              {customer.vat_number}
+              {customer.vat_number_validated && (
+                <Badge variant="success" className="text-xs">{t('verified')}</Badge>
+              )}
+            </span>
+          </DefRow>
+        )}
+        <DefRow label={t('def_payment_terms')}>
+          {t('payment_terms_value', { days: customer.default_payment_terms || 30 })}
+        </DefRow>
+      </DetailSection>
+
+      {customer.notes && (
+        <DetailSection kicker={t('section_notes')}>
+          <p className="text-sm text-muted-foreground whitespace-pre-wrap">{customer.notes}</p>
+        </DetailSection>
+      )}
+
+      <DetailSection
+        kicker={t('section_invoices')}
+        aside={
+          customer.invoices?.length > 0 ? (
+            <span className="text-[11px] tabular-nums text-muted-foreground">
+              {t('invoice_count', { count: customer.invoices.length })}
+            </span>
+          ) : undefined
+        }
+      >
+        {customer.invoices?.length > 0 ? (
+          <div className="divide-y divide-border">
+            {customer.invoices.map((invoice) => (
+              <Link
+                key={invoice.id}
+                href={`/invoices/${invoice.id}`}
+                className="flex items-center gap-3 py-3 text-sm transition-colors duration-150 hover:bg-secondary/35"
+              >
+                <span
+                  className={cn(
+                    'min-w-0 truncate',
+                    !invoice.invoice_number && 'italic text-muted-foreground',
+                  )}
+                >
+                  {invoiceNumberDisplay(invoice.invoice_number)}
+                </span>
+                <span className="text-muted-foreground tabular-nums">
+                  {formatDate(invoice.invoice_date)}
+                </span>
+                <span className="ml-auto tabular-nums">
+                  {formatCurrency(invoice.total, invoice.currency)}
+                </span>
+                {/* Chips mark exceptions: an overdue invoice is the deviation
+                    worth a chip; paid and not-yet-due render as muted text. */}
+                {invoice.payment_status === 'overdue' ? (
+                  <Badge variant="destructive">{t('invoice_status_overdue')}</Badge>
+                ) : (
+                  <span className="min-w-14 text-right text-xs text-muted-foreground">
+                    {invoice.payment_status === 'paid'
+                      ? t('invoice_status_paid')
+                      : t('invoice_status_unpaid')}
+                  </span>
+                )}
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">{t('no_invoices')}</p>
+        )}
+      </DetailSection>
 
       <DestructiveConfirmDialog {...confirmDialogProps} />
 
diff --git a/app/(dashboard)/suppliers/[id]/page.tsx b/app/(dashboard)/suppliers/[id]/page.tsx
index 9e18183b..ef92a7f7 100644
--- a/app/(dashboard)/suppliers/[id]/page.tsx
+++ b/app/(dashboard)/suppliers/[id]/page.tsx
@@ -5,13 +5,14 @@ import { useParams, useRouter } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from "@/components/ui/skeleton"
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { DetailSection, DefRow, DefEmpty } from '@/components/ui/detail-section'
+import { QUIET_LINK_CLASS } from '@/components/ui/dry-table'
 import { useToast } from '@/components/ui/use-toast'
 import { getErrorMessage } from '@/lib/errors/get-error-message'
-import { ArrowLeft, Edit, Trash2, FileText, Lock } from 'lucide-react'
+import { ArrowLeft, Lock } from 'lucide-react'
 import { useCanWrite } from '@/lib/hooks/use-can-write'
 import { formatDate } from '@/lib/utils'
 import SupplierForm from '@/components/suppliers/SupplierForm'
@@ -181,124 +182,159 @@ export default function SupplierDetailPage() {
     credited: t('status_credited'),
   }
 
+  // One fallback row keeps the figures band composed for a supplier that has
+  // no invoices yet: zeros in the supplier's own default currency.
+  const currencyRows = supplier.stats?.by_currency?.length
+    ? supplier.stats.by_currency
+    : [{ currency: supplier.default_currency || 'SEK', total_outstanding: 0, total_paid: 0 }]
+
   return (
-    <div className="space-y-8">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <Button variant="ghost" size="icon" onClick={() => router.push('/suppliers')} aria-label={t('back_aria')}>
-            <ArrowLeft className="h-5 w-5" />
-          </Button>
-          <div>
+    <div className="max-w-3xl space-y-8 stagger-enter">
+      {/* Header: serif name over a quiet type/org kicker, quiet actions right */}
+      <div>
+        <Link
+          href="/suppliers"
+          className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-6"
+          aria-label={t('back_aria')}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          {t('back')}
+        </Link>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0">
             <h1 className="font-display text-2xl leading-8 tracking-tight">{supplier.name}</h1>
-            <p className="text-muted-foreground">
+            <p className="mt-1 text-sm text-muted-foreground">
               {supplierTypeLabels[supplier.supplier_type]}
-              {supplier.org_number && t('org_number_inline', { number: supplier.org_number })}
+              {supplier.org_number ? ` · ${t('kicker_org', { number: supplier.org_number })}` : ''}
             </p>
           </div>
-        </div>
-        <div className="flex gap-2">
-          <Button
-            variant="outline"
-            onClick={() => setIsEditOpen(true)}
-            disabled={!canWrite}
-            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
-          >
-            {canWrite ? <Edit className="mr-2 h-4 w-4" /> : <Lock className="mr-2 h-4 w-4" />}
-            {t('edit')}
-          </Button>
-          <Button
-            variant="destructive"
-            size="icon"
-            onClick={handleDelete}
-            disabled={!canWrite}
-            title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
-            aria-label={t('delete_confirm_label')}
-          >
-            {canWrite ? <Trash2 className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
-          </Button>
+
+          <div className="flex shrink-0 items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsEditOpen(true)}
+              className="min-h-10 text-muted-foreground hover:text-foreground"
+              disabled={!canWrite}
+              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
+            >
+              {!canWrite && <Lock className="h-4 w-4 mr-1" />}
+              {t('edit')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDelete}
+              className="min-h-10 text-muted-foreground hover:text-destructive"
+              disabled={!canWrite}
+              title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
+            >
+              {!canWrite && <Lock className="h-4 w-4 mr-1" />}
+              {t('delete')}
+            </Button>
+          </div>
         </div>
       </div>
 
-      {/* Stats */}
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm text-muted-foreground">{t('outstanding')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {(supplier.stats?.by_currency?.length ? supplier.stats.by_currency : [{ currency: supplier.default_currency || 'SEK', total_outstanding: 0, total_paid: 0 }]).map((row) => (
-              <p key={row.currency} className="font-display text-2xl tabular-nums">
+      {/* Figures band: the three headline numbers, flat on the page */}
+      <div className="grid gap-6 sm:grid-cols-3">
+        <div>
+          <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            {t('outstanding')}
+          </p>
+          <div className="mt-1">
+            {currencyRows.map((row) => (
+              <p key={row.currency} className="font-display text-xl tabular-nums">
                 {amountWithCurrency(row.total_outstanding, row.currency)}
               </p>
             ))}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm text-muted-foreground">{t('total_paid')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {(supplier.stats?.by_currency?.length ? supplier.stats.by_currency : [{ currency: supplier.default_currency || 'SEK', total_outstanding: 0, total_paid: 0 }]).map((row) => (
-              <p key={row.currency} className="font-display text-2xl tabular-nums">
+          </div>
+        </div>
+        <div>
+          <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            {t('total_paid')}
+          </p>
+          <div className="mt-1">
+            {currencyRows.map((row) => (
+              <p key={row.currency} className="font-display text-xl tabular-nums">
                 {amountWithCurrency(row.total_paid, row.currency)}
               </p>
             ))}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm text-muted-foreground">{t('invoice_count')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="font-display text-2xl tabular-nums">{supplier.stats?.invoice_count || 0}</p>
-          </CardContent>
-        </Card>
+          </div>
+        </div>
+        <div>
+          <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            {t('invoice_count')}
+          </p>
+          <p className="mt-1 font-display text-xl tabular-nums">
+            {supplier.stats?.invoice_count || 0}
+          </p>
+        </div>
       </div>
 
-      {/* Contact & Payment Info */}
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('contact_section_title')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2 text-sm">
-            {supplier.email && <p>{t('email_inline', { email: supplier.email })}</p>}
-            {supplier.phone && <p>{t('phone_inline', { phone: supplier.phone })}</p>}
-            {supplier.address_line1 && <p>{supplier.address_line1}</p>}
-            {supplier.postal_code && <p>{supplier.postal_code} {supplier.city}</p>}
-            {supplier.vat_number && <p>{t('vat_inline', { vat: supplier.vat_number })}</p>}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{t('payment_section_title')}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2 text-sm">
-            {supplier.bankgiro && <p>{t('bankgiro_inline', { value: supplier.bankgiro })}</p>}
-            {supplier.plusgiro && <p>{t('plusgiro_inline', { value: supplier.plusgiro })}</p>}
-            {supplier.iban && <p>{t('iban_inline', { value: supplier.iban })}</p>}
-            {supplier.bic && <p>{t('bic_inline', { value: supplier.bic })}</p>}
-            <p>{t('payment_terms_inline', { days: supplier.default_payment_terms })}</p>
-            <p>{t('currency_inline', { currency: supplier.default_currency })}</p>
-            {supplier.default_expense_account && <p>{t('expense_account_inline', { account: supplier.default_expense_account })}</p>}
-          </CardContent>
-        </Card>
-      </div>
+      <DetailSection kicker={t('contact_section_title')}>
+        <DefRow label={t('def_email')}>{supplier.email || <DefEmpty />}</DefRow>
+        <DefRow label={t('def_phone')}>{supplier.phone || <DefEmpty />}</DefRow>
+        <DefRow label={t('def_address')}>
+          {supplier.address_line1 || supplier.city ? (
+            <div>
+              {supplier.address_line1 && <p>{supplier.address_line1}</p>}
+              {supplier.address_line2 && <p>{supplier.address_line2}</p>}
+              {(supplier.postal_code || supplier.city) && (
+                <p>{[supplier.postal_code, supplier.city].filter(Boolean).join(' ')}</p>
+              )}
+            </div>
+          ) : (
+            <DefEmpty />
+          )}
+        </DefRow>
+        {supplier.vat_number && <DefRow label={t('def_vat')}>{supplier.vat_number}</DefRow>}
+      </DetailSection>
 
-      {/* Invoices */}
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-base">{t('invoices_section_title')}</CardTitle>
-          <Link href="/supplier-invoices?new=1">
-            <Button size="sm">
-              <FileText className="mr-2 h-4 w-4" />
-              {t('new_invoice')}
-            </Button>
+      <DetailSection kicker={t('payment_section_title')}>
+        {supplier.bankgiro && (
+          <DefRow label={t('def_bankgiro')}>
+            <span className="tabular-nums">{supplier.bankgiro}</span>
+          </DefRow>
+        )}
+        {supplier.plusgiro && (
+          <DefRow label={t('def_plusgiro')}>
+            <span className="tabular-nums">{supplier.plusgiro}</span>
+          </DefRow>
+        )}
+        {supplier.iban && (
+          <DefRow label={t('def_iban')}>
+            <span className="tabular-nums">{supplier.iban}</span>
+          </DefRow>
+        )}
+        {supplier.bic && (
+          <DefRow label={t('def_bic')}>
+            <span className="tabular-nums">{supplier.bic}</span>
+          </DefRow>
+        )}
+        <DefRow label={t('def_payment_terms')}>
+          {t('payment_terms_value', { days: supplier.default_payment_terms })}
+        </DefRow>
+        <DefRow label={t('def_currency')}>{supplier.default_currency}</DefRow>
+        <DefRow label={t('def_expense_account')}>
+          {supplier.default_expense_account ? (
+            <span className="tabular-nums">{supplier.default_expense_account}</span>
+          ) : (
+            <DefEmpty />
+          )}
+        </DefRow>
+      </DetailSection>
+
+      <DetailSection
+        kicker={t('invoices_section_title')}
+        aside={
+          <Link href="/supplier-invoices?new=1" className={QUIET_LINK_CLASS}>
+            {t('new_invoice')}
           </Link>
-        </CardHeader>
-        <CardContent>
+        }
+      >
           {invoices.length === 0 ? (
-            <p className="text-muted-foreground text-sm text-center py-8">
+            <p className="text-muted-foreground text-sm py-4">
               {t('no_invoices')}
             </p>
           ) : (
@@ -366,8 +402,7 @@ export default function SupplierDetailPage() {
             </div>
             </>
           )}
-        </CardContent>
-      </Card>
+      </DetailSection>
 
       <DestructiveConfirmDialog {...confirmDialogProps} />
 
diff --git a/components/ui/detail-section.tsx b/components/ui/detail-section.tsx
new file mode 100644
index 00000000..e5487326
--- /dev/null
+++ b/components/ui/detail-section.tsx
@@ -0,0 +1,66 @@
+import { cn } from '@/lib/utils'
+
+/**
+ * Register-detail document grammar (customers, suppliers, articles).
+ *
+ * A detail page is one flowing document, not a pile of cards: each group of
+ * facts is introduced by an uppercase hairline kicker and set as aligned
+ * label/value rows. The kicker's hairline is the only rule; groups are
+ * separated by whitespace, never borders (Living Paper, design.md).
+ */
+
+export function DetailSection({
+  kicker,
+  aside,
+  children,
+  className,
+}: {
+  kicker: string
+  /** Optional right-aligned element on the kicker line: a count, a quiet action. */
+  aside?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <section className={className}>
+      <div className="flex items-baseline justify-between gap-4 border-b border-border pb-2">
+        <h2 className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          {kicker}
+        </h2>
+        {aside}
+      </div>
+      <div className="mt-3">{children}</div>
+    </section>
+  )
+}
+
+export function DefRow({
+  label,
+  children,
+  className,
+}: {
+  label: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-[8rem_1fr] gap-x-6 py-2 text-sm sm:grid-cols-[10rem_1fr]',
+        className,
+      )}
+    >
+      <div className="text-muted-foreground">{label}</div>
+      <div className="min-w-0">{children}</div>
+    </div>
+  )
+}
+
+/**
+ * Muted placeholder for a value that matters but is not filled in. The en dash
+ * is the literal rendered value (same vocabulary as the orders list), which is
+ * why it is allowed to be a dash at all.
+ */
+export function DefEmpty() {
+  return <span className="text-muted-foreground">{'–'}</span>
+}
diff --git a/messages/en.json b/messages/en.json
index b0173387..5c6e1014 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -1274,9 +1274,17 @@
     "label_personal_number": "Personal no.:",
     "label_vat": "VAT:",
     "label_payment_terms": "Payment terms:",
+    "def_email": "Email",
+    "def_phone": "Phone",
+    "def_address": "Address",
+    "def_customer_number": "Customer number",
+    "def_org_number": "Org. no.",
+    "def_personal_number": "Personal number",
+    "def_vat": "VAT number",
+    "def_payment_terms": "Payment terms",
     "payment_terms_value": "{days} days",
     "verified": "Verified",
-    "invoice_count": "{count} invoices",
+    "invoice_count": "{count, plural, one {# invoice} other {# invoices}}",
     "load_failed_title": "Could not load customer",
     "load_failed_description": "Customer not found.",
     "updated_title": "Customer updated",
@@ -4456,6 +4464,20 @@
     "payment_terms_inline": "Payment terms: {days} days",
     "currency_inline": "Currency: {currency}",
     "expense_account_inline": "Expense account: {account}",
+    "delete": "Delete",
+    "kicker_org": "Org. no. {number}",
+    "def_email": "Email",
+    "def_phone": "Phone",
+    "def_address": "Address",
+    "def_vat": "VAT number",
+    "def_bankgiro": "Bankgiro",
+    "def_plusgiro": "Plusgiro",
+    "def_iban": "IBAN",
+    "def_bic": "BIC",
+    "def_payment_terms": "Payment terms",
+    "payment_terms_value": "{days} days",
+    "def_currency": "Currency",
+    "def_expense_account": "Expense account",
     "invoices_section_title": "Invoices",
     "new_invoice": "New invoice",
     "no_invoices": "No invoices registered for this supplier",
diff --git a/messages/sv.json b/messages/sv.json
index 929c2822..a588ce25 100644
--- a/messages/sv.json
+++ b/messages/sv.json
@@ -1274,9 +1274,17 @@
     "label_personal_number": "Persnr:",
     "label_vat": "VAT:",
     "label_payment_terms": "Betalningsvillkor:",
+    "def_email": "E-post",
+    "def_phone": "Telefon",
+    "def_address": "Adress",
+    "def_customer_number": "Kundnummer",
+    "def_org_number": "Org.nr",
+    "def_personal_number": "Personnummer",
+    "def_vat": "VAT-nummer",
+    "def_payment_terms": "Betalningsvillkor",
     "payment_terms_value": "{days} dagar",
     "verified": "Verifierad",
-    "invoice_count": "{count} fakturor",
+    "invoice_count": "{count, plural, one {# faktura} other {# fakturor}}",
     "load_failed_title": "Kunde inte ladda kund",
     "load_failed_description": "Kunden hittades inte.",
     "updated_title": "Kund uppdaterad",
@@ -4456,6 +4464,20 @@
     "payment_terms_inline": "Betalningsvillkor: {days} dagar",
     "currency_inline": "Valuta: {currency}",
     "expense_account_inline": "Kostnadskonto: {account}",
+    "delete": "Ta bort",
+    "kicker_org": "Org.nr {number}",
+    "def_email": "E-post",
+    "def_phone": "Telefon",
+    "def_address": "Adress",
+    "def_vat": "VAT-nummer",
+    "def_bankgiro": "Bankgiro",
+    "def_plusgiro": "Plusgiro",
+    "def_iban": "IBAN",
+    "def_bic": "BIC",
+    "def_payment_terms": "Betalningsvillkor",
+    "payment_terms_value": "{days} dagar",
+    "def_currency": "Valuta",
+    "def_expense_account": "Kostnadskonto",
     "invoices_section_title": "Fakturor",
     "new_invoice": "Ny faktura",
     "no_invoices": "Inga fakturor registrerade för denna leverantör",