diff --git a/app/admin/setup/[section]/page.tsx b/app/admin/setup/[section]/page.tsx
new file mode 100644
index 0000000..de94bdb
--- /dev/null
+++ b/app/admin/setup/[section]/page.tsx
@@ -0,0 +1,12 @@
+import { AdminSetupPage, type SetupSearchParams } from '../setup-page';
+
+export default async function SetupSectionPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ section: string }>;
+  searchParams?: Promise<SetupSearchParams>;
+}) {
+  const { section } = await params;
+  return <AdminSetupPage pathSection={section} searchParams={searchParams} />;
+}
diff --git a/app/admin/setup/page.tsx b/app/admin/setup/page.tsx
index c65f3c9..a044038 100644
--- a/app/admin/setup/page.tsx
+++ b/app/admin/setup/page.tsx
@@ -1,2288 +1,9 @@
-import Link from 'next/link';
-import { skossCoreRoutes } from '@/lib/application-planes';
-import {
-  formatCurrency,
-  formatDateLabel,
-  formatUnitRate,
-} from '@/lib/domain/formatters';
-import type { Product, Recipe } from '@/lib/domain/types';
-import { buildCostingSnapshotItems } from '@/lib/domain/recipe-costing';
-import {
-  createProductAction,
-  createRawMaterialAction,
-  createRecipeAction,
-  createSupplierAction,
-  createSupplierPriceEntryAction,
-  createUserAction,
-  updateProductAction,
-  updateRawMaterialAction,
-  updateRecipeAction,
-  updateSupplierAction,
-  updateUserAction,
-  resetDemoWorkspaceAction,
-} from '@/lib/server/actions';
-import { requireAdminPlaneAccess } from '@/lib/server/application-access';
-import { getSetupWorkspace } from '@/lib/server/demo-data';
-import { getServerTranslator } from '@/lib/i18n/server';
-import { getVisibleWorkspacesForRole } from '@/lib/workspaces';
-import { ThemeSwitcher } from '@/components/theme-switcher';
-import { OperationalOnboardingChecklist } from '@/components/setup/operational-onboarding-checklist';
-import { getRuntimeMode, isNonProductionMode } from '@/lib/server/runtime-mode';
-
-const basicUnits = [
-  'g',
-  'kg',
-  'ml',
-  'l',
-  'unit',
-  'piece',
-  'dozen',
-  'eggs',
-] as const;
-
-type SetupSearchParams = {
-  section?:
-    | 'onboarding'
-    | 'business-setup'
-    | 'users'
-    | 'preferences-system'
-    | 'products'
-    | 'suppliers'
-    | 'raw-materials'
-    | 'recipes'
-    | 'costing'
-    | 'price-history';
-  error?: string;
-  saved?: string;
-  supplier?: string;
-  material?: string;
-  product?: string;
-  productSetup?: string;
-  historySupplier?: string;
-  historyMaterial?: string;
-  recipe?: string;
-  user?: string;
-  costingStatus?:
-    | 'all'
-    | 'fully_costed'
-    | 'partially_costed'
-    | 'missing_cost_evidence'
-    | 'no_recipe';
-  costingItem?: string;
-  importedEntity?: 'customers' | 'suppliers' | 'rawMaterials';
-  importedCount?: string;
-  skippedCount?: string;
-};
-
-function buildSetupHref(params: Record<string, string | undefined>) {
-  return {
-    pathname: skossCoreRoutes.adminSetup,
-    query: Object.fromEntries(
-      Object.entries(params).filter(([, value]) => Boolean(value)),
-    ),
-  };
-}
-
-function getProductLabel(
-  product: Pick<Product, 'name'>,
-  variant?: { name: string } | null,
-) {
-  return variant ? `${product.name} / ${variant.name}` : product.name;
-}
-
-function getRecipeLinkLabel(recipe: Recipe, products: Product[]) {
-  const product = products.find((entry) => entry.id === recipe.productId);
-  if (!product) {
-    return recipe.title;
-  }
-
-  const variant = recipe.productVariantId
-    ? (product.variants.find((entry) => entry.id === recipe.productVariantId) ??
-      null)
-    : null;
-
-  return getProductLabel(product, variant);
-}
-
-function buildRecipeLineRows(recipe?: Recipe | null) {
-  const existing = recipe?.lines ?? [];
-  const blankCount = Math.max(3, 5 - existing.length);
-
-  return [
-    ...existing.map((line) => ({ ...line, isBlank: false, key: line.id })),
-    ...Array.from({ length: blankCount }, (_, index) => ({
-      id: '',
-      rawMaterialId: '',
-      rawMaterialLabel: '',
-      quantity: undefined,
-      unit: '',
-      note: '',
-      isBlank: true,
-      key: `blank-${index}`,
-    })),
-  ];
-}
-
-function renderRequiredMark() {
-  return (
-    <span className="setup-required-mark" aria-hidden="true">
-      *
-    </span>
-  );
-}
-
-async function SavedMessage({ saved }: { saved?: string }) {
-  const { t } = await getServerTranslator();
-
-  if (saved === 'supplier') {
-    return <p className="inline-success">{t('setup.saved.supplier')}</p>;
-  }
-
-  if (saved === 'raw-material') {
-    return <p className="inline-success">{t('setup.saved.rawMaterial')}</p>;
-  }
-
-  if (saved === 'price') {
-    return <p className="inline-success">{t('setup.saved.price')}</p>;
-  }
-
-  if (saved === 'recipe') {
-    return <p className="inline-success">{t('setup.saved.recipe')}</p>;
-  }
-
-  if (saved === 'product') {
-    return <p className="inline-success">Product saved.</p>;
-  }
-
-  if (saved === 'preferences') {
-    return <p className="inline-success">{t('setup.saved.preferences')}</p>;
-  }
-
-  if (saved === 'user') {
-    return <p className="inline-success">{t('setup.saved.user')}</p>;
-  }
-
-  if (saved === 'import') {
-    return <p className="inline-success">{t('setup.saved.import')}</p>;
-  }
-
-  if (saved === 'demo-reset') {
-    return <p className="inline-success">Demo workspace reseeded successfully.</p>;
-  }
-
-  if (saved === 'onboarding-section') {
-    return <p className="inline-success">Onboarding section updated.</p>;
-  }
-
-  return null;
-}
+import { AdminSetupPage, type SetupSearchParams } from './setup-page';
 
 export default async function SetupPage({
   searchParams,
 }: {
   searchParams?: Promise<SetupSearchParams>;
 }) {
-  const userContext = await requireAdminPlaneAccess(skossCoreRoutes.adminSetup);
-  const [data, params, { t, locale, term }] = await Promise.all([
-    getSetupWorkspace(),
-    searchParams,
-    getServerTranslator(),
-  ]);
-  const today = new Date().toISOString().slice(0, 10);
-  const runtimeMode = getRuntimeMode();
-  const canResetDemoWorkspace = isNonProductionMode();
-  const identitySetup = data.identitySetup;
-  const customerSetup = data.customerSetup;
-  const businessSetup = data.businessSetup;
-  const procurementSetup = data.procurementSetup;
-  const catalogSetup = data.catalogSetup;
-
-  const editingSupplier = params?.supplier
-    ? (procurementSetup.suppliers.find((supplier) => supplier.id === params.supplier) ??
-      null)
-    : null;
-  const editingMaterial = params?.material
-    ? (procurementSetup.rawMaterials.find((material) => material.id === params.material) ??
-      null)
-    : null;
-  const selectedProduct = params?.product
-    ? (catalogSetup.products.find((product) => product.id === params.product) ?? null)
-    : null;
-  const editingProduct = params?.productSetup
-    ? (catalogSetup.products.find((product) => product.id === params.productSetup) ?? null)
-    : null;
-  const editingRecipe = params?.recipe
-    ? (catalogSetup.recipes.find((recipe) => recipe.id === params.recipe) ?? null)
-    : null;
-  const editingUser = params?.user
-    ? (identitySetup.users.find((user) => user.id === params.user) ?? null)
-    : null;
-  const historySupplier = params?.historySupplier
-    ? (procurementSetup.suppliers.find(
-        (supplier) => supplier.id === params.historySupplier,
-      ) ?? null)
-    : null;
-  const historyMaterial = params?.historyMaterial
-    ? (procurementSetup.rawMaterials.find(
-        (material) => material.id === params.historyMaterial,
-      ) ?? null)
-    : null;
-
-  const supplierFormAction = editingSupplier
-    ? updateSupplierAction.bind(null, editingSupplier.id)
-    : createSupplierAction;
-  const rawMaterialFormAction = editingMaterial
-    ? updateRawMaterialAction.bind(null, editingMaterial.id)
-    : createRawMaterialAction;
-  const productFormAction = editingProduct
-    ? updateProductAction.bind(null, editingProduct.id)
-    : createProductAction;
-  const recipeFormAction = editingRecipe
-    ? updateRecipeAction.bind(null, editingRecipe.id)
-    : createRecipeAction;
-  const userFormAction = editingUser
-    ? updateUserAction.bind(null, editingUser.id)
-    : createUserAction;
-
-  const supplierPriceCounts = new Map<string, number>();
-  const materialPriceCounts = new Map<string, number>();
-  for (const entry of procurementSetup.supplierPriceEntries) {
-    supplierPriceCounts.set(
-      entry.supplierId,
-      (supplierPriceCounts.get(entry.supplierId) ?? 0) + 1,
-    );
-    materialPriceCounts.set(
-      entry.rawMaterialId,
-      (materialPriceCounts.get(entry.rawMaterialId) ?? 0) + 1,
-    );
-  }
-
-  const filteredPriceEntries = procurementSetup.supplierPriceEntries.filter((entry) => {
-    if (historySupplier && entry.supplierId !== historySupplier.id) {
-      return false;
-    }
-
-    if (historyMaterial && entry.rawMaterialId !== historyMaterial.id) {
-      return false;
-    }
-
-    return true;
-  });
-
-  const supplierHistoryHref = (supplierId: string) =>
-    buildSetupHref({
-      historySupplier: supplierId,
-      historyMaterial: historyMaterial?.id,
-      supplier: editingSupplier?.id,
-      material: editingMaterial?.id,
-      recipe: editingRecipe?.id,
-    });
-
-  const materialHistoryHref = (materialId: string) =>
-    buildSetupHref({
-      historySupplier: historySupplier?.id,
-      historyMaterial: materialId,
-      supplier: editingSupplier?.id,
-      material: editingMaterial?.id,
-      recipe: editingRecipe?.id,
-    });
-
-  const recipeLineRows = buildRecipeLineRows(editingRecipe);
-  const recipeProductId = editingRecipe?.productId ?? selectedProduct?.id ?? '';
-  const editingRecipeCost = editingRecipe
-    ? (catalogSetup.recipeCostById.get(editingRecipe.id) ?? null)
-    : null;
-  const activeRecipes = catalogSetup.recipes.filter((recipe) => recipe.active).length;
-  const linkedProductCount = new Set(
-    catalogSetup.recipes.map((recipe) => recipe.productVariantId ?? recipe.productId),
-  ).size;
-  const recipesByProduct = new Map<string, Recipe[]>();
-  for (const recipe of catalogSetup.recipes) {
-    const existingRecipes = recipesByProduct.get(recipe.productId) ?? [];
-    recipesByProduct.set(recipe.productId, [...existingRecipes, recipe]);
-  }
-  const costingItems = buildCostingSnapshotItems(
-    catalogSetup.products,
-    catalogSetup.recipes,
-    catalogSetup.recipeCostById,
-  );
-  const costingStatusFilter = params?.costingStatus ?? 'all';
-  const filteredCostingItems = costingItems.filter(
-    (item) =>
-      costingStatusFilter === 'all' || item.status === costingStatusFilter,
-  );
-  const selectedCostingItem =
-    (params?.costingItem
-      ? (filteredCostingItems.find((item) => item.id === params.costingItem) ??
-        costingItems.find((item) => item.id === params.costingItem) ??
-        null)
-      : null) ??
-    filteredCostingItems[0] ??
-    costingItems[0] ??
-    null;
-  const costingSummary = {
-    fullyCosted: costingItems.filter((item) => item.status === 'fully_costed')
-      .length,
-    partiallyCosted: costingItems.filter(
-      (item) => item.status === 'partially_costed',
-    ).length,
-    missingEvidence: costingItems.filter(
-      (item) => item.status === 'missing_cost_evidence',
-    ).length,
-    noRecipe: costingItems.filter((item) => item.status === 'no_recipe').length,
-  };
-  const buildCostingHref = (overrides: Record<string, string | undefined>) =>
-    buildSetupHref({
-      supplier: editingSupplier?.id,
-      material: editingMaterial?.id,
-      historySupplier: historySupplier?.id,
-      historyMaterial: historyMaterial?.id,
-      recipe: editingRecipe?.id,
-      product: selectedProduct?.id,
-      costingStatus: costingStatusFilter,
-      costingItem: selectedCostingItem?.id,
-      ...overrides,
-    });
-  const importedCount = Number(params?.importedCount ?? 0);
-  const skippedCount = Number(params?.skippedCount ?? 0);
-  const hasImportFeedback =
-    params?.saved === 'import' && params?.importedEntity;
-  const setupSection = params?.section;
-  const sectionNavItems: Array<{
-    key:
-      | 'onboarding'
-      | 'business-setup'
-      | 'users'
-      | 'preferences-system'
-      | 'products'
-      | 'suppliers'
-      | 'raw-materials'
-      | 'recipes'
-      | 'costing'
-      | 'price-history';
-    label: string;
-  }> = [
-    { key: 'onboarding', label: 'Onboarding' },
-    { key: 'business-setup', label: t('setup.sections.businessSetup') },
-    { key: 'users', label: t('setup.sections.users') },
-    { key: 'preferences-system', label: t('setup.sections.preferencesSystem') },
-    { key: 'products', label: 'Products' },
-    { key: 'suppliers', label: t('setup.sections.suppliers') },
-    { key: 'raw-materials', label: t('setup.sections.rawMaterials') },
-    { key: 'recipes', label: t('setup.sections.recipes') },
-    { key: 'costing', label: t('setup.sections.costing') },
-    { key: 'price-history', label: t('setup.sections.priceHistory') },
-  ];
-  const buildSectionLink = (section: (typeof sectionNavItems)[number]['key']) => ({
-    pathname: skossCoreRoutes.adminSetup,
-    query: { section },
-    hash: section,
-  });
-
-  return (
-    <div className="page-stack">
-      <datalist id="basic-unit-options">
-        {basicUnits.map((unit) => (
-          <option key={unit} value={unit} label={t(`units.${unit}`)} />
-        ))}
-      </datalist>
-
-      <section className="section-header page-hero-header">
-        <div>
-          <p className="eyebrow">{t('setup.workspace')}</p>
-          <h1>{t('setup.title')}</h1>
-          <p>{t('setup.description')}</p>
-        </div>
-      </section>
-
-      <SavedMessage saved={params?.saved} />
-      {params?.error ? <p className="inline-warning">{params.error}</p> : null}
-      {hasImportFeedback ? (
-        <p className="inline-success">
-          {t('setup.import.result', {
-            entity: t(`setup.import.entityLabels.${params.importedEntity}`),
-            imported: Number.isFinite(importedCount) ? importedCount : 0,
-            skipped: Number.isFinite(skippedCount) ? skippedCount : 0,
-          })}
-        </p>
-      ) : null}
-
-      {canResetDemoWorkspace ? (
-        <section className="panel page-stack">
-          <div className="table-header-row">
-            <div>
-              <h2>Local demo data safety</h2>
-              <p className="helper-text">
-                Runtime mode: <strong>{runtimeMode}</strong>. Use reset only for local/pilot testing so real records stay separate.
-              </p>
-            </div>
-          </div>
-          <form action={resetDemoWorkspaceAction}>
-            <button type="submit" className="button-secondary compact-button">
-              Reset demo workspace to seed data
-            </button>
-          </form>
-        </section>
-      ) : null}
-
-      <section className="panel page-stack setup-section-nav-panel">
-        <div className="table-header-row">
-          <div>
-            <h2>{t('setup.title')}</h2>
-            <p className="helper-text">{t('setup.adminReadinessHelp')}</p>
-          </div>
-        </div>
-        <div className="summary-pill-row">
-          {sectionNavItems.map((item) => (
-            <Link
-              key={item.key}
-              href={buildSectionLink(item.key)}
-              className={`summary-pill ${setupSection === item.key ? 'is-selected' : ''}`}
-            >
-              {item.label}
-            </Link>
-          ))}
-        </div>
-      </section>
-
-      <OperationalOnboardingChecklist sections={identitySetup.instance.operationalOnboarding} />
-
-      <section className="grid-two" id="business-setup">
-        <article className="panel page-stack" id="customers-summary">
-          <div className="table-header-row">
-            <div>
-              <h2>{t('setup.customerMemoryTitle')}</h2>
-              <p>{t('setup.customerMemoryHelp')}</p>
-            </div>
-            <span className="summary-pill">
-              {customerSetup.customers.length} {t('common.customers')}
-            </span>
-          </div>
-          {customerSetup.customers.length > 0 ? (
-            <ul className="stack-list compact-list">
-              {customerSetup.customers.slice(0, 6).map((customer) => (
-                <li key={customer.id} className="list-with-actions">
-                  <div>
-                    <strong>{customer.displayName}</strong>
-                    <span>
-                      {customer.phone ??
-                        customer.email ??
-                        t('customers.noContactYet')}
-                    </span>
-                  </div>
-                  <div className="inline-action-row">
-                    <Link
-                      href={`/customers?customer=${customer.id}`}
-                      className="inline-link"
-                    >
-                      {t('setup.actions.openCustomer')}
-                    </Link>
-                    <Link
-                      href={`/orders/new?customerId=${customer.id}`}
-                      className="inline-link"
-                    >
-                      {t('setup.actions.newOrder')}
-                    </Link>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <p className="empty-state">{t('setup.customerMemoryEmpty')}</p>
-          )}
-          <div className="inline-action-row">
-            <Link href="/customers" className="button-secondary compact-button">
-              {t('setup.actions.manageCustomers')}
-            </Link>
-            <Link
-              href="/customers#new-customer"
-              className="button-secondary compact-button"
-            >
-              {t('setup.actions.addCustomer')}
-            </Link>
-          </div>
-        </article>
-
-        <article className="panel page-stack">
-          <div className="table-header-row">
-            <div>
-              <h2>{t('setup.sections.imports')}</h2>
-              <p className="helper-text">Choose manual entry or CSV import based on what your business already has.</p>
-            </div>
-          </div>
-          <div className="inline-action-row">
-            <Link href="/customers#new-customer" className="button-secondary compact-button">
-              Add records manually
-            </Link>
-            <a href="#suppliers" className="button-secondary compact-button">
-              {t('setup.actions.importSuppliersCsv')}
-            </a>
-            <a href="#raw-materials" className="button-secondary compact-button">
-              {t('setup.actions.importRawMaterialsCsv')}
-            </a>
-          </div>
-        </article>
-      </section>
-
-      {!userContext.canManageSettings ? (
-        <p className="inline-warning">{t('setup.roleShapingNote')}</p>
-      ) : null}
-
-      <section className="grid-two" id="preferences-system">
-        <article className="panel page-stack">
-          <div className="table-header-row">
-            <div>
-              <h2>{t('setup.sections.preferencesSystem')}</h2>
-              <p className="helper-text">{t('setup.preferencesAreaBody')}</p>
-            </div>
-          </div>
-          <Link href="/preferences" className="button-secondary compact-button">
-            {t('setup.openPreferences')}
-          </Link>
-        </article>
-
-        <article className="panel page-stack">
-          <div className="table-header-row">
-            <div>
-              <h2>{t('setup.appearance')}</h2>
-              <p>{t('setup.appearanceHelp')}</p>
-            </div>
-            <span className="summary-pill">
-              {userContext.currentUser
-                ? userContext.currentUser.displayName
-                : t('nav.preferences')}
-            </span>
-          </div>
-          <ThemeSwitcher variant="panel" />
-        </article>
-      </section>
-
-      <section className="stats-grid compact-stats-grid" id="catalog-data">
-        <article className="stat-card">
-          <span className="stat-label">{t('setup.activeSuppliers')}</span>
-          <strong>
-            {procurementSetup.suppliers.filter((supplier) => supplier.active).length}
-          </strong>
-          <span>{t('setup.activeSuppliersHelp')}</span>
-        </article>
-        <article className="stat-card stat-card-info">
-          <span className="stat-label">{t('setup.rawMaterials')}</span>
-          <strong>{procurementSetup.rawMaterials.length}</strong>
-          <span>{t('setup.rawMaterialsHelp')}</span>
-        </article>
-        <article className="stat-card stat-card-success">
-          <span className="stat-label">{t('setup.recordedPrices')}</span>
-          <strong>{procurementSetup.supplierPriceEntries.length}</strong>
-          <span>{t('setup.recordedPricesHelp')}</span>
-        </article>
-        <article className="stat-card stat-card-neutral">
-          <span className="stat-label">{t('setup.recipes')}</span>
-          <strong>{activeRecipes}</strong>
-          <span>{t('setup.recipesHelp')}</span>
-        </article>
-      </section>
-
-      <section className="grid-two">
-        <article className="panel page-stack" id="products">
-          <div className="table-header-row">
-            <div>
-              <h2>Products for order capture</h2>
-              <p>Confirm the basic sellable items your team needs for first orders. Recipes, costing, inventory, and procurement can come later.</p>
-            </div>
-            <span className="summary-pill">
-              {catalogSetup.products.filter((product) => product.active).length}/{catalogSetup.products.length} active
-            </span>
-          </div>
-          <p className="helper-text no-margin">
-            Confirmed products appear as suggestions during order capture. Operators can still type draft product names when real work needs to move before setup is complete.{' '}
-            <Link href="/orders/new" className="inline-link">
-              {t('setup.openOrderCapture')}
-            </Link>
-          </p>
-          <div className="admin-split-layout">
-            <ul className="stack-list compact-list">
-              {catalogSetup.products.map((product) => (
-                <li key={product.id} className={`list-with-actions ${editingProduct?.id === product.id ? 'is-selected-row' : ''}`}>
-                  <div>
-                    <strong>
-                      {product.name}
-                      {!product.active ? ` · ${t('common.inactive').toLowerCase()}` : ''}
-                    </strong>
-                    <span>
-                      {[product.category, `${product.defaultUnit} default unit`].filter(Boolean).join(' · ')}
-                    </span>
-                    <span className="inline-meta">
-                      {product.variants.length} variant{product.variants.length === 1 ? '' : 's'} · {(recipesByProduct.get(product.id) ?? []).length} {t('common.recipes')}
-                    </span>
-                  </div>
-                  <div className="inline-action-row">
-                    <Link
-                      href={buildSetupHref({
-                        productSetup: product.id,
-                        product: selectedProduct?.id,
-                        supplier: editingSupplier?.id,
-                        material: editingMaterial?.id,
-                        historySupplier: historySupplier?.id,
-                        historyMaterial: historyMaterial?.id,
-                        recipe: editingRecipe?.id,
-                      })}
-                      className="inline-link"
-                    >
-                      {t('setup.actions.edit')}
-                    </Link>
-                    <Link
-                      href={buildSetupHref({
-                        product: product.id,
-                        supplier: editingSupplier?.id,
-                        material: editingMaterial?.id,
-                        historySupplier: historySupplier?.id,
-                        historyMaterial: historyMaterial?.id,
-                        recipe: undefined,
-                      })}
-                      className="inline-link"
-                    >
-                      {t('setup.actions.addRecipe')}
-                    </Link>
-                  </div>
-                </li>
-              ))}
-            </ul>
-            <form action={productFormAction} className="field-section page-stack">
-              <input type="hidden" name="redirectTo" value="/admin/setup" />
-              <div className="field-section-header">
-                <div>
-                  <h3>{editingProduct ? 'Edit product' : 'Add product'}</h3>
-                  <p className="helper-text">Keep this to the name and unit needed for first orders.</p>
-                </div>
-                {editingProduct ? (
-                  <Link href={buildSetupHref({ product: selectedProduct?.id })} className="button-secondary compact-button">
-                    {t('setup.actions.cancelEdit')}
-                  </Link>
-                ) : null}
-              </div>
-              <div className="grid-two">
-                <label>
-                  <span className="field-heading">Product name {renderRequiredMark()}</span>
-                  <input name="name" defaultValue={editingProduct?.name ?? ''} placeholder="Sourdough loaf" required />
-                </label>
-                <label>
-                  <span className="field-heading">Default unit {renderRequiredMark()}</span>
-                  <input name="defaultUnit" list="basic-unit-options" defaultValue={editingProduct?.defaultUnit ?? 'piece'} required />
-                </label>
-                <label>
-                  <span className="field-heading">Category <span className="optional-pill">{t('common.optional')}</span></span>
-                  <input name="category" defaultValue={editingProduct?.category ?? ''} placeholder="Bread, pastry, prepared food" />
-                </label>
-                <label className="checkbox-row">
-                  <input name="active" type="checkbox" defaultChecked={editingProduct?.active ?? true} />
-                  <span>
-                    <strong>Active for order suggestions</strong>
-                    <span className="helper-text">Inactive products stay saved but stop appearing as active order suggestions.</span>
-                  </span>
-                </label>
-              </div>
-              <button type="submit" className="button-primary">
-                {editingProduct ? 'Update product' : 'Save product'}
-              </button>
-            </form>
-          </div>
-        </article>
-
-        <article className="panel page-stack">
-          <div className="table-header-row">
-            <div>
-              <h2>{t('setup.destinations')}</h2>
-              <p>{t('setup.destinationsHelp')}</p>
-            </div>
-            <span className="summary-pill">
-              {businessSetup.destinations.length} {term('destination', 'many')}
-            </span>
-          </div>
-          <p className="helper-text no-margin">
-            {t('setup.destinationsManagedFromOrders')}{' '}
-            <Link href="/orders/new" className="inline-link">
-              {t('setup.openOrderCapture')}
-            </Link>
-          </p>
-          <ul className="stack-list">
-            {businessSetup.destinations.map((destination) => (
-              <li key={destination.id}>
-                <strong>{destination.name}</strong>
-                <span>{destination.kind}</span>
-              </li>
-            ))}
-          </ul>
-        </article>
-      </section>
-
-      <section id="users">
-        <article className="panel page-stack">
-          <div className="table-header-row">
-            <div>
-              <h2>{t('setup.users')}</h2>
-              <p>{t('setup.usersHelp')}</p>
-            </div>
-            <span className="summary-pill">
-              {identitySetup.users.length} {t('common.users')}
-            </span>
-          </div>
-          <div className="filter-pill-row">
-            <span className="summary-pill">
-              {identitySetup.users.filter((user) => user.active).length}{' '}
-              {t('setup.labels.activeUsers')}
-            </span>
-            <span className="summary-pill">
-              {identitySetup.users.filter((user) => !user.active).length}{' '}
-              {t('setup.labels.inactiveUsers')}
-            </span>
-            <span className="summary-pill">
-              {new Set(identitySetup.users.flatMap((user) => user.roles ?? [user.role])).size}{' '}
-              {t('setup.labels.rolesInUse')}
-            </span>
-            <Link href="/preferences" className="inline-link">
-              {t('setup.openPreferences')}
-            </Link>
-          </div>
-          <div className="admin-split-layout">
-            <div className="page-stack">
-              {identitySetup.users.length > 0 ? (
-                <ul className="stack-list compact-list">
-                  {identitySetup.users.map((user) => (
-                    <li key={user.id} className="list-with-actions">
-                      <div>
-                        <strong>
-                          {user.displayName}
-                          {!user.active
-                            ? ` · ${t('common.inactive').toLowerCase()}`
-                            : ''}
-                        </strong>
-                        <span>
-                          {(user.roles?.length ? user.roles : [user.role]).map((role) => t(`roles.${role}.label`)).join(' · ')} ·{' '}
-                          {user.loginIdentifier}
-                        </span>
-                        <span className="inline-meta">
-                          {t('setup.labels.defaultWorkspace')}:{' '}
-                          {t(
-                            `nav.${user.preferences?.defaultWorkspace ?? user.defaultWorkspace}`,
-                          )}
-                        </span>
-                        <span className="inline-meta">
-                          {t('setup.labels.visibleWorkspaces')}:{' '}
-                          {getVisibleWorkspacesForRole((user.roles?.[0] ?? user.role))
-                            .map((workspace) => t(`nav.${workspace}`))
-                            .join(' · ')}
-                        </span>
-                        <span className="inline-meta">
-                          {t('setup.labels.password')}:{' '}
-                          {user.mustChangePassword
-                            ? t('setup.labels.passwordNeedsReset')
-                            : t('setup.labels.passwordReady')}
-                        </span>
-                      </div>
-                      <div className="inline-action-row">
-                        <Link
-                          href={buildSetupHref({
-                            user: user.id,
-                            supplier: editingSupplier?.id,
-                            material: editingMaterial?.id,
-                            recipe: editingRecipe?.id,
-                            historySupplier: historySupplier?.id,
-                            historyMaterial: historyMaterial?.id,
-                            costingStatus: costingStatusFilter,
-                            costingItem: selectedCostingItem?.id,
-                          })}
-                          className="inline-link"
-                        >
-                          {t('setup.actions.edit')}
-                        </Link>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <p className="empty-state">{t('setup.usersEmpty')}</p>
-              )}
-            </div>
-            <form action={userFormAction} className="field-section page-stack">
-              <div className="field-section-header">
-                <div>
-                  <h3>
-                    {editingUser ? t('setup.editUser') : t('setup.addUser')}
-                  </h3>
-                  <p className="helper-text">
-                    {editingUser
-                      ? t('setup.editUserHelp')
-                      : t('setup.addUserHelp')}
-                  </p>
-                </div>
-                {editingUser ? (
-                  <Link
-                    href={buildSetupHref({
-                      supplier: editingSupplier?.id,
-                      material: editingMaterial?.id,
-                      recipe: editingRecipe?.id,
-                      historySupplier: historySupplier?.id,
-                      historyMaterial: historyMaterial?.id,
-                      costingStatus: costingStatusFilter,
-                      costingItem: selectedCostingItem?.id,
-                    })}
-                    className="button-secondary compact-button"
-                  >
-                    {t('setup.actions.cancelEdit')}
-                  </Link>
-                ) : null}
-              </div>
-              <div className="grid-two">
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.userDisplayName')} {renderRequiredMark()}
-                  </span>
-                  <input
-                    name="displayName"
-                    placeholder={t('setup.placeholders.userDisplayName')}
-                    defaultValue={editingUser?.displayName ?? ''}
-                    required
-                  />
-                </label>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.loginIdentifier')} {renderRequiredMark()}
-                  </span>
-                  <input
-                    name="loginIdentifier"
-                    placeholder="owner"
-                    defaultValue={editingUser?.loginIdentifier ?? ''}
-                    required
-                  />
-                </label>
-              </div>
-              <div className="grid-two">
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.role')} {renderRequiredMark()}
-                  </span>
-                  <div className="subpanel page-stack">
-                    {['owner_admin', 'shift_lead', 'kitchen', 'sales'].map((role) => {
-                      const selectedRoles = editingUser?.roles?.length ? editingUser.roles : [editingUser?.role ?? 'sales'];
-                      return (
-                        <label key={role} className="checkbox-row">
-                          <input
-                            type="checkbox"
-                            name="roles"
-                            value={role}
-                            defaultChecked={selectedRoles.includes(role as typeof selectedRoles[number])}
-                          />
-                          <span><strong>{t(`roles.${role}.label`)}</strong></span>
-                        </label>
-                      );
-                    })}
-                  </div>
-                </label>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.defaultWorkspace')} {renderRequiredMark()}
-                  </span>
-                  <select
-                    name="defaultWorkspace"
-                    defaultValue={
-                      editingUser?.preferences?.defaultWorkspace ??
-                      editingUser?.defaultWorkspace ??
-                      'orders'
-                    }
-                  >
-                    {[
-                      'timeline',
-                      'orders',
-                      'customers',
-                      'production',
-                      'handoff',
-                      'preferences',
-                      'admin',
-                    ].map((workspace) => (
-                      <option key={workspace} value={workspace}>
-                        {t(`nav.${workspace}`)}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-              </div>
-              <div className="grid-two">
-                <label>
-                  <span className="field-heading">Email</span>
-                  <input
-                    name="email"
-                    type="email"
-                    defaultValue={editingUser?.email ?? ''}
-                    placeholder="owner@kitchen.local"
-                  />
-                </label>
-                <label>
-                  <span className="field-heading">Phone</span>
-                  <input
-                    name="phone"
-                    defaultValue={editingUser?.phone ?? ''}
-                    placeholder="+1 555 0100"
-                  />
-                </label>
-              </div>
-              <div className="grid-two">
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.password')}
-                    {!editingUser ? <> {renderRequiredMark()}</> : null}
-                  </span>
-                  <input
-                    name="password"
-                    type="password"
-                    placeholder={t('setup.placeholders.password')}
-                    required={!editingUser}
-                  />
-                  <span className="helper-text">
-                    {editingUser
-                      ? t('setup.fields.passwordEditHelp')
-                      : t('setup.fields.passwordCreateHelp')}
-                  </span>
-                </label>
-                {editingUser ? (
-                  <label className="checkbox-row">
-                    <input name="resetPassword" type="checkbox" />
-                    <span>
-                      <strong>{t('setup.fields.resetPassword')}</strong>
-                      <span className="helper-text">
-                        {t('setup.fields.resetPasswordHelp')}
-                      </span>
-                    </span>
-                  </label>
-                ) : <div />}
-              </div>
-              <label className="checkbox-row">
-                <input
-                  name="active"
-                  type="checkbox"
-                  defaultChecked={editingUser?.active ?? true}
-                />
-                <span>
-                  <strong>{t('setup.fields.userActive')}</strong>
-                  <span className="helper-text">
-                    {t('setup.fields.userActiveHelp')}
-                  </span>
-                </span>
-              </label>
-              <button type="submit" className="button-primary">
-                {editingUser
-                  ? t('setup.actions.updateUser')
-                  : t('setup.actions.saveUser')}
-              </button>
-            </form>
-          </div>
-        </article>
-      </section>
-
-      <section className="panel page-stack">
-        <div className="table-header-row">
-          <div>
-            <h2>{t('setup.sections.catalogData')}</h2>
-            <p className="helper-text">{t('setup.rawMaterialsHelp')}</p>
-          </div>
-        </div>
-        <div className="grid-two">
-          <article className="subpanel page-stack" id="suppliers">
-            <div className="table-header-row">
-              <div>
-                <h3>{t('setup.suppliers')}</h3>
-                <p>{t('setup.suppliersHelp')}</p>
-              </div>
-              <div className="inline-action-row">
-                <span className="summary-pill">
-                  {procurementSetup.suppliers.length} {t('common.suppliers')}
-                </span>
-                <a
-                  href="#raw-materials"
-                  className="button-secondary compact-button"
-                >
-                  {t('setup.actions.importSuppliersCsv')}
-                </a>
-              </div>
-            </div>
-            <div className="admin-split-layout">
-              {procurementSetup.suppliers.length > 0 ? (
-                <ul className="stack-list compact-list">
-                  {procurementSetup.suppliers.map((supplier) => (
-                    <li key={supplier.id} className="list-with-actions">
-                      <div>
-                        <strong>
-                          {supplier.name}
-                          {!supplier.active
-                            ? ` · ${t('common.inactive').toLowerCase()}`
-                            : ''}
-                        </strong>
-                        <span>
-                          {supplier.contact ??
-                            supplier.notes ??
-                            t('setup.noExtraContactYet')}
-                        </span>
-                        <span className="inline-meta">
-                          {supplierPriceCounts.get(supplier.id) ?? 0}{' '}
-                          {t('setup.labels.priceEntries')}
-                        </span>
-                      </div>
-                      <div className="inline-action-row">
-                        <Link
-                          href={buildSetupHref({
-                            supplier: supplier.id,
-                            historySupplier: historySupplier?.id,
-                            historyMaterial: historyMaterial?.id,
-                            material: editingMaterial?.id,
-                            recipe: editingRecipe?.id,
-                          })}
-                          className="inline-link"
-                        >
-                          {t('setup.actions.edit')}
-                        </Link>
-                        <Link
-                          href={supplierHistoryHref(supplier.id)}
-                          className="inline-link"
-                        >
-                          {t('setup.actions.viewHistory')}
-                        </Link>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <p className="empty-state">{t('setup.suppliersEmpty')}</p>
-              )}
-              <form
-                action={supplierFormAction}
-                className="field-section page-stack"
-              >
-                <div className="field-section-header">
-                  <div>
-                    <h3>
-                      {editingSupplier
-                        ? t('setup.editSupplier')
-                        : t('setup.addSupplier')}
-                    </h3>
-                    <p className="helper-text">
-                      {editingSupplier
-                        ? t('setup.editSupplierHelp')
-                        : t('setup.addSupplierHelp')}
-                    </p>
-                  </div>
-                  {editingSupplier ? (
-                    <Link
-                      href={buildSetupHref({
-                        historySupplier: historySupplier?.id,
-                        historyMaterial: historyMaterial?.id,
-                        material: editingMaterial?.id,
-                        recipe: editingRecipe?.id,
-                      })}
-                      className="button-secondary compact-button"
-                    >
-                      {t('setup.actions.cancelEdit')}
-                    </Link>
-                  ) : null}
-                </div>
-                <div className="grid-two">
-                  <label>
-                    <span className="field-heading">
-                      {t('setup.fields.supplierName')} {renderRequiredMark()}
-                    </span>
-                    <input
-                      name="name"
-                      placeholder="Harina Viva"
-                      defaultValue={editingSupplier?.name ?? ''}
-                      required
-                    />
-                  </label>
-                  <label>
-                    <span className="field-heading">
-                      {t('setup.fields.contact')}{' '}
-                      <span className="optional-pill">
-                        {t('common.optional')}
-                      </span>
-                    </span>
-                    <input
-                      name="contact"
-                      placeholder={t('setup.placeholders.contact')}
-                      defaultValue={editingSupplier?.contact ?? ''}
-                    />
-                  </label>
-                </div>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.notes')}{' '}
-                    <span className="optional-pill">
-                      {t('common.optional')}
-                    </span>
-                  </span>
-                  <textarea
-                    name="notes"
-                    placeholder={t('setup.placeholders.supplierNotes')}
-                    defaultValue={editingSupplier?.notes ?? ''}
-                  />
-                </label>
-                <label className="checkbox-row">
-                  <input
-                    name="active"
-                    type="checkbox"
-                    defaultChecked={editingSupplier?.active ?? true}
-                  />
-                  <span>
-                    <strong>{t('setup.fields.activeSupplier')}</strong>
-                    <span className="helper-text">
-                      {t('setup.fields.activeSupplierHelp')}
-                    </span>
-                  </span>
-                </label>
-                <button type="submit" className="button-primary">
-                  {editingSupplier
-                    ? t('setup.actions.updateSupplier')
-                    : t('setup.actions.saveSupplier')}
-                </button>
-              </form>
-            </div>
-          </article>
-
-          <article className="subpanel page-stack" id="raw-materials">
-            <div className="table-header-row">
-              <div>
-                <h3>{t('setup.rawMaterialsSection')}</h3>
-                <p>{t('setup.rawMaterialsSectionHelp')}</p>
-              </div>
-              <div className="inline-action-row">
-                <span className="summary-pill">
-                  {procurementSetup.rawMaterials.length} {t('common.materials')}
-                </span>
-                <a href="#suppliers" className="button-secondary compact-button">
-                  {t('setup.actions.importRawMaterialsCsv')}
-                </a>
-              </div>
-            </div>
-            <div className="admin-split-layout">
-              {procurementSetup.rawMaterials.length > 0 ? (
-                <ul className="stack-list compact-list">
-                  {procurementSetup.rawMaterials.map((material) => {
-                    const latestPrice = procurementSetup.latestPriceByMaterial.get(
-                      material.id,
-                    );
-
-                    return (
-                      <li key={material.id} className="list-with-actions">
-                        <div>
-                          <strong>
-                            {material.name}
-                            {!material.active
-                              ? ` · ${t('common.inactive').toLowerCase()}`
-                              : ''}
-                          </strong>
-                          <span>
-                            {[
-                              material.category,
-                              material.defaultUnit
-                                ? `${material.defaultUnit} ${t('setup.labels.defaultUnitSuffix')}`
-                                : t('setup.labels.noDefaultUnit'),
-                              latestPrice
-                                ? `${t('setup.labels.latest')} ${formatUnitRate(latestPrice, locale)}`
-                                : null,
-                            ]
-                              .filter(Boolean)
-                              .join(' · ')}
-                          </span>
-                          <span className="inline-meta">
-                            {materialPriceCounts.get(material.id) ?? 0}{' '}
-                            {t('setup.labels.priceEntries')}
-                          </span>
-                        </div>
-                        <div className="inline-action-row">
-                          <Link
-                            href={buildSetupHref({
-                              material: material.id,
-                              historySupplier: historySupplier?.id,
-                              historyMaterial: historyMaterial?.id,
-                              supplier: editingSupplier?.id,
-                              recipe: editingRecipe?.id,
-                            })}
-                            className="inline-link"
-                          >
-                            {t('setup.actions.edit')}
-                          </Link>
-                          <Link
-                            href={materialHistoryHref(material.id)}
-                            className="inline-link"
-                          >
-                            {t('setup.actions.viewHistory')}
-                          </Link>
-                        </div>
-                      </li>
-                    );
-                  })}
-                </ul>
-              ) : (
-                <p className="empty-state">{t('setup.rawMaterialsEmpty')}</p>
-              )}
-              <form
-                action={rawMaterialFormAction}
-                className="field-section page-stack"
-              >
-                <div className="field-section-header">
-                  <div>
-                    <h3>
-                      {editingMaterial
-                        ? t('setup.editRawMaterial')
-                        : t('setup.addRawMaterial')}
-                    </h3>
-                    <p className="helper-text">
-                      {editingMaterial
-                        ? t('setup.editRawMaterialHelp')
-                        : t('setup.addRawMaterialHelp')}
-                    </p>
-                  </div>
-                  {editingMaterial ? (
-                    <Link
-                      href={buildSetupHref({
-                        historySupplier: historySupplier?.id,
-                        historyMaterial: historyMaterial?.id,
-                        supplier: editingSupplier?.id,
-                        recipe: editingRecipe?.id,
-                      })}
-                      className="button-secondary compact-button"
-                    >
-                      {t('setup.actions.cancelEdit')}
-                    </Link>
-                  ) : null}
-                </div>
-                <div className="grid-two">
-                  <label>
-                    <span className="field-heading">
-                      {t('setup.fields.rawMaterialName')} {renderRequiredMark()}
-                    </span>
-                    <input
-                      name="name"
-                      placeholder={t('setup.placeholders.rawMaterialName')}
-                      defaultValue={editingMaterial?.name ?? ''}
-                      required
-                    />
-                  </label>
-                  <label>
-                    <span className="field-heading">
-                      {t('setup.fields.category')}{' '}
-                      <span className="optional-pill">
-                        {t('common.optional')}
-                      </span>
-                    </span>
-                    <input
-                      name="category"
-                      placeholder={t('setup.placeholders.category')}
-                      defaultValue={editingMaterial?.category ?? ''}
-                    />
-                  </label>
-                  <label>
-                    <span className="field-heading">
-                      {t('setup.fields.defaultUnit')}{' '}
-                      <span className="optional-pill">
-                        {t('common.optional')}
-                      </span>
-                    </span>
-                    <input
-                      name="defaultUnit"
-                      list="basic-unit-options"
-                      placeholder={t('setup.placeholders.defaultUnit')}
-                      defaultValue={editingMaterial?.defaultUnit ?? ''}
-                    />
-                  </label>
-                  <label>
-                    <span className="field-heading">
-                      {t('setup.fields.brand')}{' '}
-                      <span className="optional-pill">
-                        {t('common.optional')}
-                      </span>
-                    </span>
-                    <input
-                      name="brand"
-                      placeholder={t('setup.placeholders.brand')}
-                      defaultValue={editingMaterial?.brand ?? ''}
-                    />
-                  </label>
-                </div>
-                <p className="helper-text">{t('setup.fields.unitQuickHelp')}</p>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.notes')}{' '}
-                    <span className="optional-pill">
-                      {t('common.optional')}
-                    </span>
-                  </span>
-                  <textarea
-                    name="notes"
-                    placeholder={t('setup.placeholders.rawMaterialNotes')}
-                    defaultValue={editingMaterial?.notes ?? ''}
-                  />
-                </label>
-                <label className="checkbox-row">
-                  <input
-                    name="active"
-                    type="checkbox"
-                    defaultChecked={editingMaterial?.active ?? true}
-                  />
-                  <span>
-                    <strong>{t('setup.fields.activeRawMaterial')}</strong>
-                    <span className="helper-text">
-                      {t('setup.fields.activeRawMaterialHelp')}
-                    </span>
-                  </span>
-                </label>
-                <button type="submit" className="button-primary">
-                  {editingMaterial
-                    ? t('setup.actions.updateRawMaterial')
-                    : t('setup.actions.saveRawMaterial')}
-                </button>
-              </form>
-            </div>
-          </article>
-        </div>
-      </section>
-
-      <section className="panel page-stack" id="recipes">
-        <div className="table-header-row">
-          <div>
-            <h2>{t('setup.recipeFoundationTitle')}</h2>
-            <p>{t('setup.recipeFoundationHelp')}</p>
-          </div>
-          <span className="summary-pill">
-            {linkedProductCount} {t('setup.recipeLabels.linkedProducts')}
-          </span>
-        </div>
-
-        <div className="grid-two recipe-grid admin-split-layout">
-          <article className="subpanel page-stack">
-            <div className="table-header-row">
-              <div>
-                <h3>{t('setup.recipeListTitle')}</h3>
-                <p>{t('setup.recipeListHelp')}</p>
-              </div>
-              <span className="summary-pill">
-                {catalogSetup.recipes.length} {t('common.recipes')}
-              </span>
-            </div>
-            {catalogSetup.recipes.length > 0 ? (
-              <ul className="stack-list compact-list">
-                {catalogSetup.recipes.map((recipe) => {
-                  const recipeCost = catalogSetup.recipeCostById.get(recipe.id);
-                  const productLabel = getRecipeLinkLabel(
-                    recipe,
-                    catalogSetup.products,
-                  );
-
-                  return (
-                    <li key={recipe.id} className="list-with-actions">
-                      <div>
-                        <strong>
-                          {recipe.title}
-                          {!recipe.active
-                            ? ` · ${t('common.inactive').toLowerCase()}`
-                            : ''}
-                        </strong>
-                        <span>{productLabel}</span>
-                        <span className="inline-meta">
-                          {recipe.lines.length} {t('setup.recipeLabels.lines')}
-                          {recipeCost?.lineCount
-                            ? ` · ${
-                                recipeCost.complete
-                                  ? `${t('setup.recipeLabels.costed')} ${formatCurrency(recipeCost.totalEstimatedCost, locale)}`
-                                  : `${formatCurrency(recipeCost.totalEstimatedCost, locale)} · ${recipeCost.incompleteLineCount} ${t('setup.recipeLabels.incomplete')}`
-                              }`
-                            : ` · ${t('setup.recipeLabels.noLinesYet')}`}
-                        </span>
-                      </div>
-                      <div className="inline-action-row">
-                        <Link
-                          href={buildSetupHref({
-                            recipe: recipe.id,
-                            supplier: editingSupplier?.id,
-                            material: editingMaterial?.id,
-                            historySupplier: historySupplier?.id,
-                            historyMaterial: historyMaterial?.id,
-                          })}
-                          className="inline-link"
-                        >
-                          {t('setup.actions.edit')}
-                        </Link>
-                      </div>
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <p className="empty-state">{t('setup.recipeEmpty')}</p>
-            )}
-          </article>
-
-          <div className="page-stack">
-            <form action={recipeFormAction} className="subpanel page-stack">
-              <div className="field-section-header">
-                <div>
-                  <h3>
-                    {editingRecipe
-                      ? t('setup.editRecipe')
-                      : t('setup.addRecipe')}
-                  </h3>
-                  <p className="helper-text">
-                    {editingRecipe
-                      ? t('setup.editRecipeHelp')
-                      : t('setup.addRecipeHelp')}
-                  </p>
-                </div>
-                {editingRecipe ? (
-                  <Link
-                    href={buildSetupHref({
-                      supplier: editingSupplier?.id,
-                      material: editingMaterial?.id,
-                      historySupplier: historySupplier?.id,
-                      historyMaterial: historyMaterial?.id,
-                    })}
-                    className="button-secondary compact-button"
-                  >
-                    {t('setup.actions.cancelEdit')}
-                  </Link>
-                ) : null}
-              </div>
-
-              <div className="grid-two">
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.product')} {renderRequiredMark()}
-                  </span>
-                  <select
-                    name="productId"
-                    defaultValue={recipeProductId}
-                    required
-                  >
-                    <option value="" disabled>
-                      {t('common.selectProduct')}
-                    </option>
-                    {catalogSetup.products.map((product) => (
-                      <option key={product.id} value={product.id}>
-                        {product.name}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.variant')}{' '}
-                    <span className="optional-pill">
-                      {t('common.optional')}
-                    </span>
-                  </span>
-                  <select
-                    name="productVariantId"
-                    defaultValue={editingRecipe?.productVariantId ?? ''}
-                  >
-                    <option value="">
-                      {t('setup.recipeLabels.productLevel')}
-                    </option>
-                    {catalogSetup.products.map((product) => (
-                      <optgroup key={product.id} label={product.name}>
-                        {product.variants.map((variant) => (
-                          <option key={variant.id} value={variant.id}>
-                            {variant.name}
-                          </option>
-                        ))}
-                      </optgroup>
-                    ))}
-                  </select>
-                </label>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.recipeTitle')}{' '}
-                    <span className="optional-pill">
-                      {t('common.optional')}
-                    </span>
-                  </span>
-                  <input
-                    name="title"
-                    placeholder={t('setup.placeholders.recipeTitle')}
-                    defaultValue={editingRecipe?.title ?? ''}
-                  />
-                </label>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.batchYieldQuantity')}{' '}
-                    <span className="optional-pill">
-                      {t('common.optional')}
-                    </span>
-                  </span>
-                  <input
-                    name="batchYieldQuantity"
-                    type="number"
-                    min="0.01"
-                    step="0.01"
-                    placeholder={t('setup.placeholders.batchYieldQuantity')}
-                    defaultValue={editingRecipe?.batchYieldQuantity ?? ''}
-                  />
-                </label>
-                <label>
-                  <span className="field-heading">
-                    {t('setup.fields.batchYieldUnit')}{' '}
-                    <span className="optional-pill">
-                      {t('common.optional')}
-                    </span>
-                  </span>
-                  <input
-                    name="batchYieldUnit"
-                    list="basic-unit-options"
-                    placeholder={t('setup.placeholders.batchYieldUnit')}
-                    defaultValue={editingRecipe?.batchYieldUnit ?? ''}
-                  />
-                </label>
-              </div>
-              <p className="helper-text">{t('setup.recipeYieldHelp')}</p>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.instructions')}{' '}
-                  <span className="optional-pill">{t('common.optional')}</span>
-                </span>
-                <textarea
-                  name="instructions"
-                  placeholder={t('setup.placeholders.recipeInstructions')}
-                  defaultValue={editingRecipe?.instructions ?? ''}
-                />
-              </label>
-              <label className="checkbox-row">
-                <input
-                  name="active"
-                  type="checkbox"
-                  defaultChecked={editingRecipe?.active ?? true}
-                />
-                <span>
-                  <strong>{t('setup.fields.activeRecipe')}</strong>
-                  <span className="helper-text">
-                    {t('setup.fields.activeRecipeHelp')}
-                  </span>
-                </span>
-              </label>
-
-              <div className="recipe-lines-block page-stack">
-                <div>
-                  <h3>{t('setup.recipeLinesTitle')}</h3>
-                  <p className="helper-text">{t('setup.recipeLinesHelp')}</p>
-                </div>
-                <div className="recipe-line-list">
-                  {recipeLineRows.map((line, index) => (
-                    <div
-                      key={line.id || line.key || `line-${index}`}
-                      className="recipe-line-card"
-                    >
-                      <input
-                        type="hidden"
-                        name="recipeLineId"
-                        value={line.id ?? ''}
-                      />
-                      <div className="grid-two">
-                        <label>
-                          <span className="field-heading">
-                            {t('setup.fields.rawMaterial')}{' '}
-                            {index < 2 ? (
-                              <span className="optional-pill">
-                                {t('common.optional')}
-                              </span>
-                            ) : null}
-                          </span>
-                          <select
-                            name="lineRawMaterialId"
-                            defaultValue={line.rawMaterialId ?? ''}
-                          >
-                            <option value="">
-                              {t('setup.recipeLabels.selectMaterialOptional')}
-                            </option>
-                            {procurementSetup.rawMaterials.map((material) => (
-                              <option key={material.id} value={material.id}>
-                                {material.name}
-                              </option>
-                            ))}
-                          </select>
-                        </label>
-                        <label>
-                          <span className="field-heading">
-                            {t('setup.fields.quantity')}{' '}
-                            <span className="optional-pill">
-                              {t('common.optional')}
-                            </span>
-                          </span>
-                          <input
-                            name="lineQuantity"
-                            type="number"
-                            min="0.01"
-                            step="0.01"
-                            placeholder={t(
-                              'setup.placeholders.recipeLineQuantity',
-                            )}
-                            defaultValue={line.quantity ?? ''}
-                          />
-                        </label>
-                        <label>
-                          <span className="field-heading">
-                            {t('setup.fields.unit')}{' '}
-                            <span className="optional-pill">
-                              {t('common.optional')}
-                            </span>
-                          </span>
-                          <input
-                            name="lineUnit"
-                            list="basic-unit-options"
-                            placeholder={t('setup.placeholders.recipeLineUnit')}
-                            defaultValue={line.unit ?? ''}
-                          />
-                        </label>
-                        <label>
-                          <span className="field-heading">
-                            {t('setup.fields.note')}{' '}
-                            <span className="optional-pill">
-                              {t('common.optional')}
-                            </span>
-                          </span>
-                          <input
-                            name="lineNote"
-                            placeholder={t('setup.placeholders.recipeLineNote')}
-                            defaultValue={line.note ?? ''}
-                          />
-                        </label>
-                      </div>
-                      {!line.isBlank ? (
-                        <label className="checkbox-row recipe-remove-row">
-                          <input
-                            name="lineRemove"
-                            type="checkbox"
-                            value={`remove-${index}`}
-                          />
-                          <span>
-                            <strong>{t('setup.actions.removeLine')}</strong>
-                            <span className="helper-text">
-                              {t('setup.recipeRemoveLineHelp')}
-                            </span>
-                          </span>
-                        </label>
-                      ) : null}
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              <button type="submit" className="button-primary">
-                {editingRecipe
-                  ? t('setup.actions.updateRecipe')
-                  : t('setup.actions.saveRecipe')}
-              </button>
-            </form>
-
-            <article className="subpanel page-stack">
-              <div className="table-header-row">
-                <div>
-                  <h3>{t('setup.recipeCostingTitle')}</h3>
-                  <p>{t('setup.recipeCostingHelp')}</p>
-                </div>
-                <span className="summary-pill">
-                  {t('setup.recipeLabels.latestPricesOnly')}
-                </span>
-              </div>
-              {editingRecipe && editingRecipeCost ? (
-                editingRecipeCost.lineCount > 0 ? (
-                  <>
-                    <div className="recipe-cost-summary">
-                      <strong>
-                        {formatCurrency(
-                          editingRecipeCost.totalEstimatedCost,
-                          locale,
-                        )}
-                      </strong>
-                      <span>
-                        {editingRecipeCost.complete
-                          ? t('setup.recipeCostComplete')
-                          : `${editingRecipeCost.costedLineCount}/${editingRecipeCost.lineCount} ${t('setup.recipeLabels.linesCosted')}`}
-                      </span>
-                      {editingRecipe.batchYieldQuantity &&
-                      editingRecipe.batchYieldUnit ? (
-                        <span>
-                          {t('setup.recipeLabels.approxPerYield')}{' '}
-                          {formatCurrency(
-                            editingRecipeCost.totalEstimatedCost /
-                              editingRecipe.batchYieldQuantity,
-                            locale,
-                          )}{' '}
-                          / {editingRecipe.batchYieldUnit}
-                        </span>
-                      ) : null}
-                    </div>
-                    <ul className="stack-list compact-list">
-                      {editingRecipeCost.lines.map((line) => (
-                        <li key={line.line.id} className="history-list-item">
-                          <strong>
-                            {line.line.rawMaterialLabel} · {line.line.quantity}{' '}
-                            {line.line.unit}
-                          </strong>
-                          {line.status === 'costed' ? (
-                            <>
-                              <span>
-                                {line.latestPriceEntry?.supplierLabel} ·{' '}
-                                {formatDateLabel(
-                                  line.latestPriceEntry?.priceDate ?? today,
-                                  locale,
-                                )}
-                              </span>
-                              <span>
-                                {t('setup.recipeLabels.estimatedLineCost')}{' '}
-                                {formatCurrency(
-                                  line.estimatedCost ?? 0,
-                                  locale,
-                                )}
-                                {line.latestPriceEntry
-                                  ? ` · ${formatUnitRate(line.latestPriceEntry, locale)}`
-                                  : ''}
-                              </span>
-                            </>
-                          ) : (
-                            <span>
-                              {line.status === 'missing_price'
-                                ? t('setup.recipeCostMissingPrice')
-                                : line.status === 'missing_package'
-                                  ? t('setup.recipeCostMissingPackage')
-                                  : t('setup.recipeCostUnitMismatch')}
-                            </span>
-                          )}
-                          {line.line.note ? (
-                            <span className="helper-text">
-                              {line.line.note}
-                            </span>
-                          ) : null}
-                        </li>
-                      ))}
-                    </ul>
-                    {!editingRecipeCost.complete ? (
-                      <p className="inline-warning">
-                        {t('setup.recipeCostIncomplete')}
-                      </p>
-                    ) : null}
-                  </>
-                ) : (
-                  <p className="empty-state">{t('setup.recipeCostEmpty')}</p>
-                )
-              ) : (
-                <p className="empty-state">{t('setup.recipeCostStart')}</p>
-              )}
-            </article>
-          </div>
-        </div>
-      </section>
-
-      <section className="panel page-stack" id="costing">
-        <div className="table-header-row">
-          <div>
-            <h2>{t('setup.costingSnapshotTitle')}</h2>
-            <p>{t('setup.costingSnapshotHelp')}</p>
-          </div>
-          <span className="summary-pill">
-            {t('setup.costingLabels.latestRecipeEvidence')}
-          </span>
-        </div>
-
-        <div className="stats-grid compact-stats-grid">
-          <article className="stat-card stat-card-success">
-            <span className="stat-label">
-              {t('setup.costingSummary.fullyCosted')}
-            </span>
-            <strong>{costingSummary.fullyCosted}</strong>
-            <span>{t('setup.costingSummary.fullyCostedHelp')}</span>
-          </article>
-          <article className="stat-card stat-card-info">
-            <span className="stat-label">
-              {t('setup.costingSummary.partiallyCosted')}
-            </span>
-            <strong>{costingSummary.partiallyCosted}</strong>
-            <span>{t('setup.costingSummary.partiallyCostedHelp')}</span>
-          </article>
-          <article className="stat-card stat-card-warning">
-            <span className="stat-label">
-              {t('setup.costingSummary.missingEvidence')}
-            </span>
-            <strong>{costingSummary.missingEvidence}</strong>
-            <span>{t('setup.costingSummary.missingEvidenceHelp')}</span>
-          </article>
-          <article className="stat-card stat-card-neutral">
-            <span className="stat-label">
-              {t('setup.costingSummary.noRecipe')}
-            </span>
-            <strong>{costingSummary.noRecipe}</strong>
-            <span>{t('setup.costingSummary.noRecipeHelp')}</span>
-          </article>
-        </div>
-
-        <div className="filter-pill-row">
-          {(
-            [
-              'all',
-              'fully_costed',
-              'partially_costed',
-              'missing_cost_evidence',
-              'no_recipe',
-            ] as const
-          ).map((statusKey) => (
-            <Link
-              key={statusKey}
-              href={buildCostingHref({
-                costingStatus: statusKey,
-                costingItem: (statusKey === 'all'
-                  ? costingItems
-                  : costingItems.filter((item) => item.status === statusKey))[0]
-                  ?.id,
-              })}
-              className={`summary-pill ${costingStatusFilter === statusKey ? 'is-selected' : ''}`}
-            >
-              {t(`setup.costingFilters.${statusKey}`)}
-            </Link>
-          ))}
-        </div>
-
-        <div className="grid-two recipe-grid">
-          <article className="subpanel page-stack">
-            <div className="table-header-row">
-              <div>
-                <h3>{t('setup.costingListTitle')}</h3>
-                <p>{t('setup.costingListHelp')}</p>
-              </div>
-              <span className="summary-pill">
-                {filteredCostingItems.length} {t('setup.costingLabels.items')}
-              </span>
-            </div>
-            {filteredCostingItems.length > 0 ? (
-              <ul className="stack-list compact-list">
-                {filteredCostingItems.map((item) => (
-                  <li
-                    key={item.id}
-                    className={`list-with-actions ${selectedCostingItem?.id === item.id ? 'is-selected-row' : ''}`}
-                  >
-                    <div>
-                      <strong>{item.productLabel}</strong>
-                      <span>
-                        {item.hasRecipe
-                          ? `${item.recipeTitle ?? item.label} · ${t(`setup.costingStatuses.${item.status}`)}`
-                          : t('setup.costingNoRecipe')}
-                      </span>
-                      <span className="inline-meta">
-                        {item.estimatedBatchCost !== undefined
-                          ? `${t('setup.costingLabels.batch')} ${formatCurrency(item.estimatedBatchCost, locale)}`
-                          : t('setup.costingLabels.noBatchEstimate')}
-                        {item.estimatedUnitCost !== undefined &&
-                        item.batchYieldUnit
-                          ? ` · ${t('setup.costingLabels.unit')} ${formatCurrency(item.estimatedUnitCost, locale)} / ${item.batchYieldUnit}`
-                          : ''}
-                      </span>
-                    </div>
-                    <div className="inline-action-row">
-                      <Link
-                        href={buildCostingHref({ costingItem: item.id })}
-                        className="inline-link"
-                      >
-                        {t('setup.actions.viewCosting')}
-                      </Link>
-                      {item.recipeId ? (
-                        <Link
-                          href={buildSetupHref({
-                            recipe: item.recipeId,
-                            supplier: editingSupplier?.id,
-                            material: editingMaterial?.id,
-                            historySupplier: historySupplier?.id,
-                            historyMaterial: historyMaterial?.id,
-                            costingStatus: costingStatusFilter,
-                            costingItem: item.id,
-                          })}
-                          className="inline-link"
-                        >
-                          {t('setup.actions.editRecipe')}
-                        </Link>
-                      ) : null}
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p className="empty-state">{t('setup.costingEmptyForFilter')}</p>
-            )}
-          </article>
-
-          <article className="subpanel page-stack">
-            <div className="table-header-row">
-              <div>
-                <h3>{t('setup.costingDetailTitle')}</h3>
-                <p>{t('setup.costingDetailHelp')}</p>
-              </div>
-              {selectedCostingItem ? (
-                <span className="summary-pill">
-                  {t(`setup.costingStatuses.${selectedCostingItem.status}`)}
-                </span>
-              ) : null}
-            </div>
-
-            {selectedCostingItem ? (
-              <>
-                <div className="recipe-cost-summary">
-                  <strong>{selectedCostingItem.productLabel}</strong>
-                  <span>
-                    {selectedCostingItem.hasRecipe
-                      ? selectedCostingItem.recipeTitle
-                      : t('setup.costingNoRecipe')}
-                  </span>
-                  <div className="costing-summary-grid">
-                    <div>
-                      <span className="helper-text">
-                        {t('setup.costingLabels.batchCost')}
-                      </span>
-                      <strong>
-                        {selectedCostingItem.estimatedBatchCost !== undefined
-                          ? formatCurrency(
-                              selectedCostingItem.estimatedBatchCost,
-                              locale,
-                            )
-                          : '—'}
-                      </strong>
-                    </div>
-                    <div>
-                      <span className="helper-text">
-                        {t('setup.costingLabels.unitCost')}
-                      </span>
-                      <strong>
-                        {selectedCostingItem.estimatedUnitCost !== undefined &&
-                        selectedCostingItem.batchYieldUnit
-                          ? `${formatCurrency(selectedCostingItem.estimatedUnitCost, locale)} / ${selectedCostingItem.batchYieldUnit}`
-                          : t('setup.costingLabels.noYield')}
-                      </strong>
-                    </div>
-                  </div>
-                  <span>
-                    {t(
-                      `setup.costingStatusesHelp.${selectedCostingItem.status}`,
-                    )}
-                  </span>
-                  {selectedCostingItem.hasRecipe ? (
-                    <span className="helper-text">
-                      {selectedCostingItem.costedLineCount}/
-                      {selectedCostingItem.lineCount}{' '}
-                      {t('setup.recipeLabels.linesCosted')}
-                      {selectedCostingItem.missingEvidenceCount
-                        ? ` · ${selectedCostingItem.missingEvidenceCount} ${t('setup.costingLabels.missingPrice')}`
-                        : ''}
-                      {selectedCostingItem.missingPackageCount
-                        ? ` · ${selectedCostingItem.missingPackageCount} ${t('setup.costingLabels.missingPackage')}`
-                        : ''}
-                      {selectedCostingItem.unitMismatchCount
-                        ? ` · ${selectedCostingItem.unitMismatchCount} ${t('setup.costingLabels.unitMismatch')}`
-                        : ''}
-                    </span>
-                  ) : null}
-                </div>
-
-                {selectedCostingItem.recipeCost?.lineCount ? (
-                  <ul className="stack-list compact-list">
-                    {selectedCostingItem.recipeCost.lines.map((line) => (
-                      <li
-                        key={line.line.id}
-                        className="history-list-item costing-line-item"
-                      >
-                        <div className="costing-line-header">
-                          <strong>{line.line.rawMaterialLabel}</strong>
-                          <span
-                            className={`summary-pill costing-status-pill is-${line.status}`}
-                          >
-                            {t(`setup.costingLineStatuses.${line.status}`)}
-                          </span>
-                        </div>
-                        <span>
-                          {line.line.quantity} {line.line.unit}
-                        </span>
-                        {line.status === 'costed' ? (
-                          <>
-                            <span>
-                              {t('setup.costingLabels.lineContribution')}{' '}
-                              {formatCurrency(line.estimatedCost ?? 0, locale)}
-                              {line.latestPriceEntry
-                                ? ` · ${formatUnitRate(line.latestPriceEntry, locale)}`
-                                : ''}
-                            </span>
-                            {line.latestPriceEntry ? (
-                              <span className="helper-text">
-                                {t('setup.costingLabels.sourceEvidence')}{' '}
-                                {line.latestPriceEntry.supplierLabel} ·{' '}
-                                {formatDateLabel(
-                                  line.latestPriceEntry.priceDate,
-                                  locale,
-                                )}
-                              </span>
-                            ) : null}
-                          </>
-                        ) : (
-                          <>
-                            <span>
-                              {t(
-                                `setup.costingLineStatusesHelp.${line.status}`,
-                              )}
-                            </span>
-                            {line.latestPriceEntry ? (
-                              <span className="helper-text">
-                                {t('setup.costingLabels.lastSeenPrice')}{' '}
-                                {line.latestPriceEntry.supplierLabel} ·{' '}
-                                {formatDateLabel(
-                                  line.latestPriceEntry.priceDate,
-                                  locale,
-                                )}
-                              </span>
-                            ) : null}
-                          </>
-                        )}
-                        {line.line.note ? (
-                          <span className="helper-text">{line.line.note}</span>
-                        ) : null}
-                      </li>
-                    ))}
-                  </ul>
-                ) : selectedCostingItem.hasRecipe ? (
-                  <p className="empty-state">{t('setup.recipeCostEmpty')}</p>
-                ) : (
-                  <p className="empty-state">
-                    {t('setup.costingNoRecipeHelp')}
-                  </p>
-                )}
-              </>
-            ) : (
-              <p className="empty-state">{t('setup.costingEmpty')}</p>
-            )}
-          </article>
-        </div>
-      </section>
-
-      <section className="panel page-stack" id="price-history">
-        <div className="table-header-row">
-          <div>
-            <h2>{t('setup.supplierPriceMemory')}</h2>
-            <p>{t('setup.supplierPriceMemoryHelp')}</p>
-          </div>
-          <span className="summary-pill">
-            {procurementSetup.supplierPriceEntries.length} {t('common.entries')}
-          </span>
-        </div>
-
-        <div className="filter-pill-row">
-          {historySupplier ? (
-            <span className="summary-pill">
-              {t('setup.history.supplierFilter')}: {historySupplier.name}
-            </span>
-          ) : null}
-          {historyMaterial ? (
-            <span className="summary-pill">
-              {t('setup.history.materialFilter')}: {historyMaterial.name}
-            </span>
-          ) : null}
-          {historySupplier || historyMaterial ? (
-            <Link
-              href={buildSetupHref({
-                supplier: editingSupplier?.id,
-                material: editingMaterial?.id,
-                recipe: editingRecipe?.id,
-              })}
-              className="inline-link"
-            >
-              {t('setup.actions.clearHistoryFilters')}
-            </Link>
-          ) : (
-            <span className="helper-text">{t('setup.history.allEntries')}</span>
-          )}
-        </div>
-
-        <div className="grid-two">
-          <div className="subpanel page-stack">
-            <div className="table-header-row">
-              <div>
-                <h3>{t('setup.history.title')}</h3>
-                <p>{t('setup.history.help')}</p>
-              </div>
-              <span className="summary-pill">
-                {filteredPriceEntries.length} {t('common.entries')}
-              </span>
-            </div>
-            {filteredPriceEntries.length > 0 ? (
-              <ul className="stack-list compact-list">
-                {filteredPriceEntries.map((entry) => (
-                  <li key={entry.id} className="history-list-item">
-                    <strong>
-                      {entry.rawMaterialLabel} ·{' '}
-                      {formatCurrency(entry.price, locale)}
-                    </strong>
-                    <span>
-                      {entry.supplierLabel} ·{' '}
-                      {formatDateLabel(entry.priceDate, locale)}
-                    </span>
-                    <span>
-                      {[
-                        entry.presentation,
-                        entry.brand,
-                        entry.packageQuantity && entry.packageUnit
-                          ? `${entry.packageQuantity} ${entry.packageUnit}`
-                          : null,
-                        entry.packageQuantity && entry.packageUnit
-                          ? formatUnitRate(entry, locale)
-                          : t('setup.labels.noPackageDetails'),
-                      ]
-                        .filter(Boolean)
-                        .join(' · ')}
-                    </span>
-                    {entry.note ? (
-                      <span className="helper-text">{entry.note}</span>
-                    ) : null}
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p className="empty-state">{t('setup.history.empty')}</p>
-            )}
-          </div>
-
-          <form
-            action={createSupplierPriceEntryAction}
-            className="subpanel page-stack"
-          >
-            <div className="field-section-header">
-              <div>
-                <h3>{t('setup.addSupplierPrice')}</h3>
-                <p className="helper-text">{t('setup.addSupplierPriceHelp')}</p>
-              </div>
-            </div>
-            <div className="grid-two">
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.supplier')} {renderRequiredMark()}
-                </span>
-                <select
-                  name="supplierId"
-                  defaultValue={historySupplier?.id ?? ''}
-                  required
-                >
-                  <option value="" disabled>
-                    {t('common.selectSupplier')}
-                  </option>
-                  {procurementSetup.suppliers.map((supplier) => (
-                    <option key={supplier.id} value={supplier.id}>
-                      {supplier.name}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.rawMaterial')} {renderRequiredMark()}
-                </span>
-                <select
-                  name="rawMaterialId"
-                  defaultValue={historyMaterial?.id ?? ''}
-                  required
-                >
-                  <option value="" disabled>
-                    {t('common.selectRawMaterial')}
-                  </option>
-                  {procurementSetup.rawMaterials.map((material) => (
-                    <option key={material.id} value={material.id}>
-                      {material.name}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.price')} {renderRequiredMark()}
-                </span>
-                <input
-                  name="price"
-                  type="number"
-                  min="0.01"
-                  step="0.01"
-                  placeholder={t('setup.placeholders.price')}
-                  required
-                />
-              </label>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.date')} {renderRequiredMark()}
-                </span>
-                <input
-                  name="priceDate"
-                  type="date"
-                  defaultValue={today}
-                  required
-                />
-              </label>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.presentation')}{' '}
-                  <span className="optional-pill">{t('common.optional')}</span>
-                </span>
-                <input
-                  name="presentation"
-                  placeholder={t('setup.placeholders.presentation')}
-                />
-              </label>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.brand')}{' '}
-                  <span className="optional-pill">{t('common.optional')}</span>
-                </span>
-                <input
-                  name="brand"
-                  placeholder={t('setup.placeholders.supplierBrand')}
-                />
-              </label>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.packageQuantity')}{' '}
-                  <span className="optional-pill">{t('common.optional')}</span>
-                </span>
-                <input
-                  name="packageQuantity"
-                  type="number"
-                  min="0.01"
-                  step="0.01"
-                  placeholder={t('setup.placeholders.packageQuantity')}
-                />
-              </label>
-              <label>
-                <span className="field-heading">
-                  {t('setup.fields.packageUnit')}{' '}
-                  <span className="optional-pill">{t('common.optional')}</span>
-                </span>
-                <input
-                  name="packageUnit"
-                  list="basic-unit-options"
-                  placeholder={t('setup.placeholders.packageUnit')}
-                />
-              </label>
-            </div>
-            <p className="helper-text">
-              {t('setup.fields.packageOptionalHelp')}
-            </p>
-            <label>
-              <span className="field-heading">
-                {t('setup.fields.note')}{' '}
-                <span className="optional-pill">{t('common.optional')}</span>
-              </span>
-              <textarea
-                name="note"
-                placeholder={t('setup.placeholders.priceNote')}
-              />
-            </label>
-            <button type="submit" className="button-primary">
-              {t('setup.actions.saveSupplierPrice')}
-            </button>
-          </form>
-        </div>
-      </section>
-
-    </div>
-  );
+  return <AdminSetupPage searchParams={searchParams} />;
 }
diff --git a/app/admin/setup/setup-page.tsx b/app/admin/setup/setup-page.tsx
new file mode 100644
index 0000000..2ededbe
--- /dev/null
+++ b/app/admin/setup/setup-page.tsx
@@ -0,0 +1,2397 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { skossCoreRoutes } from '@/lib/application-planes';
+import {
+  formatCurrency,
+  formatDateLabel,
+  formatUnitRate,
+} from '@/lib/domain/formatters';
+import type { OperationalOnboardingSectionKey, Product, Recipe } from '@/lib/domain/types';
+import { buildCostingSnapshotItems } from '@/lib/domain/recipe-costing';
+import {
+  createProductAction,
+  createRawMaterialAction,
+  createRecipeAction,
+  createSupplierAction,
+  createSupplierPriceEntryAction,
+  createUserAction,
+  updateProductAction,
+  updateRawMaterialAction,
+  updateRecipeAction,
+  updateSupplierAction,
+  updateUserAction,
+  resetDemoWorkspaceAction,
+  updateOperationalOnboardingSectionAction,
+} from '@/lib/server/actions';
+import { requireAdminPlaneAccess } from '@/lib/server/application-access';
+import { getSetupWorkspace } from '@/lib/server/demo-data';
+import { getServerTranslator } from '@/lib/i18n/server';
+import { getVisibleWorkspacesForRole } from '@/lib/workspaces';
+import { ThemeSwitcher } from '@/components/theme-switcher';
+import { OperationalOnboardingChecklist } from '@/components/setup/operational-onboarding-checklist';
+import { getRuntimeMode, isNonProductionMode } from '@/lib/server/runtime-mode';
+
+const basicUnits = [
+  'g',
+  'kg',
+  'ml',
+  'l',
+  'unit',
+  'piece',
+  'dozen',
+  'eggs',
+] as const;
+
+export type SetupSection =
+  | 'onboarding'
+  | 'business'
+  | 'customers'
+  | 'users'
+  | 'products'
+  | 'suppliers'
+  | 'materials'
+  | 'recipes'
+  | 'costing'
+  | 'system';
+
+const legacySectionMap: Record<string, SetupSection> = {
+  onboarding: 'onboarding',
+  'business-setup': 'business',
+  business: 'business',
+  customers: 'customers',
+  users: 'users',
+  products: 'products',
+  suppliers: 'suppliers',
+  'raw-materials': 'materials',
+  materials: 'materials',
+  recipes: 'recipes',
+  costing: 'costing',
+  'price-history': 'costing',
+  'preferences-system': 'system',
+  system: 'system',
+};
+
+function normalizeSetupSection(value?: string): SetupSection {
+  return value ? (legacySectionMap[value] ?? 'onboarding') : 'onboarding';
+}
+
+function buildLegacyRedirect(section: string, params: SetupSearchParams) {
+  const nextParams = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (key !== 'section' && typeof value === 'string' && value) {
+      nextParams.set(key, value);
+    }
+  }
+  const query = nextParams.toString();
+  return `/admin/setup/${normalizeSetupSection(section)}${query ? `?${query}` : ''}`;
+}
+
+export type SetupSearchParams = {
+  section?:
+    | 'onboarding'
+    | 'business-setup'
+    | 'users'
+    | 'preferences-system'
+    | 'products'
+    | 'suppliers'
+    | 'raw-materials'
+    | 'recipes'
+    | 'costing'
+    | 'price-history';
+  error?: string;
+  saved?: string;
+  supplier?: string;
+  material?: string;
+  product?: string;
+  productSetup?: string;
+  historySupplier?: string;
+  historyMaterial?: string;
+  recipe?: string;
+  user?: string;
+  costingStatus?:
+    | 'all'
+    | 'fully_costed'
+    | 'partially_costed'
+    | 'missing_cost_evidence'
+    | 'no_recipe';
+  costingItem?: string;
+  importedEntity?: 'customers' | 'suppliers' | 'rawMaterials';
+  importedCount?: string;
+  skippedCount?: string;
+};
+
+function inferSetupSectionFromParams(params: Record<string, string | undefined>): SetupSection {
+  if (params.user) return 'users';
+  if (params.product || params.productSetup) return 'products';
+  if (params.recipe) return 'recipes';
+  if (params.material || params.historyMaterial) return 'materials';
+  if (params.supplier || params.historySupplier) return 'suppliers';
+  if (params.costingStatus || params.costingItem) return 'costing';
+  return 'onboarding';
+}
+
+function buildSetupHref(params: Record<string, string | undefined>, fallbackSection?: SetupSection) {
+  const section = fallbackSection ?? inferSetupSectionFromParams(params);
+  return {
+    pathname: `/admin/setup/${section}`,
+    query: Object.fromEntries(
+      Object.entries(params).filter(([, value]) => Boolean(value)),
+    ),
+  };
+}
+
+function getProductLabel(
+  product: Pick<Product, 'name'>,
+  variant?: { name: string } | null,
+) {
+  return variant ? `${product.name} / ${variant.name}` : product.name;
+}
+
+function getRecipeLinkLabel(recipe: Recipe, products: Product[]) {
+  const product = products.find((entry) => entry.id === recipe.productId);
+  if (!product) {
+    return recipe.title;
+  }
+
+  const variant = recipe.productVariantId
+    ? (product.variants.find((entry) => entry.id === recipe.productVariantId) ??
+      null)
+    : null;
+
+  return getProductLabel(product, variant);
+}
+
+function buildRecipeLineRows(recipe?: Recipe | null) {
+  const existing = recipe?.lines ?? [];
+  const blankCount = Math.max(3, 5 - existing.length);
+
+  return [
+    ...existing.map((line) => ({ ...line, isBlank: false, key: line.id })),
+    ...Array.from({ length: blankCount }, (_, index) => ({
+      id: '',
+      rawMaterialId: '',
+      rawMaterialLabel: '',
+      quantity: undefined,
+      unit: '',
+      note: '',
+      isBlank: true,
+      key: `blank-${index}`,
+    })),
+  ];
+}
+
+const setupSectionOnboardingMap: Partial<Record<SetupSection, OperationalOnboardingSectionKey>> = {
+  business: 'business',
+  users: 'team',
+  customers: 'customers',
+  products: 'products',
+  recipes: 'recipes',
+};
+
+function renderRequiredMark() {
+  return (
+    <span className="setup-required-mark" aria-hidden="true">
+      *
+    </span>
+  );
+}
+
+async function SavedMessage({ saved }: { saved?: string }) {
+  const { t } = await getServerTranslator();
+
+  if (saved === 'supplier') {
+    return <p className="inline-success">{t('setup.saved.supplier')}</p>;
+  }
+
+  if (saved === 'raw-material') {
+    return <p className="inline-success">{t('setup.saved.rawMaterial')}</p>;
+  }
+
+  if (saved === 'price') {
+    return <p className="inline-success">{t('setup.saved.price')}</p>;
+  }
+
+  if (saved === 'recipe') {
+    return <p className="inline-success">{t('setup.saved.recipe')}</p>;
+  }
+
+  if (saved === 'product') {
+    return <p className="inline-success">Product saved.</p>;
+  }
+
+  if (saved === 'preferences') {
+    return <p className="inline-success">{t('setup.saved.preferences')}</p>;
+  }
+
+  if (saved === 'user') {
+    return <p className="inline-success">{t('setup.saved.user')}</p>;
+  }
+
+  if (saved === 'import') {
+    return <p className="inline-success">{t('setup.saved.import')}</p>;
+  }
+
+  if (saved === 'demo-reset') {
+    return <p className="inline-success">Demo workspace reseeded successfully.</p>;
+  }
+
+  if (saved === 'onboarding-section') {
+    return <p className="inline-success">Onboarding section updated.</p>;
+  }
+
+  return null;
+}
+
+export async function AdminSetupPage({
+  searchParams,
+  pathSection,
+}: {
+  searchParams?: Promise<SetupSearchParams>;
+  pathSection?: string;
+}) {
+  const userContext = await requireAdminPlaneAccess(skossCoreRoutes.adminSetup);
+  const [data, params, { t, locale, term }] = await Promise.all([
+    getSetupWorkspace(),
+    searchParams,
+    getServerTranslator(),
+  ]);
+  if (!pathSection && params?.section) {
+    redirect(buildLegacyRedirect(params.section, params));
+  }
+
+  const activeSection = normalizeSetupSection(pathSection ?? params?.section);
+  const today = new Date().toISOString().slice(0, 10);
+  const runtimeMode = getRuntimeMode();
+  const canResetDemoWorkspace = isNonProductionMode();
+  const identitySetup = data.identitySetup;
+  const customerSetup = data.customerSetup;
+  const businessSetup = data.businessSetup;
+  const procurementSetup = data.procurementSetup;
+  const catalogSetup = data.catalogSetup;
+
+  const editingSupplier = params?.supplier
+    ? (procurementSetup.suppliers.find((supplier) => supplier.id === params.supplier) ??
+      null)
+    : null;
+  const editingMaterial = params?.material
+    ? (procurementSetup.rawMaterials.find((material) => material.id === params.material) ??
+      null)
+    : null;
+  const selectedProduct = params?.product
+    ? (catalogSetup.products.find((product) => product.id === params.product) ?? null)
+    : null;
+  const editingProduct = params?.productSetup
+    ? (catalogSetup.products.find((product) => product.id === params.productSetup) ?? null)
+    : null;
+  const editingRecipe = params?.recipe
+    ? (catalogSetup.recipes.find((recipe) => recipe.id === params.recipe) ?? null)
+    : null;
+  const editingUser = params?.user
+    ? (identitySetup.users.find((user) => user.id === params.user) ?? null)
+    : null;
+  const historySupplier = params?.historySupplier
+    ? (procurementSetup.suppliers.find(
+        (supplier) => supplier.id === params.historySupplier,
+      ) ?? null)
+    : null;
+  const historyMaterial = params?.historyMaterial
+    ? (procurementSetup.rawMaterials.find(
+        (material) => material.id === params.historyMaterial,
+      ) ?? null)
+    : null;
+
+  const supplierFormAction = editingSupplier
+    ? updateSupplierAction.bind(null, editingSupplier.id)
+    : createSupplierAction;
+  const rawMaterialFormAction = editingMaterial
+    ? updateRawMaterialAction.bind(null, editingMaterial.id)
+    : createRawMaterialAction;
+  const productFormAction = editingProduct
+    ? updateProductAction.bind(null, editingProduct.id)
+    : createProductAction;
+  const recipeFormAction = editingRecipe
+    ? updateRecipeAction.bind(null, editingRecipe.id)
+    : createRecipeAction;
+  const userFormAction = editingUser
+    ? updateUserAction.bind(null, editingUser.id)
+    : createUserAction;
+
+  const supplierPriceCounts = new Map<string, number>();
+  const materialPriceCounts = new Map<string, number>();
+  for (const entry of procurementSetup.supplierPriceEntries) {
+    supplierPriceCounts.set(
+      entry.supplierId,
+      (supplierPriceCounts.get(entry.supplierId) ?? 0) + 1,
+    );
+    materialPriceCounts.set(
+      entry.rawMaterialId,
+      (materialPriceCounts.get(entry.rawMaterialId) ?? 0) + 1,
+    );
+  }
+
+  const filteredPriceEntries = procurementSetup.supplierPriceEntries.filter((entry) => {
+    if (historySupplier && entry.supplierId !== historySupplier.id) {
+      return false;
+    }
+
+    if (historyMaterial && entry.rawMaterialId !== historyMaterial.id) {
+      return false;
+    }
+
+    return true;
+  });
+
+  const supplierHistoryHref = (supplierId: string) =>
+    buildSetupHref({
+      historySupplier: supplierId,
+      historyMaterial: historyMaterial?.id,
+      supplier: editingSupplier?.id,
+      material: editingMaterial?.id,
+      recipe: editingRecipe?.id,
+    });
+
+  const materialHistoryHref = (materialId: string) =>
+    buildSetupHref({
+      historySupplier: historySupplier?.id,
+      historyMaterial: materialId,
+      supplier: editingSupplier?.id,
+      material: editingMaterial?.id,
+      recipe: editingRecipe?.id,
+    });
+
+  const recipeLineRows = buildRecipeLineRows(editingRecipe);
+  const recipeProductId = editingRecipe?.productId ?? selectedProduct?.id ?? '';
+  const editingRecipeCost = editingRecipe
+    ? (catalogSetup.recipeCostById.get(editingRecipe.id) ?? null)
+    : null;
+  const activeRecipes = catalogSetup.recipes.filter((recipe) => recipe.active).length;
+  const linkedProductCount = new Set(
+    catalogSetup.recipes.map((recipe) => recipe.productVariantId ?? recipe.productId),
+  ).size;
+  const recipesByProduct = new Map<string, Recipe[]>();
+  for (const recipe of catalogSetup.recipes) {
+    const existingRecipes = recipesByProduct.get(recipe.productId) ?? [];
+    recipesByProduct.set(recipe.productId, [...existingRecipes, recipe]);
+  }
+  const costingItems = buildCostingSnapshotItems(
+    catalogSetup.products,
+    catalogSetup.recipes,
+    catalogSetup.recipeCostById,
+  );
+  const costingStatusFilter = params?.costingStatus ?? 'all';
+  const filteredCostingItems = costingItems.filter(
+    (item) =>
+      costingStatusFilter === 'all' || item.status === costingStatusFilter,
+  );
+  const selectedCostingItem =
+    (params?.costingItem
+      ? (filteredCostingItems.find((item) => item.id === params.costingItem) ??
+        costingItems.find((item) => item.id === params.costingItem) ??
+        null)
+      : null) ??
+    filteredCostingItems[0] ??
+    costingItems[0] ??
+    null;
+  const costingSummary = {
+    fullyCosted: costingItems.filter((item) => item.status === 'fully_costed')
+      .length,
+    partiallyCosted: costingItems.filter(
+      (item) => item.status === 'partially_costed',
+    ).length,
+    missingEvidence: costingItems.filter(
+      (item) => item.status === 'missing_cost_evidence',
+    ).length,
+    noRecipe: costingItems.filter((item) => item.status === 'no_recipe').length,
+  };
+  const buildCostingHref = (overrides: Record<string, string | undefined>) =>
+    buildSetupHref({
+      supplier: editingSupplier?.id,
+      material: editingMaterial?.id,
+      historySupplier: historySupplier?.id,
+      historyMaterial: historyMaterial?.id,
+      recipe: editingRecipe?.id,
+      product: selectedProduct?.id,
+      costingStatus: costingStatusFilter,
+      costingItem: selectedCostingItem?.id,
+      ...overrides,
+    });
+  const importedCount = Number(params?.importedCount ?? 0);
+  const skippedCount = Number(params?.skippedCount ?? 0);
+  const hasImportFeedback =
+    params?.saved === 'import' && params?.importedEntity;
+  const setupSection = activeSection;
+  const sectionNavItems: Array<{ key: SetupSection; label: string }> = [
+    { key: 'onboarding', label: 'Onboarding' },
+    { key: 'business', label: t('setup.sections.businessSetup') },
+    { key: 'customers', label: t('common.customers') },
+    { key: 'users', label: t('setup.sections.users') },
+    { key: 'products', label: 'Products' },
+    { key: 'suppliers', label: t('setup.sections.suppliers') },
+    { key: 'materials', label: t('setup.sections.rawMaterials') },
+    { key: 'recipes', label: t('setup.sections.recipes') },
+    { key: 'costing', label: t('setup.sections.costing') },
+    { key: 'system', label: t('setup.sections.preferencesSystem') },
+  ];
+  const buildSectionLink = (section: SetupSection) => `/admin/setup/${section}`;
+  const activeSectionIndex = sectionNavItems.findIndex((item) => item.key === activeSection);
+  const previousSection = activeSectionIndex > 0 ? sectionNavItems[activeSectionIndex - 1] : null;
+  const nextSection = activeSectionIndex >= 0 && activeSectionIndex < sectionNavItems.length - 1 ? sectionNavItems[activeSectionIndex + 1] : null;
+  const onboardingSectionKey = setupSectionOnboardingMap[activeSection];
+  const onboardingSectionStatus = onboardingSectionKey ? identitySetup.instance.operationalOnboarding?.[onboardingSectionKey]?.status ?? 'not_started' : undefined;
+
+  return (
+    <div className="page-stack">
+      <datalist id="basic-unit-options">
+        {basicUnits.map((unit) => (
+          <option key={unit} value={unit} label={t(`units.${unit}`)} />
+        ))}
+      </datalist>
+
+      <section className="section-header page-hero-header">
+        <div>
+          <p className="eyebrow">{t('setup.workspace')}</p>
+          <h1>{t('setup.title')}</h1>
+          <p>{t('setup.description')}</p>
+        </div>
+      </section>
+
+      <SavedMessage saved={params?.saved} />
+      {params?.error ? <p className="inline-warning">{params.error}</p> : null}
+      {hasImportFeedback ? (
+        <p className="inline-success">
+          {t('setup.import.result', {
+            entity: t(`setup.import.entityLabels.${params.importedEntity}`),
+            imported: Number.isFinite(importedCount) ? importedCount : 0,
+            skipped: Number.isFinite(skippedCount) ? skippedCount : 0,
+          })}
+        </p>
+      ) : null}
+
+      {activeSection === 'system' && canResetDemoWorkspace ? (
+        <section className="panel page-stack">
+          <div className="table-header-row">
+            <div>
+              <h2>Local demo data safety</h2>
+              <p className="helper-text">
+                Runtime mode: <strong>{runtimeMode}</strong>. Use reset only for local/pilot testing so real records stay separate.
+              </p>
+            </div>
+          </div>
+          <form action={resetDemoWorkspaceAction}>
+            <button type="submit" className="button-secondary compact-button">
+              Reset demo workspace to seed data
+            </button>
+          </form>
+        </section>
+      ) : null}
+
+      <section className="panel page-stack setup-section-nav-panel">
+        <div className="table-header-row">
+          <div>
+            <h2>{t('setup.title')}</h2>
+            <p className="helper-text">{t('setup.adminReadinessHelp')}</p>
+          </div>
+        </div>
+        <div className="summary-pill-row">
+          {sectionNavItems.map((item) => (
+            <Link
+              key={item.key}
+              href={{ pathname: buildSectionLink(item.key) }}
+              className={`summary-pill ${setupSection === item.key ? 'is-selected' : ''}`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {activeSection !== 'onboarding' ? (
+        <section className="subpanel page-stack setup-chapter-panel">
+          <div className="table-header-row">
+            <div>
+              <p className="eyebrow">Setup chapter</p>
+              <h2>{sectionNavItems[activeSectionIndex]?.label ?? 'Setup'}</h2>
+              <p className="helper-text no-margin">One configuration area at a time. Return to onboarding when this chapter is ready or intentionally deferred.</p>
+            </div>
+            {onboardingSectionStatus ? <span className="summary-pill">{onboardingSectionStatus.replace('_', ' ')}</span> : null}
+          </div>
+          <div className="inline-action-row setup-chapter-actions">
+            <Link href="/admin/setup/onboarding" className="button-secondary compact-button">Onboarding overview</Link>
+            {previousSection ? <Link href={{ pathname: buildSectionLink(previousSection.key) }} className="button-ghost compact-button">Previous: {previousSection.label}</Link> : null}
+            {nextSection ? <Link href={{ pathname: buildSectionLink(nextSection.key) }} className="button-ghost compact-button">Next: {nextSection.label}</Link> : null}
+            {onboardingSectionKey ? (
+              <>
+                <form action={updateOperationalOnboardingSectionAction}>
+                  <input type="hidden" name="section" value={onboardingSectionKey} />
+                  <input type="hidden" name="status" value="skipped" />
+                  <button type="submit" className="button-ghost compact-button">Skip for now</button>
+                </form>
+                <form action={updateOperationalOnboardingSectionAction}>
+                  <input type="hidden" name="section" value={onboardingSectionKey} />
+                  <input type="hidden" name="status" value="ready" />
+                  <button type="submit" className="button-secondary compact-button">Mark ready</button>
+                </form>
+              </>
+            ) : null}
+          </div>
+        </section>
+      ) : null}
+
+      {activeSection === 'onboarding' ? (
+        <OperationalOnboardingChecklist sections={identitySetup.instance.operationalOnboarding} />
+      ) : null}
+
+      {activeSection === 'business' ? (
+        <section className="panel page-stack" id="business">
+          <div className="table-header-row">
+            <div>
+              <h2>Business profile</h2>
+              <p className="helper-text">Keep the permanent business settings focused. Operational records live in their own setup pages.</p>
+            </div>
+            <span className="summary-pill">{businessSetup.destinations.length} {term('destination', 'many')}</span>
+          </div>
+          <div className="setup-action-grid">
+            <Link href="/preferences" className="button-secondary compact-button">Open preferences</Link>
+            <Link href="/orders/new" className="button-secondary compact-button">Open order capture</Link>
+          </div>
+          {businessSetup.destinations.length > 0 ? (
+            <ul className="stack-list compact-list">
+              {businessSetup.destinations.map((destination) => (
+                <li key={destination.id} className="list-with-actions">
+                  <div>
+                    <strong>{destination.name}</strong>
+                    <span>{destination.kind}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="empty-state">Destinations can be added from order capture when real delivery or pickup patterns are known.</p>
+          )}
+        </section>
+      ) : null}
+
+      {activeSection === 'customers' ? (
+      <section className="grid-two setup-focused-grid" id="customers">
+        <article className="panel page-stack" id="customers-summary">
+          <div className="table-header-row">
+            <div>
+              <h2>{t('setup.customerMemoryTitle')}</h2>
+              <p>{t('setup.customerMemoryHelp')}</p>
+            </div>
+            <span className="summary-pill">
+              {customerSetup.customers.length} {t('common.customers')}
+            </span>
+          </div>
+          {customerSetup.customers.length > 0 ? (
+            <ul className="stack-list compact-list">
+              {customerSetup.customers.slice(0, 6).map((customer) => (
+                <li key={customer.id} className="list-with-actions">
+                  <div>
+                    <strong>{customer.displayName}</strong>
+                    <span>
+                      {customer.phone ??
+                        customer.email ??
+                        t('customers.noContactYet')}
+                    </span>
+                  </div>
+                  <div className="inline-action-row">
+                    <Link
+                      href={`/customers?customer=${customer.id}`}
+                      className="inline-link"
+                    >
+                      {t('setup.actions.openCustomer')}
+                    </Link>
+                    <Link
+                      href={`/orders/new?customerId=${customer.id}`}
+                      className="inline-link"
+                    >
+                      {t('setup.actions.newOrder')}
+                    </Link>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="empty-state">{t('setup.customerMemoryEmpty')}</p>
+          )}
+          <div className="inline-action-row">
+            <Link href="/customers" className="button-secondary compact-button">
+              {t('setup.actions.manageCustomers')}
+            </Link>
+            <Link
+              href="/customers#new-customer"
+              className="button-secondary compact-button"
+            >
+              {t('setup.actions.addCustomer')}
+            </Link>
+          </div>
+        </article>
+
+        <article className="panel page-stack">
+          <div className="table-header-row">
+            <div>
+              <h2>{t('setup.sections.imports')}</h2>
+              <p className="helper-text">CSV import screens are planned but not active yet.</p>
+            </div>
+          </div>
+          <div className="inline-action-row">
+            <Link href="/customers#new-customer" className="button-secondary compact-button">
+              Add records manually
+            </Link>
+            <button type="button" className="button-secondary compact-button" disabled>Customer CSV coming later</button>
+          </div>
+        </article>
+      </section>
+      ) : null}
+
+      {!userContext.canManageSettings && activeSection === 'users' ? (
+        <p className="inline-warning">{t('setup.roleShapingNote')}</p>
+      ) : null}
+
+      {activeSection === 'system' ? (
+      <section className="grid-two setup-focused-grid" id="system">
+        <article className="panel page-stack">
+          <div className="table-header-row">
+            <div>
+              <h2>{t('setup.sections.preferencesSystem')}</h2>
+              <p className="helper-text">{t('setup.preferencesAreaBody')}</p>
+            </div>
+          </div>
+          <Link href="/preferences" className="button-secondary compact-button">
+            {t('setup.openPreferences')}
+          </Link>
+        </article>
+
+        <article className="panel page-stack">
+          <div className="table-header-row">
+            <div>
+              <h2>{t('setup.appearance')}</h2>
+              <p>{t('setup.appearanceHelp')}</p>
+            </div>
+            <span className="summary-pill">
+              {userContext.currentUser
+                ? userContext.currentUser.displayName
+                : t('nav.preferences')}
+            </span>
+          </div>
+          <ThemeSwitcher variant="panel" />
+        </article>
+      </section>
+      ) : null}
+
+      {activeSection === 'costing' ? (
+      <section className="stats-grid compact-stats-grid" id="catalog-data">
+        <article className="stat-card">
+          <span className="stat-label">{t('setup.activeSuppliers')}</span>
+          <strong>
+            {procurementSetup.suppliers.filter((supplier) => supplier.active).length}
+          </strong>
+          <span>{t('setup.activeSuppliersHelp')}</span>
+        </article>
+        <article className="stat-card stat-card-info">
+          <span className="stat-label">{t('setup.rawMaterials')}</span>
+          <strong>{procurementSetup.rawMaterials.length}</strong>
+          <span>{t('setup.rawMaterialsHelp')}</span>
+        </article>
+        <article className="stat-card stat-card-success">
+          <span className="stat-label">{t('setup.recordedPrices')}</span>
+          <strong>{procurementSetup.supplierPriceEntries.length}</strong>
+          <span>{t('setup.recordedPricesHelp')}</span>
+        </article>
+        <article className="stat-card stat-card-neutral">
+          <span className="stat-label">{t('setup.recipes')}</span>
+          <strong>{activeRecipes}</strong>
+          <span>{t('setup.recipesHelp')}</span>
+        </article>
+      </section>
+      ) : null}
+
+      {activeSection === 'products' ? (
+      <section className="grid-two setup-focused-grid">
+        <article className="panel page-stack" id="products">
+          <div className="table-header-row">
+            <div>
+              <h2>Products for order capture</h2>
+              <p>Confirm the basic sellable items your team needs for first orders. Recipes, costing, inventory, and procurement can come later.</p>
+            </div>
+            <span className="summary-pill">
+              {catalogSetup.products.filter((product) => product.active).length}/{catalogSetup.products.length} active
+            </span>
+          </div>
+          <p className="helper-text no-margin">
+            Confirmed products appear as suggestions during order capture. Operators can still type draft product names when real work needs to move before setup is complete.{' '}
+            <Link href="/orders/new" className="inline-link">
+              {t('setup.openOrderCapture')}
+            </Link>
+          </p>
+          <div className={`admin-split-layout ${catalogSetup.products.length === 0 ? 'is-empty-list' : ''}`}>
+            <ul className="stack-list compact-list">
+              {catalogSetup.products.map((product) => (
+                <li key={product.id} className={`list-with-actions ${editingProduct?.id === product.id ? 'is-selected-row' : ''}`}>
+                  <div>
+                    <strong>
+                      {product.name}
+                      {!product.active ? ` · ${t('common.inactive').toLowerCase()}` : ''}
+                    </strong>
+                    <span>
+                      {[product.category, `${product.defaultUnit} default unit`].filter(Boolean).join(' · ')}
+                    </span>
+                    <span className="inline-meta">
+                      {product.variants.length} variant{product.variants.length === 1 ? '' : 's'} · {(recipesByProduct.get(product.id) ?? []).length} {t('common.recipes')}
+                    </span>
+                  </div>
+                  <div className="inline-action-row">
+                    <Link
+                      href={buildSetupHref({
+                        productSetup: product.id,
+                        product: selectedProduct?.id,
+                        supplier: editingSupplier?.id,
+                        material: editingMaterial?.id,
+                        historySupplier: historySupplier?.id,
+                        historyMaterial: historyMaterial?.id,
+                        recipe: editingRecipe?.id,
+                      })}
+                      className="inline-link"
+                    >
+                      {t('setup.actions.edit')}
+                    </Link>
+                    <Link
+                      href={buildSetupHref({
+                        product: product.id,
+                        supplier: editingSupplier?.id,
+                        material: editingMaterial?.id,
+                        historySupplier: historySupplier?.id,
+                        historyMaterial: historyMaterial?.id,
+                        recipe: undefined,
+                      })}
+                      className="inline-link"
+                    >
+                      {t('setup.actions.addRecipe')}
+                    </Link>
+                  </div>
+                </li>
+              ))}
+            </ul>
+            <form action={productFormAction} className="field-section page-stack">
+              <input type="hidden" name="redirectTo" value="/admin/setup/products" />
+              <div className="field-section-header">
+                <div>
+                  <h3>{editingProduct ? 'Edit product' : 'Add product'}</h3>
+                  <p className="helper-text">Keep this to the name and unit needed for first orders.</p>
+                </div>
+                {editingProduct ? (
+                  <Link href={buildSetupHref({ product: selectedProduct?.id })} className="button-secondary compact-button">
+                    {t('setup.actions.cancelEdit')}
+                  </Link>
+                ) : null}
+              </div>
+              <div className="grid-two">
+                <label>
+                  <span className="field-heading">Product name {renderRequiredMark()}</span>
+                  <input name="name" defaultValue={editingProduct?.name ?? ''} placeholder="Sourdough loaf" required />
+                </label>
+                <label>
+                  <span className="field-heading">Default unit {renderRequiredMark()}</span>
+                  <input name="defaultUnit" list="basic-unit-options" defaultValue={editingProduct?.defaultUnit ?? 'piece'} required />
+                </label>
+                <label>
+                  <span className="field-heading">Category <span className="optional-pill">{t('common.optional')}</span></span>
+                  <input name="category" defaultValue={editingProduct?.category ?? ''} placeholder="Bread, pastry, prepared food" />
+                </label>
+                <label className="checkbox-row">
+                  <input name="active" type="checkbox" defaultChecked={editingProduct?.active ?? true} />
+                  <span>
+                    <strong>Active for order suggestions</strong>
+                    <span className="helper-text">Inactive products stay saved but stop appearing as active order suggestions.</span>
+                  </span>
+                </label>
+              </div>
+              <button type="submit" className="button-primary">
+                {editingProduct ? 'Update product' : 'Save product'}
+              </button>
+            </form>
+          </div>
+        </article>
+      </section>
+      ) : null}
+
+      {activeSection === 'users' ? (
+      <section id="users">
+        <article className="panel page-stack">
+          <div className="table-header-row">
+            <div>
+              <h2>{t('setup.users')}</h2>
+              <p>{t('setup.usersHelp')}</p>
+            </div>
+            <span className="summary-pill">
+              {identitySetup.users.length} {t('common.users')}
+            </span>
+          </div>
+          <div className="filter-pill-row">
+            <span className="summary-pill">
+              {identitySetup.users.filter((user) => user.active).length}{' '}
+              {t('setup.labels.activeUsers')}
+            </span>
+            <span className="summary-pill">
+              {identitySetup.users.filter((user) => !user.active).length}{' '}
+              {t('setup.labels.inactiveUsers')}
+            </span>
+            <span className="summary-pill">
+              {new Set(identitySetup.users.flatMap((user) => user.roles ?? [user.role])).size}{' '}
+              {t('setup.labels.rolesInUse')}
+            </span>
+            <Link href="/preferences" className="inline-link">
+              {t('setup.openPreferences')}
+            </Link>
+          </div>
+          <div className={`admin-split-layout ${identitySetup.users.length === 0 ? 'is-empty-list' : ''}`}>
+            <div className="page-stack">
+              {identitySetup.users.length > 0 ? (
+                <ul className="stack-list compact-list">
+                  {identitySetup.users.map((user) => (
+                    <li key={user.id} className="list-with-actions">
+                      <div>
+                        <strong>
+                          {user.displayName}
+                          {!user.active
+                            ? ` · ${t('common.inactive').toLowerCase()}`
+                            : ''}
+                        </strong>
+                        <span>
+                          {(user.roles?.length ? user.roles : [user.role]).map((role) => t(`roles.${role}.label`)).join(' · ')} ·{' '}
+                          {user.loginIdentifier}
+                        </span>
+                        <span className="inline-meta">
+                          {t('setup.labels.defaultWorkspace')}:{' '}
+                          {t(
+                            `nav.${user.preferences?.defaultWorkspace ?? user.defaultWorkspace}`,
+                          )}
+                        </span>
+                        <span className="inline-meta">
+                          {t('setup.labels.visibleWorkspaces')}:{' '}
+                          {getVisibleWorkspacesForRole((user.roles?.[0] ?? user.role))
+                            .map((workspace) => t(`nav.${workspace}`))
+                            .join(' · ')}
+                        </span>
+                        <span className="inline-meta">
+                          {t('setup.labels.password')}:{' '}
+                          {user.mustChangePassword
+                            ? t('setup.labels.passwordNeedsReset')
+                            : t('setup.labels.passwordReady')}
+                        </span>
+                      </div>
+                      <div className="inline-action-row">
+                        <Link
+                          href={buildSetupHref({
+                            user: user.id,
+                            supplier: editingSupplier?.id,
+                            material: editingMaterial?.id,
+                            recipe: editingRecipe?.id,
+                            historySupplier: historySupplier?.id,
+                            historyMaterial: historyMaterial?.id,
+                            costingStatus: costingStatusFilter,
+                            costingItem: selectedCostingItem?.id,
+                          })}
+                          className="inline-link"
+                        >
+                          {t('setup.actions.edit')}
+                        </Link>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="empty-state">{t('setup.usersEmpty')}</p>
+              )}
+            </div>
+            <form action={userFormAction} className="field-section page-stack">
+              <div className="field-section-header">
+                <div>
+                  <h3>
+                    {editingUser ? t('setup.editUser') : t('setup.addUser')}
+                  </h3>
+                  <p className="helper-text">
+                    {editingUser
+                      ? t('setup.editUserHelp')
+                      : t('setup.addUserHelp')}
+                  </p>
+                </div>
+                {editingUser ? (
+                  <Link
+                    href={buildSetupHref({
+                      supplier: editingSupplier?.id,
+                      material: editingMaterial?.id,
+                      recipe: editingRecipe?.id,
+                      historySupplier: historySupplier?.id,
+                      historyMaterial: historyMaterial?.id,
+                      costingStatus: costingStatusFilter,
+                      costingItem: selectedCostingItem?.id,
+                    })}
+                    className="button-secondary compact-button"
+                  >
+                    {t('setup.actions.cancelEdit')}
+                  </Link>
+                ) : null}
+              </div>
+              <div className="grid-two">
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.userDisplayName')} {renderRequiredMark()}
+                  </span>
+                  <input
+                    name="displayName"
+                    placeholder={t('setup.placeholders.userDisplayName')}
+                    defaultValue={editingUser?.displayName ?? ''}
+                    required
+                  />
+                </label>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.loginIdentifier')} {renderRequiredMark()}
+                  </span>
+                  <input
+                    name="loginIdentifier"
+                    placeholder="owner"
+                    defaultValue={editingUser?.loginIdentifier ?? ''}
+                    required
+                  />
+                </label>
+              </div>
+              <div className="grid-two">
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.role')} {renderRequiredMark()}
+                  </span>
+                  <div className="subpanel page-stack">
+                    {['owner_admin', 'shift_lead', 'kitchen', 'sales'].map((role) => {
+                      const selectedRoles = editingUser?.roles?.length ? editingUser.roles : [editingUser?.role ?? 'sales'];
+                      return (
+                        <label key={role} className="checkbox-row">
+                          <input
+                            type="checkbox"
+                            name="roles"
+                            value={role}
+                            defaultChecked={selectedRoles.includes(role as typeof selectedRoles[number])}
+                          />
+                          <span><strong>{t(`roles.${role}.label`)}</strong></span>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </label>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.defaultWorkspace')} {renderRequiredMark()}
+                  </span>
+                  <select
+                    name="defaultWorkspace"
+                    defaultValue={
+                      editingUser?.preferences?.defaultWorkspace ??
+                      editingUser?.defaultWorkspace ??
+                      'orders'
+                    }
+                  >
+                    {[
+                      'timeline',
+                      'orders',
+                      'customers',
+                      'production',
+                      'handoff',
+                      'preferences',
+                      'admin',
+                    ].map((workspace) => (
+                      <option key={workspace} value={workspace}>
+                        {t(`nav.${workspace}`)}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              </div>
+              <div className="grid-two">
+                <label>
+                  <span className="field-heading">Email</span>
+                  <input
+                    name="email"
+                    type="email"
+                    defaultValue={editingUser?.email ?? ''}
+                    placeholder="owner@kitchen.local"
+                  />
+                </label>
+                <label>
+                  <span className="field-heading">Phone</span>
+                  <input
+                    name="phone"
+                    defaultValue={editingUser?.phone ?? ''}
+                    placeholder="+1 555 0100"
+                  />
+                </label>
+              </div>
+              <div className="grid-two">
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.password')}
+                    {!editingUser ? <> {renderRequiredMark()}</> : null}
+                  </span>
+                  <input
+                    name="password"
+                    type="password"
+                    placeholder={t('setup.placeholders.password')}
+                    required={!editingUser}
+                  />
+                  <span className="helper-text">
+                    {editingUser
+                      ? t('setup.fields.passwordEditHelp')
+                      : t('setup.fields.passwordCreateHelp')}
+                  </span>
+                </label>
+                {editingUser ? (
+                  <label className="checkbox-row">
+                    <input name="resetPassword" type="checkbox" />
+                    <span>
+                      <strong>{t('setup.fields.resetPassword')}</strong>
+                      <span className="helper-text">
+                        {t('setup.fields.resetPasswordHelp')}
+                      </span>
+                    </span>
+                  </label>
+                ) : <div />}
+              </div>
+              <label className="checkbox-row">
+                <input
+                  name="active"
+                  type="checkbox"
+                  defaultChecked={editingUser?.active ?? true}
+                />
+                <span>
+                  <strong>{t('setup.fields.userActive')}</strong>
+                  <span className="helper-text">
+                    {t('setup.fields.userActiveHelp')}
+                  </span>
+                </span>
+              </label>
+              <button type="submit" className="button-primary">
+                {editingUser
+                  ? t('setup.actions.updateUser')
+                  : t('setup.actions.saveUser')}
+              </button>
+            </form>
+          </div>
+        </article>
+      </section>
+      ) : null}
+
+      {activeSection === 'suppliers' || activeSection === 'materials' ? (
+      <section className="panel page-stack">
+        <div className="table-header-row">
+          <div>
+            <h2>{activeSection === 'suppliers' ? t('setup.suppliers') : t('setup.rawMaterialsSection')}</h2>
+            <p className="helper-text">{t('setup.rawMaterialsHelp')}</p>
+          </div>
+        </div>
+        <div className="grid-two">
+          {activeSection === 'suppliers' ? (
+          <article className="subpanel page-stack" id="suppliers">
+            <div className="table-header-row">
+              <div>
+                <h3>{t('setup.suppliers')}</h3>
+                <p>{t('setup.suppliersHelp')}</p>
+              </div>
+              <div className="inline-action-row">
+                <span className="summary-pill">
+                  {procurementSetup.suppliers.length} {t('common.suppliers')}
+                </span>
+                <button type="button" className="button-secondary compact-button" disabled>Supplier CSV coming later</button>
+              </div>
+            </div>
+            <div className={`admin-split-layout ${procurementSetup.suppliers.length === 0 ? 'is-empty-list' : ''}`}>
+              {procurementSetup.suppliers.length > 0 ? (
+                <ul className="stack-list compact-list">
+                  {procurementSetup.suppliers.map((supplier) => (
+                    <li key={supplier.id} className="list-with-actions">
+                      <div>
+                        <strong>
+                          {supplier.name}
+                          {!supplier.active
+                            ? ` · ${t('common.inactive').toLowerCase()}`
+                            : ''}
+                        </strong>
+                        <span>
+                          {supplier.contact ??
+                            supplier.notes ??
+                            t('setup.noExtraContactYet')}
+                        </span>
+                        <span className="inline-meta">
+                          {supplierPriceCounts.get(supplier.id) ?? 0}{' '}
+                          {t('setup.labels.priceEntries')}
+                        </span>
+                      </div>
+                      <div className="inline-action-row">
+                        <Link
+                          href={buildSetupHref({
+                            supplier: supplier.id,
+                            historySupplier: historySupplier?.id,
+                            historyMaterial: historyMaterial?.id,
+                            material: editingMaterial?.id,
+                            recipe: editingRecipe?.id,
+                          })}
+                          className="inline-link"
+                        >
+                          {t('setup.actions.edit')}
+                        </Link>
+                        <Link
+                          href={supplierHistoryHref(supplier.id)}
+                          className="inline-link"
+                        >
+                          {t('setup.actions.viewHistory')}
+                        </Link>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="empty-state">{t('setup.suppliersEmpty')}</p>
+              )}
+              <form
+                action={supplierFormAction}
+                className="field-section page-stack"
+              >
+                <div className="field-section-header">
+                  <div>
+                    <h3>
+                      {editingSupplier
+                        ? t('setup.editSupplier')
+                        : t('setup.addSupplier')}
+                    </h3>
+                    <p className="helper-text">
+                      {editingSupplier
+                        ? t('setup.editSupplierHelp')
+                        : t('setup.addSupplierHelp')}
+                    </p>
+                  </div>
+                  {editingSupplier ? (
+                    <Link
+                      href={buildSetupHref({
+                        historySupplier: historySupplier?.id,
+                        historyMaterial: historyMaterial?.id,
+                        material: editingMaterial?.id,
+                        recipe: editingRecipe?.id,
+                      })}
+                      className="button-secondary compact-button"
+                    >
+                      {t('setup.actions.cancelEdit')}
+                    </Link>
+                  ) : null}
+                </div>
+                <div className="grid-two">
+                  <label>
+                    <span className="field-heading">
+                      {t('setup.fields.supplierName')} {renderRequiredMark()}
+                    </span>
+                    <input
+                      name="name"
+                      placeholder="Harina Viva"
+                      defaultValue={editingSupplier?.name ?? ''}
+                      required
+                    />
+                  </label>
+                  <label>
+                    <span className="field-heading">
+                      {t('setup.fields.contact')}{' '}
+                      <span className="optional-pill">
+                        {t('common.optional')}
+                      </span>
+                    </span>
+                    <input
+                      name="contact"
+                      placeholder={t('setup.placeholders.contact')}
+                      defaultValue={editingSupplier?.contact ?? ''}
+                    />
+                  </label>
+                </div>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.notes')}{' '}
+                    <span className="optional-pill">
+                      {t('common.optional')}
+                    </span>
+                  </span>
+                  <textarea
+                    name="notes"
+                    placeholder={t('setup.placeholders.supplierNotes')}
+                    defaultValue={editingSupplier?.notes ?? ''}
+                  />
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    name="active"
+                    type="checkbox"
+                    defaultChecked={editingSupplier?.active ?? true}
+                  />
+                  <span>
+                    <strong>{t('setup.fields.activeSupplier')}</strong>
+                    <span className="helper-text">
+                      {t('setup.fields.activeSupplierHelp')}
+                    </span>
+                  </span>
+                </label>
+                <button type="submit" className="button-primary">
+                  {editingSupplier
+                    ? t('setup.actions.updateSupplier')
+                    : t('setup.actions.saveSupplier')}
+                </button>
+              </form>
+            </div>
+          </article>
+          ) : null}
+
+          {activeSection === 'materials' ? (
+          <article className="subpanel page-stack" id="raw-materials">
+            <div className="table-header-row">
+              <div>
+                <h3>{t('setup.rawMaterialsSection')}</h3>
+                <p>{t('setup.rawMaterialsSectionHelp')}</p>
+              </div>
+              <div className="inline-action-row">
+                <span className="summary-pill">
+                  {procurementSetup.rawMaterials.length} {t('common.materials')}
+                </span>
+                <button type="button" className="button-secondary compact-button" disabled>Material CSV coming later</button>
+              </div>
+            </div>
+            <div className={`admin-split-layout ${procurementSetup.rawMaterials.length === 0 ? 'is-empty-list' : ''}`}>
+              {procurementSetup.rawMaterials.length > 0 ? (
+                <ul className="stack-list compact-list">
+                  {procurementSetup.rawMaterials.map((material) => {
+                    const latestPrice = procurementSetup.latestPriceByMaterial.get(
+                      material.id,
+                    );
+
+                    return (
+                      <li key={material.id} className="list-with-actions">
+                        <div>
+                          <strong>
+                            {material.name}
+                            {!material.active
+                              ? ` · ${t('common.inactive').toLowerCase()}`
+                              : ''}
+                          </strong>
+                          <span>
+                            {[
+                              material.category,
+                              material.defaultUnit
+                                ? `${material.defaultUnit} ${t('setup.labels.defaultUnitSuffix')}`
+                                : t('setup.labels.noDefaultUnit'),
+                              latestPrice
+                                ? `${t('setup.labels.latest')} ${formatUnitRate(latestPrice, locale)}`
+                                : null,
+                            ]
+                              .filter(Boolean)
+                              .join(' · ')}
+                          </span>
+                          <span className="inline-meta">
+                            {materialPriceCounts.get(material.id) ?? 0}{' '}
+                            {t('setup.labels.priceEntries')}
+                          </span>
+                        </div>
+                        <div className="inline-action-row">
+                          <Link
+                            href={buildSetupHref({
+                              material: material.id,
+                              historySupplier: historySupplier?.id,
+                              historyMaterial: historyMaterial?.id,
+                              supplier: editingSupplier?.id,
+                              recipe: editingRecipe?.id,
+                            })}
+                            className="inline-link"
+                          >
+                            {t('setup.actions.edit')}
+                          </Link>
+                          <Link
+                            href={materialHistoryHref(material.id)}
+                            className="inline-link"
+                          >
+                            {t('setup.actions.viewHistory')}
+                          </Link>
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              ) : (
+                <p className="empty-state">{t('setup.rawMaterialsEmpty')}</p>
+              )}
+              <form
+                action={rawMaterialFormAction}
+                className="field-section page-stack"
+              >
+                <div className="field-section-header">
+                  <div>
+                    <h3>
+                      {editingMaterial
+                        ? t('setup.editRawMaterial')
+                        : t('setup.addRawMaterial')}
+                    </h3>
+                    <p className="helper-text">
+                      {editingMaterial
+                        ? t('setup.editRawMaterialHelp')
+                        : t('setup.addRawMaterialHelp')}
+                    </p>
+                  </div>
+                  {editingMaterial ? (
+                    <Link
+                      href={buildSetupHref({
+                        historySupplier: historySupplier?.id,
+                        historyMaterial: historyMaterial?.id,
+                        supplier: editingSupplier?.id,
+                        recipe: editingRecipe?.id,
+                      })}
+                      className="button-secondary compact-button"
+                    >
+                      {t('setup.actions.cancelEdit')}
+                    </Link>
+                  ) : null}
+                </div>
+                <div className="grid-two">
+                  <label>
+                    <span className="field-heading">
+                      {t('setup.fields.rawMaterialName')} {renderRequiredMark()}
+                    </span>
+                    <input
+                      name="name"
+                      placeholder={t('setup.placeholders.rawMaterialName')}
+                      defaultValue={editingMaterial?.name ?? ''}
+                      required
+                    />
+                  </label>
+                  <label>
+                    <span className="field-heading">
+                      {t('setup.fields.category')}{' '}
+                      <span className="optional-pill">
+                        {t('common.optional')}
+                      </span>
+                    </span>
+                    <input
+                      name="category"
+                      placeholder={t('setup.placeholders.category')}
+                      defaultValue={editingMaterial?.category ?? ''}
+                    />
+                  </label>
+                  <label>
+                    <span className="field-heading">
+                      {t('setup.fields.defaultUnit')}{' '}
+                      <span className="optional-pill">
+                        {t('common.optional')}
+                      </span>
+                    </span>
+                    <input
+                      name="defaultUnit"
+                      list="basic-unit-options"
+                      placeholder={t('setup.placeholders.defaultUnit')}
+                      defaultValue={editingMaterial?.defaultUnit ?? ''}
+                    />
+                  </label>
+                  <label>
+                    <span className="field-heading">
+                      {t('setup.fields.brand')}{' '}
+                      <span className="optional-pill">
+                        {t('common.optional')}
+                      </span>
+                    </span>
+                    <input
+                      name="brand"
+                      placeholder={t('setup.placeholders.brand')}
+                      defaultValue={editingMaterial?.brand ?? ''}
+                    />
+                  </label>
+                </div>
+                <p className="helper-text">{t('setup.fields.unitQuickHelp')}</p>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.notes')}{' '}
+                    <span className="optional-pill">
+                      {t('common.optional')}
+                    </span>
+                  </span>
+                  <textarea
+                    name="notes"
+                    placeholder={t('setup.placeholders.rawMaterialNotes')}
+                    defaultValue={editingMaterial?.notes ?? ''}
+                  />
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    name="active"
+                    type="checkbox"
+                    defaultChecked={editingMaterial?.active ?? true}
+                  />
+                  <span>
+                    <strong>{t('setup.fields.activeRawMaterial')}</strong>
+                    <span className="helper-text">
+                      {t('setup.fields.activeRawMaterialHelp')}
+                    </span>
+                  </span>
+                </label>
+                <button type="submit" className="button-primary">
+                  {editingMaterial
+                    ? t('setup.actions.updateRawMaterial')
+                    : t('setup.actions.saveRawMaterial')}
+                </button>
+              </form>
+            </div>
+          </article>
+          ) : null}
+        </div>
+      </section>
+      ) : null}
+
+      {activeSection === 'recipes' ? (
+      <section className="panel page-stack" id="recipes">
+        <div className="table-header-row">
+          <div>
+            <h2>{t('setup.recipeFoundationTitle')}</h2>
+            <p>{t('setup.recipeFoundationHelp')}</p>
+          </div>
+          <span className="summary-pill">
+            {linkedProductCount} {t('setup.recipeLabels.linkedProducts')}
+          </span>
+        </div>
+
+        <div className={`grid-two recipe-grid admin-split-layout ${catalogSetup.recipes.length === 0 ? 'is-empty-list' : ''}`}>
+          <article className="subpanel page-stack">
+            <div className="table-header-row">
+              <div>
+                <h3>{t('setup.recipeListTitle')}</h3>
+                <p>{t('setup.recipeListHelp')}</p>
+              </div>
+              <span className="summary-pill">
+                {catalogSetup.recipes.length} {t('common.recipes')}
+              </span>
+            </div>
+            {catalogSetup.recipes.length > 0 ? (
+              <ul className="stack-list compact-list">
+                {catalogSetup.recipes.map((recipe) => {
+                  const recipeCost = catalogSetup.recipeCostById.get(recipe.id);
+                  const productLabel = getRecipeLinkLabel(
+                    recipe,
+                    catalogSetup.products,
+                  );
+
+                  return (
+                    <li key={recipe.id} className="list-with-actions">
+                      <div>
+                        <strong>
+                          {recipe.title}
+                          {!recipe.active
+                            ? ` · ${t('common.inactive').toLowerCase()}`
+                            : ''}
+                        </strong>
+                        <span>{productLabel}</span>
+                        <span className="inline-meta">
+                          {recipe.lines.length} {t('setup.recipeLabels.lines')}
+                          {recipeCost?.lineCount
+                            ? ` · ${
+                                recipeCost.complete
+                                  ? `${t('setup.recipeLabels.costed')} ${formatCurrency(recipeCost.totalEstimatedCost, locale)}`
+                                  : `${formatCurrency(recipeCost.totalEstimatedCost, locale)} · ${recipeCost.incompleteLineCount} ${t('setup.recipeLabels.incomplete')}`
+                              }`
+                            : ` · ${t('setup.recipeLabels.noLinesYet')}`}
+                        </span>
+                      </div>
+                      <div className="inline-action-row">
+                        <Link
+                          href={buildSetupHref({
+                            recipe: recipe.id,
+                            supplier: editingSupplier?.id,
+                            material: editingMaterial?.id,
+                            historySupplier: historySupplier?.id,
+                            historyMaterial: historyMaterial?.id,
+                          })}
+                          className="inline-link"
+                        >
+                          {t('setup.actions.edit')}
+                        </Link>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <p className="empty-state">{t('setup.recipeEmpty')}</p>
+            )}
+          </article>
+
+          <div className="page-stack">
+            <form action={recipeFormAction} className="subpanel page-stack">
+              <div className="field-section-header">
+                <div>
+                  <h3>
+                    {editingRecipe
+                      ? t('setup.editRecipe')
+                      : t('setup.addRecipe')}
+                  </h3>
+                  <p className="helper-text">
+                    {editingRecipe
+                      ? t('setup.editRecipeHelp')
+                      : t('setup.addRecipeHelp')}
+                  </p>
+                </div>
+                {editingRecipe ? (
+                  <Link
+                    href={buildSetupHref({
+                      supplier: editingSupplier?.id,
+                      material: editingMaterial?.id,
+                      historySupplier: historySupplier?.id,
+                      historyMaterial: historyMaterial?.id,
+                    })}
+                    className="button-secondary compact-button"
+                  >
+                    {t('setup.actions.cancelEdit')}
+                  </Link>
+                ) : null}
+              </div>
+
+              <div className="grid-two">
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.product')} {renderRequiredMark()}
+                  </span>
+                  <select
+                    name="productId"
+                    defaultValue={recipeProductId}
+                    required
+                  >
+                    <option value="" disabled>
+                      {t('common.selectProduct')}
+                    </option>
+                    {catalogSetup.products.map((product) => (
+                      <option key={product.id} value={product.id}>
+                        {product.name}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.variant')}{' '}
+                    <span className="optional-pill">
+                      {t('common.optional')}
+                    </span>
+                  </span>
+                  <select
+                    name="productVariantId"
+                    defaultValue={editingRecipe?.productVariantId ?? ''}
+                  >
+                    <option value="">
+                      {t('setup.recipeLabels.productLevel')}
+                    </option>
+                    {catalogSetup.products.map((product) => (
+                      <optgroup key={product.id} label={product.name}>
+                        {product.variants.map((variant) => (
+                          <option key={variant.id} value={variant.id}>
+                            {variant.name}
+                          </option>
+                        ))}
+                      </optgroup>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.recipeTitle')}{' '}
+                    <span className="optional-pill">
+                      {t('common.optional')}
+                    </span>
+                  </span>
+                  <input
+                    name="title"
+                    placeholder={t('setup.placeholders.recipeTitle')}
+                    defaultValue={editingRecipe?.title ?? ''}
+                  />
+                </label>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.batchYieldQuantity')}{' '}
+                    <span className="optional-pill">
+                      {t('common.optional')}
+                    </span>
+                  </span>
+                  <input
+                    name="batchYieldQuantity"
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    placeholder={t('setup.placeholders.batchYieldQuantity')}
+                    defaultValue={editingRecipe?.batchYieldQuantity ?? ''}
+                  />
+                </label>
+                <label>
+                  <span className="field-heading">
+                    {t('setup.fields.batchYieldUnit')}{' '}
+                    <span className="optional-pill">
+                      {t('common.optional')}
+                    </span>
+                  </span>
+                  <input
+                    name="batchYieldUnit"
+                    list="basic-unit-options"
+                    placeholder={t('setup.placeholders.batchYieldUnit')}
+                    defaultValue={editingRecipe?.batchYieldUnit ?? ''}
+                  />
+                </label>
+              </div>
+              <p className="helper-text">{t('setup.recipeYieldHelp')}</p>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.instructions')}{' '}
+                  <span className="optional-pill">{t('common.optional')}</span>
+                </span>
+                <textarea
+                  name="instructions"
+                  placeholder={t('setup.placeholders.recipeInstructions')}
+                  defaultValue={editingRecipe?.instructions ?? ''}
+                />
+              </label>
+              <label className="checkbox-row">
+                <input
+                  name="active"
+                  type="checkbox"
+                  defaultChecked={editingRecipe?.active ?? true}
+                />
+                <span>
+                  <strong>{t('setup.fields.activeRecipe')}</strong>
+                  <span className="helper-text">
+                    {t('setup.fields.activeRecipeHelp')}
+                  </span>
+                </span>
+              </label>
+
+              <div className="recipe-lines-block page-stack">
+                <div>
+                  <h3>{t('setup.recipeLinesTitle')}</h3>
+                  <p className="helper-text">{t('setup.recipeLinesHelp')}</p>
+                </div>
+                <div className="recipe-line-list">
+                  {recipeLineRows.map((line, index) => (
+                    <div
+                      key={line.id || line.key || `line-${index}`}
+                      className="recipe-line-card"
+                    >
+                      <input
+                        type="hidden"
+                        name="recipeLineId"
+                        value={line.id ?? ''}
+                      />
+                      <div className="grid-two">
+                        <label>
+                          <span className="field-heading">
+                            {t('setup.fields.rawMaterial')}{' '}
+                            {index < 2 ? (
+                              <span className="optional-pill">
+                                {t('common.optional')}
+                              </span>
+                            ) : null}
+                          </span>
+                          <select
+                            name="lineRawMaterialId"
+                            defaultValue={line.rawMaterialId ?? ''}
+                          >
+                            <option value="">
+                              {t('setup.recipeLabels.selectMaterialOptional')}
+                            </option>
+                            {procurementSetup.rawMaterials.map((material) => (
+                              <option key={material.id} value={material.id}>
+                                {material.name}
+                              </option>
+                            ))}
+                          </select>
+                        </label>
+                        <label>
+                          <span className="field-heading">
+                            {t('setup.fields.quantity')}{' '}
+                            <span className="optional-pill">
+                              {t('common.optional')}
+                            </span>
+                          </span>
+                          <input
+                            name="lineQuantity"
+                            type="number"
+                            min="0.01"
+                            step="0.01"
+                            placeholder={t(
+                              'setup.placeholders.recipeLineQuantity',
+                            )}
+                            defaultValue={line.quantity ?? ''}
+                          />
+                        </label>
+                        <label>
+                          <span className="field-heading">
+                            {t('setup.fields.unit')}{' '}
+                            <span className="optional-pill">
+                              {t('common.optional')}
+                            </span>
+                          </span>
+                          <input
+                            name="lineUnit"
+                            list="basic-unit-options"
+                            placeholder={t('setup.placeholders.recipeLineUnit')}
+                            defaultValue={line.unit ?? ''}
+                          />
+                        </label>
+                        <label>
+                          <span className="field-heading">
+                            {t('setup.fields.note')}{' '}
+                            <span className="optional-pill">
+                              {t('common.optional')}
+                            </span>
+                          </span>
+                          <input
+                            name="lineNote"
+                            placeholder={t('setup.placeholders.recipeLineNote')}
+                            defaultValue={line.note ?? ''}
+                          />
+                        </label>
+                      </div>
+                      {!line.isBlank ? (
+                        <label className="checkbox-row recipe-remove-row">
+                          <input
+                            name="lineRemove"
+                            type="checkbox"
+                            value={`remove-${index}`}
+                          />
+                          <span>
+                            <strong>{t('setup.actions.removeLine')}</strong>
+                            <span className="helper-text">
+                              {t('setup.recipeRemoveLineHelp')}
+                            </span>
+                          </span>
+                        </label>
+                      ) : null}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <button type="submit" className="button-primary">
+                {editingRecipe
+                  ? t('setup.actions.updateRecipe')
+                  : t('setup.actions.saveRecipe')}
+              </button>
+            </form>
+
+            <article className="subpanel page-stack">
+              <div className="table-header-row">
+                <div>
+                  <h3>{t('setup.recipeCostingTitle')}</h3>
+                  <p>{t('setup.recipeCostingHelp')}</p>
+                </div>
+                <span className="summary-pill">
+                  {t('setup.recipeLabels.latestPricesOnly')}
+                </span>
+              </div>
+              {editingRecipe && editingRecipeCost ? (
+                editingRecipeCost.lineCount > 0 ? (
+                  <>
+                    <div className="recipe-cost-summary">
+                      <strong>
+                        {formatCurrency(
+                          editingRecipeCost.totalEstimatedCost,
+                          locale,
+                        )}
+                      </strong>
+                      <span>
+                        {editingRecipeCost.complete
+                          ? t('setup.recipeCostComplete')
+                          : `${editingRecipeCost.costedLineCount}/${editingRecipeCost.lineCount} ${t('setup.recipeLabels.linesCosted')}`}
+                      </span>
+                      {editingRecipe.batchYieldQuantity &&
+                      editingRecipe.batchYieldUnit ? (
+                        <span>
+                          {t('setup.recipeLabels.approxPerYield')}{' '}
+                          {formatCurrency(
+                            editingRecipeCost.totalEstimatedCost /
+                              editingRecipe.batchYieldQuantity,
+                            locale,
+                          )}{' '}
+                          / {editingRecipe.batchYieldUnit}
+                        </span>
+                      ) : null}
+                    </div>
+                    <ul className="stack-list compact-list">
+                      {editingRecipeCost.lines.map((line) => (
+                        <li key={line.line.id} className="history-list-item">
+                          <strong>
+                            {line.line.rawMaterialLabel} · {line.line.quantity}{' '}
+                            {line.line.unit}
+                          </strong>
+                          {line.status === 'costed' ? (
+                            <>
+                              <span>
+                                {line.latestPriceEntry?.supplierLabel} ·{' '}
+                                {formatDateLabel(
+                                  line.latestPriceEntry?.priceDate ?? today,
+                                  locale,
+                                )}
+                              </span>
+                              <span>
+                                {t('setup.recipeLabels.estimatedLineCost')}{' '}
+                                {formatCurrency(
+                                  line.estimatedCost ?? 0,
+                                  locale,
+                                )}
+                                {line.latestPriceEntry
+                                  ? ` · ${formatUnitRate(line.latestPriceEntry, locale)}`
+                                  : ''}
+                              </span>
+                            </>
+                          ) : (
+                            <span>
+                              {line.status === 'missing_price'
+                                ? t('setup.recipeCostMissingPrice')
+                                : line.status === 'missing_package'
+                                  ? t('setup.recipeCostMissingPackage')
+                                  : t('setup.recipeCostUnitMismatch')}
+                            </span>
+                          )}
+                          {line.line.note ? (
+                            <span className="helper-text">
+                              {line.line.note}
+                            </span>
+                          ) : null}
+                        </li>
+                      ))}
+                    </ul>
+                    {!editingRecipeCost.complete ? (
+                      <p className="inline-warning">
+                        {t('setup.recipeCostIncomplete')}
+                      </p>
+                    ) : null}
+                  </>
+                ) : (
+                  <p className="empty-state">{t('setup.recipeCostEmpty')}</p>
+                )
+              ) : (
+                <p className="empty-state">{t('setup.recipeCostStart')}</p>
+              )}
+            </article>
+          </div>
+        </div>
+      </section>
+      ) : null}
+
+      {activeSection === 'costing' ? (
+      <>
+      <section className="panel page-stack" id="costing">
+        <div className="table-header-row">
+          <div>
+            <h2>{t('setup.costingSnapshotTitle')}</h2>
+            <p>{t('setup.costingSnapshotHelp')}</p>
+          </div>
+          <span className="summary-pill">
+            {t('setup.costingLabels.latestRecipeEvidence')}
+          </span>
+        </div>
+
+        <div className="stats-grid compact-stats-grid">
+          <article className="stat-card stat-card-success">
+            <span className="stat-label">
+              {t('setup.costingSummary.fullyCosted')}
+            </span>
+            <strong>{costingSummary.fullyCosted}</strong>
+            <span>{t('setup.costingSummary.fullyCostedHelp')}</span>
+          </article>
+          <article className="stat-card stat-card-info">
+            <span className="stat-label">
+              {t('setup.costingSummary.partiallyCosted')}
+            </span>
+            <strong>{costingSummary.partiallyCosted}</strong>
+            <span>{t('setup.costingSummary.partiallyCostedHelp')}</span>
+          </article>
+          <article className="stat-card stat-card-warning">
+            <span className="stat-label">
+              {t('setup.costingSummary.missingEvidence')}
+            </span>
+            <strong>{costingSummary.missingEvidence}</strong>
+            <span>{t('setup.costingSummary.missingEvidenceHelp')}</span>
+          </article>
+          <article className="stat-card stat-card-neutral">
+            <span className="stat-label">
+              {t('setup.costingSummary.noRecipe')}
+            </span>
+            <strong>{costingSummary.noRecipe}</strong>
+            <span>{t('setup.costingSummary.noRecipeHelp')}</span>
+          </article>
+        </div>
+
+        <div className="filter-pill-row">
+          {(
+            [
+              'all',
+              'fully_costed',
+              'partially_costed',
+              'missing_cost_evidence',
+              'no_recipe',
+            ] as const
+          ).map((statusKey) => (
+            <Link
+              key={statusKey}
+              href={buildCostingHref({
+                costingStatus: statusKey,
+                costingItem: (statusKey === 'all'
+                  ? costingItems
+                  : costingItems.filter((item) => item.status === statusKey))[0]
+                  ?.id,
+              })}
+              className={`summary-pill ${costingStatusFilter === statusKey ? 'is-selected' : ''}`}
+            >
+              {t(`setup.costingFilters.${statusKey}`)}
+            </Link>
+          ))}
+        </div>
+
+        <div className="grid-two recipe-grid">
+          <article className="subpanel page-stack">
+            <div className="table-header-row">
+              <div>
+                <h3>{t('setup.costingListTitle')}</h3>
+                <p>{t('setup.costingListHelp')}</p>
+              </div>
+              <span className="summary-pill">
+                {filteredCostingItems.length} {t('setup.costingLabels.items')}
+              </span>
+            </div>
+            {filteredCostingItems.length > 0 ? (
+              <ul className="stack-list compact-list">
+                {filteredCostingItems.map((item) => (
+                  <li
+                    key={item.id}
+                    className={`list-with-actions ${selectedCostingItem?.id === item.id ? 'is-selected-row' : ''}`}
+                  >
+                    <div>
+                      <strong>{item.productLabel}</strong>
+                      <span>
+                        {item.hasRecipe
+                          ? `${item.recipeTitle ?? item.label} · ${t(`setup.costingStatuses.${item.status}`)}`
+                          : t('setup.costingNoRecipe')}
+                      </span>
+                      <span className="inline-meta">
+                        {item.estimatedBatchCost !== undefined
+                          ? `${t('setup.costingLabels.batch')} ${formatCurrency(item.estimatedBatchCost, locale)}`
+                          : t('setup.costingLabels.noBatchEstimate')}
+                        {item.estimatedUnitCost !== undefined &&
+                        item.batchYieldUnit
+                          ? ` · ${t('setup.costingLabels.unit')} ${formatCurrency(item.estimatedUnitCost, locale)} / ${item.batchYieldUnit}`
+                          : ''}
+                      </span>
+                    </div>
+                    <div className="inline-action-row">
+                      <Link
+                        href={buildCostingHref({ costingItem: item.id })}
+                        className="inline-link"
+                      >
+                        {t('setup.actions.viewCosting')}
+                      </Link>
+                      {item.recipeId ? (
+                        <Link
+                          href={buildSetupHref({
+                            recipe: item.recipeId,
+                            supplier: editingSupplier?.id,
+                            material: editingMaterial?.id,
+                            historySupplier: historySupplier?.id,
+                            historyMaterial: historyMaterial?.id,
+                            costingStatus: costingStatusFilter,
+                            costingItem: item.id,
+                          })}
+                          className="inline-link"
+                        >
+                          {t('setup.actions.editRecipe')}
+                        </Link>
+                      ) : null}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="empty-state">{t('setup.costingEmptyForFilter')}</p>
+            )}
+          </article>
+
+          <article className="subpanel page-stack">
+            <div className="table-header-row">
+              <div>
+                <h3>{t('setup.costingDetailTitle')}</h3>
+                <p>{t('setup.costingDetailHelp')}</p>
+              </div>
+              {selectedCostingItem ? (
+                <span className="summary-pill">
+                  {t(`setup.costingStatuses.${selectedCostingItem.status}`)}
+                </span>
+              ) : null}
+            </div>
+
+            {selectedCostingItem ? (
+              <>
+                <div className="recipe-cost-summary">
+                  <strong>{selectedCostingItem.productLabel}</strong>
+                  <span>
+                    {selectedCostingItem.hasRecipe
+                      ? selectedCostingItem.recipeTitle
+                      : t('setup.costingNoRecipe')}
+                  </span>
+                  <div className="costing-summary-grid">
+                    <div>
+                      <span className="helper-text">
+                        {t('setup.costingLabels.batchCost')}
+                      </span>
+                      <strong>
+                        {selectedCostingItem.estimatedBatchCost !== undefined
+                          ? formatCurrency(
+                              selectedCostingItem.estimatedBatchCost,
+                              locale,
+                            )
+                          : '—'}
+                      </strong>
+                    </div>
+                    <div>
+                      <span className="helper-text">
+                        {t('setup.costingLabels.unitCost')}
+                      </span>
+                      <strong>
+                        {selectedCostingItem.estimatedUnitCost !== undefined &&
+                        selectedCostingItem.batchYieldUnit
+                          ? `${formatCurrency(selectedCostingItem.estimatedUnitCost, locale)} / ${selectedCostingItem.batchYieldUnit}`
+                          : t('setup.costingLabels.noYield')}
+                      </strong>
+                    </div>
+                  </div>
+                  <span>
+                    {t(
+                      `setup.costingStatusesHelp.${selectedCostingItem.status}`,
+                    )}
+                  </span>
+                  {selectedCostingItem.hasRecipe ? (
+                    <span className="helper-text">
+                      {selectedCostingItem.costedLineCount}/
+                      {selectedCostingItem.lineCount}{' '}
+                      {t('setup.recipeLabels.linesCosted')}
+                      {selectedCostingItem.missingEvidenceCount
+                        ? ` · ${selectedCostingItem.missingEvidenceCount} ${t('setup.costingLabels.missingPrice')}`
+                        : ''}
+                      {selectedCostingItem.missingPackageCount
+                        ? ` · ${selectedCostingItem.missingPackageCount} ${t('setup.costingLabels.missingPackage')}`
+                        : ''}
+                      {selectedCostingItem.unitMismatchCount
+                        ? ` · ${selectedCostingItem.unitMismatchCount} ${t('setup.costingLabels.unitMismatch')}`
+                        : ''}
+                    </span>
+                  ) : null}
+                </div>
+
+                {selectedCostingItem.recipeCost?.lineCount ? (
+                  <ul className="stack-list compact-list">
+                    {selectedCostingItem.recipeCost.lines.map((line) => (
+                      <li
+                        key={line.line.id}
+                        className="history-list-item costing-line-item"
+                      >
+                        <div className="costing-line-header">
+                          <strong>{line.line.rawMaterialLabel}</strong>
+                          <span
+                            className={`summary-pill costing-status-pill is-${line.status}`}
+                          >
+                            {t(`setup.costingLineStatuses.${line.status}`)}
+                          </span>
+                        </div>
+                        <span>
+                          {line.line.quantity} {line.line.unit}
+                        </span>
+                        {line.status === 'costed' ? (
+                          <>
+                            <span>
+                              {t('setup.costingLabels.lineContribution')}{' '}
+                              {formatCurrency(line.estimatedCost ?? 0, locale)}
+                              {line.latestPriceEntry
+                                ? ` · ${formatUnitRate(line.latestPriceEntry, locale)}`
+                                : ''}
+                            </span>
+                            {line.latestPriceEntry ? (
+                              <span className="helper-text">
+                                {t('setup.costingLabels.sourceEvidence')}{' '}
+                                {line.latestPriceEntry.supplierLabel} ·{' '}
+                                {formatDateLabel(
+                                  line.latestPriceEntry.priceDate,
+                                  locale,
+                                )}
+                              </span>
+                            ) : null}
+                          </>
+                        ) : (
+                          <>
+                            <span>
+                              {t(
+                                `setup.costingLineStatusesHelp.${line.status}`,
+                              )}
+                            </span>
+                            {line.latestPriceEntry ? (
+                              <span className="helper-text">
+                                {t('setup.costingLabels.lastSeenPrice')}{' '}
+                                {line.latestPriceEntry.supplierLabel} ·{' '}
+                                {formatDateLabel(
+                                  line.latestPriceEntry.priceDate,
+                                  locale,
+                                )}
+                              </span>
+                            ) : null}
+                          </>
+                        )}
+                        {line.line.note ? (
+                          <span className="helper-text">{line.line.note}</span>
+                        ) : null}
+                      </li>
+                    ))}
+                  </ul>
+                ) : selectedCostingItem.hasRecipe ? (
+                  <p className="empty-state">{t('setup.recipeCostEmpty')}</p>
+                ) : (
+                  <p className="empty-state">
+                    {t('setup.costingNoRecipeHelp')}
+                  </p>
+                )}
+              </>
+            ) : (
+              <p className="empty-state">{t('setup.costingEmpty')}</p>
+            )}
+          </article>
+        </div>
+      </section>
+
+      <section className="panel page-stack" id="price-history">
+        <div className="table-header-row">
+          <div>
+            <h2>{t('setup.supplierPriceMemory')}</h2>
+            <p>{t('setup.supplierPriceMemoryHelp')}</p>
+          </div>
+          <span className="summary-pill">
+            {procurementSetup.supplierPriceEntries.length} {t('common.entries')}
+          </span>
+        </div>
+
+        <div className="filter-pill-row">
+          {historySupplier ? (
+            <span className="summary-pill">
+              {t('setup.history.supplierFilter')}: {historySupplier.name}
+            </span>
+          ) : null}
+          {historyMaterial ? (
+            <span className="summary-pill">
+              {t('setup.history.materialFilter')}: {historyMaterial.name}
+            </span>
+          ) : null}
+          {historySupplier || historyMaterial ? (
+            <Link
+              href={buildSetupHref({
+                supplier: editingSupplier?.id,
+                material: editingMaterial?.id,
+                recipe: editingRecipe?.id,
+              })}
+              className="inline-link"
+            >
+              {t('setup.actions.clearHistoryFilters')}
+            </Link>
+          ) : (
+            <span className="helper-text">{t('setup.history.allEntries')}</span>
+          )}
+        </div>
+
+        <div className="grid-two">
+          <div className="subpanel page-stack">
+            <div className="table-header-row">
+              <div>
+                <h3>{t('setup.history.title')}</h3>
+                <p>{t('setup.history.help')}</p>
+              </div>
+              <span className="summary-pill">
+                {filteredPriceEntries.length} {t('common.entries')}
+              </span>
+            </div>
+            {filteredPriceEntries.length > 0 ? (
+              <ul className="stack-list compact-list">
+                {filteredPriceEntries.map((entry) => (
+                  <li key={entry.id} className="history-list-item">
+                    <strong>
+                      {entry.rawMaterialLabel} ·{' '}
+                      {formatCurrency(entry.price, locale)}
+                    </strong>
+                    <span>
+                      {entry.supplierLabel} ·{' '}
+                      {formatDateLabel(entry.priceDate, locale)}
+                    </span>
+                    <span>
+                      {[
+                        entry.presentation,
+                        entry.brand,
+                        entry.packageQuantity && entry.packageUnit
+                          ? `${entry.packageQuantity} ${entry.packageUnit}`
+                          : null,
+                        entry.packageQuantity && entry.packageUnit
+                          ? formatUnitRate(entry, locale)
+                          : t('setup.labels.noPackageDetails'),
+                      ]
+                        .filter(Boolean)
+                        .join(' · ')}
+                    </span>
+                    {entry.note ? (
+                      <span className="helper-text">{entry.note}</span>
+                    ) : null}
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="empty-state">{t('setup.history.empty')}</p>
+            )}
+          </div>
+
+          <form
+            action={createSupplierPriceEntryAction}
+            className="subpanel page-stack"
+          >
+            <div className="field-section-header">
+              <div>
+                <h3>{t('setup.addSupplierPrice')}</h3>
+                <p className="helper-text">{t('setup.addSupplierPriceHelp')}</p>
+              </div>
+            </div>
+            <div className="grid-two">
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.supplier')} {renderRequiredMark()}
+                </span>
+                <select
+                  name="supplierId"
+                  defaultValue={historySupplier?.id ?? ''}
+                  required
+                >
+                  <option value="" disabled>
+                    {t('common.selectSupplier')}
+                  </option>
+                  {procurementSetup.suppliers.map((supplier) => (
+                    <option key={supplier.id} value={supplier.id}>
+                      {supplier.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.rawMaterial')} {renderRequiredMark()}
+                </span>
+                <select
+                  name="rawMaterialId"
+                  defaultValue={historyMaterial?.id ?? ''}
+                  required
+                >
+                  <option value="" disabled>
+                    {t('common.selectRawMaterial')}
+                  </option>
+                  {procurementSetup.rawMaterials.map((material) => (
+                    <option key={material.id} value={material.id}>
+                      {material.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.price')} {renderRequiredMark()}
+                </span>
+                <input
+                  name="price"
+                  type="number"
+                  min="0.01"
+                  step="0.01"
+                  placeholder={t('setup.placeholders.price')}
+                  required
+                />
+              </label>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.date')} {renderRequiredMark()}
+                </span>
+                <input
+                  name="priceDate"
+                  type="date"
+                  defaultValue={today}
+                  required
+                />
+              </label>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.presentation')}{' '}
+                  <span className="optional-pill">{t('common.optional')}</span>
+                </span>
+                <input
+                  name="presentation"
+                  placeholder={t('setup.placeholders.presentation')}
+                />
+              </label>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.brand')}{' '}
+                  <span className="optional-pill">{t('common.optional')}</span>
+                </span>
+                <input
+                  name="brand"
+                  placeholder={t('setup.placeholders.supplierBrand')}
+                />
+              </label>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.packageQuantity')}{' '}
+                  <span className="optional-pill">{t('common.optional')}</span>
+                </span>
+                <input
+                  name="packageQuantity"
+                  type="number"
+                  min="0.01"
+                  step="0.01"
+                  placeholder={t('setup.placeholders.packageQuantity')}
+                />
+              </label>
+              <label>
+                <span className="field-heading">
+                  {t('setup.fields.packageUnit')}{' '}
+                  <span className="optional-pill">{t('common.optional')}</span>
+                </span>
+                <input
+                  name="packageUnit"
+                  list="basic-unit-options"
+                  placeholder={t('setup.placeholders.packageUnit')}
+                />
+              </label>
+            </div>
+            <p className="helper-text">
+              {t('setup.fields.packageOptionalHelp')}
+            </p>
+            <label>
+              <span className="field-heading">
+                {t('setup.fields.note')}{' '}
+                <span className="optional-pill">{t('common.optional')}</span>
+              </span>
+              <textarea
+                name="note"
+                placeholder={t('setup.placeholders.priceNote')}
+              />
+            </label>
+            <button type="submit" className="button-primary">
+              {t('setup.actions.saveSupplierPrice')}
+            </button>
+          </form>
+        </div>
+      </section>
+      </>
+      ) : null}
+
+    </div>
+  );
+}
+
diff --git a/app/bootstrap/page.tsx b/app/bootstrap/page.tsx
index 514fee9..21a754a 100644
--- a/app/bootstrap/page.tsx
+++ b/app/bootstrap/page.tsx
@@ -26,6 +26,7 @@ export default async function BootstrapPage({
   const step = bootstrapStep(Number(params?.step ?? 1));
   const progress = Math.round((step / totalSteps) * 100);
   const adminUser = data.users.find((user) => user.role === 'owner_admin' || user.roles?.includes('owner_admin'));
+  const initialBusinessName = data.instance.demoModeActive || data.workspace.name.toLowerCase().includes('demo') ? '' : data.workspace.name;
   const isRequiredStep = requiredSteps.has(step);
 
   return (
@@ -93,7 +94,7 @@ export default async function BootstrapPage({
             <div className="grid-two">
               <label>
                 <span className="field-heading">Business name <span className="setup-required-mark" aria-hidden="true">*</span></span>
-                <input name="businessName" defaultValue={data.workspace.name} required />
+                <input name="businessName" defaultValue={initialBusinessName} placeholder="Your kitchen or bakery" required />
               </label>
               <TimezoneSelect defaultValue={data.workspace.timezone || 'UTC'} />
             </div>
diff --git a/app/entry/page.tsx b/app/entry/page.tsx
index 4f9068c..0f4bd6a 100644
--- a/app/entry/page.tsx
+++ b/app/entry/page.tsx
@@ -112,8 +112,8 @@ export default async function EntryGatewayPage({
           Local admin access reset for <strong>{params.recoveryUser ?? 'admin'}</strong>. Temporary password: <code className="inline-code">skoss-local-admin</code>.
         </p>
       ) : null}
-      {params?.saved === 'users-reset' ? <p className="inline-success">Local users reset from seed data.</p> : null}
-      {params?.saved === 'runtime-reset' ? <p className="inline-success">Local runtime data reset from seed data.</p> : null}
+      {params?.saved === 'session-cleared' ? <p className="inline-success">Local session cleared. Existing users and instance data were preserved.</p> : null}
+      {params?.saved === 'instance-reset' ? <p className="inline-success">Local instance destroyed and returned to an uninitialized state.</p> : null}
 
       {state.hasInstance ? (
         <section className="panel page-stack">
@@ -204,16 +204,16 @@ export default async function EntryGatewayPage({
           </div>
           <div className="inline-action-row">
             <form action={resetLocalRuntimeDataAction}>
-              <button type="submit" className="button-secondary">Reset runtime data</button>
+              <button type="submit" className="button-secondary">Destroy local instance</button>
             </form>
             <form action={resetLocalUsersAndCredentialsAction}>
-              <button type="submit" className="button-secondary">Reset users/admin credentials</button>
+              <button type="submit" className="button-secondary">Clear local session</button>
             </form>
             <form action={launchDemoModeAction}>
-              <button type="submit" className="button-secondary">Reload demo data</button>
+              <button type="submit" className="button-secondary">Load initialized demo data</button>
             </form>
           </div>
-          <p className="inline-warning">These actions are destructive and intended only for local development and testing.</p>
+          <p className="inline-warning">Destroy local instance is destructive. Demo load replaces runtime data with initialized demo records. Session clear only logs out.</p>
         </section>
       ) : null}
 
diff --git a/app/globals.css b/app/globals.css
index 404e93b..60a4ea8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2354,3 +2354,83 @@ select:disabled {
   color: var(--ink-soft);
   background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
 }
+
+.setup-focused-grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.setup-action-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.onboarding-checklist-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-3);
+  align-items: center;
+}
+
+.onboarding-checklist-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-3);
+  align-items: start;
+}
+
+.onboarding-checklist-main > div {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.onboarding-checklist-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: flex-end;
+}
+
+.onboarding-status-pill.is-ready {
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+.onboarding-status-pill.is-skipped {
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+
+.onboarding-status-pill.is-in_progress {
+  background: var(--info-soft);
+  color: var(--info);
+}
+
+button:disabled,
+.button-secondary:disabled,
+.button-primary:disabled,
+.button-ghost:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+@media (min-width: 900px) {
+  .admin-split-layout.is-empty-list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .admin-split-layout.is-empty-list > :first-child {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .onboarding-checklist-item,
+  .onboarding-checklist-main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .onboarding-checklist-actions {
+    justify-content: flex-start;
+  }
+}
diff --git a/app/orders/page.tsx b/app/orders/page.tsx
index 18180e0..53d5423 100644
--- a/app/orders/page.tsx
+++ b/app/orders/page.tsx
@@ -137,7 +137,7 @@ export default async function OrdersPage({
             <SparklesIcon className="button-icon" />
             <span>{t('orders.newRecurringTemplate')}</span>
           </Link>
-          <Link href="/admin/setup?section=products#products" className="button-secondary">
+          <Link href="/admin/setup/products" className="button-secondary">
             <span>Confirm products</span>
           </Link>
           <Link href="/orders/new" className="button-primary">
@@ -166,7 +166,7 @@ export default async function OrdersPage({
         <div className="inline-action-row action-row-start">
           <Link href="/orders/new" className="button-primary compact-button"><OrdersIcon className="button-icon" />Create order</Link>
           <Link href="/customers" className="button-secondary compact-button">Confirm customers</Link>
-          <Link href="/admin/setup?section=products#products" className="button-ghost compact-button">Confirm products</Link>
+          <Link href="/admin/setup/products" className="button-ghost compact-button">Confirm products</Link>
         </div>
       </section>
 
@@ -218,7 +218,7 @@ export default async function OrdersPage({
             <div className="inline-action-row top-gap-small">
               <Link href="/orders/new" className="button-primary compact-button">Create first order</Link>
               <Link href="/customers" className="button-secondary compact-button">Confirm customers</Link>
-              <Link href="/admin/setup?section=products#products" className="button-secondary compact-button">Confirm products</Link>
+              <Link href="/admin/setup/products" className="button-secondary compact-button">Confirm products</Link>
             </div>
           </div>
         </section>
diff --git a/components/orders/order-form.tsx b/components/orders/order-form.tsx
index 20b4b63..f185dd1 100644
--- a/components/orders/order-form.tsx
+++ b/components/orders/order-form.tsx
@@ -394,7 +394,7 @@ export function OrderForm({
               <p className="helper-text">Start with one item. Add another line only when this order needs it.</p>
             </div>
           </div>
-          <p className="helper-text no-margin">Confirmed products appear as suggestions, but you can still type a draft item when setup is incomplete. <Link href="/admin/setup?section=products#products" className="inline-link">Confirm products</Link>.</p>
+          <p className="helper-text no-margin">Confirmed products appear as suggestions, but you can still type a draft item when setup is incomplete. <Link href="/admin/setup/products" className="inline-link">Confirm products</Link>.</p>
           <LineItemsEditor
             editorId="order-lines-editor"
             initialLines={lineDrafts}
diff --git a/components/setup/operational-onboarding-checklist.tsx b/components/setup/operational-onboarding-checklist.tsx
index e64e813..fd0cac6 100644
--- a/components/setup/operational-onboarding-checklist.tsx
+++ b/components/setup/operational-onboarding-checklist.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import type { OperationalOnboardingSectionKey, OperationalOnboardingSections, OnboardingSectionStatus } from '@/lib/domain/types';
 import { updateOperationalOnboardingSectionAction } from '@/lib/server/actions';
 
@@ -15,27 +16,27 @@ const sectionConfigs: SectionConfig[] = [
     key: 'business',
     title: 'Business profile',
     description: 'Business identity, contact details, hours, and fulfillment notes.',
-    configureHref: '/admin/setup?section=preferences-system#preferences-system',
+    configureHref: '/admin/setup/business',
     minimum: true,
   },
   {
     key: 'team',
     title: 'Team and roles',
     description: 'People who sign in, practical roles, active state, and default workspaces.',
-    configureHref: '/admin/setup?section=users#users',
+    configureHref: '/admin/setup/users',
     importPlaceholder: 'Team CSV later',
   },
   {
     key: 'shifts',
     title: 'Shifts',
     description: 'Working rhythm, handoff expectations, and shift ownership.',
-    configureHref: '/handoff',
+    configureHref: '/admin/setup/business',
   },
   {
     key: 'customers',
     title: 'Customers',
     description: 'Repeat customers, contact details, delivery notes, and preferences.',
-    configureHref: '/customers',
+    configureHref: '/admin/setup/customers',
     importPlaceholder: 'Customer CSV later',
     minimum: true,
   },
@@ -43,7 +44,7 @@ const sectionConfigs: SectionConfig[] = [
     key: 'products',
     title: 'Products',
     description: 'Sellable product names, units, categories, variants, and active state.',
-    configureHref: '/admin/setup?section=products#products',
+    configureHref: '/admin/setup/products',
     importPlaceholder: 'Product CSV later',
     minimum: true,
   },
@@ -51,13 +52,13 @@ const sectionConfigs: SectionConfig[] = [
     key: 'recipes',
     title: 'Recipes',
     description: 'Recipe/component relationships and production notes when the catalog is ready.',
-    configureHref: '/admin/setup?section=recipes#recipes',
+    configureHref: '/admin/setup/recipes',
   },
   {
     key: 'delivery',
     title: 'Delivery and destinations',
     description: 'Pickup, counter, delivery stops, couriers, and dispatch notes.',
-    configureHref: '/admin/setup?section=business-setup#customers-summary',
+    configureHref: '/admin/setup/business',
   },
   {
     key: 'initialOrders',
@@ -119,14 +120,16 @@ export function OperationalOnboardingChecklist({ sections }: { sections?: Operat
         {sectionConfigs.map((section) => {
           const status = getSectionStatus(sections, section.key);
           return (
-            <li key={section.key} className="list-with-actions">
-              <div>
-                <strong>{section.title}</strong>
-                <span>{section.description}</span>
-                <span className="helper-text">Status: {getStatusLabel(status)}</span>
+            <li key={section.key} className="onboarding-checklist-item">
+              <div className="onboarding-checklist-main">
+                <div>
+                  <strong>{section.title}</strong>
+                  <span>{section.description}</span>
+                </div>
+                <span className={`summary-pill onboarding-status-pill is-${status}`}>{getStatusLabel(status)}</span>
               </div>
-              <div className="inline-action-row">
-                <a href={section.configureHref} className="button-secondary compact-button">Configure</a>
+              <div className="onboarding-checklist-actions">
+                <Link href={{ pathname: section.configureHref }} className="button-secondary compact-button">Configure</Link>
                 {section.importPlaceholder ? (
                   <button type="button" className="button-secondary compact-button" disabled>{section.importPlaceholder}</button>
                 ) : null}
diff --git a/docs/bootstrap-v2-onboarding.md b/docs/bootstrap-v2-onboarding.md
index 374736c..56a8ce8 100644
--- a/docs/bootstrap-v2-onboarding.md
+++ b/docs/bootstrap-v2-onboarding.md
@@ -17,7 +17,7 @@ Demo mode and restore mode remain separate choices from the entry gateway. A cle
 
 ## Resumable operational onboarding
 
-After activation, admins continue from a section checklist. Each section can be configured now, skipped temporarily, marked ready, and returned to later.
+After activation, admins continue from `/admin/setup/onboarding`, a section checklist. Each section can be configured now, skipped temporarily, marked ready, and returned to later. The overview renders only the checklist and readiness summary; chapter content opens on focused setup pages.
 
 Tracked section states are:
 
@@ -28,7 +28,7 @@ Tracked section states are:
 
 `skipped` means intentionally deferred. It is not the same as complete.
 
-Current sections are:
+Current onboarding chapters are:
 
 - business profile
 - team and roles
@@ -49,7 +49,32 @@ Customer data can grow to include person/business type, alias, organization, con
 
 Product data can grow to include name, category, description, unit, presentation, variant, active state, optional price, and future recipe/component relations.
 
-Imports should use a reusable CSV mapping architecture for customers, team, products, and later initial orders. This pass only shows honest placeholders where import support belongs; it does not implement format-specific importers.
+Imports should use a reusable CSV mapping architecture for customers, team, products, and later initial orders. Until implemented, import controls must be disabled or clearly marked as coming later.
+
+Future functional import screens should follow this pattern:
+
+1. Download CSV template
+2. Upload file
+3. Map columns
+4. Preview rows and validation warnings
+5. Confirm import
+
+## Setup route structure
+
+Permanent setup pages are focused routes, not one long tab-like page:
+
+- `/admin/setup/onboarding`
+- `/admin/setup/business`
+- `/admin/setup/customers`
+- `/admin/setup/users`
+- `/admin/setup/products`
+- `/admin/setup/suppliers`
+- `/admin/setup/materials`
+- `/admin/setup/recipes`
+- `/admin/setup/costing`
+- `/admin/setup/system`
+
+Legacy query URLs such as `/admin/setup?section=products` redirect to the matching focused route.
 
 ## Non-goals for this pass
 
diff --git a/docs/first-deploy-rehearsal.md b/docs/first-deploy-rehearsal.md
index 02da893..bc37525 100644
--- a/docs/first-deploy-rehearsal.md
+++ b/docs/first-deploy-rehearsal.md
@@ -48,7 +48,7 @@ If the runtime mode is unclear in `/entry`, stop the rehearsal and inspect envir
    - Expected: a working admin account can sign in after activation.
    - Failure signs: no active admin user is detected, login loops back to `/entry`, or recovery is needed in `production` mode.
 
-4. Confirm operational onboarding in `/admin/setup?section=onboarding`.
+4. Confirm operational onboarding in `/admin/setup/onboarding`.
    - Expected: the checklist shows business, team, shifts, customers, products, recipes, delivery, and initial orders with section status, configure actions, skip/return-later behavior, and honest import placeholders.
    - Failure signs: skipped sections appear complete, imports pretend to be implemented, or order capture is blocked by suppliers, raw materials, recipes, costing, or inventory.
 
@@ -56,7 +56,7 @@ If the runtime mode is unclear in `/entry`, stop the rehearsal and inspect envir
    - Expected: existing customers can be reviewed or a first real customer can be added.
    - Failure signs: customer setup only shows demo customers without clear route to real records.
 
-6. Confirm basic products in `/admin/setup?section=products#products`.
+6. Confirm basic products in `/admin/setup/products`.
    - Expected: sellable products can be reviewed, created, or marked active/inactive with simple labels.
    - Failure signs: order capture requires recipes, costing, SKU/barcode setup, procurement, or inventory data.
 
diff --git a/docs/first-entry-and-onboarding.md b/docs/first-entry-and-onboarding.md
index 2e6fd35..d3b752f 100644
--- a/docs/first-entry-and-onboarding.md
+++ b/docs/first-entry-and-onboarding.md
@@ -70,7 +70,7 @@ Current routing behavior:
 
 - fresh or missing-admin state -> `/entry`
 - no session user -> `/entry` then sign-in path
-- onboarding incomplete + admin/manager login -> `/setup?section=business-setup`
+- onboarding incomplete + admin/manager login -> `/admin/setup/onboarding`
 - returning user with valid state -> workspace home flow
 
 Goal: predictable routing with small condition sets.
@@ -79,7 +79,7 @@ Goal: predictable routing with small condition sets.
 
 From gateway, **Start a new kitchen** routes to required activation (`/bootstrap`). Activation is intentionally short: owner/admin account, language, clean real data mode, business identity, preset/profile, and confirmation.
 
-After activation, admins continue from `/admin/setup?section=onboarding`. Operational onboarding is section-based and resumable. Section statuses are `not_started`, `in_progress`, `ready`, and `skipped`. Skipped sections remain visible as deferred work, not completed work.
+After activation, admins continue from `/admin/setup/onboarding`. Operational onboarding is section-based and resumable. Each chapter opens a focused setup route instead of rendering the full setup system on one page. Section statuses are `not_started`, `in_progress`, `ready`, and `skipped`. Skipped sections remain visible as deferred work, not completed work.
 
 Tracked operational sections are business, team, shifts, customers, products, recipes, delivery/destinations, and initial orders.
 
diff --git a/lib/server/actions/admin-core.ts b/lib/server/actions/admin-core.ts
index 434cfec..5b9b41e 100644
--- a/lib/server/actions/admin-core.ts
+++ b/lib/server/actions/admin-core.ts
@@ -23,7 +23,7 @@ import {
   validateSupplierPriceEntryForm,
   validateUserForm,
 } from '@/lib/server/demo-data';
-import { getPersistenceGateway, readAppData, readPersistence, mutateAppData, reseedRuntimeAppData } from '@/lib/server/persistence';
+import { getPersistenceGateway, readAppData, readPersistence, mutateAppData, readSeedAppData } from '@/lib/server/persistence';
 import { appendActivity } from '@/lib/server/activity';
 import { hashPassword } from '@/lib/server/passwords';
 import {
@@ -37,13 +37,38 @@ import {
 import { moduleRegistry } from '@/lib/modules';
 import { getCurrentUserContext } from '@/lib/server/auth';
 import { isNonProductionMode } from '@/lib/server/runtime-mode';
-import type { AppData, OnboardingSectionStatus, OperationalOnboardingSectionKey, OperationalOnboardingSections } from '@/lib/domain/types';
+import { withDerivedTeamOnboarding } from '@/lib/server/instance-state';
+import type { ActivityEntry, AppData, OnboardingSectionStatus, OperationalOnboardingSectionKey, OperationalOnboardingSections, User } from '@/lib/domain/types';
 
 function quoteLabel(label: string) {
   return `"${label}"`;
 }
 
 const persistence = getPersistenceGateway();
+
+function createActivityEntry(entry: Omit<ActivityEntry, 'id' | 'timestamp'>): ActivityEntry {
+  return {
+    id: 'activity-' + crypto.randomUUID(),
+    timestamp: new Date().toISOString(),
+    ...entry,
+  };
+}
+
+function hasOwnerAdminRole(user: Pick<User, 'role' | 'roles'>) {
+  return user.role === 'owner_admin' || user.roles?.includes('owner_admin');
+}
+
+function wouldRemoveLastOwnerAdmin(existing: User, nextUser: User, users: User[]) {
+  if (!existing.active || !hasOwnerAdminRole(existing)) {
+    return false;
+  }
+
+  if (nextUser.active && hasOwnerAdminRole(nextUser)) {
+    return false;
+  }
+
+  return !users.some((user) => user.id !== existing.id && user.active && hasOwnerAdminRole(user));
+}
 const operationalOnboardingSections: OperationalOnboardingSectionKey[] = [
   'business',
   'team',
@@ -79,7 +104,7 @@ export async function updateOperationalOnboardingSectionAction(formData: FormDat
   const status = String(formData.get('status') ?? '') as OnboardingSectionStatus;
 
   if (!operationalOnboardingSections.includes(section) || !operationalOnboardingStatuses.includes(status)) {
-    redirect('/admin/setup?section=onboarding&error=' + encodeURIComponent('Choose a valid onboarding section status.'));
+    redirect('/admin/setup/onboarding?error=' + encodeURIComponent('Choose a valid onboarding section status.'));
   }
 
   const now = new Date().toISOString();
@@ -96,7 +121,7 @@ export async function updateOperationalOnboardingSectionAction(formData: FormDat
   });
 
   revalidateAllWorkspaces();
-  redirect('/admin/setup?section=onboarding&saved=onboarding-section');
+  redirect('/admin/setup/onboarding?saved=onboarding-section');
 }
 
 function revalidateAllWorkspaces() {
@@ -122,12 +147,27 @@ function shouldAllowEmpty(formData: FormData) {
 
 export async function resetDemoWorkspaceAction() {
   if (!isNonProductionMode()) {
-    redirect('/admin/setup?error=' + encodeURIComponent('Demo reset is disabled in production mode.'));
+    redirect('/admin/setup/system?error=' + encodeURIComponent('Demo reset is disabled in production mode.'));
   }
 
-  await reseedRuntimeAppData();
+  const seedData = await readSeedAppData();
+  await mutateAppData({
+    ...seedData,
+    instance: {
+      ...seedData.instance,
+      initialized: true,
+      onboardingStatus: 'completed',
+      demoModeActive: true,
+      environmentType: 'demo',
+    },
+    preferences: {
+      ...seedData.preferences,
+      onboardingCompleted: true,
+    },
+    session: { currentUserId: undefined, lastLoginAt: undefined },
+  });
   revalidateAllWorkspaces();
-  redirect('/admin/setup?saved=demo-reset');
+  redirect('/admin/setup/system?saved=demo-reset');
 }
 
 export async function updateModuleRegistryAction(formData: FormData) {
@@ -153,7 +193,7 @@ export async function createUserAction(formData: FormData) {
   const context = await readPersistence();
   const data = context.raw;
   const actorUserId = await getActorUserId(data);
-  const redirectTo = resolveRedirectTo(formData, '/admin/setup');
+  const redirectTo = resolveRedirectTo(formData, '/admin/setup/users');
   const allowEmpty = shouldAllowEmpty(formData);
   const values = normalizeUserForm(formData);
   if (allowEmpty && !values.displayName.trim() && !values.loginIdentifier.trim()) {
@@ -162,7 +202,7 @@ export async function createUserAction(formData: FormData) {
   const error = validateUserForm(values, data);
 
   if (error) {
-    redirect(`${redirectTo}?error=${encodeURIComponent(error)}`);
+    redirect(redirectTo + '?error=' + encodeURIComponent(error));
   }
 
   const user = buildUserRecord(values, data);
@@ -170,27 +210,25 @@ export async function createUserAction(formData: FormData) {
   user.passwordUpdatedAt = new Date().toISOString();
   user.mustChangePassword = !values.password?.trim();
   const createdOwnerAdmin = user.roles.includes('owner_admin') || user.role === 'owner_admin';
-  appendActivity(data, {
+  const activity = createActivityEntry({
     entityType: 'user',
     entityId: user.id,
     action: 'created',
     userId: actorUserId,
-    summary: `User ${quoteLabel(user.displayName)} created.`,
+    summary: 'User ' + quoteLabel(user.displayName) + ' created.',
   });
+
   await persistence.write(({ raw, instance, users }) => {
     users.upsert(user);
+    const nextUsers = users.list();
     if (createdOwnerAdmin) {
       instance.setInitialized(true);
-      instance.updateOnboardingProgress({
-        adminAccount: true,
-        roles: true,
-        users: true,
-      });
     }
-    raw.activities = data.activities;
+    instance.updateInstanceState(withDerivedTeamOnboarding(instance.getInstanceState(), nextUsers));
+    raw.activities = [activity, ...raw.activities];
   });
   revalidateAllWorkspaces();
-  redirect(`${redirectTo}?saved=user`);
+  redirect(redirectTo + '?saved=user');
 }
 
 export async function updateUserAction(userId: string, formData: FormData) {
@@ -199,51 +237,56 @@ export async function updateUserAction(userId: string, formData: FormData) {
   const existing = context.users.getById(userId);
 
   if (!existing) {
-    redirect('/admin/setup?error=missing-user');
+    redirect('/admin/setup/users?error=missing-user');
   }
 
   const values = normalizeUserForm(formData);
+  if (formData.getAll('roles').length === 0) {
+    values.roles = existing.roles.length > 0 ? existing.roles : [existing.role];
+  }
   const error = validateUserForm(values, data, userId);
 
   if (error) {
-    redirect(`/admin/setup?user=${userId}&error=${encodeURIComponent(error)}`);
+    redirect('/admin/setup/users?user=' + userId + '&error=' + encodeURIComponent(error));
   }
 
   const user = buildUserRecord(values, data, existing);
+  if (wouldRemoveLastOwnerAdmin(existing, user, data.users)) {
+    redirect('/admin/setup/users?user=' + userId + '&error=' + encodeURIComponent('At least one active owner/admin is required.'));
+  }
+
   if (values.resetPassword || values.password?.trim()) {
     user.passwordHash = hashPassword(values.password?.trim() || 'skoss-demo');
     user.passwordUpdatedAt = new Date().toISOString();
     user.mustChangePassword = !values.password?.trim();
   }
-  appendActivity(data, {
+
+  const activity = createActivityEntry({
     entityType: 'user',
     entityId: user.id,
     action: existing.active !== user.active ? 'status_changed' : 'updated',
     userId: data.session.currentUserId,
     summary: existing.active !== user.active
-      ? `User ${quoteLabel(user.displayName)} marked as ${user.active ? 'active' : 'inactive'}.`
-      : `User ${quoteLabel(user.displayName)} updated.`,
+      ? 'User ' + quoteLabel(user.displayName) + ' marked as ' + (user.active ? 'active' : 'inactive') + '.'
+      : 'User ' + quoteLabel(user.displayName) + ' updated.',
   });
 
   const wasSessionUser = data.session.currentUserId === userId;
   const nextSessionUserId = data.users.find((entry) => entry.active && entry.id !== userId)?.id;
 
-  if (!user.active && wasSessionUser) {
-    data.session.currentUserId = nextSessionUserId;
-  }
-
   await persistence.write(({ raw, instance, users }) => {
     users.upsert(user);
+    const nextUsers = users.list();
     if (!user.active && wasSessionUser) {
       instance.setSessionUser(nextSessionUserId, data.session.lastLoginAt);
     }
-    raw.activities = data.activities;
+    instance.updateInstanceState(withDerivedTeamOnboarding(instance.getInstanceState(), nextUsers));
+    raw.activities = [activity, ...raw.activities];
   });
   revalidateAllWorkspaces();
-  redirect('/admin/setup?saved=user');
+  redirect('/admin/setup/users?saved=user');
 }
 
-
 export async function createProductAction(formData: FormData) {
   const context = await readPersistence();
   const data = context.raw;
@@ -273,7 +316,7 @@ export async function createProductAction(formData: FormData) {
     raw.activities = data.activities;
   });
   revalidateAllWorkspaces();
-  redirect(`${redirectTo}?saved=product&productSetup=${product.id}#products`);
+  redirect(`${redirectTo}?saved=product&productSetup=${product.id}`);
 }
 
 export async function updateProductAction(productId: string, formData: FormData) {
@@ -282,14 +325,14 @@ export async function updateProductAction(productId: string, formData: FormData)
   const existing = context.catalog.getProductById(productId);
 
   if (!existing) {
-    redirect('/admin/setup?error=missing-product#products');
+    redirect('/admin/setup/products?error=missing-product');
   }
 
   const values = normalizeProductForm(formData);
   const error = validateProductForm(values, data, productId);
 
   if (error) {
-    redirect(`/admin/setup?productSetup=${productId}&error=${encodeURIComponent(error)}#products`);
+    redirect(`/admin/setup/products?productSetup=${productId}&error=${encodeURIComponent(error)}`);
   }
 
   const actorUserId = await getActorUserId(data);
@@ -308,7 +351,7 @@ export async function updateProductAction(productId: string, formData: FormData)
     raw.activities = data.activities;
   });
   revalidateAllWorkspaces();
-  redirect(`/admin/setup?saved=product&productSetup=${product.id}#products`);
+  redirect(`/admin/setup/products?saved=product&productSetup=${product.id}`);
 }
 
 export async function createSupplierAction(formData: FormData) {
diff --git a/lib/server/actions/entry-bootstrap.ts b/lib/server/actions/entry-bootstrap.ts
index 63a7b2a..2a94c2a 100644
--- a/lib/server/actions/entry-bootstrap.ts
+++ b/lib/server/actions/entry-bootstrap.ts
@@ -4,7 +4,7 @@ import { revalidatePath } from 'next/cache';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { getCurrentUserContext, loggedOutSessionValue, sessionUserCookieName } from '@/lib/server/auth';
-import { getPersistenceGateway, readSeedAppData, readAppData, readPersistence, reseedRuntimeAppData, mutateAppData } from '@/lib/server/persistence';
+import { getPersistenceGateway, readSeedAppData, readAppData, readPersistence, mutateAppData } from '@/lib/server/persistence';
 import { hashPassword, verifyPassword } from '@/lib/server/passwords';
 import { isSupportedLocale, isSupportedPreset, localeCookieName, supportedLocales, presetCookieName, supportedPresets } from '@/lib/i18n/config';
 import { themeCookieName } from '@/lib/theme';
@@ -12,6 +12,7 @@ import { getDefaultWorkspaceForRole, isPrimaryWorkspaceSurface } from '@/lib/wor
 import { getRuntimeMode, isNonProductionMode } from '@/lib/server/runtime-mode';
 import type { AppData, EnvironmentType, OperationalOnboardingSections } from '@/lib/domain/types';
 import { detectInstanceGatewayState, shouldRouteToEntryGateway } from '@/lib/server/instance-entry';
+import { buildUninitializedLocalInstance } from '@/lib/server/instance-state';
 
 const supportedThemes = ['light', 'dark', 'system'] as const;
 const supportedOperatingModes = ['pickup', 'delivery', 'mixed'] as const;
@@ -110,12 +111,15 @@ function clearDemoOperationalRecordsForRealInstance(data: AppData) {
 
 export async function resetLocalRuntimeDataAction() {
   if (!isNonProductionMode()) {
-    redirect('/entry?error=' + encodeURIComponent('Local runtime reset is disabled in production mode.'));
+    redirect('/entry?error=' + encodeURIComponent('Local instance reset is disabled in production mode.'));
   }
 
-  await reseedRuntimeAppData();
+  const seedData = await readSeedAppData();
+  await mutateAppData(buildUninitializedLocalInstance(seedData));
+  const cookieStore = await cookies();
+  cookieStore.set(sessionUserCookieName, loggedOutSessionValue, { path: '/', maxAge: sessionMaxAgeSeconds, sameSite: 'lax' });
   revalidateAllWorkspaces();
-  redirect('/entry?saved=runtime-reset');
+  redirect('/entry?saved=instance-reset');
 }
 
 export async function launchDemoModeAction() {
@@ -124,21 +128,25 @@ export async function launchDemoModeAction() {
   }
 
   const data = await readSeedAppData();
-  await persistence.write(({ instance }) => {
-    instance.updateInstanceState({
+  await mutateAppData({
+    ...data,
+    instance: {
       ...data.instance,
       demoModeActive: true,
-      initialized: false,
-      onboardingStatus: 'not_started',
+      initialized: true,
+      onboardingStatus: 'completed',
       environmentType: 'demo',
-    });
-    instance.updatePreferences({
+    },
+    preferences: {
       ...data.preferences,
-      onboardingCompleted: false,
-    });
+      onboardingCompleted: true,
+    },
+    session: { currentUserId: undefined, lastLoginAt: undefined },
   });
+  const cookieStore = await cookies();
+  cookieStore.set(sessionUserCookieName, loggedOutSessionValue, { path: '/', maxAge: sessionMaxAgeSeconds, sameSite: 'lax' });
   revalidateAllWorkspaces();
-  redirect('/?demo=1');
+  redirect('/login?redirectTo=/?demo=1');
 }
 
 export async function recoverLocalAdminAccessAction() {
@@ -179,33 +187,17 @@ export async function recoverLocalAdminAccessAction() {
 
 export async function resetLocalUsersAndCredentialsAction() {
   if (!isNonProductionMode()) {
-    redirect('/entry?error=' + encodeURIComponent('Local user reset is disabled in production mode.'));
+    redirect('/entry?error=' + encodeURIComponent('Local session clear is disabled in production mode.'));
   }
 
-  const seedData = await readSeedAppData();
-  const data = await readAppData();
-  await persistence.write(({ users, instance }) => {
-    users.replaceAll(seedData.users);
-    instance.updateSessionState({
-      ...data.session,
-      currentUserId: undefined,
-      lastLoginAt: undefined,
-    });
-    instance.updateInstanceState({
-      ...data.instance,
-      initialized: true,
-      onboardingStatus: 'in_progress',
-    });
-    instance.updatePreferences({
-      ...data.preferences,
-      onboardingCompleted: false,
-    });
+  await persistence.write(({ instance }) => {
+    instance.setSessionUser(undefined);
   });
 
   const cookieStore = await cookies();
   cookieStore.set(sessionUserCookieName, loggedOutSessionValue, { path: '/', maxAge: sessionMaxAgeSeconds, sameSite: 'lax' });
   revalidateAllWorkspaces();
-  redirect('/entry?saved=users-reset');
+  redirect('/entry?saved=session-cleared');
 }
 
 export async function restoreInstanceFromBackupAction(formData: FormData) {
@@ -471,7 +463,7 @@ export async function saveBootstrapStepAction(formData: FormData) {
       raw.activities = data.activities;
     });
     revalidateAllWorkspaces();
-    redirect('/login?redirectTo=/admin/setup?section=onboarding');
+    redirect('/login?redirectTo=/admin/setup/onboarding');
   }
 
   await persistence.write(({ instance, users }) => {
@@ -585,7 +577,7 @@ export async function loginAction(formData: FormData) {
 
   if (gatewayState.onboardingIncomplete && (user.roles?.includes('owner_admin') || user.roles?.includes('shift_lead') || user.role === 'owner_admin' || user.role === 'shift_lead')) {
     revalidateAllWorkspaces();
-    redirect('/admin/setup?section=onboarding');
+    redirect('/admin/setup/onboarding');
   }
 
   revalidateAllWorkspaces();
diff --git a/lib/server/auth.ts b/lib/server/auth.ts
index cae8c5a..e1c1083 100644
--- a/lib/server/auth.ts
+++ b/lib/server/auth.ts
@@ -7,10 +7,6 @@ export const sessionUserCookieName = 'skoss-user';
 export const loggedOutSessionValue = '__logged_out__';
 const sessionMaxAgeMs = 1000 * 60 * 60 * 24 * 14;
 
-function getFallbackUser(users: User[]) {
-  return users.find((user) => user.active) ?? users[0] ?? null;
-}
-
 export function resolveUserHomeWorkspace(user: User | null | undefined): WorkspaceSurface {
   if (!user) {
     return 'home';
@@ -48,7 +44,7 @@ export async function getCurrentUserContext(sourceData?: AppData) {
   const currentUser = requestedUserId === loggedOutSessionValue
     || sessionExpired
     ? null
-    : persisted.users.find((user) => user.id === sessionUserId && user.active) ?? getFallbackUser(persisted.users);
+    : persisted.users.find((user) => user.id === sessionUserId && user.active) ?? null;
   const visibleWorkspaces: WorkspaceSurface[] = currentUser ? getVisibleWorkspacesForRole(currentUser.role) : ['home'];
   const homeWorkspace = resolveUserHomeWorkspace(currentUser);
 
diff --git a/lib/server/instance-state.ts b/lib/server/instance-state.ts
new file mode 100644
index 0000000..4ac031c
--- /dev/null
+++ b/lib/server/instance-state.ts
@@ -0,0 +1,111 @@
+import type { AppData, OperationalOnboardingSections, User } from '@/lib/domain/types';
+import { defaultLocale, defaultPreset } from '@/lib/i18n/config';
+
+export function buildDefaultOperationalOnboarding(): OperationalOnboardingSections {
+  return {
+    business: { status: 'not_started' },
+    team: { status: 'not_started' },
+    customers: { status: 'not_started' },
+    products: { status: 'not_started' },
+    recipes: { status: 'not_started' },
+    delivery: { status: 'not_started' },
+    shifts: { status: 'not_started' },
+    initialOrders: { status: 'not_started' },
+  };
+}
+
+export function deriveTeamOnboardingStatus(users: User[], existing?: OperationalOnboardingSections['team']) {
+  const activeUsers = users.filter((user) => user.active);
+  if (activeUsers.length > 1) {
+    return 'ready' as const;
+  }
+
+  if (users.length > 1 || existing?.status === 'in_progress') {
+    return 'in_progress' as const;
+  }
+
+  if (existing?.status === 'skipped') {
+    return 'skipped' as const;
+  }
+
+  return 'not_started' as const;
+}
+
+export function withDerivedTeamOnboarding(instance: AppData['instance'], users: User[], now = new Date().toISOString()): AppData['instance'] {
+  const operationalOnboarding = {
+    ...buildDefaultOperationalOnboarding(),
+    ...(instance.operationalOnboarding ?? {}),
+  };
+  const nextStatus = deriveTeamOnboardingStatus(users, operationalOnboarding.team);
+
+  return {
+    ...instance,
+    onboardingProgress: {
+      ...instance.onboardingProgress,
+      users: users.some((user) => user.active),
+      roles: users.some((user) => user.active && user.roles.length > 0),
+    },
+    operationalOnboarding: {
+      ...operationalOnboarding,
+      team: {
+        status: nextStatus,
+        updatedAt: nextStatus !== operationalOnboarding.team.status ? now : operationalOnboarding.team.updatedAt,
+      },
+    },
+  };
+}
+
+export function buildUninitializedLocalInstance(seed: AppData): AppData {
+  return {
+    ...seed,
+    workspace: {
+      ...seed.workspace,
+      id: seed.workspace.id || 'ws-local',
+      name: 'SKOSS',
+      slug: 'skoss-local',
+    },
+    preferences: {
+      locale: seed.preferences?.locale ?? defaultLocale,
+      preset: seed.preferences?.preset ?? defaultPreset,
+      operatingMode: seed.preferences?.operatingMode ?? 'mixed',
+      theme: seed.preferences?.theme ?? 'system',
+      onboardingCompleted: false,
+    },
+    instance: {
+      ...seed.instance,
+      initialized: false,
+      onboardingStatus: 'not_started',
+      demoModeActive: false,
+      backupHintAvailable: false,
+      lastRestoreAt: undefined,
+      onboardingProgress: {
+        adminAccount: false,
+        workspaceBasics: false,
+        timezone: false,
+        users: false,
+        roles: false,
+        shifts: false,
+        optionalImports: false,
+      },
+      operationalOnboarding: buildDefaultOperationalOnboarding(),
+      operatorOnboardingByUserId: {},
+    },
+    session: {
+      currentUserId: undefined,
+      lastLoginAt: undefined,
+    },
+    users: [],
+    customers: [],
+    destinations: [],
+    products: [],
+    suppliers: [],
+    rawMaterials: [],
+    supplierPriceEntries: [],
+    recipes: [],
+    recurringTemplates: [],
+    orders: [],
+    wipEntries: [],
+    shiftLogs: [],
+    activities: [],
+  };
+}
diff --git a/lib/server/store.ts b/lib/server/store.ts
index e72b640..aec1f38 100644
--- a/lib/server/store.ts
+++ b/lib/server/store.ts
@@ -23,6 +23,7 @@ import { getDefaultWorkspaceForRole } from '@/lib/workspaces';
 import { fallbackDemoPassword, hashPassword } from '@/lib/server/passwords';
 import { getRuntimeMode } from '@/lib/server/runtime-mode';
 import { getModuleStateMap } from '@/lib/modules';
+import { buildDefaultOperationalOnboarding, deriveTeamOnboardingStatus } from '@/lib/server/instance-state';
 
 const seedStorePath = path.join(process.cwd(), 'data', 'seeds', 'demo-store.seed.json');
 const runtimeStorePath = path.join(process.cwd(), 'data', 'runtime', 'demo-store.json');
@@ -398,16 +399,21 @@ function hydrateStore(rawData: AppData): AppData {
   const users = (rawData.users ?? []).map((user) => normalizeUser(user as Partial<User> & { email?: string; role?: string }, rawData.workspace.id));
   const hasAdminUser = users.some((user) => user.active && (user.roles?.includes('owner_admin') || user.role === 'owner_admin'));
   const onboardingCompleted = rawData.preferences?.onboardingCompleted ?? false;
+  const existingOperationalOnboarding: Partial<OperationalOnboardingSections> = rawData.instance?.operationalOnboarding ?? {};
   const operationalOnboarding: OperationalOnboardingSections = {
+    ...buildDefaultOperationalOnboarding(),
     business: { status: rawData.instance?.onboardingProgress?.workspaceBasics ? 'ready' : 'not_started' },
-    team: { status: users.filter((user) => user.active).length > 1 ? 'ready' : 'not_started' },
     customers: { status: (rawData.customers ?? []).length > 0 ? 'ready' : 'not_started' },
     products: { status: (rawData.products ?? []).length > 0 ? 'ready' : 'not_started' },
     recipes: { status: (rawData.recipes ?? []).length > 0 ? 'ready' : 'not_started' },
     delivery: { status: (rawData.destinations ?? []).length > 0 ? 'ready' : 'not_started' },
     shifts: { status: rawData.instance?.onboardingProgress?.shifts || (rawData.shiftLogs ?? []).length > 0 ? 'ready' : 'not_started' },
     initialOrders: { status: (rawData.orders ?? []).length > 0 ? 'ready' : 'not_started' },
-    ...(rawData.instance?.operationalOnboarding ?? {}),
+    ...existingOperationalOnboarding,
+    team: {
+      ...existingOperationalOnboarding.team,
+      status: deriveTeamOnboardingStatus(users, existingOperationalOnboarding.team),
+    },
   };
   const instance: InstanceState = {
     initialized: rawData.instance?.initialized ?? users.length > 0,
diff --git a/tests/state-integrity.test.ts b/tests/state-integrity.test.ts
new file mode 100644
index 0000000..b55f842
--- /dev/null
+++ b/tests/state-integrity.test.ts
@@ -0,0 +1,99 @@
+import assert from 'node:assert/strict';
+import type { AppData, User } from '@/lib/domain/types';
+import { buildUserRecord, normalizeUserForm } from '@/lib/server/demo-data';
+import { hashPassword, verifyPassword } from '@/lib/server/passwords';
+import {
+  buildDefaultOperationalOnboarding,
+  buildUninitializedLocalInstance,
+  deriveTeamOnboardingStatus,
+  withDerivedTeamOnboarding,
+} from '@/lib/server/instance-state';
+
+const now = '2026-06-17T00:00:00.000Z';
+
+function user(overrides: Partial<User> = {}): User {
+  return {
+    id: overrides.id ?? 'user-owner',
+    displayName: overrides.displayName ?? 'Owner',
+    loginIdentifier: overrides.loginIdentifier ?? 'owner',
+    username: overrides.username ?? overrides.loginIdentifier ?? 'owner',
+    passwordHash: overrides.passwordHash ?? hashPassword('owner-pass'),
+    passwordUpdatedAt: overrides.passwordUpdatedAt ?? now,
+    mustChangePassword: overrides.mustChangePassword ?? false,
+    role: overrides.role ?? 'owner_admin',
+    roles: overrides.roles ?? ['owner_admin'],
+    workspaceId: overrides.workspaceId ?? 'ws-test',
+    defaultWorkspace: overrides.defaultWorkspace ?? 'admin',
+    active: overrides.active ?? true,
+    preferences: overrides.preferences ?? { defaultWorkspace: overrides.defaultWorkspace ?? 'admin' },
+    createdAt: overrides.createdAt ?? now,
+    updatedAt: overrides.updatedAt ?? now,
+    email: overrides.email,
+    phone: overrides.phone,
+  };
+}
+
+function appData(users: User[]): AppData {
+  return {
+    workspace: { id: 'ws-test', name: 'Test Kitchen', slug: 'test-kitchen', timezone: 'UTC', defaultProductionCutoffHour: 4 },
+    preferences: { locale: 'en', preset: 'bakery', operatingMode: 'mixed', theme: 'system', onboardingCompleted: true },
+    instance: {
+      initialized: true,
+      onboardingStatus: 'completed',
+      demoModeActive: false,
+      environmentType: 'dev',
+      backupHintAvailable: false,
+      onboardingProgress: { adminAccount: true, workspaceBasics: true, timezone: true, users: true, roles: true, shifts: false, optionalImports: false },
+      operationalOnboarding: buildDefaultOperationalOnboarding(),
+      operatorOnboardingByUserId: {},
+    },
+    session: { currentUserId: users[0]?.id, lastLoginAt: now },
+    users,
+    customers: [],
+    destinations: [],
+    products: [],
+    suppliers: [],
+    rawMaterials: [],
+    supplierPriceEntries: [],
+    recipes: [],
+    recurringTemplates: [],
+    orders: [],
+    wipEntries: [],
+    shiftLogs: [],
+    activities: [],
+  };
+}
+
+const owner = user();
+const editWithoutPassword = new FormData();
+editWithoutPassword.set('displayName', 'Owner Edited');
+editWithoutPassword.set('loginIdentifier', 'owner');
+editWithoutPassword.set('defaultWorkspace', 'admin');
+editWithoutPassword.set('active', 'on');
+editWithoutPassword.append('roles', 'owner_admin');
+const editedValues = normalizeUserForm(editWithoutPassword);
+const editedOwner = buildUserRecord(editedValues, appData([owner]), owner);
+assert.equal(editedOwner.passwordHash, owner.passwordHash);
+assert.equal(verifyPassword('owner-pass', editedOwner.passwordHash), true);
+assert.equal(editedOwner.roles.includes('owner_admin'), true);
+
+const oneOwnerState = withDerivedTeamOnboarding(appData([owner]).instance, [owner], now);
+assert.equal(oneOwnerState.initialized, true);
+assert.equal(oneOwnerState.operationalOnboarding?.team.status, 'not_started');
+assert.equal(oneOwnerState.onboardingProgress.users, true);
+
+const secondUser = user({ id: 'user-sales', displayName: 'Sales', loginIdentifier: 'sales', role: 'sales', roles: ['sales'], defaultWorkspace: 'orders' });
+const teamState = withDerivedTeamOnboarding(appData([owner, secondUser]).instance, [owner, secondUser], now);
+assert.equal(deriveTeamOnboardingStatus([owner, secondUser]), 'ready');
+assert.equal(teamState.initialized, true);
+assert.equal(teamState.operationalOnboarding?.team.status, 'ready');
+
+const seed = appData([owner, secondUser]);
+seed.instance.demoModeActive = true;
+seed.customers = [{ id: 'customer-demo', displayName: 'Demo Customer', active: true, createdAt: now, updatedAt: now }];
+const reset = buildUninitializedLocalInstance(seed);
+assert.equal(reset.instance.initialized, false);
+assert.equal(reset.instance.demoModeActive, false);
+assert.equal(reset.users.length, 0);
+assert.equal(reset.customers.length, 0);
+assert.equal(reset.session.currentUserId, undefined);